feat: move #step-indicator into components and enhance the styles wit…

…h the new defined style
dnbexperience · Jan 21, 2019 · f3e2bdf · f3e2bdf
1 parent 004f74d
commit f3e2bdf
Show file tree

Hide file tree

Showing 37 changed files with 948 additions and 233 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,9 +4,11 @@
 
 - Change from 1px to 2px outline on input for error state
 - Signal Orange is replaced by Emerald Green for focus state
-- Tab and Progress bars have now Sea Green Alt
+- Tab and StepIndicator (Progress bar) have now Sea Green Alt underline
 - The Switch component has now an outline of 2px
-- Hover on Tabs looks more lie an anchor
+- Hover on Tabs looks more like an anchor
 - Color change: Sea Green 4% -> Mint Green 12%
 
+More in the [Releases section on GitHub](https://github.com/dnbexperience/eufemia/releases)
+
 ---
diff --git a/packages/dnb-design-system-portal/src/html.js b/packages/dnb-design-system-portal/src/html.js
@@ -16,7 +16,7 @@ export default class HTML extends PureComponent {
           <meta name="robots" content="noindex" />
           <meta
             name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=yes, maximum-scale=12"
           />
           {this.props.headComponents}
         </head>

diff --git a/...rc/pages/uilib/patterns/step-indicator.md → .../pages/uilib/components/step-indicator.md b/...rc/pages/uilib/patterns/step-indicator.md → .../pages/uilib/components/step-indicator.md
@@ -2,15 +2,15 @@
 header: 'UI Library'
 title: 'StepIndicator'
 draft: false
-status: wip
-order: 12
+status: null
+order: 14
 ---
 
 <!--
   ATTENTION: This file is auto generated by using "makeDemosFactory".
   Do not change the content!
 -->
 
-import StepIndicatorPage from 'Src/uilib/patterns/demos/StepIndicator'
+import StepIndicatorPage from 'Src/uilib/components/demos/StepIndicator'
 
 <StepIndicatorPage />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/switch.md b/packages/dnb-design-system-portal/src/pages/uilib/components/switch.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'Switch'
 draft: false
 status: wip
-order: 14
+order: 15
 ---
 
 <!--

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/tabs.md b/packages/dnb-design-system-portal/src/pages/uilib/components/tabs.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'Tabs'
 draft: false
 status: null
-order: 15
+order: 16
 ---
 
 <!--

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/patterns/summary-table.md b/packages/dnb-design-system-portal/src/pages/uilib/patterns/summary-table.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'SummaryTable'
 draft: false
 status: wip
-order: 13
+order: 12
 ---
 
 <!--

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/patterns/view-title.md b/packages/dnb-design-system-portal/src/pages/uilib/patterns/view-title.md
@@ -3,7 +3,7 @@ header: 'UI Library'
 title: 'ViewTitle'
 draft: false
 status: wip
-order: 14
+order: 13
 ---
 
 <!--

diff --git a/packages/dnb-design-system-portal/src/uilib/components/demos/StepIndicator.js b/packages/dnb-design-system-portal/src/uilib/components/demos/StepIndicator.js
@@ -0,0 +1,46 @@
+/**
+ * ATTENTION: This file is auto generated by using "makeDemosFactory".
+ * Do not change the content!
+ *
+ * "Component" Demo setup
+ * Ready for imporing in page
+ *
+ */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import ItemWrapper from '../../../shared/parts/uilib/ItemWrapper'
+import DemoComponent, {
+  Example as CodeComponent
+} from 'dnb-ui-lib/src/components/step-indicator/Example'
+import Description from 'dnb-ui-lib/src/components/step-indicator/description.md'
+import Details from 'dnb-ui-lib/src/components/step-indicator/details.md'
+import ExampleCode from 'raw-loader!../examples/StepIndicator.txt'
+
+export default class StepIndicatorDemo extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    id: PropTypes.string,
+    Description: PropTypes.func,
+    Details: PropTypes.func,
+    DemoComponent: PropTypes.func,
+    CodeComponent: PropTypes.func,
+    hideTabs: PropTypes.bool
+  }
+  static defaultProps = {
+    title: 'StepIndicator',
+    id: 'step-indicator',
+    ExampleCode,
+    Description,
+    Details,
+    DemoComponent,
+    CodeComponent,
+    callback: CodeComponent.AdditionalCallback || null,
+    hideTabs: false
+  }
+  render() {
+    return (
+      <ItemWrapper {...StepIndicatorDemo.defaultProps} {...this.props} />
+    )
+  }
+}
diff --git a/packages/dnb-design-system-portal/src/uilib/components/demos/allParts.js b/packages/dnb-design-system-portal/src/uilib/components/demos/allParts.js
@@ -16,6 +16,7 @@ import Logo from './Logo'
 import Modal from './Modal'
 import Notification from './Notification'
 import Slider from './Slider'
