feat: add init circular #progress

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>

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

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. |

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 />

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`.                                                                      |

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

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,

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,

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>
+    )
+  }
+}

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
+}

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'

packages/dnb-ui-lib/src/components/progress/style.js

@@ -0,0 +1,6 @@
+/**
+ * Web Style Import
+ *
+ */
+
+import './style/dnb-progress.scss'

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;
+  }
+}