Merge pull request #212 from jrowlingson/tailwind-prefix

Use ad- tailwind prefix

Author: samselikoff

addon/components/api/x-import-path/component.js

@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
 export default Component.extend({
   tagName: '',
   layout: hbs`
-    <div class="import-path mb-6 font-mono" data-test-import-path>
+    <div class="import-path ad-mb-6 ad-font-mono" data-test-import-path>
       <span class="hljs-keyword">import</span>
 
       {{#if (eq item.exportType "default")}}

addon/components/api/x-meta-panel/component.js

@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
 export default Component.extend({
   tagName: '',
   layout: hbs`
-    <div class="px-6 pt-3 mt-4 border border-grey-light rounded text-sm">
+    <div class="ad-px-6 ad-pt-3 ad-mt-4 ad-border ad-border-grey-light ad-rounded ad-text-sm">
       {{yield (hash
         header=(component 'api/x-meta-panel/header')
       )}}

addon/components/api/x-meta-panel/header/component.js

@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
 export default Component.extend({
   tagName: '',
   layout: hbs`
-    <h4 class="mb-2 text-grey font-bold tracking-wide uppercase text-xs">
+    <h4 class="ad-mb-2 ad-text-grey ad-font-bold ad-tracking-wide ad-uppercase ad-text-xs">
       {{yield}}
     </h4>
   `,

addon/components/api/x-section/template.hbs

@@ -3,10 +3,10 @@
     id={{item.name}}
     data-text="{{item.name}}"
     data-test-item-header
-    class="docs-h3 font-mono font-normal"
+    class="docs-h3 ad-font-mono ad-font-normal"
   >
     {{#if (eq item.exportType 'default')}}
-      <span class="border border-grey-light align-text-top leading-loose text-xs pl-2 mr-2 py-1 rounded">
+      <span class="ad-border ad-border-grey-light ad-align-text-top ad-leading-loose ad-text-xs ad-pl-2 ad-mr-2 ad-py-1 ad-rounded">
         Default
       </span>
     {{/if}}
@@ -45,13 +45,13 @@
           Params
         {{/panel.header}}
 
-        <table class="mb-6" data-test-item-params>
+        <table class="ad-mb-6" data-test-item-params>
           <tbody>
             {{#each item.params as |param|}}
               <tr data-test-item-param>
-                <td><span class="font-mono font-bold border-r border-grey-light pr-2">{{param.name}}</span></td>
-                <td><span class="font-mono border-r border-grey-light px-2">{{param.type}}</span></td>
-                <td class="pl-2">{{param.description}}</td>
+                <td><span class="ad-font-mono ad-font-bold ad-border-r ad-border-grey-light ad-pr-2">{{param.name}}</span></td>
+                <td><span class="ad-font-mono ad-border-r ad-border-grey-light ad-px-2">{{param.type}}</span></td>
+                <td class="ad-pl-2">{{param.description}}</td>
               </tr>
             {{/each}}
           </tbody>

addon/components/api/x-toggles/template.hbs

@@ -1,12 +1,12 @@
-<ul class="list-reset mb-6">
+<ul class="ad-list-reset ad-mb-6">
   {{#each-in toggles as |key toggle|}}
     {{#if (not-eq toggle undefined)}}
-      <li class="inline ml-4">
+      <li class="ad-inline ad-ml-4">
         <label data-test-toggle>
           <input type="checkbox"
             checked={{toggle}}
             onclick={{action onToggle key}}
-            class='mr-1'
+            class='ad-mr-1'
           >
 
           {{capitalize key}}

addon/components/docs-demo/template.hbs

@@ -1,18 +1,18 @@
-<div class="rounded border my-8">
+<div class="ad-rounded ad-border ad-my-8">
 
   {{yield (hash
     example=(component 'docs-demo/x-example')
     snippet=(component 'docs-demo/x-snippet' did-init=(action 'registerSnippet') activeSnippet=activeSnippet)
   )}}
 
   {{#if snippets}}
-    <nav class="docs-demo__snippets-nav py-2 px-4 font-medium bg-grey-lighter tracking-tight">
+    <nav class="docs-demo__snippets-nav ad-py-2 ad-px-4 ad-font-medium ad-bg-grey-lighter ad-tracking-tight">
       {{#each snippets as |snippet|}}
         <button {{action 'selectSnippet' snippet}}
           class='
-            mr-4 text-sm no-underline outline-none
-            hover:text-grey-darkest
-            {{if snippet.isActive 'text-grey-darkest' 'text-grey-dark'}}
+            ad-mr-4 ad-text-sm ad-no-underline outline-none
+            hover:ad-text-grey-darkest
+            {{if snippet.isActive 'ad-text-grey-darkest' 'ad-text-grey-dark'}}
           '
         >
           {{snippet.label}}

addon/components/docs-demo/x-example/component.js

@@ -4,7 +4,7 @@ import layout from './template';
 export default Component.extend({
   layout,
 
-  classNames: 'p-4',
+  classNames: 'ad-p-4',
 
   init() {
     this._super(...arguments);

addon/components/docs-header/link/template.hbs

@@ -2,9 +2,9 @@
 
   <a href={{href}}
     class='
-      px-4 py-3 transition uppercase text-xs font-semibold
-      text-grey-darkest no-underline opacity-50 hover:opacity-100
-      {{if push 'ml-auto'}}
+      ad-px-4 ad-py-3 ad-transition ad-uppercase ad-text-xs ad-font-semibold
+      ad-text-grey-darkest ad-no-underline ad-opacity-50 hover:ad-opacity-100
+      {{if push 'ad-ml-auto'}}
     '
     data-test-id={{data-test-id}}>
     {{yield}}
@@ -15,8 +15,8 @@
   <a {{action on-click}}
     href='#'
     class='
-      px-4 py-3 transition uppercase text-xs font-semibold
-      text-grey-darkest no-underline opacity-50 hover:opacity-100
+      ad-px-4 ad-py-3 ad-transition ad-uppercase ad-text-xs ad-font-semibold
+      ad-text-grey-darkest ad-no-underline ad-opacity-50 hover:ad-opacity-100
       {{if push 'ml-auto'}}
     '
     data-test-id={{data-test-id}}>
@@ -27,9 +27,9 @@
 
   {{#link-to route
     class=(concat
-      'px-4 py-3 transition uppercase text-xs font-semibold
-      text-grey-darkest no-underline '
-      (if (and (not isActive) (not (eq route 'index'))) 'opacity-50 hover:opacity-100')
+      'ad-px-4 ad-py-3 ad-transition ad-uppercase ad-text-xs ad-font-semibold
+      ad-text-grey-darkest ad-no-underline '
+      (if (and (not isActive) (not (eq route 'index'))) 'ad-opacity-50 hover:ad-opacity-100')
     )
     data-test-id=data-test-id
   }}

addon/components/docs-header/search-box/component.js

@@ -5,7 +5,7 @@ import { on } from '@ember/object/evented';
 
 export default Component.extend(EKMixin, {
   layout,
-  classNames: 'ml-auto',
+  classNames: 'ad-ml-auto',
 
   query: null,
 

addon/components/docs-header/search-box/template.hbs

@@ -1,5 +1,5 @@
-<div class='relative text-grey-darkest' data-search-box>
-  {{svg-jar 'search' width=12 height=12 class='absolute pin-t h-full ml-1'}}
+<div class='ad-relative ad-text-grey-darkest' data-search-box>
+  {{svg-jar 'search' width=12 height=12 class='ad-absolute ad-pin-t ad-h-full ad-ml-1'}}
 
   {{!--
     This is a dumb input - so why not use the {{input}} helper? Because apparently
@@ -11,7 +11,7 @@
     value={{query}}
     type="text"
     placeholder='Search'
-    class='w-24 text-xs p-2 pl-6 rounded focus:bg-grey-lighter outline-none'
+    class='ad-w-24 ad-text-xs ad-p-2 ad-pl-6 ad-rounded focus:ad-bg-grey-lighter outline-none'
     data-search-box-input
     data-test-search-box-input>
 </div>

addon/components/docs-header/template.hbs

@@ -1,17 +1,17 @@
-<header class='border-b shadow-sm'>
-  <div class='flex items-center max-w-3xl mx-auto'>
+<header class='ad-border-b ad-shadow-sm'>
+  <div class='ad-flex ad-items-center ad-max-w-3xl ad-mx-auto'>
     {{#docs-header/link 'index'}}
-      <div class="text-center text-xs">
+      <div class="ad-text-center ad-text-xs">
         {{#if logo}}
-          <div class='h-4 pb-1'>
+          <div class='ad-h-4 ad-pb-1'>
             {{docs-logo logo=logo}}
           </div>
         {{/if}}
-        <span class='font-medium normal-case block -mt-2px'>{{name}}</span>
+        <span class='ad-font-medium ad-normal-case ad-block ad--mt-2px'>{{name}}</span>
       </div>
     {{/docs-header/link}}
 
-    <div class='flex-1 flex items-center overflow-auto overflow-momentum mask-image md:no-mask-image'>
+    <div class='ad-flex-1 ad-flex ad-items-center ad-overflow-auto ad-overflow-momentum ad-mask-image md:ad-no-mask-image'>
       {{#docs-header/link 'docs'}}
         Documentation
       {{/docs-header/link}}
@@ -23,7 +23,7 @@
       {{docs-header/search-box query=query on-input=(action (mut query))}}
 
       {{#docs-header/link on-click=(action (toggle 'isShowingVersionSelector' this)) data-test-id='current-version'}}
-        <span data-version-selector class='flex items-center'>
+        <span data-version-selector class='ad-flex ad-items-center'>
 
           {{#if (or (eq currentVersion.key latestVersionName))}}
             {{#if currentVersion.tag}}
@@ -41,14 +41,14 @@
 
       {{#if projectHref}}
         {{#docs-header/link href=projectHref}}
-          <span class='flex'>
+          <span class='ad-flex'>
             {{svg-jar 'github' width=24 height=24}}
           </span>
         {{/docs-header/link}}
       {{/if}}
 
       {{!-- Something to take up space on mobile, so the scrolling nav isn't hugging the edge --}}
-      <div class='h-px px-3 md:hidden'></div>
+      <div class='ad-h-px ad-px-3 md:ad-hidden'></div>
     </div>
   </div>
 </header>

addon/components/docs-header/version-selector/template.hbs

@@ -4,27 +4,28 @@
   clickOutsideToClose=true
   onClose=(action on-close)
   targetAttachment='bottom right'}}
-  <ul class="list-reset mt-2 bg-white shadow-md text-sm rounded z-10">
+  <ul class="ad-list-reset ad-mt-2 ad-bg-white ad-shadow-md ad-text-sm ad-rounded ad-z-10">
     {{#each sortedVersions as |version|}}
       <li data-test-id='version'>
-        <a {{action 'changeVersion' version}} href='#' class='text-black no-underline flex items-center px-4 py-3 hover:bg-grey-lighter'>
+        <a {{action 'changeVersion' version}} href='#' class='ad-text-black ad-no-underline ad-flex ad-items-center
+          ad-px-4 ad-py-3 hover:ad-bg-grey-lighter'>
           <span class='w-6 flex'>
             {{#if (eq version.key currentVersion.key)}}
               {{svg-jar 'check' height=16 width=16}}
             {{/if}}
           </span>
-          <span class='font-medium'>
+          <span class='ad-font-medium'>
             {{version.name}}
           </span>
 
-          <span class="ml-auto pl-8 flex items-center opacity-50">
+          <span class="ad-ml-auto ad-pl-8 ad-flex ad-items-center ad-opacity-50">
             {{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
               {{svg-jar (if version.tag 'git-tag' 'git-sha') height=16 width=16}}
             {{else}}
               {{svg-jar 'git-sha' height=16 width=16}}
             {{/if}}
 
-            <span class='text-xs font-mono pl-1'>
+            <span class='ad-text-xs ad-font-mono ad-pl-1'>
               {{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
                 {{#if version.tag}}
                   {{version.tag}}

addon/components/docs-hero/template.hbs

@@ -1,21 +1,21 @@
 <div class="
-  text-center py-8 md:py-16
-  {{if (eq style 'light') 'text-grey-darkest'}}
-  {{if (eq style 'dark') 'bg-black text-white'}}
+  ad-text-center ad-py-8 md:ad-py-16
+  {{if (eq style 'light') 'ad-text-grey-darkest'}}
+  {{if (eq style 'dark') 'ad-bg-black ad-text-white'}}
 ">
-  <h1 class='text-5xl md:text-jumbo leading-none'>
+  <h1 class='ad-text-5xl md:ad-text-jumbo ad-leading-none'>
     {{#if logo}}
-      <div class='md:-mb-1 -mt-4 md:-mt-8'>
-        <span class='inline-block h-6 opacity-50'>
+      <div class='md:ad--mb-1 ad--mt-4 md:ad--mt-8'>
+        <span class='ad-inline-block ad-h-6 ad-opacity-50'>
           {{docs-logo logo=logo}}
         </span>
       </div>
     {{/if}}
 
-    <span class='font-thin'>{{slimHeading}}</span>{{strongHeading}}
+    <span class='ad-font-thin'>{{slimHeading}}</span>{{strongHeading}}
   </h1>
 
-  <p class='opacity-75 text-xl mt-4 w-3/4 mx-auto leading-tight'>
+  <p class='ad-opacity-75 ad-text-xl ad-mt-4 ad-w-3/4 ad-mx-auto ad-leading-tight'>
     {{byline}}
   </p>
 

addon/components/docs-logo/template.hbs

@@ -1 +1 @@
-{{svg-jar logo class="h-full w-auto max-w-full fill-current"}}
+{{svg-jar logo class="ad-h-full ad-w-auto ad-max-w-full ad-fill-current"}}

addon/components/docs-snippet/template.hbs

@@ -1,18 +1,18 @@
 {{#if title}}
-  <div class='bg-grey-lighter text-sm text-grey-darkest
-    font-medium py-2 px-4'>
+  <div class='ad-bg-grey-lighter ad-text-sm ad-text-grey-darkest
+    ad-font-medium ad-py-2 ad-px-4'>
     {{title}}
   </div>
 {{/if}}
 
-<div class='text-sm p-4 bg-grey-lightest relative' data-test-id={{name}}>
+<div class='ad-text-sm ad-p-4 ad-bg-grey-lightest ad-relative' data-test-id={{name}}>
   {{#if showCopy}}
     {{#copy-button
       clipboardText=snippetText
       title='copy to clipboard'
       class='
-        absolute pin-t pin-r bg-transparent hover:bg-transparent
-        border-none opacity-50 hover:opacity-100 p-3
+        ad-absolute ad-pin-t ad-pin-r ad-bg-transparent hover:ad-bg-transparent
+        ad-border-none ad-opacity-50 hover:ad-opacity-100 ad-p-3
       '
     }}
       Copy

addon/components/docs-viewer/template.hbs

@@ -1,4 +1,4 @@
-<div class="docs-container lg:flex w-full mt-4">
+<div class="docs-container lg:ad-flex ad-w-full ad-mt-4">
   {{yield (hash
     nav=(component 'docs-viewer/x-nav')
     main=(component 'docs-viewer/x-main' onReindex=(action (mut pageIndex)))

addon/components/docs-viewer/x-main/component.js

@@ -23,7 +23,7 @@ export default Component.extend({
   docsRoutes: service(),
 
   tagName: 'main',
-  classNames: ['lg:w-4/5', 'xl:w-3/5', 'max-w-md', 'lg:max-w-none', 'mx-auto', 'lg:mx-0', 'mt-6', 'flex-no-shrink'],
+  classNames: ['lg:ad-w-4/5', 'xl:ad-w-3/5', 'ad-max-w-md', 'lg:ad-max-w-none', 'ad-mx-auto', 'lg:ad-mx-0', 'ad-mt-6', 'ad-flex-no-shrink'],
 
   didInsertElement() {
     this._super(...arguments);

addon/components/docs-viewer/x-main/template.hbs

@@ -1,39 +1,39 @@
-<div class="lg:px-4" data-page-index-target>
+<div class="lg:ad-px-4" data-page-index-target>
   {{yield}}
 
-  <div class="mt-16 mb-8">
+  <div class="ad-mt-16 ad-mb-8">
     <a href={{editCurrentPageUrl}}
-      class='transition text-grey-darkest opacity-50 text-sm
-      hover:opacity-75 no-underline border-b border-grey hover:border-grey-darkest'>
+      class='ad-transition ad-text-grey-darkest ad-opacity-50 ad-text-sm
+      hover:ad-opacity-75 ad-no-underline ad-border-b ad-border-grey hover:ad-border-grey-darkest'>
       Edit this page
     </a>
   </div>
 
 </div>
 
-<div class="lg:px-4">
-  <div class="mt-16 pb-16 border-t border-grey-lighter pt-4 flex">
-    <div class="w-1/2">
+<div class="lg:ad-px-4">
+  <div class="ad-mt-16 ad-pb-16 ad-border-t ad-border-grey-lighter ad-pt-4 ad-flex">
+    <div class="ad-w-1/2">
       {{#if docsRoutes.previous}}
-        <div class='text-sm text-grey-dark'>
+        <div class='ad-text-sm ad-text-grey-dark'>
           Previous
         </div>
         {{#link-to params=docsRoutes.previous.route
-          class='text-grey-darkest text-2xl font-light no-underline
-          border-b border-grey hover:border-grey-darkest transition'}}
+          class='ad-text-grey-darkest ad-text-2xl ad-font-light ad-no-underline
+          ad-border-b ad-border-grey hover:ad-border-grey-darkest ad-transition'}}
           {{docsRoutes.previous.label}}
         {{/link-to}}
       {{/if}}
     </div>
 
-    <div class="w-1/2 text-right" data-test-next-link>
+    <div class="ad-w-1/2 ad-text-right" data-test-next-link>
       {{#if docsRoutes.next}}
-        <div class='text-sm text-grey-dark'>
+        <div class='ad-text-sm ad-text-grey-dark'>
           Next
         </div>
         {{#link-to params=docsRoutes.next.route
-          class='text-grey-darkest text-2xl font-light no-underline
-          border-b border-grey hover:border-grey-darkest transition'}}
+          class='ad-text-grey-darkest ad-text-2xl ad-font-light ad-no-underline
+          ad-border-b ad-border-grey hover:ad-border-grey-darkest ad-transition'}}
           {{docsRoutes.next.label}}
         {{/link-to}}
       {{/if}}