feat: extend #tabs with .dnb-section support

dnbexperience · May 2, 2019 · a609fdc · a609fdc
1 parent 37e62fa
commit a609fdc
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 24 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/helper-classes/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/helper-classes/Examples.js
@@ -24,6 +24,9 @@ class Example extends PureComponent {
 <div className="dnb-section dnb-section--spacing">
   Visual DNB Section, declared with <code className="dnb-code">.dnb-section--spacing</code>
 </div>
+<div className="dnb-section dnb-section--spacing dnb-section--mint-green">
+  Visual DNB Section, declared with <code className="dnb-code">.dnb-section--mint-green</code>
+</div>
 <div className="dnb-section dnb-section--spacing dnb-section--emerald-green">
   Visual DNB Section, declared with <code className="dnb-code">.dnb-section--emerald-green</code>
 </div>

diff --git a/packages/dnb-ui-lib/src/components/tabs/Example.js b/packages/dnb-ui-lib/src/components/tabs/Example.js
@@ -66,7 +66,7 @@ render(<Tabs data={data}>
         </ComponentBox>
         <ComponentBox caption="eft aligned tabs, using React Components only">
           {/* @jsx */ `
-<Tabs>
+<Tabs section_style="mint-green">
   <Tabs.Content title="First">
     <h2 className="dnb-h2">First</h2>
   </Tabs.Content>
@@ -90,7 +90,7 @@ render(<Tabs data={data}>
   render={({ Wrapper, Content, TabsList, Tabs }) => {
     return (
       <Wrapper>
-        <TabsList>
+        <TabsList className="dnb-section">
           <small>
             <b>Active:</b> {activeTabKey}
           </small>

diff --git a/packages/dnb-ui-lib/src/components/tabs/Tabs.js b/packages/dnb-ui-lib/src/components/tabs/Tabs.js
@@ -39,6 +39,7 @@ export const propTypes = {
   label: PropTypes.string,
   selected_key: PropTypes.string,
   align: PropTypes.oneOf(['left', 'center', 'right']),
+  section_style: PropTypes.string,
   use_hash: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   id: PropTypes.string,
   class: PropTypes.string,
@@ -59,6 +60,7 @@ export const defaultProps = {
   label: null,
   selected_key: null,
   align: 'left',
+  section_style: null,
   use_hash: false,
   id: null,
   class: null,
@@ -371,6 +373,7 @@ export default class Tabs extends PureComponent {
       render: customRenderer,
       label,
       align,
+      section_style,
       className,
       class: _className,
       selected_key: _selected_key, //eslint-disable-line
@@ -434,16 +437,21 @@ export default class Tabs extends PureComponent {
     Tabs.displayName = 'Tabs'
 
     // To have a reusable Component laster, do this like that
-    const TabsList = ({ children }) => (
+    const TabsList = ({ children, className }) => (
       <div
         className={classnames(
           'dnb-tabs__tabs',
-          align ? `dnb-tabs__tabs--${align}` : null
+          align ? `dnb-tabs__tabs--${align}` : null,
+          section_style
+            ? `dnb-section dnb-section--${section_style}`
+            : null,
+          className
         )}
       >
         {children}
       </div>
     )
+
     TabsList.displayName = 'TabsList'
 
     // To have a reusable Component laster, do this like that

diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -14,6 +14,7 @@ exports[`Tabs component have to match snapshot 1`] = `
         "id": "id",
         "label": "label",
         "render": [Function],
+        "section_style": "section_style",
         "selected_key": "selected_key",
         "use_hash": "use_hash",
       },
@@ -72,6 +73,7 @@ exports[`Tabs component have to match snapshot 1`] = `
   id="id"
   label={null}
   render={null}
+  section_style={null}
   selected_key="second"
   use_hash={false}
 >
@@ -204,21 +206,24 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
-.dnb-tabs__tabs::after {
-  background-color: var(--color-mint-green);
-  box-shadow: 100vw 0 0 0 var(--color-mint-green); }
+.dnb-tabs__tabs:not(.dnb-section)::after {
+  background-color: var(--color-mint-green-50);
+  box-shadow: 100vw 0 0 0 var(--color-mint-green-50); }
 
 @media screen and (max-width: 40em) {
-  .dnb-tabs__tabs::before {
+  .dnb-tabs__tabs:not(.dnb-section)::before {
     content: '';
     position: absolute;
     z-index: -1;
     left: -50vw;
     top: 0;
     width: 100vw;
     height: 1px;
-    background-color: var(--color-mint-green);
-    box-shadow: 100vw 0 0 0 var(--color-mint-green); } }
+    background-color: var(--color-mint-green-50);
+    box-shadow: 100vw 0 0 0 var(--color-mint-green-50); } }
+
+.dnb-tabs__tabs.dnb-section::after {
+  height: 100%; }
 
 .dnb-tabs__tabs__tablist {
   margin: 0 -1rem;
@@ -339,7 +344,8 @@ exports[`Tabs scss have to match snapshot 1`] = `
   flex-wrap: nowrap; }
   .dnb-tabs__tabs__tablist {
     display: flex;
-    flex-direction: row; }
+    flex-direction: row;
+    align-self: flex-end; }
     .dnb-tabs__tabs__tablist:focus {
       outline: none; }
       html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist:focus {

diff --git a/packages/dnb-ui-lib/src/components/tabs/details.md b/packages/dnb-ui-lib/src/components/tabs/details.md
@@ -1,9 +1,11 @@
-| Properties     | Description                                                                                          |     |
-| -------------- | ---------------------------------------------------------------------------------------------------- | --- |
-| `selected_key` | _(optional)_ in case one of the Tabs should be opened by a number                                    |     |
-| `active_item`  | _(optional)_ in case one of the Tabs should be opened by a url                                       |     |
-| `show_numbers` | _(optional)_ in case numbers should be shown. Defaults to true                                       |     |
-| `data`         | _(mandatory)_ defines the data structure to load as a JSON. e.g. `[{title: '...', key|hash: '...'}]` |     |
+| Properties      | Description                                                                                                                             |     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --- |
+| `selected_key`  | _(optional)_ in case one of the tabs should be opened by a number                                                                       |     |
+| `active_item`   | _(optional)_ in case one of the tabs should be opened by a url                                                                          |     |
+| `show_numbers`  | _(optional)_ in case numbers should be shown. Defaults to true                                                                          |     |
+| `align`         | _(optional)_ to align the tab list on the right side `align="right"`. Default to left                                                   |     |
+| `section_style` | _(optional)_ to enable the visual helper `.dnb-section`. Use a supported modifier, like: `section_style="mint-green"`. Defaults to null |     |
+| `data`          | _(mandatory)_ defines the data structure to load as a JSON. e.g. `[{title: '...', key|hash: '...'}]`                                    |     |
 
 | Events      | Description                                                                  |
 | ----------- | ---------------------------------------------------------------------------- |

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss b/packages/dnb-ui-lib/src/components/tabs/style/_tabs.scss
@@ -18,6 +18,7 @@
     &__tablist {
       display: flex;
       flex-direction: row;
+      align-self: flex-end; // on case we use dnb-section
 
       &:focus {
         @include fakeFocus();

diff --git a/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-ui-lib/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss
@@ -7,23 +7,26 @@
 
 .dnb-tabs {
   &__tabs {
-    &::after {
-      background-color: var(--color-mint-green);
-      box-shadow: 100vw 0 0 0 var(--color-mint-green);
+    &:not(.dnb-section)::after {
+      background-color: var(--color-mint-green-50);
+      box-shadow: 100vw 0 0 0 var(--color-mint-green-50);
     }
     @include allBelow(small) {
-      &::before {
+      &:not(.dnb-section)::before {
         content: '';
         position: absolute;
         z-index: -1;
         left: -50vw;
         top: 0;
         width: 100vw;
         height: 1px;
-        background-color: var(--color-mint-green);
-        box-shadow: 100vw 0 0 0 var(--color-mint-green);
+        background-color: var(--color-mint-green-50);
+        box-shadow: 100vw 0 0 0 var(--color-mint-green-50);
       }
     }
+    &.dnb-section::after {
+      height: 100%;
+    }
 
     &__tablist {
       // Only used on to visualize the tab ring nicer

diff --git a/packages/dnb-ui-lib/src/style/core/helper-classes/dnb-section.scss b/packages/dnb-ui-lib/src/style/core/helper-classes/dnb-section.scss
@@ -29,6 +29,15 @@
 .dnb-section--white::after {
   color: var(--color-white);
 }
+.dnb-section--mint-green {
+  &::after {
+    color: var(--color-mint-green);
+  }
+  // &.dnb-tabs__tabs::after {
+  //   height: 100%;
+  //   color: var(--color-mint-green);
+  // }
+}
 .dnb-section--emerald-green {
   color: var(--color-mint-green);
   &::after {

diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -115,7 +115,7 @@ stories.push([
         />
       </Box>
       <Box>
-        <Tabs>
+        <Tabs section_style="mint-green">
           <Tabs.Content title="First">
             <H2>First</H2>
           </Tabs.Content>
@@ -124,6 +124,26 @@ stories.push([
           </Tabs.Content>
         </Tabs>
       </Box>
+      <Box>
+        <Tabs
+          align="right"
+          label="Some Tabs label"
+          data={tabsData}
+          render={({ Wrapper, Content, TabsList, Tabs }) => {
+            return (
+              <Wrapper>
+                <TabsList className="dnb-section dnb-section--mint-green">
+                  <small>I'm on the left side</small>
+                  <Tabs />
+                </TabsList>
+                <Content />
+              </Wrapper>
+            )
+          }}
+        >
+          {exampleTabsContent}
+        </Tabs>
+      </Box>
     </Wrapper>
   )
 ])