feat(StepNavigation): vertical and small StepNavigation added

Author: Utzel-Butzel

.storybook/config.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import { addParameters, configure, addDecorator } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { withOptions } from '@storybook/addon-options';
-import addonAPI from '@storybook/addons';
-// import { checkA11y } from 'storybook-addon-a11y';
 
 import { getStorybook } from '@storybook/react';
 import withNotes from './wfp-storybook';

src/components/InlineLoading/InlineLoading-story.js

@@ -8,7 +8,6 @@
 import React, { PureComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-
 import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 
 import Button from '../Button';

src/components/StepNavigation/StepNavigation-story.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
+import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 
 import StepNavigation from '../StepNavigation';
 import StepNavigationItem from '../StepNavigationItem';
@@ -9,11 +9,18 @@ const handleTabClick = index => {
   this.setState({ page: index });
 };
 
+const props = () => ({
+  vertical: boolean('Display vertical (vertical)', false),
+  small: boolean('Small size (small)', false),
+  selectedPage: number('Currently selected page (selectedPage)', 1),
+  handleTabClick: handleTabClick,
+});
+
 storiesOf('StepNavigation', module)
   .addDecorator(withKnobs)
 
   .add('Default (work in progress)', () => (
-    <StepNavigation selectedPage={1} handleTabClick={handleTabClick}>
+    <StepNavigation {...props()}>
       <StepNavigationItem label="Item without Status" page={0} />
       <StepNavigationItem label="Active Item" page={1} />
       <StepNavigationItem

src/components/StepNavigation/StepNavigation.js

@@ -2,16 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
+import settings from '../../globals/js/settings';
+
+const { prefix } = settings;
+
 export default class StepNavigation extends React.Component {
   static propTypes = {
     /**
-     * Specify the text to be read by screen-readers when visiting the <Tabs>
-     * component
-     */
-    ariaLabel: PropTypes.string,
-
-    /**
-     * Pass in a collection of <Tab> children to be rendered depending on the
+     * Pass in a collection of <StepNavigationItem> children to be rendered depending on the
      * currently selected tab
      */
     children: PropTypes.node,
@@ -29,14 +27,14 @@ export default class StepNavigation extends React.Component {
     customTabContent: PropTypes.bool,
 
     /**
-     * Specify whether the Tabs are displayed inline
+     * Specify whether the StepNavigation will be displayed small
      */
-    inline: PropTypes.bool,
+    small: PropTypes.bool,
 
     /**
-     * Specify whether the Tab content is hidden
+     * Specify whether the StepNavigation will be displayed vertically
      */
-    hidden: PropTypes.bool,
+    vertical: PropTypes.bool,
 
     /**
      * By default, this value is "navigation". You can also provide an alternate
@@ -50,34 +48,16 @@ export default class StepNavigation extends React.Component {
      */
     onClick: PropTypes.func,
 
-    /**
-     * Optionally provide an `onKeyDown` handler that is invoked when keyed
-     * navigation is triggered
-     */
-    onKeyDown: PropTypes.func,
-
     /**
      * Provide an optional handler that is called whenever the selection
      * changes. This method is called with the index of the tab that was
      * selected
      */
     onSelectionChange: PropTypes.func,
-
-    /**
-     * Provide a string that represents the `href` for the triggered <Tab>
-     */
-    triggerHref: PropTypes.string.isRequired,
-
     /**
      * Optionally provide an index for the currently selected <Tab>
      */
     selected: PropTypes.number,
-
-    /**
-     * Provide a description that is read out when a user visits the caret icon
-     * for the dropdown menu of items
-     */
-    iconDescription: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -180,6 +160,8 @@ export default class StepNavigation extends React.Component {
   render() {
     const {
       inline,
+      small,
+      vertical,
       className,
       role,
       selectedPage,
@@ -203,7 +185,12 @@ export default class StepNavigation extends React.Component {
     });
 
     const classes = {
-      tabs: classNames('wfp--step-navigation', className),
+      tabs: classNames(className, {
+        [`${prefix}--step-navigation`]: true,
+        [`${prefix}--step-navigation--vertical`]: vertical,
+        [`${prefix}--step-navigation--small`]: small,
+        [`${prefix}--step-navigation--regular`]: !small,
+      }),
       tablist: classNames('wfp--step-navigation__nav', {
         'wfp--step-navigation__nav--hidden': this.state.dropdownHidden,
         'wfp--step-navigation__nav--inline': inline,

src/components/StepNavigation/_step-navigation.scss

@@ -33,14 +33,14 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 $spacing-md;
-    height: rem(40px);
+    //padding: 0 $spacing-md;
+    height: 2em;
     cursor: pointer;
     //background-color: $field-02;
 
     svg {
-      width: rem(12px);
-      height: rem(12px);
+      width: 1em;
+      height: 1em;
       fill: $brand-01;
     }
 
@@ -53,7 +53,6 @@
     text-decoration: none;
     font-weight: 600;
     color: $text-01;
-
     &:focus {
       @include focus-outline('border');
     }
@@ -98,6 +97,24 @@
     }
   }
 
+  // Small StepNavigation
+  .#{$prefix}--step-navigation--small {
+    font-size: 0.5rem;
+    .#{$prefix}--step-navigation__nav-item__text {
+      display: none;
+    }
+  }
+
+  // Vertical StepNavigation
+  .#{$prefix}--step-navigation--vertical {
+    ul {
+      flex-direction: row;
+    }
+    .#{$prefix}--step-navigation__nav-item__text {
+      margin-right: 0.5em;
+    }
+  }
+
   // Skeleton state
   .#{$prefix}--step-navigation.#{$prefix}--skeleton {
     pointer-events: none;

src/components/StepNavigationItem/StepNavigationItem.js

@@ -102,7 +102,7 @@ export default class StepNavigationItem extends React.Component {
                   description="sss"
                 />
               ) : (
-                <React.Fragment>{page + 1}</React.Fragment>
+                <span>{page + 1}</span>
               )}
             </span>
             <span className="wfp--step-navigation__nav-item__text">

src/components/StepNavigationItem/_step-navigation-item.scss

@@ -61,16 +61,22 @@
   }*/
 
   .#{$prefix}--step-navigation__nav-item__indicator {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     background: $ui-01;
     border: 2px solid $brand-01;
     flex-shrink: 0;
-    border-radius: 34px;
-    width: rem(34px);
-    height: rem(34px);
-    line-height: rem(32px);
-    margin: 14px rem(14px) 14px rem(5px);
+    border-radius: 3em;
+    width: 3em;
+    height: 3em;
+    .#{$prefix}--step-navigation--small & {
+      width: 1.5em;
+      height: 1.5em;
+    }
+    line-height: 1em;
+    margin: 0.7em 1em 0.7em 0;
     text-align: center;
     z-index: 2;
     color: $brand-01;
@@ -79,16 +85,38 @@
       position: relative;
       top: 1px;
       fill: $brand-01;
+      width: 1em;
+      height: 1em;
+      .#{$prefix}--step-navigation--small & {
+        width: 0.8em;
+        height: 0.8em;
+      }
     }
     &:after {
       display: block;
       width: 2px;
-      height: 22px;
+      height: 1.1em;
+      bottom: 3em;
+      .#{$prefix}--step-navigation--small & {
+        bottom: 1.5em;
+      }
+      .#{$prefix}--step-navigation--vertical.#{$prefix}--step-navigation--regular
+        & {
+        display: none;
+      }
+      .#{$prefix}--step-navigation--vertical.#{$prefix}--step-navigation--small
+        & {
+        height: 2px;
+        width: 1em;
+        left: inherit;
+        right: 1.5em;
+        bottom: 50%;
+      }
       position: absolute;
       z-index: 1;
       //z-index: -1px;
