diff --git a/src/Molecules/MultiStepProgress/LevelOne/LevelOne.tsx b/src/Molecules/MultiStepProgress/LevelOne/LevelOne.tsx new file mode 100644 index 000000000..67653bfdd --- /dev/null +++ b/src/Molecules/MultiStepProgress/LevelOne/LevelOne.tsx @@ -0,0 +1,129 @@ +import React from 'react'; +import styled from 'styled-components'; +import Box from '../../../Atoms/Box'; +import Button from '../../Button'; +import Typography from '../../../Atoms/Typography'; +import { InternalProps, LevelOneComponent } from './LevelOne.types'; +import { LevelTwo } from '../LevelTwo'; +import Status from '../Status'; +import { + listReset, + HORIZONTAL_PADDING, + HORIZONTAL_PADDING_DESKTOP, + SPACE_TO_STEP_NUMBER, + STEP_NUMBER_SIZE, + VERTICAL_PADDING, +} from '../constants'; + +const OrderedList = styled.ol` + ${listReset} +`; + +const ListItem = styled.li` + display: block; + position: relative; + + &::before { + content: ''; + display: block; + background: ${p => p.theme.color.cta}; + width: 2px; + height: 100%; + position: absolute; + top: 0; + left: 0; + transition: opacity 0.16s ease-out; + opacity: ${p => (p.$current ? 1 : 0)}; + } + + & + & { + border-top: ${p => p.theme.spacing.unit(2)}px solid ${p => p.theme.color.divider}; + } +`; + +const Content = styled(Box)` + position: relative; +`; + +const StyledButton = styled(Button)` + justify-content: flex-start; +`; + +export const LevelOne: LevelOneComponent = ({ + onStepClick, + onSubStepClick, + steps = [], + titleDone, + titleNotDone, +}) => { + const contentLeftPadding = HORIZONTAL_PADDING + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER; + const contentLeftPaddingDesktop = + HORIZONTAL_PADDING_DESKTOP + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER; + + return ( + + {steps.map((step, i) => { + const { current, done, label, name, steps: substeps = [] } = step; + const number = i + 1; + + return ( + + {current || done ? ( + onStepClick && onStepClick(name)} + variant="neutral" + fullWidth + > + + + + {label} + + + + ) : ( + <> + t.color.disabledText} type="primary"> + + + {label} + + + + )} + {substeps.length > 0 && current && ( + + )} + + ); + })} + + ); +}; diff --git a/src/Molecules/MultiStepProgress/LevelOne/LevelOne.types.ts b/src/Molecules/MultiStepProgress/LevelOne/LevelOne.types.ts new file mode 100644 index 000000000..e5bbe088c --- /dev/null +++ b/src/Molecules/MultiStepProgress/LevelOne/LevelOne.types.ts @@ -0,0 +1,19 @@ +import { StepLevelTwoProps } from '../LevelTwo/LevelTwo.types'; +import { A11yProps } from '../Status/Status.types'; +import { StepBaseProps } from '../MultiStepProgress.types'; + +export type InternalProps = { + $current?: boolean; +}; + +export type StepLevelOneProps = { + steps?: StepLevelTwoProps[]; +} & StepBaseProps; + +type Props = { + onStepClick?: (stepName: string) => void; + onSubStepClick?: (stepName: string) => void; + steps?: StepLevelOneProps[]; +}; + +export type LevelOneComponent = React.FC; diff --git a/src/Molecules/MultiStepProgress/LevelOne/index.ts b/src/Molecules/MultiStepProgress/LevelOne/index.ts new file mode 100644 index 000000000..f427f9e9a --- /dev/null +++ b/src/Molecules/MultiStepProgress/LevelOne/index.ts @@ -0,0 +1,3 @@ +import { LevelOne } from './LevelOne'; + +export { LevelOne }; diff --git a/src/Molecules/MultiStepProgress/LevelTwo/LevelTwo.tsx b/src/Molecules/MultiStepProgress/LevelTwo/LevelTwo.tsx new file mode 100644 index 000000000..72f3190d3 --- /dev/null +++ b/src/Molecules/MultiStepProgress/LevelTwo/LevelTwo.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import styled from 'styled-components'; +import Typography from '../../../Atoms/Typography'; +import Box from '../../../Atoms/Box'; +import Button from '../../Button'; +import Status from '../Status'; +import { LevelTwoComponent } from './LevelTwo.types'; +import { + listReset, + HORIZONTAL_PADDING, + HORIZONTAL_PADDING_DESKTOP, + SPACE_TO_STEP_NUMBER, + STEP_NUMBER_SIZE, + VERTICAL_PADDING, +} from '../constants'; + +const OrderedList = styled.ol` + ${listReset} + padding-bottom: ${p => p.theme.spacing.unit(VERTICAL_PADDING)}px; +`; + +const ListItem = styled.li` + display: block; + + & + & { + padding-top: ${p => p.theme.spacing.unit(2)}px; + } +`; + +export const LevelTwo: LevelTwoComponent = ({ + onStepClick, + steps = [], + titleDone, + titleNotDone, +}) => { + const contentPadding = HORIZONTAL_PADDING + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER; + const contentPaddingDesktop = + HORIZONTAL_PADDING_DESKTOP + STEP_NUMBER_SIZE + SPACE_TO_STEP_NUMBER; + + return ( + + {steps.map(step => { + const { current, done, name, label } = step; + + return ( + + + {current || done ? ( + + ) : ( + t.color.disabledText} type="secondary"> + + {label} + + )} + + + ); + })} + + ); +}; diff --git a/src/Molecules/MultiStepProgress/LevelTwo/LevelTwo.types.ts b/src/Molecules/MultiStepProgress/LevelTwo/LevelTwo.types.ts new file mode 100644 index 000000000..173b8a8ce --- /dev/null +++ b/src/Molecules/MultiStepProgress/LevelTwo/LevelTwo.types.ts @@ -0,0 +1,11 @@ +import { StepBaseProps } from '../MultiStepProgress.types'; +import { A11yProps } from '../Status/Status.types'; + +export type StepLevelTwoProps = StepBaseProps; + +export type Props = { + onStepClick?: (stepName: string) => void; + steps: StepLevelTwoProps[]; +}; + +export type LevelTwoComponent = React.FC; diff --git a/src/Molecules/MultiStepProgress/LevelTwo/index.ts b/src/Molecules/MultiStepProgress/LevelTwo/index.ts new file mode 100644 index 000000000..5cde4dac3 --- /dev/null +++ b/src/Molecules/MultiStepProgress/LevelTwo/index.ts @@ -0,0 +1,3 @@ +import { LevelTwo } from './LevelTwo'; + +export { LevelTwo }; diff --git a/src/Molecules/MultiStepProgress/MultiStepProgress.stories.tsx b/src/Molecules/MultiStepProgress/MultiStepProgress.stories.tsx new file mode 100644 index 000000000..e8961918f --- /dev/null +++ b/src/Molecules/MultiStepProgress/MultiStepProgress.stories.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import MultiStepProgress from './MultiStepProgress'; + +export const mockedSteps = [ + { current: false, done: true, label: 'Investment objective', name: 'investment_objective' }, + { + current: true, + done: false, + label: 'Time and risk', + name: 'time_and_risk', + steps: [ + { current: false, done: true, label: 'Investment period', name: 'investment_period' }, + { current: true, done: false, label: 'Frequency', name: 'frequency' }, + { current: false, done: false, label: 'Amount', name: 'amount' }, + ], + }, + { current: false, done: false, label: 'Allocations', name: 'allocations' }, +]; + +export const mockedStepsNotStarted = [ + { current: false, done: false, label: 'Investment objective', name: 'investment_objective' }, + { + current: false, + done: false, + label: 'Time and risk', + name: 'time_and_risk', + steps: [ + { current: false, done: false, label: 'Investment period', name: 'investment_period' }, + { current: false, done: false, label: 'Frequency', name: 'frequency' }, + { current: false, done: false, label: 'Amount', name: 'amount' }, + ], + }, + { current: false, done: false, label: 'Allocations', name: 'allocations' }, +]; + +storiesOf('Molecules | Multi Step Progress', module) + .add('Default', () => ( + <> + + + )) + .add('Not started', () => ( + <> + + + )); diff --git a/src/Molecules/MultiStepProgress/MultiStepProgress.tsx b/src/Molecules/MultiStepProgress/MultiStepProgress.tsx new file mode 100644 index 000000000..1d9aa861f --- /dev/null +++ b/src/Molecules/MultiStepProgress/MultiStepProgress.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import Card from '../../Atoms/Card'; +import { LevelOne } from './LevelOne'; +import { MultiStepProgressComponent } from './MultiStepProgress.types'; + +const MultiStepProgress: MultiStepProgressComponent = ({ + onStepClick, + onSubStepClick, + steps, + title = 'Progress', + titleDone = 'Completed', + titleNotDone = 'Not completed', +}) => { + return ( + +
+ +
+ + ); +}; + +export default MultiStepProgress; diff --git a/src/Molecules/MultiStepProgress/MultiStepProgress.types.ts b/src/Molecules/MultiStepProgress/MultiStepProgress.types.ts new file mode 100644 index 000000000..7f1c51074 --- /dev/null +++ b/src/Molecules/MultiStepProgress/MultiStepProgress.types.ts @@ -0,0 +1,22 @@ +import { StepLevelOneProps } from './LevelOne/LevelOne.types'; + +export type StepBaseProps = { + current?: boolean; + done?: boolean; + name: string; + label: string; +}; + +export type MultiStepProgressProps = { + onStepClick?: (stepName: string) => void; + onSubStepClick?: (stepName: string) => void; + steps?: StepLevelOneProps[]; + /** Used to label the component */ + title?: string; + /** Visible on completed steps */ + titleDone?: string; + /** Visible on non completed steps */ + titleNotDone?: string; +}; + +export type MultiStepProgressComponent = React.FC; diff --git a/src/Molecules/MultiStepProgress/Status/Status.tsx b/src/Molecules/MultiStepProgress/Status/Status.tsx new file mode 100644 index 000000000..95aefdd25 --- /dev/null +++ b/src/Molecules/MultiStepProgress/Status/Status.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import styled from 'styled-components'; +import VisuallyHidden from '../../../Atoms/VisuallyHidden'; +import Typography from '../../../Atoms/Typography'; +import Icon from '../../../Atoms/Icon'; +import { StatusComponent, InternalProps } from './Status.types'; + +import { + STEP_NUMBER_SIZE, + VERTICAL_PADDING, + HORIZONTAL_PADDING, + HORIZONTAL_PADDING_DESKTOP, +} from '../constants'; + +const StyledTypography = styled(Typography)` + position: absolute; + top: ${p => p.theme.spacing.unit(VERTICAL_PADDING)}px; + left: ${p => p.theme.spacing.unit(HORIZONTAL_PADDING)}px; + + ${p => p.theme.media.greaterThan(p.theme.breakpoints.sm)} { + left: ${p => p.theme.spacing.unit(HORIZONTAL_PADDING_DESKTOP)}px; + } +`; + +const Circle = styled.span` + width: ${p => p.theme.spacing.unit(STEP_NUMBER_SIZE)}px; + height: ${p => p.theme.spacing.unit(STEP_NUMBER_SIZE)}px; + background-color: ${p => (p.$current ? p.theme.color.cta : p.theme.color.disabledBackground)}; + color: ${p => (p.$current ? p.theme.color.buttonText : p.theme.color.disabledText)}; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +`; + +const Status: StatusComponent = ({ current, done, noIcons, number, titleDone, titleNotDone }) => ( + <> + {done && {titleDone}} + {!done && !current && {titleNotDone}} + + {!noIcons && ( + + {done ? ( + t.color.positive} /> + ) : ( + {number} + )} + + )} + +); + +export default Status; diff --git a/src/Molecules/MultiStepProgress/Status/Status.types.ts b/src/Molecules/MultiStepProgress/Status/Status.types.ts new file mode 100644 index 000000000..5b576c97e --- /dev/null +++ b/src/Molecules/MultiStepProgress/Status/Status.types.ts @@ -0,0 +1,18 @@ +import { StepBaseProps } from '../MultiStepProgress.types'; + +type InheritedProps = Pick; + +export type A11yProps = { + /** Visible on completed steps */ + titleDone: string; + /** Visible on non completed steps */ + titleNotDone: string; +}; + +export type InternalProps = { + $current?: boolean; +}; + +type Props = { noIcons?: boolean; number?: number } & InheritedProps & A11yProps; + +export type StatusComponent = React.FC; diff --git a/src/Molecules/MultiStepProgress/Status/index.ts b/src/Molecules/MultiStepProgress/Status/index.ts new file mode 100644 index 000000000..1c888ce41 --- /dev/null +++ b/src/Molecules/MultiStepProgress/Status/index.ts @@ -0,0 +1 @@ +export { default } from './Status'; diff --git a/src/Molecules/MultiStepProgress/__snapshots__/MultiStepProgress.stories.storyshot b/src/Molecules/MultiStepProgress/__snapshots__/MultiStepProgress.stories.storyshot new file mode 100644 index 000000000..7a7038ba7 --- /dev/null +++ b/src/Molecules/MultiStepProgress/__snapshots__/MultiStepProgress.stories.storyshot @@ -0,0 +1,773 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Molecules | Multi Step Progress Default 1`] = ` +.c8 { + padding-left: 44px; + padding-top: 12px; + padding-right: 12px; + padding-bottom: 12px; +} + +.c21 { + padding-left: 44px; + padding-right: 12px; +} + +.c25 { + padding-left: 44px; + padding-top: 12px; + padding-right: 12px; + padding-bottom: 12px; +} + +.c0 { + background: #FFFFFF; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.03); +} + +.c10 { + position: absolute; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); +} + +.c13 { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 24px; + height: 24px; + fill: #00D200; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + display: block; +} + +.c14 { + fill: #FFFFFF; +} + +.c6 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: inherit; + margin: 0; + font-weight: 700; + font-size: 14px; + line-height: 1.4285714285714286; +} + +.c7 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: #282823; + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 1.5; +} + +.c11 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: #282823; + margin: 0; + font-weight: 700; + font-size: 14px; + line-height: 1.4285714285714286; +} + +.c16 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: #282823; + margin: 0; + font-weight: 700; + font-size: 16px; + line-height: 1.5; +} + +.c23 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: #A0A09B; + margin: 0; + font-weight: 400; + font-size: 14px; + line-height: 1.4285714285714286; +} + +.c24 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: #A0A09B; + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 1.5; +} + +.c4 { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + position: relative; + box-sizing: border-box; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + padding: 0; + background-color: transparent; + color: #282823; + border: none; + border-radius: 0; + cursor: pointer; +} + +.c4, +.c4[type='button'], +.c4[type='reset'], +.c4[type='submit'] { + -webkit-appearance: button; +} + +.c4::-moz-focus-inner, +.c4[type='button']::-moz-focus-inner, +.c4[type='reset']::-moz-focus-inner, +.c4[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c4:-moz-focusring, +.c4[type='button']:-moz-focusring, +.c4[type='reset']:-moz-focusring, +.c4[type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.c22 { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + position: relative; + box-sizing: border-box; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 0; + background-color: transparent; + color: #282823; + border: none; + border-radius: 0; + cursor: pointer; +} + +.c22, +.c22[type='button'], +.c22[type='reset'], +.c22[type='submit'] { + -webkit-appearance: button; +} + +.c22::-moz-focus-inner, +.c22[type='button']::-moz-focus-inner, +.c22[type='reset']::-moz-focus-inner, +.c22[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c22:-moz-focusring, +.c22[type='button']:-moz-focusring, +.c22[type='reset']:-moz-focusring, +.c22[type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} + +.c12 { + position: absolute; + top: 12px; + left: 12px; +} + +.c17 { + width: 24px; + height: 24px; + background-color: #0046FF; + color: #FFFFFF; + border-radius: 50%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c26 { + width: 24px; + height: 24px; + background-color: #EBEBE8; + color: #A0A09B; + border-radius: 50%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c18 { + list-style: none; + margin: 0; + padding: 0; + padding-bottom: 12px; +} + +.c20 { + display: block; +} + +.c20 + .c19 { + padding-top: 8px; +} + +.c1 { + list-style: none; + margin: 0; + padding: 0; +} + +.c3 { + display: block; + position: relative; +} + +.c3::before { + content: ''; + display: block; + background: #0046FF; + width: 2px; + height: 100%; + position: absolute; + top: 0; + left: 0; + -webkit-transition: opacity 0.16s ease-out; + transition: opacity 0.16s ease-out; + opacity: 0; +} + +.c3 + .c2 { + border-top: 8px solid #EBEBE8; +} + +.c15 { + display: block; + position: relative; +} + +.c15::before { + content: ''; + display: block; + background: #0046FF; + width: 2px; + height: 100%; + position: absolute; + top: 0; + left: 0; + -webkit-transition: opacity 0.16s ease-out; + transition: opacity 0.16s ease-out; + opacity: 1; +} + +.c15 + .c2 { + border-top: 8px solid #EBEBE8; +} + +.c9 { + position: relative; +} + +.c5 { + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +@media (min-width:760px) { + .c8 { + padding-left: 52px; + padding-right: 20px; + } +} + +@media (min-width:760px) { + .c21 { + padding-left: 52px; + padding-right: 20px; + } +} + +@media (min-width:760px) { + .c25 { + padding-left: 52px; + } +} + +@media (min-width:760px) { + .c12 { + left: 20px; + } +} + +
+
+
    +
  1. + +
    2. +
  2. + +
      +
    1. +
      + +
      +
      2. +
    2. +
      + +
      +
      3. +
    3. +
      + +
      + Not completed +
      + Amount +       +
      +
      4. +
    +
    3. +
  3. + +
    +
    + Not completed +
    + + + 3 + + + Allocations +
    +     +
    4. +
+
+
+`; + +exports[`Storyshots Molecules | Multi Step Progress Not started 1`] = ` +.c5 { + padding-left: 44px; + padding-top: 12px; + padding-right: 12px; + padding-bottom: 12px; +} + +.c0 { + background: #FFFFFF; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.03); +} + +.c7 { + position: absolute; + height: 1px; + width: 1px; + overflow: hidden; + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); +} + +.c4 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: #A0A09B; + margin: 0; + font-weight: 400; + font-size: 16px; + line-height: 1.5; +} + +.c8 { + font-family: 'Nordnet Sans Mono',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; + color: #282823; + margin: 0; + font-weight: 700; + font-size: 14px; + line-height: 1.4285714285714286; +} + +.c9 { + position: absolute; + top: 12px; + left: 12px; +} + +.c10 { + width: 24px; + height: 24px; + background-color: #EBEBE8; + color: #A0A09B; + border-radius: 50%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c1 { + list-style: none; + margin: 0; + padding: 0; +} + +.c3 { + display: block; + position: relative; +} + +.c3::before { + content: ''; + display: block; + background: #0046FF; + width: 2px; + height: 100%; + position: absolute; + top: 0; + left: 0; + -webkit-transition: opacity 0.16s ease-out; + transition: opacity 0.16s ease-out; + opacity: 0; +} + +.c3 + .c2 { + border-top: 8px solid #EBEBE8; +} + +.c6 { + position: relative; +} + +@media (min-width:760px) { + .c5 { + padding-left: 52px; + } +} + +@media (min-width:760px) { + .c9 { + left: 20px; + } +} + +
+
+
    +
  1. + +
    +
    + Not completed +
    + + + 1 + + + Investment objective +
    +     +
    2. +
  2. + +
    +
    + Not completed +
    + + + 2 + + + Time and risk +
    +     +
    3. +
  3. + +
    +
    + Not completed +
    + + + 3 + + + Allocations +
    +     +
    4. +
+
+
+`; diff --git a/src/Molecules/MultiStepProgress/constants.ts b/src/Molecules/MultiStepProgress/constants.ts new file mode 100644 index 000000000..6ce892931 --- /dev/null +++ b/src/Molecules/MultiStepProgress/constants.ts @@ -0,0 +1,11 @@ +export const STEP_NUMBER_SIZE = 6; +export const HORIZONTAL_PADDING = 3; +export const HORIZONTAL_PADDING_DESKTOP = 5; +export const VERTICAL_PADDING = 3; +export const SPACE_TO_STEP_NUMBER = 2; + +export const listReset = ` + list-style: none; + margin: 0; + padding: 0; +`; diff --git a/src/Molecules/MultiStepProgress/index.ts b/src/Molecules/MultiStepProgress/index.ts new file mode 100644 index 000000000..2eee49ab4 --- /dev/null +++ b/src/Molecules/MultiStepProgress/index.ts @@ -0,0 +1,3 @@ +import MultiStepProgress from './MultiStepProgress'; + +export default MultiStepProgress; diff --git a/src/index.ts b/src/index.ts index 8e79931fa..4e64b6d26 100644 --- a/src/index.ts +++ b/src/index.ts @@ -46,8 +46,9 @@ import Link from './Molecules/Link'; import LinkBuy from './Molecules/LinkBuy'; import LinkSell from './Molecules/LinkSell'; import ListWithTitles from './Molecules/ListWithTitles'; -import Number from './Molecules/Number'; import Modal from './Molecules/Modal'; +import MultiStepProgress from './Molecules/MultiStepProgress'; +import Number from './Molecules/Number'; import PageHeaderCard from './Molecules/PageHeaderCard'; import ProgressBar from './Molecules/ProgressBar'; import PageWrapper from './Molecules/PageWrapper'; @@ -112,8 +113,9 @@ export { ListItem, ListWithTitles, Media, - Modal, Number, + MultiStepProgress, + Modal, PageHeaderCard, PageWrapper, Portal,