Merge pull request #1195 from cozy/inverted-tabs

feat: Inverted style for tabs
cozy · Oct 14, 2019 · bc58f70 · bc58f70
2 parents ed7c8a2 + 3446e9d
commit bc58f70
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 25 deletions.
diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
@@ -154,10 +154,6 @@ module.exports = {
   styleguideDir: path.resolve(__dirname, '../build/react'),
   require: [
     path.join(__dirname, './style.styl'),
-    'style-loader!css-loader!' +
-      path.join(__dirname, '../transpiled/react/stylesheet.css'),
-    'style-loader!css-loader!' +
-      path.join(__dirname, '../dist/cozy-ui.utils.min.css'),
     path.join(__dirname, './styleguide.setup')
   ],
   exampleMode: 'collapse',

diff --git a/docs/styleguide.setup.js b/docs/styleguide.setup.js
@@ -1 +1,4 @@
+import '!!style-loader!css-loader!../transpiled/react/stylesheet.css'
+import '!!style-loader!css-loader!../dist/cozy-ui.utils.min.css'
+
 window.SHOW_DEPRECATION_WARNINGS = true
diff --git a/react/Tabs/Readme.md b/react/Tabs/Readme.md
@@ -2,22 +2,48 @@
 ```
 const { Tabs, TabList, Tab, TabPanels, TabPanel } = require('.');
 
-<Tabs initialActiveTab='general'>
-  <TabList>
-    <Tab name='general'>General</Tab>
-    <Tab name='details'>Details</Tab>
-  </TabList>
-  <TabPanels>
-    <TabPanel name='general'>
-      Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
-    </TabPanel>
-    <TabPanel name='details'>
-      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, soluta. Voluptas ipsa ullam a totam veniam itaque, iusto ducimus, sequi eveniet debitis recusandae incidunt, fugiat architecto et distinctio, optio! Deserunt.</div>
+const general = `
+  Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
+`
+const description = `
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, soluta. Voluptas ipsa ullam a totam veniam itaque, iusto ducimus, sequi eveniet debitis recusandae incidunt, fugiat architecto et distinctio, optio! Deserunt.</div>
       <div>Velit neque, repellendus explicabo voluptates veritatis itaque saepe nemo et! Impedit veniam, voluptates. Aliquid laborum voluptate, non commodi magnam, soluta perferendis sapiente nemo harum, eligendi saepe beatae cum quam fugiat.</div>
       <div>Quam tempora, similique pariatur, vitae atque ducimus. Quidem tempore, nulla est. Dolor quisquam quia placeat molestiae, nulla beatae voluptatem labore sit mollitia repudiandae animi iure maxime maiores quidem delectus ad.</div>
       <div>Iste reiciendis reprehenderit et similique, rem. Architecto quasi debitis hic, voluptatum in possimus soluta sit, praesentium nisi provident pariatur culpa mollitia repellendus earum reiciendis animi. Sunt voluptates, assumenda esse perspiciatis.</div>
-      <div>Alias quae sequi aliquid sed, nobis veniam magnam rerum amet velit dignissimos dicta a dolorem! Dolorem soluta perferendis error, voluptate dolorum quas, fuga ad repellendus tenetur amet sit assumenda dignissimos.</div>
-    </TabPanel>
-  </TabPanels>
-</Tabs>
+      <div>Alias quae sequi aliquid sed, nobis veniam magnam rerum amet velit dignissimos dicta a dolorem! Dolorem soluta perferendis error, voluptate dolorum quas, fuga ad repellendus tenetur amet sit assumenda dignissimos.
+`;
+
+<>
+  <Tabs initialActiveTab='general'>
+    <TabList>
+      <Tab name='general'>General</Tab>
+      <Tab name='details'>Details</Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel name='general'>
+        { general }
+      </TabPanel>
+      <TabPanel name='details'>
+        { description }
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+  <div className='u-m-2'></div>
+
+  <Tabs initialActiveTab='general'>
+    <TabList inverted>
+      <Tab name='general'>General</Tab>
+      <Tab name='details'>Details</Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel name='general'>
+        { general }
+      </TabPanel>
+      <TabPanel name='details'>
+        { description }
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
+
+</>
 ```
diff --git a/react/Tabs/index.jsx b/react/Tabs/index.jsx
@@ -35,9 +35,19 @@ export class Tab extends Component {
   }
 }
 