+import StepIndicator from './StepIndicator'
 import Switch from './Switch'
 import Tabs from './Tabs'
 
@@ -33,6 +34,7 @@ export default [
   Modal,
   Notification,
   Slider,
+  StepIndicator,
   Switch,
   Tabs
 ]
diff --git a/packages/dnb-design-system-portal/src/uilib/components/examples/StepIndicator.txt b/packages/dnb-design-system-portal/src/uilib/components/examples/StepIndicator.txt
@@ -0,0 +1,20 @@
+<StepIndicator
+  active_item="2"
+  active_url={this.state.active_url}
+  data={dataBlob}
+  on_change={this.onChangeHandler}
+/>
+{/* <StepIndicator
+          active_item="3"
+          data={[
+            {
+              title: 'Om din nye bolig'
+            },
+            {
+              title: 'Ditt lån og egenkapital'
+            },
+            {
+              title: 'Oppsummering'
+            }
+          ]}
+        /> */}
diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js b/packages/dnb-design-system-portal/src/uilib/patterns/demos/allParts.js
@@ -14,7 +14,6 @@ import Grid from './Grid'
 import HelperClasses from './HelperClasses'
 import MainNav from './MainNav'
 import RangeSlider from './RangeSlider'
-import StepIndicator from './StepIndicator'
 import SummaryTable from './SummaryTable'
 import ViewTitle from './ViewTitle'
 
@@ -30,7 +29,6 @@ export default [
   HelperClasses,
   MainNav,
   RangeSlider,
-  StepIndicator,
   SummaryTable,
   ViewTitle
 ]
diff --git a/packages/dnb-design-system-portal/src/uilib/patterns/examples/StepIndicator.txt b/packages/dnb-design-system-portal/src/uilib/patterns/examples/StepIndicator.txt
diff --git a/packages/dnb-ui-lib/src/components/index.js b/packages/dnb-ui-lib/src/components/index.js
@@ -25,6 +25,7 @@ import Logo from './logo/Logo'
 import Modal from './modal/Modal'
 import Notification from './notification/Notification'
 import Slider from './slider/Slider'
+import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
 import Tabs from './tabs/Tabs'
 
@@ -43,6 +44,7 @@ export {
   Modal,
   Notification,
   Slider,
+  StepIndicator,
   Switch,
   Tabs
 }
@@ -62,6 +64,7 @@ export const getComponents = () => {
     Modal,
     Notification,
     Slider,
+    StepIndicator,
     Switch,
     Tabs
   }

diff --git a/...ib/src/patterns/step-indicator/Example.js → .../src/components/step-indicator/Example.js b/...ib/src/patterns/step-indicator/Example.js → .../src/components/step-indicator/Example.js
@@ -54,6 +54,26 @@ class Example extends PureComponent {
             data={dataBlob}
             on_change={this.onChangeHandler}
           />
+          <p className="example-caption">
+            StepIndicator with urls, for visited steps only
+          </p>
+        </div>
+        <div className="example-box">
+          {/* <StepIndicator
+            active_item="3"
+            data={[
+              {
+                title: 'Om din nye bolig'
+              },
+              {
+                title: 'Ditt lån og egenkapital'
+              },
+              {
+                title: 'Oppsummering'
+              }
+            ]}
+          /> */}
+          <p className="example-caption">StepIndicator with no urls</p>
         </div>
       </Fragment>
     )