-      bottom: rem(35px);
-      left: 53%;
+
+      left: calc(50% - 0px);
       margin-left: -1px;
       content: '';
       background: $ui-04;
@@ -109,7 +137,7 @@
     }
 
     @include breakpoint(bp--sm--major) {
-      padding: 0 $spacing-3xs;
+      padding: 0 0.2em;
       width: auto;
       &:focus {
         background-color: transparent;
@@ -151,6 +179,14 @@
 
   .#{$prefix}--step-navigation__nav-item--warning {
     .#{$prefix}--step-navigation__nav-item__indicator {
+      .#{$prefix}--step-navigation--small & {
+        border-color: $support-03;
+        background: $support-03;
+        > svg {
+          top: -0.05em;
+          fill: $ui-01 !important;
+        }
+      }
       > svg {
         fill: $support-03 !important;
       }
@@ -168,6 +204,13 @@
 
   .#{$prefix}--step-navigation__nav-item--complete {
     .#{$prefix}--step-navigation__nav-item__indicator {
+      .#{$prefix}--step-navigation--small & {
+        border-color: $support-02;
+        background: $support-02;
+        > svg {
+          fill: $ui-01 !important;
+        }
+      }
       > svg {
         fill: $support-02 !important;
         position: relative;
@@ -212,15 +255,17 @@
     }
     .#{$prefix}--step-navigation__nav-item__indicator {
       border-color: $ui-04;
-      clip-path: polygon(
-        0 -100%,
-        56% -100%,
-        56% 14%,
-        93% 50%,
-        56% 90%,
-        56% 100%,
-        0 100%
-      );
+      .#{$prefix}--step-navigation--regular & {
+        clip-path: polygon(
+          0 -100%,
+          56% -100%,
+          56% 14%,
+          93% 50%,
+          56% 90%,
+          56% 100%,
+          0 100%
+        );
+      }
       > svg {
         top: 0px;
         fill: $ui-05 !important;

src/components/Table/README.md

@@ -11,8 +11,8 @@ import { TablePagination } from '@wfp/ui';
 // Replacing the Pagination Component of React-Table
 
 <ReactTable
+  {...yourTableProps}
   PaginationComponent={TablePagination}
-  {...yourOtherProps}
   {...otherPropsForThePaginationToo}
 />
 ```

src/components/Table/Table-story.js

@@ -75,7 +75,12 @@ storiesOf('Table', module)
       defaultPageSize={5}
       columns={columns}
       className="-border -striped -highlight"
+      onPageChange={page => {
+        // eslint-disable-next-line no-console
+        console.log('page', page);
+      }}
       pageSizesDisabled
+      totalItems={100}
       PaginationComponent={TablePagination}
     />
   ));

src/components/TablePagination/TablePagination.js

@@ -78,7 +78,7 @@ const ReactTablePagination = ({
           onChange={changePage}
           pageSizes={pageSizeOptions}
           page={page + 1}
-          totalItems={totalItems ? totalItems : data.length}
+          totalItems={totalItems ? totalItems : data ? data.length : undefined}
           {...propList}
         />
       </div>