From 476e2dea34c0607e024805b0ac24beb0b6de9d0f Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Sat, 18 May 2019 21:52:40 +0200
Subject: [PATCH] feat: add init circular #progress

---
 .../src/pages/uilib/components/progress.md    |  25 ++++
 .../uilib/components/progress/Examples.js     |  29 +++++
 .../components/progress/progress-events.md    |   9 ++
 .../components/progress/progress-info.md      |  17 +++
 .../progress/progress-properties.md           |  15 +++
 .../dnb-ui-lib/src/components/Progress.js     |  14 +++
 packages/dnb-ui-lib/src/components/index.js   |   2 +
 packages/dnb-ui-lib/src/components/lib.js     |   3 +
 .../src/components/progress/Progress.js       | 111 ++++++++++++++++++
 .../components/progress/ProgressCircular.js   |  34 ++++++
 .../src/components/progress/index.js          |   8 ++
 .../src/components/progress/style.js          |   6 +
 .../components/progress/style/_progress.scss  |  72 ++++++++++++
 .../progress/style/dnb-progress.scss          |  12 ++
 .../src/components/progress/style/index.js    |   6 +
 .../style/themes/dnb-progress-theme-ui.scss   |   9 ++
 .../components/progress/style/themes/ui.js    |   6 +
 .../src/components/progress/web-component.js  |   9 ++
 packages/dnb-ui-lib/src/index.js              |   2 +
 .../src/style/dnb-ui-components.scss          |   1 +
 .../style/themes/theme-ui/dnb-theme-ui.scss   |   1 +
 .../dnb-ui-lib/stories/componentsStories.js   |  12 ++
 22 files changed, 403 insertions(+)
 create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress.md
 create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js
 create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-events.md
 create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md
 create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-properties.md
 create mode 100644 packages/dnb-ui-lib/src/components/Progress.js
 create mode 100644 packages/dnb-ui-lib/src/components/progress/Progress.js
 create mode 100644 packages/dnb-ui-lib/src/components/progress/ProgressCircular.js
 create mode 100644 packages/dnb-ui-lib/src/components/progress/index.js
 create mode 100644 packages/dnb-ui-lib/src/components/progress/style.js
 create mode 100644 packages/dnb-ui-lib/src/components/progress/style/_progress.scss
 create mode 100644 packages/dnb-ui-lib/src/components/progress/style/dnb-progress.scss
 create mode 100644 packages/dnb-ui-lib/src/components/progress/style/index.js
 create mode 100644 packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss
 create mode 100644 packages/dnb-ui-lib/src/components/progress/style/themes/ui.js
 create mode 100644 packages/dnb-ui-lib/src/components/progress/web-component.js

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress.md
new file mode 100644
index 00000000000..1d7e29a7e93
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress.md
@@ -0,0 +1,25 @@
+---
+title: 'Progress'
+draft: false
+order: 12
+---
+
+import Tabs from 'Tags/Tabs'
+
+import ProgressInfo from 'Pages/uilib/components/progress/progress-info'
+import ProgressProperties from 'Pages/uilib/components/progress/progress-properties'
+import ProgressEvents from 'Pages/uilib/components/progress/progress-events'
+
+# Progress
+
+<Tabs>
+  <Tabs.Content>
+    <ProgressInfo />
+  </Tabs.Content>
+  <Tabs.Content>
+    <ProgressProperties />
+  </Tabs.Content>
+  <Tabs.Content>
+    <ProgressEvents  />
+  </Tabs.Content>
+</Tabs>
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js
new file mode 100644
index 00000000000..7c6a1dde3a1
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/Examples.js
@@ -0,0 +1,29 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React, { PureComponent, Fragment } from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+
+class Example extends PureComponent {
+  clickHandler = () => {
+    alert('You clicked a button with a click function attached to it')
+  }
+  render() {
+    return (
+      <Fragment>
+        <ComponentBox>
+          {/* @jsx */ `
+<Button
+  text="Primary button with text only"
+  data-dnb-test="button-primary"
+/>
+          `}
+        </ComponentBox>
+      </Fragment>
+    )
+  }
+}
+
+export default Example
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-events.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-events.md
new file mode 100644
index 00000000000..9d674d34969
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-events.md
@@ -0,0 +1,9 @@
+---
+draft: true
+---
+
+## Events
+
+| Events        | Description                                                    |
+| ------------- | -------------------------------------------------------------- |
+| `on_complete` | _(optional)_ will be called once the `min_time` has timed out. |
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md
new file mode 100644
index 00000000000..536b7609e60
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-info.md
@@ -0,0 +1,17 @@
+---
+draft: true
+---
+
+import Examples from 'Pages/uilib/components/progress/Examples'
+
+## Description
+
+Use a progress whenever the user has to wait for more than _150ms_. This component is also knows as:
+
+- Indicator (Activity-Indicator)
+- Loader (Pre-loader)
+- Spinner
+
+## Demos
+
+<Examples />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-properties.md
new file mode 100644
index 00000000000..557510439fe
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/progress/progress-properties.md
@@ -0,0 +1,15 @@
+---
+draft: true
+---
+
+## Properties
+
+| Properties     | Description                                                                                                                                         |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`        | _(optional)_ if a text label is needed. Defaults to `null`.                                                                                         |
+| `visible`      | _(optional)_ defines the visibility of the progress. Toggeling the `visible` property to false will force a fade-out animation. Defaults to `true`. |
+| `type`         | _(optional)_ defines the **type** of progress, like `circular`. Defaults to `circular`.                                                             |
+| `no_animation` | _(optional)_ disables the fade-in and fade-out animation. Defaults to false.                                                                        |
+| `min_time`     | _(optional)_ defines the minimum time the progress should be displayed. Defaults to `null`.                                                         |
+| `variant`      | _(optional)_ defines the color variant, like `primary` or `secondary`. Defaults to `primary`.                                                       |
+| `size`         | _(optional)_ defines the size, like `large` or `medium`. Defaults to `medium`.                                                                      |
diff --git a/packages/dnb-ui-lib/src/components/Progress.js b/packages/dnb-ui-lib/src/components/Progress.js
new file mode 100644
index 00000000000..5a6542f1865
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/Progress.js
@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index progress to autogenerate all the components and patterns
+ * Used by "prepareProgresss"
+ */
+
+import Progress from './progress/Progress'
+export * from './progress/Progress'
+export default Progress
diff --git a/packages/dnb-ui-lib/src/components/index.js b/packages/dnb-ui-lib/src/components/index.js
index 717d93123fc..40be6322827 100644
--- a/packages/dnb-ui-lib/src/components/index.js
+++ b/packages/dnb-ui-lib/src/components/index.js
@@ -23,6 +23,7 @@ import LineTitle from './line-title/LineTitle'
 import Logo from './logo/Logo'
 import Modal from './modal/Modal'
 import Notification from './notification/Notification'
+import Progress from './progress/Progress'
 import Slider from './slider/Slider'
 import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
@@ -43,6 +44,7 @@ export {
   Logo,
   Modal,
   Notification,
+  Progress,
   Slider,
   StepIndicator,
   Switch,
diff --git a/packages/dnb-ui-lib/src/components/lib.js b/packages/dnb-ui-lib/src/components/lib.js
index f56d1885954..64471b2b3d2 100644
--- a/packages/dnb-ui-lib/src/components/lib.js
+++ b/packages/dnb-ui-lib/src/components/lib.js
@@ -25,6 +25,7 @@ import LineTitle from './line-title/LineTitle'
 import Logo from './logo/Logo'
 import Modal from './modal/Modal'
 import Notification from './notification/Notification'
+import Progress from './progress/Progress'
 import Slider from './slider/Slider'
 import StepIndicator from './step-indicator/StepIndicator'
 import Switch from './switch/Switch'
@@ -45,6 +46,7 @@ export {
   Logo,
   Modal,
   Notification,
+  Progress,
   Slider,
   StepIndicator,
   Switch,
@@ -66,6 +68,7 @@ export const getComponents = () => {
     Logo,
     Modal,
     Notification,
+    Progress,
     Slider,
     StepIndicator,
     Switch,
diff --git a/packages/dnb-ui-lib/src/components/progress/Progress.js b/packages/dnb-ui-lib/src/components/progress/Progress.js
new file mode 100644
index 00000000000..f13cd1f1d4c
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/Progress.js
@@ -0,0 +1,111 @@
+/**
+ * Web Progress Component
+ *
+ */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+// import classnames from 'classnames'
+// import keycode from 'keycode'
+import {
+  registerElement
+  // validateDOMAttributes,
+  // dispatchCustomElementEvent
+} from '../../shared/component-helper'
+import ProgressCircular from './ProgressCircular'
+
+const renderProps = {
+  render: null
+}
+
+export const propTypes = {
+  label: PropTypes.string,
+  visible: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  type: PropTypes.oneOf(['circular']),
+  no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  min_time: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  size: PropTypes.oneOf(['large', 'medium']),
+  // id: PropTypes.string,
+  // class: PropTypes.string,
+  /** React props */
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.node,
+    PropTypes.func
+  ]),
+
+  // Web Component props
+  render: PropTypes.func
+}
+
+export const defaultProps = {
+  label: null,
+  visible: true,
+  type: 'circular',
+  no_animation: false,
+  min_time: null,
+  variant: 'primary',
+  size: 'medium',
+  // id: null,
+  // class: null,
+
+  /** React props */
+  className: null,
+  children: null,
+
+  // Web Component props
+  ...renderProps
+}
+
+export default class Progress extends PureComponent {
+  static tagName = 'dnb-progress'
+  static propTypes = propTypes
+  static defaultProps = defaultProps
+
+  static enableWebComponent() {
+    registerElement(Progress.tagName, Progress, defaultProps)
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (state._listenForPropChanges) {
+      if (props.visible && state._visible !== props.visible) {
+        state.visible = state._visible = props.visible
+      }
+    }
+    state._listenForPropChanges = true
+    return state
+  }
+
+  constructor(props) {
+    super(props)
+
+    // this._id =
+    //   props.id || `dnb-progress-${Math.round(Math.random() * 999)}` // cause we need an id anyway
+
+    const visible = Boolean(props.visible)
+    this.state = {
+      _listenForPropChanges: true,
+      visible,
+      _visible: visible
+    }
+
+    // this._tablistRef = React.createRef()
+  }
+
+  render() {
+    const {
+      visible: _visible //eslint-disable-line
+      // ...props
+    } = this.props
+
+    // const { visible } = this.state
+
+    return (
+      <div className="dnb-progress">
+        <ProgressCircular />
+      </div>
+    )
+  }
+}
diff --git a/packages/dnb-ui-lib/src/components/progress/ProgressCircular.js b/packages/dnb-ui-lib/src/components/progress/ProgressCircular.js
new file mode 100644
index 00000000000..d96b13f3c3f
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/ProgressCircular.js
@@ -0,0 +1,34 @@
+/**
+ * Web Progress Component
+ *
+ */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class ProgressCircular extends PureComponent {
+  render() {
+    return (
+      <div className="dnb-progress__circular">
+        <Circle className="dnb-progress__circular__bg" />
+        <Circle className="dnb-progress__circular__line" />
+      </div>
+    )
+  }
+}
+
+const Circle = ({ className }) => (
+  <svg className={className} viewBox="0 0 50 50">
+    <circle
+      className="dnb-progress__circular__circle"
+      fill="none"
+      strokeWidth="4"
+      cx="25"
+      cy="25"
+      r="20"
+    />
+  </svg>
+)
+Circle.propTypes = {
+  className: PropTypes.string.isRequired
+}
diff --git a/packages/dnb-ui-lib/src/components/progress/index.js b/packages/dnb-ui-lib/src/components/progress/index.js
new file mode 100644
index 00000000000..ae81e80023f
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/index.js
@@ -0,0 +1,8 @@
+/**
+ * Component Entry
+ *
+ */
+
+import Progress from './Progress'
+export default Progress
+export * from './Progress'
diff --git a/packages/dnb-ui-lib/src/components/progress/style.js b/packages/dnb-ui-lib/src/components/progress/style.js
new file mode 100644
index 00000000000..c19f66f9dc8
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/style.js
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './style/dnb-progress.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress/style/_progress.scss b/packages/dnb-ui-lib/src/components/progress/style/_progress.scss
new file mode 100644
index 00000000000..129b329c6ce
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/style/_progress.scss
@@ -0,0 +1,72 @@
+/*
+ * Progress component
+ *
+ */
+
+:root {
+  --progress-circular-circle: 130;
+  --progress-circular-circle--nreg: -130;
+}
+
+.dnb-progress {
+  position: relative;
+
+  // circular variant
+  &__circular {
+    position: relative;
+
+    width: 20rem;
+    height: 20rem;
+
+    // since SVG is starting 90deg from top
+    transform: rotate(-90deg);
+
+    svg {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    &__line {
+      stroke-dasharray: 0, var(--progress-circular-circle);
+      stroke-dashoffset: 0;
+
+      // animation details
+      animation-name: progress-circular-line;
+      animation-duration: 1.5s;
+      animation-delay: 200ms;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      opacity: 0;
+    }
+
+    &__circle {
+      stroke-linecap: round;
+      stroke: var(--color-emerald-green);
+    }
+    &__line &__circle {
+      stroke: var(--color-mint-green);
+    }
+  }
+}
+
+@keyframes progress-circular-line {
+  0% {
+    stroke-dasharray: 0, var(--progress-circular-circle);
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+  50% {
+    stroke-dasharray: var(--progress-circular-circle),
+      var(--progress-circular-circle);
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+  100% {
+    stroke-dasharray: var(--progress-circular-circle),
+      var(--progress-circular-circle);
+    stroke-dashoffset: var(--progress-circular-circle--nreg);
+    opacity: 1;
+  }
+}
diff --git a/packages/dnb-ui-lib/src/components/progress/style/dnb-progress.scss b/packages/dnb-ui-lib/src/components/progress/style/dnb-progress.scss
new file mode 100644
index 00000000000..d16cccbee2f
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/style/dnb-progress.scss
@@ -0,0 +1,12 @@
+/*
+* DNB Progress
+*
+*/
+
+@import '../../../style/components/imports.scss';
+
+.dnb-progress {
+  @include componentReset();
+}
+
+@import './progress.scss';
diff --git a/packages/dnb-ui-lib/src/components/progress/style/index.js b/packages/dnb-ui-lib/src/components/progress/style/index.js
new file mode 100644
index 00000000000..2458936b0be
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/style/index.js
@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './dnb-progress.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss b/packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss
new file mode 100644
index 00000000000..2e3a4e243d3
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/style/themes/dnb-progress-theme-ui.scss
@@ -0,0 +1,9 @@
+/*
+* Progress theme
+*
+*/
+
+@import '../../../../style/themes/imports.scss';
+
+// .dnb-progress {
+// }
diff --git a/packages/dnb-ui-lib/src/components/progress/style/themes/ui.js b/packages/dnb-ui-lib/src/components/progress/style/themes/ui.js
new file mode 100644
index 00000000000..905ed04edd0
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/style/themes/ui.js
@@ -0,0 +1,6 @@
+/**
+ * Imports the default theme
+ *
+ */
+
+import './dnb-progress-theme-ui.scss'
diff --git a/packages/dnb-ui-lib/src/components/progress/web-component.js b/packages/dnb-ui-lib/src/components/progress/web-component.js
new file mode 100644
index 00000000000..68737cc2ae4
--- /dev/null
+++ b/packages/dnb-ui-lib/src/components/progress/web-component.js
@@ -0,0 +1,9 @@
+/**
+ * This file is used to enable Web Components
+ *
+ */
+
+export * from './index'
+import { enableWebComponents } from '../index'
+
+enableWebComponents()
diff --git a/packages/dnb-ui-lib/src/index.js b/packages/dnb-ui-lib/src/index.js
index 389718ee414..2ae9f18aa7d 100644
--- a/packages/dnb-ui-lib/src/index.js
+++ b/packages/dnb-ui-lib/src/index.js
@@ -23,6 +23,7 @@ import LineTitle from './components/line-title/LineTitle'
 import Logo from './components/logo/Logo'
 import Modal from './components/modal/Modal'
 import Notification from './components/notification/Notification'
+import Progress from './components/progress/Progress'
 import Slider from './components/slider/Slider'
 import StepIndicator from './components/step-indicator/StepIndicator'
 import Switch from './components/switch/Switch'
@@ -63,6 +64,7 @@ export {
   Logo,
   Modal,
   Notification,
+  Progress,
   Slider,
   StepIndicator,
   Switch,
diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
index 8862a854d05..43bd04a37c2 100644
--- a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
+++ b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss
@@ -17,6 +17,7 @@
 @import '../components/logo/style/_logo.scss';
 @import '../components/modal/style/_modal.scss';
 @import '../components/notification/style/_notification.scss';
+@import '../components/progress/style/_progress.scss';
 @import '../components/slider/style/_slider.scss';
 @import '../components/step-indicator/style/_step-indicator.scss';
 @import '../components/switch/style/_switch.scss';
diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
index f35fefe95e9..6cbc171c2d9 100644
--- a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss
@@ -31,6 +31,7 @@
 @import '../../../components/form-status/style/themes/dnb-form-status-theme-ui.scss';
 @import '../../../components/input/style/themes/dnb-input-theme-ui.scss';
 @import '../../../components/modal/style/themes/dnb-modal-theme-ui.scss';
+@import '../../../components/progress/style/themes/dnb-progress-theme-ui.scss';
 @import '../../../components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss';
 @import '../../../components/switch/style/themes/dnb-switch-theme-ui.scss';
 @import '../../../components/tabs/style/themes/dnb-tabs-theme-ui.scss';
diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
index ad0d66ce8ae..41010dea84f 100644
--- a/packages/dnb-ui-lib/stories/componentsStories.js
+++ b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -21,6 +21,7 @@ import {
   Switch,
   Logo,
   StepIndicator,
+  Progress,
   DatePicker
 } from '../src/components'
 import { H2, P, Hr } from '../src/elements'
@@ -514,6 +515,17 @@ stories.push([
   )
 ])
 
+stories.push([
+  'Progress',
+  () => (
+    <Wrapper>
+      <Box>
+        <Progress />
+      </Box>
+    </Wrapper>
+  )
+])
+
 stories.push([
   'Dropdown',
   () => (