🔍 FEATURE: Add justify-content prop to molecule tabs

components/molecule/tabs/demo/Articles/ArticleTabsJustifyContent.js

@@ -0,0 +1,127 @@
+import {useState} from 'react'
+
+import MoleculeTabs, {
+  MoleculeTab,
+  moleculeTabsJustifyContent,
+  moleculeTabsTypes,
+  moleculeTabsVariants
+} from 'components/molecule/tabs/src/index.js'
+import PropTypes from 'prop-types'
+
+import {
+  Article,
+  Cell,
+  Code,
+  Grid,
+  H2,
+  Label,
+  ListItem,
+  Paragraph,
+  RadioButton,
+  RadioButtonGroup,
+  UnorderedList
+} from '@s-ui/documentation-library'
+
+import Content from '../components/Content.js'
+import {CLASS_DEMO_CONTENT_TAB} from '../config.js'
+
+const ArticleTabsJustifyContent = ({className}) => {
+  const [type, setType] = useState(undefined)
+  const [variant, setVariant] = useState(undefined)
+  const [justifyContent, setJustifyContent] = useState(undefined)
+  return (
+    <Article className={className}>
+      <H2>JustifyContent</H2>
+      <Paragraph>
+        Using the <Code>tabsJustifyContent</Code> (enum) prop you can set it to any of the predefined types. The default
+        type values are exported on an enum called <Code>moleculeTabsJustifyContent</Code>:
+      </Paragraph>
+      <UnorderedList>
+        {Object.entries(moleculeTabsJustifyContent).map(
+          ([moleculeTabsJustifyContentKey, moleculeTabsJustifyContentValue]) => (
+            <ListItem key={moleculeTabsJustifyContentKey}>
+              <Code>moleculeTabsTypes.{moleculeTabsJustifyContentKey}</Code>: "{moleculeTabsJustifyContentValue}"
+            </ListItem>
+          )
+        )}
+      </UnorderedList>
+      <Grid cols={1} gutter={[8, 8]}>
+        <Cell>
+          <Label>JustifyContent</Label>
+        </Cell>
+        <Cell>
+          <RadioButtonGroup value={justifyContent} onChange={(event, value) => setJustifyContent(value)}>
+            {[['undefined', undefined], ...Object.entries(moleculeTabsJustifyContent)].map(
+              ([moleculeTabsJustifyContentKey, moleculeTabsJustifyContentValue]) => (
+                <RadioButton
+                  key={`${moleculeTabsJustifyContentKey}`}
+                  label={`${moleculeTabsJustifyContentKey}`}
+                  value={moleculeTabsJustifyContentValue}
+                  checked={moleculeTabsJustifyContentValue === justifyContent}
+                />
+              )
+            )}
+          </RadioButtonGroup>
+        </Cell>
+        <Cell>
+          <Label>type</Label>
+        </Cell>
+        <Cell>
+          <RadioButtonGroup value={type} onChange={(event, value) => setType(value)}>
+            {[['undefined', undefined], ...Object.entries(moleculeTabsTypes)].map(
+              ([moleculeTabsTypesKey, moleculeTabsTypesValue]) => (
+                <RadioButton
+                  key={`${moleculeTabsTypesKey}`}
+                  label={`${moleculeTabsTypesKey}`}
+                  value={moleculeTabsTypesValue}
+                  checked={moleculeTabsTypesValue === type}
+                />
+              )
+            )}
+          </RadioButtonGroup>
+        </Cell>
+        <Cell>
+          <Label>variant</Label>
+        </Cell>
+        <Cell>
+          <RadioButtonGroup value={variant} onChange={(event, value) => setVariant(value)}>
+            {[['undefined', undefined], ...Object.entries(moleculeTabsVariants)].map(
+              ([moleculeTabsVariantsKey, moleculeTabsVariantsValue]) => (
+                <RadioButton
+                  key={`${moleculeTabsVariantsKey}`}
+                  label={`${moleculeTabsVariantsKey}`}
+                  value={moleculeTabsVariantsValue}
+                  checked={moleculeTabsVariantsValue === variant}
+                />
+              )
+            )}
+          </RadioButtonGroup>
+        </Cell>
+        <Cell>
+          <MoleculeTabs type={type} variant={variant} tabsJustifyContent={justifyContent}>
+            {Array(5)
+              .fill(true)
+              .map((v, index) => (
+                <MoleculeTab
+                  key={index + 1}
+                  label={<span style={{padding: '0 8px'}}>Label {index + 1}</span>}
+                  numTab={index + 1}
+                  active={index + 1 === 1}
+                >
+                  <Content title="Title" number={index + 1} className={CLASS_DEMO_CONTENT_TAB} />
+                </MoleculeTab>
+              ))}
+          </MoleculeTabs>
+        </Cell>
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleTabsJustifyContent.displayName = 'ArticleTabsJustifyContent'
+
+ArticleTabsJustifyContent.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleTabsJustifyContent

components/molecule/tabs/demo/index.js

@@ -5,6 +5,7 @@ import ArticleDefault from './Articles/ArticleDefault.js'
 import ArticleIconsCounters from './Articles/ArticleIconsCounters.js'
 import ArticleType from './Articles/ArticleType.js'
 import ArticleVariant from './Articles/ArticleVariant.js'
+import ArticleTabsJustifyContent from './Articles/ArticleTabsJustifyContent.js'
 import {CLASS_DEMO_SECTION} from './config.js'
 
 import './index.scss'
@@ -24,6 +25,8 @@ const Demo = () => {
       <br />
       <ArticleVariant className={CLASS_DEMO_SECTION} />
       <br />
+      <ArticleTabsJustifyContent className={CLASS_DEMO_SECTION} />
+      <br />
       <ArticleIconsCounters className={CLASS_DEMO_SECTION} />
     </div>
   )

components/molecule/tabs/src/_settings.scss

@@ -35,3 +35,5 @@ $sz-sui-molecule-tabs-icon: $sz-icon-l !default;
 $ta-sui-molecule-tabs-vertical-item: center !default;
 $w-sui-molecule-tabs-vertical-item: 100% !default;
 $ws-sui-molecule-tabs-vertical-item: nowrap !default;
+
+$sui-molecule-tabs-justify-content: (flex-start, center, flex-end);

components/molecule/tabs/src/components/MoleculeTabs.js

@@ -5,19 +5,21 @@ import PropTypes from 'prop-types'
 
 import useOnScreen from '@s-ui/react-hooks/lib/useOnScreen'
 
-import {BASE_CLASS, CLASS_CONTENT, CLASS_SCROLLER, TYPES, VARIANTS} from '../config.js'
+import {BASE_CLASS, CLASS_CONTENT, CLASS_SCROLLER, TYPES, VARIANTS, TABS_JUSTIFY_CONTENT} from '../config.js'
 
 const MoleculeTabs = ({
   autoScrollIntoView = true,
   children,
   id = 'molecule-tab-content',
   onChange,
   type = TYPES.HORIZONTAL,
-  variant = VARIANTS.CLASSIC
+  variant = VARIANTS.CLASSIC,
+  tabsJustifyContent = TABS_JUSTIFY_CONTENT.FLEX_START
 }) => {
   const className = cx(BASE_CLASS, {
     [`${BASE_CLASS}--${variant}`]: variant,
-    [`${BASE_CLASS}--${type}`]: type
+    [`${BASE_CLASS}--${type}`]: type,
+    [`${BASE_CLASS}--justify-content-${tabsJustifyContent}`]: tabsJustifyContent
   })
   const childrenArray = Children.toArray(children)
   const isVerticalOrientation = type === TYPES.VERTICAL
@@ -156,7 +158,10 @@ MoleculeTabs.propTypes = {
   variant: PropTypes.oneOf(Object.values(VARIANTS)),
 
   /** type */
-  type: PropTypes.oneOf(Object.values(TYPES))
+  type: PropTypes.oneOf(Object.values(TYPES)),
+
+  /** justify the tabs elements in its area following the element declared **/
+  tabsJustifyContent: PropTypes.oneOf(Object.values(TABS_JUSTIFY_CONTENT))
 }
 
 export default MoleculeTabs

components/molecule/tabs/src/config.js

@@ -13,3 +13,27 @@ export const VARIANTS = {
   HIGHLIGHTED: 'highlighted',
   CLASSIC: 'classic'
 }
+
+export const TABS_JUSTIFY_CONTENT = {
+  /* Positional alignment */
+  // START: 'start' /* Pack items from the start */,
+  // END: 'end' /* Pack items from the end */,
+  FLEX_START: 'flex-start' /* Pack flex items from the start */,
+  CENTER: 'center' /* Pack items around the center */,
+  FLEX_END: 'flex-end' /* Pack flex items from the end */
+  // LEFT: 'left' /* Pack items from the left */,
+  // RIGHT: 'right' /* Pack items from the right */,
+
+  /* Normal alignment */
+  // NORMAL: 'normal',
+
+  /* Distributed alignment */
+  // SPACE_BETWEEN:
+  //   'space-between' /* Distribute items evenly. The first item is flush with the start, the last is flush with the end */,
+  // SPACE_AROUND:
+  //   'space-around' /* Distribute items evenly. Items have a half-size space on either end */,
+  // SPACE_EVENLY:
+  //   'space-evenly' /* Distribute items evenly. Items have equal space around them */
+  // STRETCH:
+  //   'stretch' /* Distribute items evenly. Stretch 'auto'-sized items to fit the container */
+}

components/molecule/tabs/src/index.js

@@ -6,12 +6,13 @@ import useControlledState from '@s-ui/react-hooks/lib/useControlledState'
 
 import MoleculeTab from './components/MoleculeTab.js'
 import MoleculeTabs from './components/MoleculeTabs.js'
-import {TYPES, VARIANTS} from './config.js'
+import {TYPES, VARIANTS, TABS_JUSTIFY_CONTENT} from './config.js'
 
 const MoleculeTabsWithStateActive = ({
   children,
   activeTabIndex: activeTabIndexProp,
   defaultActiveTabIndex: defaultActiveTabIndexProp = 1,
+  tabsJustifyContent,
   onChange,
   ...props
 }) => {
@@ -23,7 +24,7 @@ const MoleculeTabsWithStateActive = ({
   }
 
   return (
-    <MoleculeTabs {...props} onChange={handleChange}>
+    <MoleculeTabs {...props} tabsJustifyContent={tabsJustifyContent} onChange={handleChange}>
       {Children.toArray(children)
         .filter(Boolean)
         .map((child, index) => cloneElement(child, {active: activeTab === index + 1}))}
@@ -43,15 +44,18 @@ MoleculeTabsWithStateActive.propTypes = {
   children: PropTypes.element,
 
   /** onChange callback  */
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+
+  tabsJustifyContent: PropTypes.oneOfType(Object.values(TABS_JUSTIFY_CONTENT))
 }
 
 export {
   MoleculeTab,
   MoleculeTabs,
   MoleculeTabsWithStateActive,
   TYPES as moleculeTabsTypes,
-  VARIANTS as moleculeTabsVariants
+  VARIANTS as moleculeTabsVariants,
+  TABS_JUSTIFY_CONTENT as moleculeTabsJustifyContent
 }
 
 export default MoleculeTabsWithStateActive

components/molecule/tabs/src/styles/index.scss

@@ -6,6 +6,14 @@ $item-base-class: '#{$base-class}-item';
   background-color: $bgc-sui-molecule-tabs;
   border-radius: $bdrs-sui-molecule-tabs;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  @each $value in $sui-molecule-tabs-justify-content {
+    &#{$base-class}--justify-content-#{$value} {
+      align-items: $value;
+    }
+  }
 
   &-content {
     background: $bg-sui-molecule-tabs-content;
@@ -49,6 +57,11 @@ $item-base-class: '#{$base-class}-item';
       display: flex;
       flex-direction: column;
       font-weight: $fw-sui-molecule-tabs;
+      @each $value in $sui-molecule-tabs-justify-content {
+        &#{$base-class}--justify-content-#{$value} {
+          justify-content: $value;
+        }
+      }
 
       &.is-active {
         background: $bgc-sui-molecule-tabs-active;
@@ -196,6 +209,7 @@ $item-base-class: '#{$base-class}-item';
 
   &--vertical {
     display: flex;
+    flex-direction: row;
     align-items: flex-start;
 
     #{$base-class}-scroller {

components/molecule/tabs/test/index.test.js

@@ -30,6 +30,7 @@ describe(json.name, () => {
       'MoleculeTabsWithStateActive',
       'moleculeTabsTypes',
       'moleculeTabsVariants',
+      'moleculeTabsJustifyContent',
       'default'
     ]
 
@@ -40,6 +41,7 @@ describe(json.name, () => {
       MoleculeTabsWithStateActive,
       moleculeTabsTypes,
       moleculeTabsVariants,
+      moleculeTabsJustifyContent,
       default: MoleculeTabsWithStateActiveDefault,
       ...others
     } = library
@@ -249,4 +251,39 @@ describe(json.name, () => {
       })
     })
   })
+
+  describe('moleculeTabsJustifyContent', () => {
+    it('value must be an object enum', () => {
+      // Given
+      const library = pkg
+
+      // When
+      const {moleculeTabsJustifyContent: actual} = library
+
+      // Then
+      expect(actual).to.be.an('object')
+    })
+
+    it('value must be a defined string-key pair filled', () => {
+      // Given
+      const library = pkg
+      const expected = {
+        FLEX_START: 'flex-start',
+        CENTER: 'center',
+        FLEX_END: 'flex-end'
+      }
+
+      // When
+      const {moleculeTabsJustifyContent: actual} = library
+      const {FLEX_START, CENTER, FLEX_END, ...others} = actual
+
+      // Then
+      expect(Object.keys(others).length).to.equal(0)
+      expect(Object.keys(actual)).to.have.members(Object.keys(expected))
+      Object.entries(expected).forEach(([expectedKey, expectedValue]) => {
+        expect(Object.keys(actual).includes(expectedKey)).to.be.true
+        expect(actual[expectedKey]).to.equal(expectedValue)
+      })
+    })
+  })
 })