Introduce new theme for <Tabs /> (#175)

* Introduce new theme for <Tabs /> * Ignore console.error eslint issue * Add missing space * Ignore console.error eslint issue * trim whitespaces * Rename theme to large * Rename theme to block * update docs * update docs * Update package version to 7.4.0 * build docs
kununu · Jun 9, 2017 · 7ce399e · 7ce399e
1 parent 4d9607f
commit 7ce399e
Show file tree

Hide file tree

Showing 12 changed files with 225 additions and 49 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = true
diff --git a/components/Tabs/index.jsx b/components/Tabs/index.jsx
@@ -9,11 +9,13 @@ export default class Tabs extends Component {
   static propTypes = {
     hash: PropTypes.string,
     items: PropTypes.arrayOf(PropTypes.element).isRequired,
-    pathname: PropTypes.string.isRequired
+    pathname: PropTypes.string.isRequired,
+    theme: PropTypes.oneOf(['default', 'block'])
   };
 
   static defaultProps = {
-    hash: ''
+    hash: '',
+    theme: 'default'
   };
 
   getNewProps (item) {
@@ -30,9 +32,11 @@ export default class Tabs extends Component {
   }
 
   render () {
-    const {items} = this.props;
+    const {items, theme} = this.props;
+    const styleName = `${theme}Tabs`;
+
     return (
-      <ul className={`${styles.tabs} ${clearfix}`}>
+      <ul className={`${styles[styleName]} ${clearfix}`}>
         {items.map((item, key) => (
           <li
             key={key} // eslint-disable-line react/no-array-index-key

diff --git a/components/Tabs/index.scss b/components/Tabs/index.scss
@@ -1,18 +1,34 @@
 @import '~kununu-theme/scss/base/variables';
 
 .tabs {
-  border-bottom: 1px solid $gray-base-10;
   width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
-  letter-spacing: -.02em;
 
   li {
     position: relative;
     display: block;
     float: left;
+  }
+
+  @media (max-width: $screen-sm-min) {
+    display: table;
+
+    li {
+      display: table-cell;
+      text-align: center;
+      float: none;
+    }
+  }
+}
+
+.defaultTabs {
+  @extend .tabs;
+  border-bottom: 1px solid $gray-base-10;
+  letter-spacing: -.02em;
 
+  li {
     @media (min-width: $screen-sm-min) {
       &:not(:first-child) {
         padding-left: 20px;
@@ -34,13 +50,8 @@
   }
 
   @media (max-width: $screen-sm-min) {
-    display: table;
-
     li {
       padding: 0 5px;
-      display: table-cell;
-      text-align: center;
-      float: none;
 
       a {
         padding: 10px 0;
@@ -60,6 +71,53 @@
   }
 }
 
+.blockTabs {
+  @extend .tabs;
+  letter-spacing: -.02em;
+
+  li {
+    border: 1px solid $gray-base-20;
+    border-bottom: 0;
+
+    &:not(:first-child) {
+      border-left: 0;
+    }
+
+    a {
+      border-bottom: 1px solid $gray-base-20;
+      background: $panel-bg;
+      color: $text-color;
+      font-size: $font-size-small;
+      font-weight: $font-weight-semibold;
+      letter-spacing: -.01em;
+      padding: 10px 0 12px;
+      position: relative;
+      display: block;
+      text-decoration: none;
+
+      &.active {
+        border-top: 4px solid $blue;
+        border-bottom: 0;
+      }
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    li {
+      a {
+        background: $gray-base-10;
+        font-size: $font-size-base;
+        padding: 17px 25px;
+
+        &.active {
+          border: 0;
+          background: $panel-bg;
+        }
+      }
+    }
+  }
+}
+
 .pointerDisabled {
   pointer-events: none;
 }
diff --git a/docs/build/docs.js b/docs/build/docs.js
diff --git a/docs/components/TabsDocs/index.jsx b/docs/components/TabsDocs/index.jsx
@@ -8,8 +8,10 @@ import {default as propsDefinition} from './props-definition.txt';
 import {default as propsDefault} from './props-default.txt';
 import styles from './index.scss';
 
+const theme = 'default';
+
 const TabsDocs = ({location: {pathname}}) => {
-  const example = `${'<'}Tabs${'\n  '}items={[${'\n    <'}Link to={{pathname: '/tabs'}}>First Tab</Link>,${'\n    <'}Link to={{pathname: '/tabs/2'}}>Second Tab</Link>,${'\n    <'}Link to={{pathname: '/tabs/3'}}>Third Tab</Link>${'\n  '}]}${'\n  '}pathname="${pathname}" ${'/>'}`;
+  const example = `${'<'}Tabs${'\n  '}items={[${'\n    <'}Link to={{pathname: '/tabs'}}>First Tab</Link>,${'\n    <'}Link to={{pathname: '/tabs/2'}}>Second Tab</Link>,${'\n    <'}Link to={{pathname: '/tabs/3'}}>Third Tab</Link>${'\n  '}]}${'\n  '}pathname="${pathname}"${'\n  '}theme="${theme}" ${'/>'}`;
 
   return (
     <DocsRoot
@@ -22,7 +24,8 @@ const TabsDocs = ({location: {pathname}}) => {
               <Link to={{pathname: '/tabs/2'}}>Second Tab</Link>,
               <Link to={{pathname: '/tabs/3'}}>Third Tab</Link>
             ]}
-            pathname={pathname} />
+            pathname={pathname}
+            theme={theme} />
         </div>
       }
       example={example}
@@ -35,4 +38,8 @@ TabsDocs.propTypes = {
   location: PropTypes.object.isRequired
 };
 
+TabsDocs.defaultProps = {
+  theme: 'default'
+};
+
 export default TabsDocs;
diff --git a/docs/components/TabsDocs/props-default.txt b/docs/components/TabsDocs/props-default.txt
@@ -1,3 +1,4 @@
 static defaultProps = {
-  hash: ''
+  hash: '',
+  theme: 'default'
 };
diff --git a/docs/components/TabsDocs/props-definition.txt b/docs/components/TabsDocs/props-definition.txt
@@ -1,5 +1,6 @@
 static propTypes = {
   hash: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.element).isRequired,
-  pathname: PropTypes.string.isRequired
+  pathname: PropTypes.string.isRequired,
+  theme: PropTypes.oneOf(['default', 'block'])
 };
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
       "node_modules"
     ]
   },
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "Shared components repo for kununu projects",
   "main": "dist/components/index.js",
   "repository": {

diff --git a/playground/app.jsx b/playground/app.jsx
@@ -187,6 +187,21 @@ const App = ({location: {pathname, query}}) => (
           </div>
         </div>
 
+        <br />
+
+        <div className="row">
+          <div className="col-md-8">
+            <Tabs
+              theme="block"
+              items={[
+                <Link to={{pathname: '/playground/', query}}>First Tab</Link>,
+                <Link to={{pathname: '/playground/2', query}}><span className={styles.itemNumber}>10</span> Second Tab</Link>,
+                <Link to={{pathname: '/playground/3', query}}>Third Tab</Link>
+              ]}
+              pathname={pathname} />
+          </div>
+        </div>
+
         <br /><br />
 
         <div className="row">

diff --git a/playground/app.scss b/playground/app.scss
@@ -22,3 +22,7 @@ label.customThemeChoice {
     @include button-outline(#fff, #c90);
   }
 }
+
+.itemNumber {
+  font-weight: $font-weight-regular;
+}
diff --git a/tests/Tabs.test.jsx b/tests/Tabs.test.jsx
@@ -32,3 +32,36 @@ test('Renders Tabs with simple links as items without crashing', () => {
   const tree = component.toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('Renders Tabs using the block theme without crashing', () => {
+  const component = renderer.create(
+    <Tabs
+      items={[
+        <a href="/playground/">First Tab</a>,
+        <a href="/playground/2">Second Tab</a>,
+        <a href="/playground/3">Third Tab</a>
+      ]}
+      pathname={'test'}
+      theme="block" />
+  );
+
+  const tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Throws error when not supported theme given', () => {
+  global.console = {
+    error: jest.fn()
+  };
+  renderer.create(
+    <Tabs
+      items={[
+        <a href="/playground/">First Tab</a>,
+        <a href="/playground/2">Second Tab</a>,
+        <a href="/playground/3">Third Tab</a>
+      ]}
+      pathname={'test'}
+      theme="NOT_EXISTENT_THEME" />
+  );
+  expect(console.error).toHaveBeenCalled(); // eslint-disable-line no-console
+});
diff --git a/tests/__snapshots__/Tabs.test.jsx.snap b/tests/__snapshots__/Tabs.test.jsx.snap
@@ -1,6 +1,33 @@
+exports[`test Renders Tabs using the block theme without crashing 1`] = `
+<ul
+  className="blockTabs clearfix">
+  <li
+    className="">
+    <a
+      href="/playground/">
+      First Tab
+    </a>
+  </li>
+  <li
+    className="">
+    <a
+      href="/playground/2">
+      Second Tab
+    </a>
+  </li>
+  <li
+    className="">
+    <a
+      href="/playground/3">
+      Third Tab
+    </a>
+  </li>
+</ul>
+`;
+
 exports[`test Renders Tabs with react-router links as items without crashing 1`] = `
 <ul
-  className="tabs clearfix">
+  className="defaultTabs clearfix">
   <li
     className="">
     <a
@@ -30,7 +57,7 @@ exports[`test Renders Tabs with react-router links as items without crashing 1`]
 
 exports[`test Renders Tabs with simple links as items without crashing 1`] = `
 <ul
-  className="tabs clearfix">
+  className="defaultTabs clearfix">
   <li
     className="">
     <a