-export const TabList = function({ children, activeTab, changeTab, className }) {
+export const TabList = function({
+  children,
+  activeTab,
+  changeTab,
+  className,
+  inverted
+}) {
   return (
-    <div className={cx(styles['coz-tab-list'], className)}>
+    <div
+      className={cx(styles['coz-tab-list'], className, {
+        [styles['coz-tab-list--inverted']]: inverted
+      })}
+    >
       {React.Children.map(children, child =>
         React.cloneElement(child, {
           active: child.props.name === activeTab,

diff --git a/react/Tabs/styles.styl b/react/Tabs/styles.styl
@@ -1,4 +1,10 @@
 @require '../../stylus/components/tabs'
 
+body
+    --tabsIndicatorColor var(--primaryColor)
+    --tabsActiveTextColor var(--primaryColor)
+    --tabsInactiveTextColor var(--coolGrey)
+    --tabsBackground transparent
+
 .coz-tabs
     @extend $tabs-base
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -3875,6 +3875,34 @@ exports[`Spinner should render examples: Spinner 5`] = `
 </div>"
 `;
 
+exports[`Tabs should render examples: Tabs 1`] = `
+"<div>
+  <div class=\\"styles__coz-tabs___24QL5\\">
+    <div class=\\"styles__coz-tab-list___3qac8\\">
+      <div class=\\"styles__coz-tab___2mOye styles__coz-tab--active___1wmwM\\">General</div>
+      <div class=\\"styles__coz-tab___2mOye\\">Details</div>
+    </div>
+    <div class=\\"\\">
+      <div class=\\"styles__coz-tab-panel___35538\\">
+        Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
+      </div>
+    </div>
+  </div>
+  <div class=\\"u-m-2\\"></div>
+  <div class=\\"styles__coz-tabs___24QL5\\">
+    <div class=\\"styles__coz-tab-list___3qac8 styles__coz-tab-list--inverted___3VjXc\\">
+      <div class=\\"styles__coz-tab___2mOye styles__coz-tab--active___1wmwM\\">General</div>
+      <div class=\\"styles__coz-tab___2mOye\\">Details</div>
+    </div>
+    <div class=\\"\\">
+      <div class=\\"styles__coz-tab-panel___35538\\">
+        Grace Murray Hopper, née le 9 décembre 1906 à New York et morte le 1er janvier 1992 dans le comté d'Arlington, est une informaticienne américaine et Rear admiral (lower half) de la marine américaine. Elle est la conceptrice du premier compilateur en 1951 (A-0 System) et du langage COBOL en 1959.
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Text should render examples: Text 1`] = `
 "<div>
   <div class=\\"u-text\\">This a standard text</div>

diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
@@ -46,6 +46,7 @@ testComponent('Radio')
 testComponent('SelectBox')
 testComponent('Sidebar')
 testComponent('Spinner')
+testComponent('Tabs')
 testComponent('Text')
 testComponent('Textarea')
 testComponent('Toggle')
diff --git a/stylus/components/tabs.styl b/stylus/components/tabs.styl
@@ -1,23 +1,41 @@
 @require '../tools/mixins'
+@require '../settings/breakpoints'
 
 $tabs-base
     .coz-tab-list
         border-bottom  rem(1) solid var(--silver)
+        background var(--tabsBackgroundColor)
+        overflow-x scroll
+
+    .coz-tab-list--inverted
+        --tabsActiveTextColor var(--primaryContrastTextColor)
+        --tabsInactiveTextColor var(--primaryContrastTextColor)
+        --tabsIndicatorColor var(--primaryContrastTextColor)
+        --tabsBackgroundColor var(--primaryColor)
 
     .coz-tab
         display        inline-block
         padding        rem(10 16)
         text-transform uppercase
-        font-size      rem(13)
+        font-size      rem(12)
+        line-height    rem(12)
         cursor         pointer
-        color          var(--coolGrey)
+        color          var(--tabsInactiveTextColor)
+        font-weight    bold
+        opacity        .64
 
         &:hover
             text-decoration none
 
+        +small-screen()
+            &
+                // Important thing is to have the tab's height 48px
+                padding rem(17 24)
+
     .coz-tab--active
-        border-bottom rem(2) solid var(--dodgerBlue)
-        color         var(--dodgerBlue)
+        border-bottom rem(2) solid var(--tabsIndicatorColor)
+        color         var(--tabsActiveTextColor)
+        opacity 1
 
     .coz-tab-panel
         padding-top rem(20)