@@ -68,7 +88,6 @@ const data = [
   {
     title: 'Ditt lån og egenkapital',
     url: '?b'
-    // url_future: ''
   },
   {
     title: 'Oppsummering',

diff --git a/.../patterns/step-indicator/StepIndicator.js → ...omponents/step-indicator/StepIndicator.js b/.../patterns/step-indicator/StepIndicator.js → ...omponents/step-indicator/StepIndicator.js
@@ -3,7 +3,7 @@
  *
  */
 
-import React, { PureComponent, Fragment } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {
@@ -12,7 +12,7 @@ import {
   processChildren,
   dispatchCustomElementEvent
 } from '../../shared/component-helper'
-// import './style/dnb-step-indicator.scss' // no good solution to import the style here
+// import { Dummy } from '../tabs/Tabs'
 
 const renderProps = {
   on_change: null
@@ -128,11 +128,16 @@ export default class StepIndicator extends PureComponent {
     const data = StepIndicator.getData(this.props)
     let activeItem = parseFloat(active_item) - 1
 
-    if (active_url !== null && data.length > 0)
+    if (
+      (active_url || !(parseFloat(active_item) > 0)) &&
+      data.length > 0
+    ) {
       activeItem = data.reduce(
-        (acc, { url }, i) => (url == active_url ? i : acc),
-        activeItem
+        (acc, { url }, i) =>
+          url && (url === active_item || url === active_url) ? i : acc,
+        1
       )
+    }
 
     const params = {
       className: classnames('dnb-step-indicator', className, _className)
@@ -143,36 +148,30 @@ export default class StepIndicator extends PureComponent {
 
     return (
       <div {...params}>
-        <div className="dnb-width-limit">
-          {data.length > 0 && (
-            <ul className="dnb-step-indicator__list">
-              {data.map((props, i) => (
-                <li
-                  key={`bc${i}`}
-                  className={classnames(
-                    'dnb-breadcrumb',
-                    i === activeItem
-                      ? 'dnb-breadcrumb--active dnb-typo-book'
-                      : null,
-                    i < activeItem
-                      ? 'dnb-breadcrumb--visited typo-light'
-                      : null
-                  )}
-                >
-                  <ItemContent
-                    {...{
-                      activeItem,
-                      show_numbers,
-                      number: i,
-                      ...props
-                    }}
-                    onChangeHandler={this.onChangeHandler}
-                  />
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
+        {data.length > 0 && (
+          <ul className="dnb-step-indicator__list">
+            {data.map((props, i) => (
+              <li
+                key={`bc${i}`}
+                className={classnames(
+                  'dnb-step-indicator__item',
+                  i === activeItem ? 'dnb-step-indicator--active' : null,
+                  i < activeItem ? 'dnb-step-indicator--visited' : null
+                )}
+              >
+                <ItemContent
+                  {...{
+                    activeItem,
+                    show_numbers,
+                    number: i,
+                    ...props
+                  }}
+                  onChangeHandler={this.onChangeHandler}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
     )
   }
@@ -217,38 +216,39 @@ class ItemContent extends PureComponent {
     return url ? (
       <a
         className={classnames(
-          'dnb-breadcrumb-item-text',
-          'dnb-breadcrumb-item-text--link',
-          number > activeItem ? 'typo-light' : null
+          'dnb-step-indicator-item-content',
+          'dnb-step-indicator-item-content--link'
         )}
         href={url}
         onClick={this._onChangeHandler}
       >
-        <ItemContentNumber {...{ title, number, ...rest }} />
+        <ItemContentWrapper {...{ title, number, ...rest }} />
       </a>
     ) : (
       <span
         className={classnames(
-          'dnb-breadcrumb-item-text',
-          'dnb-breadcrumb-item-text--static',
-          number > activeItem ? ' typo-light' : null
+          'dnb-step-indicator-item-content',
+          'dnb-step-indicator-item-content--static'
         )}
       >
-        <ItemContentNumber {...{ number, title, ...rest }} />
+        <ItemContentWrapper {...{ number, title, ...rest }} />
       </span>
     )
   }
 }
 
-const ItemContentNumber = ({ number, title, show_numbers }) => (
-  <Fragment>
-    <span className="dnb-breadcrumb-number">
+const ItemContentWrapper = ({ number, title, show_numbers }) => (
+  <>
+    <span className="dnb-step-indicator-number">
       {(show_numbers && `${number + 1}. `) || ''}
     </span>
-    {title}
-  </Fragment>
+    <span className="dnb-step-indicator-text">
+      {title}
+      {/* <Dummy>{title}</Dummy> */}
+    </span>
+  </>
 )
-ItemContentNumber.propTypes = {
+ItemContentWrapper.propTypes = {
   number: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
   show_numbers: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])