@laerdal/life-react-components 1.5.1-dev.22.full → 1.5.1-dev.24.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/Card/CardBottomSection.cjs +3 -3
  2. package/dist/Card/CardBottomSection.cjs.map +1 -1
  3. package/dist/Card/CardBottomSection.d.ts +2 -2
  4. package/dist/Card/CardBottomSection.js +4 -4
  5. package/dist/Card/CardBottomSection.js.map +1 -1
  6. package/dist/{LinearProgression/LinearProgression.cjs → LinearProgress/LinearProgress.cjs} +37 -27
  7. package/dist/LinearProgress/LinearProgress.cjs.map +1 -0
  8. package/dist/{LinearProgression/LinearProgression.d.ts → LinearProgress/LinearProgress.d.ts} +8 -7
  9. package/dist/{LinearProgression/LinearProgression.js → LinearProgress/LinearProgress.js} +34 -25
  10. package/dist/LinearProgress/LinearProgress.js.map +1 -0
  11. package/dist/{LinearProgression → LinearProgress}/index.cjs +7 -7
  12. package/dist/LinearProgress/index.cjs.map +1 -0
  13. package/dist/LinearProgress/index.d.ts +3 -0
  14. package/dist/LinearProgress/index.js +4 -0
  15. package/dist/LinearProgress/index.js.map +1 -0
  16. package/dist/index.cjs +4 -4
  17. package/dist/index.cjs.map +1 -1
  18. package/dist/index.d.ts +1 -1
  19. package/dist/index.js +1 -1
  20. package/dist/index.js.map +1 -1
  21. package/package.json +1 -1
  22. package/dist/LinearProgression/LinearProgression.cjs.map +0 -1
  23. package/dist/LinearProgression/LinearProgression.js.map +0 -1
  24. package/dist/LinearProgression/index.cjs.map +0 -1
  25. package/dist/LinearProgression/index.d.ts +0 -3
  26. package/dist/LinearProgression/index.js +0 -4
  27. package/dist/LinearProgression/index.js.map +0 -1
package/dist/Card/CardBottomSection.cjs CHANGED
@@ -60,7 +60,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
60
60
  progressLevel = _ref.progressLevel,
61
61
  progressMax = _ref.progressMax,
62
62
  _ref$progressType = _ref.progressType,
63
- progressType = _ref$progressType === void 0 ? _.LinearProgressionType.Line : _ref$progressType,
63
+ progressType = _ref$progressType === void 0 ? _.LinearProgressType.Line : _ref$progressType,
64
64
  noteLeft = _ref.noteLeft,
65
65
  noteLeftIcon = _ref.noteLeftIcon,
66
66
  noteRight = _ref.noteRight,
@@ -73,10 +73,10 @@ var CardBottomSection = function CardBottomSection(_ref) {
73
73
  disabled: disabled,
74
74
  interactionType: interactionType,
75
75
  children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
76
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgression, {
76
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgress, {
77
77
  size: _.Size.Small,
78
78
  type: progressType,
79
- variant: _.LinearProgressionVariant.Normal,
79
+ variant: _.LinearProgressVariant.Normal,
80
80
  value: progressLevel,
81
81
  max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
82
82
  })
package/dist/Card/CardBottomSection.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressionType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressionVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n interactionType: InteractionType;\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressionType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logoSrc: string;\n disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n height: 24px;\n margin-top: 24px;\n position: relative;\n color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nconst Divider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\nconst NoteRight = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\n\nconst AuthorName = styled.div`\n flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n ${ButtonRowContainer} {\n ${props => props.interactionType == InteractionType.Clickable ? \n `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n interactionType,\n progressLevel,\n progressMax,\n progressType = LinearProgressionType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {haveAtLeastSomething && <Divider />}\n {progressLevel != undefined && <ProgressContainer>\n <LinearProgression size={Size.Small}\n type={progressType}\n variant={LinearProgressionVariant.Normal}\n value={progressLevel} \n max={progressMax ?? progressLevel} />\n </ProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <NoteLeft>\n {noteLeftIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n </NoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <NoteRight>\n {noteRightIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n </NoteRight>\n )}\n </NotesContainer>}\n\n {authorName && <AuthorContainer disabled={disabled}>\n <AuthorName>{authorName}</AuthorName>\n <LaerdalLogo width='80px' height='43px' />\n </AuthorContainer>}\n\n {actions && <ButtonRowContainer>\n {actions.map(x => (\n <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n {x.icon}\n </IconButton>\n ))}\n </ButtonRowContainer>}\n </Container>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
1
+ {"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n interactionType: InteractionType;\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logoSrc: string;\n disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n height: 24px;\n margin-top: 24px;\n position: relative;\n color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nconst Divider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\nconst NoteRight = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\n\nconst AuthorName = styled.div`\n flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n ${ButtonRowContainer} {\n ${props => props.interactionType == InteractionType.Clickable ? \n `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n interactionType,\n progressLevel,\n progressMax,\n progressType = LinearProgressType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {haveAtLeastSomething && <Divider />}\n {progressLevel != undefined && <ProgressContainer>\n <LinearProgress size={Size.Small}\n type={progressType}\n variant={LinearProgressVariant.Normal}\n value={progressLevel}\n max={progressMax ?? progressLevel} />\n </ProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <NoteLeft>\n {noteLeftIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n </NoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <NoteRight>\n {noteRightIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n </NoteRight>\n )}\n </NotesContainer>}\n\n {authorName && <AuthorContainer disabled={disabled}>\n <AuthorName>{authorName}</AuthorName>\n <LaerdalLogo width='80px' height='43px' />\n </AuthorContainer>}\n\n {actions && <ButtonRowContainer>\n {actions.map(x => (\n <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n {x.icon}\n </IconButton>\n ))}\n </ButtonRowContainer>}\n </Container>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
package/dist/Card/CardBottomSection.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { InteractionType, LinearProgressionType } from '..';
2
+ import { InteractionType, LinearProgressType } from '..';
3
3
  export interface ActionItem {
4
4
  icon: React.ReactNode;
5
5
  onClick: () => void;
@@ -8,7 +8,7 @@ export interface CardBottomSectionProps {
8
8
  interactionType: InteractionType;
9
9
  progressLevel?: number;
10
10
  progressMax?: number;
11
- progressType?: LinearProgressionType;
11
+ progressType?: LinearProgressType;
12
12
  noteLeft?: string;
13
13
  noteLeftIcon?: React.ReactNode;
14
14
  noteRight?: string;
package/dist/Card/CardBottomSection.js CHANGED
@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
5
5
 
6
6
  import * as React from 'react';
7
7
  import styled from 'styled-components';
8
- import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';
8
+ import { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
9
9
  import { LaerdalLogo } from '../assets';
10
10
  import { IconButton } from '../Button';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +31,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
31
31
  progressLevel = _ref.progressLevel,
32
32
  progressMax = _ref.progressMax,
33
33
  _ref$progressType = _ref.progressType,
34
- progressType = _ref$progressType === void 0 ? LinearProgressionType.Line : _ref$progressType,
34
+ progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
35
35
  noteLeft = _ref.noteLeft,
36
36
  noteLeftIcon = _ref.noteLeftIcon,
37
37
  noteRight = _ref.noteRight,
@@ -44,10 +44,10 @@ var CardBottomSection = function CardBottomSection(_ref) {
44
44
  disabled: disabled,
45
45
  interactionType: interactionType,
46
46
  children: [haveAtLeastSomething && /*#__PURE__*/_jsx(Divider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(ProgressContainer, {
47
- children: /*#__PURE__*/_jsx(LinearProgression, {
47
+ children: /*#__PURE__*/_jsx(LinearProgress, {
48
48
  size: Size.Small,
49
49
  type: progressType,
50
- variant: LinearProgressionVariant.Normal,
50
+ variant: LinearProgressVariant.Normal,
51
51
  value: progressLevel,
52
52
  max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
53
53
  })
package/dist/Card/CardBottomSection.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgression","LinearProgressionType","LinearProgressionVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n interactionType: InteractionType;\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressionType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logoSrc: string;\n disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n height: 24px;\n margin-top: 24px;\n position: relative;\n color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nconst Divider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\nconst NoteRight = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\n\nconst AuthorName = styled.div`\n flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n ${ButtonRowContainer} {\n ${props => props.interactionType == InteractionType.Clickable ? \n `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n interactionType,\n progressLevel,\n progressMax,\n progressType = LinearProgressionType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {haveAtLeastSomething && <Divider />}\n {progressLevel != undefined && <ProgressContainer>\n <LinearProgression size={Size.Small}\n type={progressType}\n variant={LinearProgressionVariant.Normal}\n value={progressLevel} \n max={progressMax ?? progressLevel} />\n </ProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <NoteLeft>\n {noteLeftIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n </NoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <NoteRight>\n {noteRightIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n </NoteRight>\n )}\n </NotesContainer>}\n\n {authorName && <AuthorContainer disabled={disabled}>\n <AuthorName>{authorName}</AuthorName>\n <LaerdalLogo width='80px' height='43px' />\n </AuthorContainer>}\n\n {actions && <ButtonRowContainer>\n {actions.map(x => (\n <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n {x.icon}\n </IconButton>\n ))}\n </ButtonRowContainer>}\n </Container>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}
1
+ {"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgress","LinearProgressType","LinearProgressVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,YAArC,EAAmDC,eAAnD,EAAoEC,cAApE,EAAoFC,kBAApF,EAAwGC,qBAAxG,EAA+HC,IAA/H,QAA2I,IAA3I;AACA,SAASC,WAAT,QAA4B,WAA5B;AACA,SAASC,UAAT,QAA2B,WAA3B;;;AAyBA,IAAMC,iBAAiB,GAAGX,MAAM,CAACY,GAAV,qEAAvB;AAEA,IAAMC,cAAc,GAAGb,MAAM,CAACY,GAAV,uJAITX,MAAM,CAACa,WAJE,CAApB;AAOA,IAAMC,eAAe,GAAGf,MAAM,CAACY,GAAV,gMAMjB,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,0BACAhB,MAAM,CAACiB,WADP,4EAOP,EAPG;AAAA,CANY,CAArB;AAgBA,IAAMC,OAAO,GAAGnB,MAAM,CAACY,GAAV,4MAESX,MAAM,CAACmB,WAFhB,CAAb;AASA,IAAMC,QAAQ,GAAGrB,MAAM,CAACY,GAAV,qOAAd;AAYA,IAAMU,SAAS,GAAGtB,MAAM,CAACY,GAAV,sOAAf;AAaA,IAAMW,UAAU,GAAGvB,MAAM,CAACY,GAAV,0FAAhB;AAIA,IAAMY,kBAAkB,GAAGxB,MAAM,CAACY,GAAV,oZAMFX,MAAM,CAACmB,WANL,EAkBXnB,MAAM,CAACwB,WAlBI,CAAxB;AAsBA,IAAMC,SAAS,GAAG1B,MAAM,CAACY,GAAV,kLAGH,UAAAI,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,SAArC;AAAA,CAHF,EAKXO,kBALW,EAMT,UAAAR,KAAK;AAAA,SAAIA,KAAK,CAACW,eAAN,IAAyBvB,eAAe,CAACwB,SAAzC,qBACEZ,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,MADnC,SAC+C,EADnD;AAAA,CANI,CAAf;;AAWA,IAAMY,iBAAkE,GAAG,SAArEA,iBAAqE,OAY7C;AAAA,MAX5BF,eAW4B,QAX5BA,eAW4B;AAAA,MAV5BG,aAU4B,QAV5BA,aAU4B;AAAA,MAT5BC,WAS4B,QAT5BA,WAS4B;AAAA,+BAR5BC,YAQ4B;AAAA,MAR5BA,YAQ4B,kCARb1B,kBAAkB,CAAC2B,IAQN;AAAA,MAP5BC,QAO4B,QAP5BA,QAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,SAK4B,QAL5BA,SAK4B;AAAA,MAJ5BC,aAI4B,QAJ5BA,aAI4B;AAAA,MAH5BC,UAG4B,QAH5BA,UAG4B;AAAA,MAF5BC,OAE4B,QAF5BA,OAE4B;AAAA,MAD5BtB,QAC4B,QAD5BA,QAC4B;AAE5B,MAAMuB,oBAAoB,GAAGV,aAAa,IAAIW,SAAjB,IAA8BP,QAA9B,IAA0CC,YAA1C,IAA0DC,SAA1D,IAAuEC,aAAvE,IAAwFC,UAArH;AACA,sBACE,MAAC,SAAD;AAAW,IAAA,QAAQ,EAAErB,QAArB;AAA+B,IAAA,eAAe,EAAEU,eAAhD;AAAA,eACGa,oBAAoB,iBAAI,KAAC,OAAD,KAD3B,EAEGV,aAAa,IAAIW,SAAjB,iBAA8B,KAAC,iBAAD;AAAA,6BAC7B,KAAC,cAAD;AAAgB,QAAA,IAAI,EAAEjC,IAAI,CAACkC,KAA3B;AACgB,QAAA,IAAI,EAAEV,YADtB;AAEgB,QAAA,OAAO,EAAEzB,qBAAqB,CAACoC,MAF/C;AAGgB,QAAA,KAAK,EAAEb,aAHvB;AAIgB,QAAA,GAAG,EAAEC,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiBD;AAJpC;AAD6B,MAFjC,EAUG,CAACI,QAAQ,IAAIC,YAAZ,IAA4BC,SAA5B,IAAyCC,aAA1C,kBAA4D,MAAC,cAAD;AAAA,iBAC1D,CAACH,QAAQ,IAAIC,YAAb,kBACC,MAAC,QAAD;AAAA,mBACGA,YADH,eAEE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAElC,MAAM,CAACa,WAA5B;AAAyC,UAAA,SAAS,EAAEZ,kBAAkB,CAAC0C,IAAvE;AAAA,oBAA8EV;AAA9E,UAFF;AAAA,QAFyD,EAO1D,CAACE,SAAS,IAAIC,aAAd,kBACC,MAAC,SAAD;AAAA,mBACGA,aADH,eAEE,KAAC,YAAD;AAAc,UAAA,KAAK,EAAEpC,MAAM,CAACa,WAA5B;AAAyC,UAAA,SAAS,EAAEZ,kBAAkB,CAAC0C,IAAvE;AAAA,oBAA8ER;AAA9E,UAFF;AAAA,QARyD;AAAA,MAV/D,EAyBGE,UAAU,iBAAI,MAAC,eAAD;AAAiB,MAAA,QAAQ,EAAErB,QAA3B;AAAA,8BACb,KAAC,UAAD;AAAA,kBAAaqB;AAAb,QADa,eAEb,KAAC,WAAD;AAAa,QAAA,KAAK,EAAC,MAAnB;AAA0B,QAAA,MAAM,EAAC;AAAjC,QAFa;AAAA,MAzBjB,EA8BGC,OAAO,iBAAI,KAAC,kBAAD;AAAA,gBACTA,OAAO,CAACM,GAAR,CAAY,UAAAC,CAAC;AAAA,4BACZ,KAAC,UAAD;AAAY,UAAA,QAAQ,EAAE7B,QAAtB;AAAgC,UAAA,OAAO,EAAC,WAAxC;AAAoD,UAAA,KAAK,EAAC,UAA1D;AAAqE,UAAA,MAAM,EAAE,gBAAC8B,CAAD,EAAO;AAACA,YAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,eAAH;AAAsBF,YAAAA,CAAC,CAACG,OAAF;AAAa,WAAxH;AAAA,oBACGH,CAAC,CAACI;AADL,UADY;AAAA,OAAb;AADS,MA9Bd;AAAA,IADF;AAwCD,CAvDD;;;AAhHEpB,EAAAA,a;AACAC,EAAAA,W;AAGAG,EAAAA,Q;AACAC,EAAAA,Y;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAC,EAAAA,U;AACAC,EAAAA,O;AAhBAW,IAAAA,I;AACAD,IAAAA,O;;AAgBAE,EAAAA,O;AACAlC,EAAAA,Q;;AA6JF,eAAeY,iBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n interactionType: InteractionType;\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logoSrc: string;\n disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n height: 24px;\n margin-top: 24px;\n position: relative;\n color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nconst Divider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\nconst NoteRight = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n margin-right: 4px;\n }\n`;\n\nconst AuthorName = styled.div`\n flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n ${ButtonRowContainer} {\n ${props => props.interactionType == InteractionType.Clickable ? \n `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n interactionType,\n progressLevel,\n progressMax,\n progressType = LinearProgressType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {haveAtLeastSomething && <Divider />}\n {progressLevel != undefined && <ProgressContainer>\n <LinearProgress size={Size.Small}\n type={progressType}\n variant={LinearProgressVariant.Normal}\n value={progressLevel}\n max={progressMax ?? progressLevel} />\n </ProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <NoteLeft>\n {noteLeftIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n </NoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <NoteRight>\n {noteRightIcon}\n <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n </NoteRight>\n )}\n </NotesContainer>}\n\n {authorName && <AuthorContainer disabled={disabled}>\n <AuthorName>{authorName}</AuthorName>\n <LaerdalLogo width='80px' height='43px' />\n </AuthorContainer>}\n\n {actions && <ButtonRowContainer>\n {actions.map(x => (\n <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n {x.icon}\n </IconButton>\n ))}\n </ButtonRowContainer>}\n </Container>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}
package/dist/{LinearProgression/LinearProgression.cjs → LinearProgress/LinearProgress.cjs} RENAMED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.LinearProgressionVariant = exports.LinearProgressionType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
8
+ exports.default = exports.LinearProgressVariant = exports.LinearProgressType = exports.LineFill = exports.Line = exports.Dot = exports.Bar = void 0;
9
9
 
10
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
11
 
@@ -21,7 +21,7 @@ var _styles = require("../styles");
21
21
 
22
22
  var _jsxRuntime = require("react/jsx-runtime");
23
23
 
24
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
25
25
 
26
26
  var Bar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ", ";\n\n &.active {\n background-color: ", ";\n }\n\n &.current {\n background-color: ", ";\n }\n\n &.inverted {\n background-color: ", ";\n }\n\n &.inverted.active {\n background-color: ", ";\n }\n\n &.inverted.current {\n background-color: ", ";\n }\n\n"])), _styles.COLORS.neutral_100, _styles.COLORS.accent1_400, _styles.COLORS.accent1_800, _styles.COLORS.neutral_600, _styles.COLORS.accent1_400, _styles.COLORS.white);
27
27
 
@@ -39,32 +39,37 @@ var Line = _styledComponents.default.div(_templateObject4 || (_templateObject4 =
39
39
 
40
40
  exports.Line = Line;
41
41
 
42
- var Wrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ", ":first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ", ":first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ", ":first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n"])), Bar, Bar, Bar, Bar, Bar, Bar);
42
+ var Label = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), _styles.COLORS.black);
43
43
 
44
- var LinearProgressionType;
45
- exports.LinearProgressionType = LinearProgressionType;
44
+ var Content = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n flex-direction: row;\n height: 16px;\n"])));
46
45
 
47
- (function (LinearProgressionType) {
48
- LinearProgressionType["Dots"] = "dots";
49
- LinearProgressionType["Line"] = "line";
50
- LinearProgressionType["Bars"] = "bars";
51
- })(LinearProgressionType || (exports.LinearProgressionType = LinearProgressionType = {}));
46
+ var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &.inverted {\n ", " {\n color: ", ";\n }\n }\n\n &.small {\n ", " {\n ", "\n }\n\n ", " {\n gap: 4px;\n\n ", ":first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n }\n\n &.medium {\n ", " {\n ", "\n }\n\n ", " {\n gap: 6px;\n\n ", ":first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n }\n\n &.large {\n ", " {\n ", "\n }\n\n ", " {\n gap: 8px;\n\n ", ":first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n }\n"])), Label, _styles.COLORS.white, Label, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), Content, Bar, Bar);
52
47
 
53
- var LinearProgressionVariant;
54
- exports.LinearProgressionVariant = LinearProgressionVariant;
48
+ var LinearProgressType;
49
+ exports.LinearProgressType = LinearProgressType;
55
50
 
56
- (function (LinearProgressionVariant) {
57
- LinearProgressionVariant["Normal"] = "normal";
58
- LinearProgressionVariant["Inverted"] = "inverted";
59
- })(LinearProgressionVariant || (exports.LinearProgressionVariant = LinearProgressionVariant = {}));
51
+ (function (LinearProgressType) {
52
+ LinearProgressType["Dots"] = "dots";
53
+ LinearProgressType["Line"] = "line";
54
+ LinearProgressType["Bars"] = "bars";
55
+ })(LinearProgressType || (exports.LinearProgressType = LinearProgressType = {}));
60
56
 
61
- var LinearProgression = function LinearProgression(_ref) {
57
+ var LinearProgressVariant;
58
+ exports.LinearProgressVariant = LinearProgressVariant;
59
+
60
+ (function (LinearProgressVariant) {
61
+ LinearProgressVariant["Normal"] = "normal";
62
+ LinearProgressVariant["Inverted"] = "inverted";
63
+ })(LinearProgressVariant || (exports.LinearProgressVariant = LinearProgressVariant = {}));
64
+
65
+ var LinearProgress = function LinearProgress(_ref) {
62
66
  var _ref$size = _ref.size,
63
67
  size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
64
68
  _ref$type = _ref.type,
65
- type = _ref$type === void 0 ? LinearProgressionType.Line : _ref$type,
69
+ type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
66
70
  _ref$variant = _ref.variant,
67
- variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
71
+ variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
72
+ label = _ref.label,
68
73
  value = _ref.value,
69
74
  max = _ref.max;
70
75
 
@@ -103,30 +108,35 @@ var LinearProgression = function LinearProgression(_ref) {
103
108
 
104
109
  var render = function render() {
105
110
  switch (type) {
106
- case LinearProgressionType.Bars:
111
+ case LinearProgressType.Bars:
107
112
  return renderBars();
108
113
 
109
- case LinearProgressionType.Dots:
114
+ case LinearProgressType.Dots:
110
115
  return renderDots();
111
116
 
112
- case LinearProgressionType.Line:
117
+ case LinearProgressType.Line:
113
118
  default:
114
119
  return renderLine();
115
120
  }
116
121
  };
117
122
 
118
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
123
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
119
124
  className: "".concat(size, " ").concat(type, " ").concat(variant),
120
- children: render()
125
+ children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
126
+ children: label
127
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
128
+ children: render()
129
+ })]
121
130
  });
122
131
  };
123
132
 
124
- LinearProgression.propTypes = {
133
+ LinearProgress.propTypes = {
125
134
  type: _propTypes.default.oneOf(["dots", "line", "bars"]),
126
135
  variant: _propTypes.default.oneOf(["normal", "inverted"]),
136
+ label: _propTypes.default.string,
127
137
  value: _propTypes.default.number.isRequired,
128
138
  max: _propTypes.default.number.isRequired
129
139
  };
130
- var _default = LinearProgression;
140
+ var _default = LinearProgress;
131
141
  exports.default = _default;
132
- //# sourceMappingURL=LinearProgression.cjs.map
142
+ //# sourceMappingURL=LinearProgress.cjs.map
package/dist/LinearProgress/LinearProgress.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/LinearProgress/LinearProgress.tsx"],"names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","ComponentTextStyle","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Size","Medium","type","variant","Normal","label","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ${COLORS.neutral_100};\n\n &.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.current {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_600};\n }\n\n &.inverted.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current {\n background-color: ${COLORS.white};\n }\n\n`;\n\nexport const Dot = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ${COLORS.neutral_400};\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ${COLORS.accent1_600};\n }\n\n &.current:after {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted:after {\n background-color: ${COLORS.neutral_400};\n }\n\n &.inverted.active:after {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current:after {\n background-color: ${COLORS.white};\n }\n`;\n\nexport const LineFill = styled.div`\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n`;\n\nexport const Line = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ${LineFill} {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ${COLORS.neutral_100};\n\n ${LineFill} {\n background-color: ${COLORS.accent1_500};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_700};\n\n &:after,\n &:before {\n background-color: ${COLORS.neutral_400};\n }\n\n ${LineFill} {\n background-color: ${COLORS.accent1_400};\n }\n }\n`;\n\nconst Label = styled.div`\n color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n display: flex;\n align-items: center;\n flex-direction: row;\n height: 16px;\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &.inverted {\n ${Label} {\n color: ${COLORS.white};\n }\n }\n\n &.small {\n ${Label} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${Content} {\n gap: 4px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n }\n\n &.medium {\n ${Label} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${Content} {\n gap: 6px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n }\n\n &.large {\n ${Label} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${Content} {\n gap: 8px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n }\n`;\n\n\nexport enum LinearProgressType {\n Dots = 'dots',\n Line = 'line',\n Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n Normal = 'normal',\n Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: LinearProgressType;\n variant?: LinearProgressVariant;\n\n label?: string;\n\n value: number;\n max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n size = Size.Medium,\n type = LinearProgressType.Line,\n variant = LinearProgressVariant.Normal,\n label,\n value,\n max\n }) => {\n\n const renderBars = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Bar key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderDots = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Dot key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderLine = () =>\n <>\n <Line className={`${variant} ${size}`}>\n <LineFill style={{width: `${value / max * 100}%`}}/>\n </Line>\n </>\n\n\n const render = () => {\n switch (type) {\n case LinearProgressType.Bars:\n return renderBars();\n case LinearProgressType.Dots:\n return renderDots();\n case LinearProgressType.Line:\n default:\n return renderLine();\n }\n }\n\n return (\n <Wrapper className={`${size} ${type} ${variant}`}>\n {label && <Label>{label}</Label>}\n <Content>\n {render()}\n </Content>\n </Wrapper>\n )\n};\n\nexport default LinearProgress;\n"],"file":"LinearProgress.cjs"}
package/dist/{LinearProgression/LinearProgression.d.ts → LinearProgress/LinearProgress.d.ts} RENAMED
@@ -4,21 +4,22 @@ export declare const Bar: import("styled-components").StyledComponent<"div", any
4
4
  export declare const Dot: import("styled-components").StyledComponent<"div", any, {}, never>;
5
5
  export declare const LineFill: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export declare const Line: import("styled-components").StyledComponent<"div", any, {}, never>;
7
- export declare enum LinearProgressionType {
7
+ export declare enum LinearProgressType {
8
8
  Dots = "dots",
9
9
  Line = "line",
10
10
  Bars = "bars"
11
11
  }
12
- export declare enum LinearProgressionVariant {
12
+ export declare enum LinearProgressVariant {
13
13
  Normal = "normal",
14
14
  Inverted = "inverted"
15
15
  }
16
- export interface LinearProgressionProps {
16
+ export interface LinearProgressProps {
17
17
  size?: Size.Small | Size.Medium | Size.Large;
18
- type?: LinearProgressionType;
19
- variant?: LinearProgressionVariant;
18
+ type?: LinearProgressType;
19
+ variant?: LinearProgressVariant;
20
+ label?: string;
20
21
  value: number;
21
22
  max: number;
22
23
  }
23
- declare const LinearProgression: React.FunctionComponent<LinearProgressionProps>;
24
- export default LinearProgression;
24
+ declare const LinearProgress: React.FunctionComponent<LinearProgressProps>;
25
+ export default LinearProgress;
package/dist/{LinearProgression/LinearProgression.js → LinearProgress/LinearProgress.js} RENAMED
@@ -1,41 +1,45 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
2
  import _pt from "prop-types";
3
3
 
4
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
4
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
5
5
 
6
6
  import React from 'react';
7
7
  import { Size } from '../types';
8
8
  import styled from 'styled-components';
9
- import { COLORS } from '../styles';
9
+ import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
11
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
12
+ import { jsxs as _jsxs } from "react/jsx-runtime";
12
13
  export var Bar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ", ";\n\n &.active {\n background-color: ", ";\n }\n\n &.current {\n background-color: ", ";\n }\n\n &.inverted {\n background-color: ", ";\n }\n\n &.inverted.active {\n background-color: ", ";\n }\n\n &.inverted.current {\n background-color: ", ";\n }\n\n"])), COLORS.neutral_100, COLORS.accent1_400, COLORS.accent1_800, COLORS.neutral_600, COLORS.accent1_400, COLORS.white);
13
14
  export var Dot = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ", ";\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ", ";\n }\n\n &.current:after {\n background-color: ", ";\n }\n\n &.inverted:after {\n background-color: ", ";\n }\n\n &.inverted.active:after {\n background-color: ", ";\n }\n\n &.inverted.current:after {\n background-color: ", ";\n }\n"])), COLORS.neutral_400, COLORS.accent1_600, COLORS.accent1_800, COLORS.neutral_400, COLORS.accent1_400, COLORS.white);
14
15
  export var LineFill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n"])));
15
16
  export var Line = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ", ";\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ", " {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ", " {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ", " {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ", ";\n\n ", " {\n background-color: ", ";\n }\n\n &.inverted {\n background-color: ", ";\n\n &:after,\n &:before {\n background-color: ", ";\n }\n\n ", " {\n background-color: ", ";\n }\n }\n"])), COLORS.neutral_500, COLORS.neutral_500, LineFill, LineFill, LineFill, COLORS.neutral_100, LineFill, COLORS.accent1_500, COLORS.neutral_700, COLORS.neutral_400, LineFill, COLORS.accent1_400);
16
- var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ", ":first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ", ":first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ", ":first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n"])), Bar, Bar, Bar, Bar, Bar, Bar);
17
- export var LinearProgressionType;
17
+ var Label = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n"])), COLORS.black);
18
+ var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: row;\n height: 16px;\n"])));
19
+ var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &.inverted {\n ", " {\n color: ", ";\n }\n }\n\n &.small {\n ", " {\n ", "\n }\n\n ", " {\n gap: 4px;\n\n ", ":first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n }\n\n &.medium {\n ", " {\n ", "\n }\n\n ", " {\n gap: 6px;\n\n ", ":first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n }\n\n &.large {\n ", " {\n ", "\n }\n\n ", " {\n gap: 8px;\n\n ", ":first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ", ":last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n }\n"])), Label, COLORS.white, Label, ComponentSStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentMStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentLStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar);
20
+ export var LinearProgressType;
18
21
 
19
- (function (LinearProgressionType) {
20
- LinearProgressionType["Dots"] = "dots";
21
- LinearProgressionType["Line"] = "line";
22
- LinearProgressionType["Bars"] = "bars";
23
- })(LinearProgressionType || (LinearProgressionType = {}));
22
+ (function (LinearProgressType) {
23
+ LinearProgressType["Dots"] = "dots";
24
+ LinearProgressType["Line"] = "line";
25
+ LinearProgressType["Bars"] = "bars";
26
+ })(LinearProgressType || (LinearProgressType = {}));
24
27
 
25
- export var LinearProgressionVariant;
28
+ export var LinearProgressVariant;
26
29
 
27
- (function (LinearProgressionVariant) {
28
- LinearProgressionVariant["Normal"] = "normal";
29
- LinearProgressionVariant["Inverted"] = "inverted";
30
- })(LinearProgressionVariant || (LinearProgressionVariant = {}));
30
+ (function (LinearProgressVariant) {
31
+ LinearProgressVariant["Normal"] = "normal";
32
+ LinearProgressVariant["Inverted"] = "inverted";
33
+ })(LinearProgressVariant || (LinearProgressVariant = {}));
31
34
 
32
- var LinearProgression = function LinearProgression(_ref) {
35
+ var LinearProgress = function LinearProgress(_ref) {
33
36
  var _ref$size = _ref.size,
34
37
  size = _ref$size === void 0 ? Size.Medium : _ref$size,
35
38
  _ref$type = _ref.type,
36
- type = _ref$type === void 0 ? LinearProgressionType.Line : _ref$type,
39
+ type = _ref$type === void 0 ? LinearProgressType.Line : _ref$type,
37
40
  _ref$variant = _ref.variant,
38
- variant = _ref$variant === void 0 ? LinearProgressionVariant.Normal : _ref$variant,
41
+ variant = _ref$variant === void 0 ? LinearProgressVariant.Normal : _ref$variant,
42
+ label = _ref.label,
39
43
  value = _ref.value,
40
44
  max = _ref.max;
41
45
 
@@ -74,29 +78,34 @@ var LinearProgression = function LinearProgression(_ref) {
74
78
 
75
79
  var render = function render() {
76
80
  switch (type) {
77
- case LinearProgressionType.Bars:
81
+ case LinearProgressType.Bars:
78
82
  return renderBars();
79
83
 
80
- case LinearProgressionType.Dots:
84
+ case LinearProgressType.Dots:
81
85
  return renderDots();
82
86
 
83
- case LinearProgressionType.Line:
87
+ case LinearProgressType.Line:
84
88
  default:
85
89
  return renderLine();
86
90
  }
87
91
  };
88
92
 
89
- return /*#__PURE__*/_jsx(Wrapper, {
93
+ return /*#__PURE__*/_jsxs(Wrapper, {
90
94
  className: "".concat(size, " ").concat(type, " ").concat(variant),
91
- children: render()
95
+ children: [label && /*#__PURE__*/_jsx(Label, {
96
+ children: label
97
+ }), /*#__PURE__*/_jsx(Content, {
98
+ children: render()
99
+ })]
92
100
  });
93
101
  };
94
102
 
95
- LinearProgression.propTypes = {
103
+ LinearProgress.propTypes = {
96
104
  type: _pt.oneOf(["dots", "line", "bars"]),
97
105
  variant: _pt.oneOf(["normal", "inverted"]),
106
+ label: _pt.string,
98
107
  value: _pt.number.isRequired,
99
108
  max: _pt.number.isRequired
100
109
  };
101
- export default LinearProgression;
102
- //# sourceMappingURL=LinearProgression.js.map
110
+ export default LinearProgress;
111
+ //# sourceMappingURL=LinearProgress.js.map
package/dist/LinearProgress/LinearProgress.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/LinearProgress/LinearProgress.tsx"],"names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Label","black","Content","Wrapper","Regular","LinearProgressType","LinearProgressVariant","LinearProgress","size","Medium","type","variant","Normal","label","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\n\nexport const Bar = styled.div`\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ${COLORS.neutral_100};\n\n &.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.current {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_600};\n }\n\n &.inverted.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current {\n background-color: ${COLORS.white};\n }\n\n`;\n\nexport const Dot = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ${COLORS.neutral_400};\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ${COLORS.accent1_600};\n }\n\n &.current:after {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted:after {\n background-color: ${COLORS.neutral_400};\n }\n\n &.inverted.active:after {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current:after {\n background-color: ${COLORS.white};\n }\n`;\n\nexport const LineFill = styled.div`\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n`;\n\nexport const Line = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ${LineFill} {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ${COLORS.neutral_100};\n\n ${LineFill} {\n background-color: ${COLORS.accent1_500};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_700};\n\n &:after,\n &:before {\n background-color: ${COLORS.neutral_400};\n }\n\n ${LineFill} {\n background-color: ${COLORS.accent1_400};\n }\n }\n`;\n\nconst Label = styled.div`\n color: ${COLORS.black};\n`;\n\nconst Content = styled.div`\n display: flex;\n align-items: center;\n flex-direction: row;\n height: 16px;\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &.inverted {\n ${Label} {\n color: ${COLORS.white};\n }\n }\n\n &.small {\n ${Label} {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${Content} {\n gap: 4px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n }\n }\n\n &.medium {\n ${Label} {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${Content} {\n gap: 6px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n }\n\n &.large {\n ${Label} {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n ${Content} {\n gap: 8px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n }\n`;\n\n\nexport enum LinearProgressType {\n Dots = 'dots',\n Line = 'line',\n Bars = 'bars',\n}\n\nexport enum LinearProgressVariant {\n Normal = 'normal',\n Inverted = 'inverted',\n}\n\nexport interface LinearProgressProps {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: LinearProgressType;\n variant?: LinearProgressVariant;\n\n label?: string;\n\n value: number;\n max: number;\n}\n\nconst LinearProgress: React.FunctionComponent<LinearProgressProps> = ({\n size = Size.Medium,\n type = LinearProgressType.Line,\n variant = LinearProgressVariant.Normal,\n label,\n value,\n max\n }) => {\n\n const renderBars = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Bar key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderDots = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Dot key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderLine = () =>\n <>\n <Line className={`${variant} ${size}`}>\n <LineFill style={{width: `${value / max * 100}%`}}/>\n </Line>\n </>\n\n\n const render = () => {\n switch (type) {\n case LinearProgressType.Bars:\n return renderBars();\n case LinearProgressType.Dots:\n return renderDots();\n case LinearProgressType.Line:\n default:\n return renderLine();\n }\n }\n\n return (\n <Wrapper className={`${size} ${type} ${variant}`}>\n {label && <Label>{label}</Label>}\n <Content>\n {render()}\n </Content>\n </Wrapper>\n )\n};\n\nexport default LinearProgress;\n"],"file":"LinearProgress.js"}
package/dist/{LinearProgression → LinearProgress}/index.cjs RENAMED
@@ -5,26 +5,26 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- Object.defineProperty(exports, "LinearProgression", {
8
+ Object.defineProperty(exports, "LinearProgress", {
9
9
  enumerable: true,
10
10
  get: function get() {
11
- return _LinearProgression.default;
11
+ return _LinearProgress.default;
12
12
  }
13
13
  });
14
- Object.defineProperty(exports, "LinearProgressionType", {
14
+ Object.defineProperty(exports, "LinearProgressType", {
15
15
  enumerable: true,
16
16
  get: function get() {
17
- return _LinearProgression.LinearProgressionType;
17
+ return _LinearProgress.LinearProgressType;
18
18
  }
19
19
  });
20
- Object.defineProperty(exports, "LinearProgressionVariant", {
20
+ Object.defineProperty(exports, "LinearProgressVariant", {
21
21
  enumerable: true,
22
22
  get: function get() {
23
- return _LinearProgression.LinearProgressionVariant;
23
+ return _LinearProgress.LinearProgressVariant;
24
24
  }
25
25
  });
26
26
 
27
- var _LinearProgression = _interopRequireWildcard(require("./LinearProgression"));
27
+ var _LinearProgress = _interopRequireWildcard(require("./LinearProgress"));
28
28
 
29
29
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
30
30
 
package/dist/LinearProgress/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/LinearProgress/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"file":"index.cjs"}
package/dist/LinearProgress/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import LinearProgress, { LinearProgressType, LinearProgressVariant } from './LinearProgress';
2
+ export { LinearProgressType, LinearProgressVariant };
3
+ export { LinearProgress };
package/dist/LinearProgress/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import LinearProgress, { LinearProgressType, LinearProgressVariant } from './LinearProgress';
2
+ export { LinearProgressType, LinearProgressVariant };
3
+ export { LinearProgress };
4
+ //# sourceMappingURL=index.js.map
package/dist/LinearProgress/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/LinearProgress/index.ts"],"names":["LinearProgress","LinearProgressType","LinearProgressVariant"],"mappings":"AAAA,OAAOA,cAAP,IAAwBC,kBAAxB,EAA4CC,qBAA5C,QAAwE,kBAAxE;AAEA,SAAQD,kBAAR,EAA4BC,qBAA5B;AACA,SAAQF,cAAR","sourcesContent":["import LinearProgress, {LinearProgressType, LinearProgressVariant} from './LinearProgress';\n\nexport {LinearProgressType, LinearProgressVariant};\nexport {LinearProgress}\n"],"file":"index.js"}
package/dist/index.cjs CHANGED
@@ -420,15 +420,15 @@ Object.keys(_QuizButton).forEach(function (key) {
420
420
  });
421
421
  });
422
422
 
423
- var _LinearProgression = require("./LinearProgression");
423
+ var _LinearProgress = require("./LinearProgress");
424
424
 
425
- Object.keys(_LinearProgression).forEach(function (key) {
425
+ Object.keys(_LinearProgress).forEach(function (key) {
426
426
  if (key === "default" || key === "__esModule") return;
427
- if (key in exports && exports[key] === _LinearProgression[key]) return;
427
+ if (key in exports && exports[key] === _LinearProgress[key]) return;
428
428
  Object.defineProperty(exports, key, {
429
429
  enumerable: true,
430
430
  get: function get() {
431
- return _LinearProgression[key];
431
+ return _LinearProgress[key];
432
432
  }
433
433
  });
434
434
  });
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\n"],"file":"index.cjs"}
package/dist/index.d.ts CHANGED
@@ -30,7 +30,7 @@ export * from './Accordion';
30
30
  export * from './Tooltips';
31
31
  export * from './common';
32
32
  export * from './QuizButton';
33
- export * from './LinearProgression';
33
+ export * from './LinearProgress';
34
34
  export * from './SegmentControl';
35
35
  export * from './Card';
36
36
  export * from './Tag';
package/dist/index.js CHANGED
@@ -30,7 +30,7 @@ export * from './Accordion';
30
30
  export * from './Tooltips';
31
31
  export * from './common';
32
32
  export * from './QuizButton';
33
- export * from './LinearProgression';
33
+ export * from './LinearProgress';
34
34
  export * from './SegmentControl';
35
35
  export * from './Card';
36
36
  export * from './Tag';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,kBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd;AACA,cAAc,OAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgress';\nexport * from './SegmentControl';\nexport * from './Card';\nexport * from './Tag';\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.5.1-dev.22.full",
3
+ "version": "1.5.1-dev.24.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [
package/dist/LinearProgression/LinearProgression.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/LinearProgression.tsx"],"names":["Bar","styled","div","COLORS","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Wrapper","LinearProgressionType","LinearProgressionVariant","LinearProgression","size","Size","Medium","type","variant","Normal","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\nexport const Bar = styled.div`\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ${COLORS.neutral_100};\n\n &.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.current {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_600};\n }\n\n &.inverted.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current {\n background-color: ${COLORS.white};\n }\n\n`;\n\nexport const Dot = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ${COLORS.neutral_400};\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ${COLORS.accent1_600};\n }\n\n &.current:after {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted:after {\n background-color: ${COLORS.neutral_400};\n }\n\n &.inverted.active:after {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current:after {\n background-color: ${COLORS.white};\n }\n`;\n\nexport const LineFill = styled.div`\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n`;\n\nexport const Line = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ${LineFill} {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ${COLORS.neutral_100};\n\n ${LineFill} {\n background-color: ${COLORS.accent1_500};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_700};\n\n &:after,\n &:before {\n background-color: ${COLORS.neutral_400};\n }\n\n ${LineFill} {\n background-color: ${COLORS.accent1_400};\n }\n }\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n`;\n\nexport enum LinearProgressionType {\n Dots = 'dots',\n Line = 'line',\n Bars = 'bars',\n}\n\nexport enum LinearProgressionVariant {\n Normal = 'normal',\n Inverted = 'inverted',\n}\n\nexport interface LinearProgressionProps {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: LinearProgressionType;\n variant?: LinearProgressionVariant;\n\n value: number;\n max: number;\n}\n\nconst LinearProgression: React.FunctionComponent<LinearProgressionProps> = ({\n size = Size.Medium,\n type = LinearProgressionType.Line,\n variant = LinearProgressionVariant.Normal,\n value,\n max\n }) => {\n\n const renderBars = () => (\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Bar key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n )\n\n\n const renderDots = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Dot key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderLine = () =>\n <>\n <Line className={`${variant} ${size}`}>\n <LineFill style={{width: `${value / max * 100}%`}}/>\n </Line>\n </>\n\n\n const render = () => {\n switch (type) {\n case LinearProgressionType.Bars:\n return renderBars();\n case LinearProgressionType.Dots:\n return renderDots();\n case LinearProgressionType.Line:\n default:\n return renderLine();\n }\n }\n\n return (\n <Wrapper className={`${size} ${type} ${variant}`}>\n {render()}\n </Wrapper>\n )\n};\n\nexport default LinearProgression;\n"],"file":"LinearProgression.cjs"}
package/dist/LinearProgression/LinearProgression.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/LinearProgression.tsx"],"names":["React","Size","styled","COLORS","Bar","div","neutral_100","accent1_400","accent1_800","neutral_600","white","Dot","neutral_400","accent1_600","LineFill","Line","neutral_500","accent1_500","neutral_700","Wrapper","LinearProgressionType","LinearProgressionVariant","LinearProgression","size","Medium","type","variant","Normal","value","max","renderBars","Array","from","keys","map","i","Math","ceil","renderDots","renderLine","width","render","Bars","Dots"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS} from '../styles';\n\nexport const Bar = styled.div`\n flex: 1;\n height: 6px;\n\n &.small {\n height: 6px;\n }\n\n &.medium {\n height: 8px;\n }\n\n &.large {\n height: 12px;\n }\n\n background-color: ${COLORS.neutral_100};\n\n &.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.current {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_600};\n }\n\n &.inverted.active {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current {\n background-color: ${COLORS.white};\n }\n\n`;\n\nexport const Dot = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n\n\n &:after {\n content: '';\n display: block;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ${COLORS.neutral_400};\n }\n\n &.small {\n &:after {\n width: 6px;\n height: 6px;\n }\n\n &.current:after {\n width: 10px;\n height: 10px;\n }\n }\n\n &.medium {\n &:after {\n width: 8px;\n height: 8px;\n }\n\n &.current:after {\n width: 12px;\n height: 12px;\n }\n }\n\n &.large {\n &:after {\n width: 12px;\n height: 12px;\n }\n\n &.current:after {\n width: 16px;\n height: 16px;\n }\n }\n\n\n &.active:after {\n background-color: ${COLORS.accent1_600};\n }\n\n &.current:after {\n background-color: ${COLORS.accent1_800};\n }\n\n &.inverted:after {\n background-color: ${COLORS.neutral_400};\n }\n\n &.inverted.active:after {\n background-color: ${COLORS.accent1_400};\n }\n\n &.inverted.current:after {\n background-color: ${COLORS.white};\n }\n`;\n\nexport const LineFill = styled.div`\n height: 100%;\n max-width: 100%;\n position: absolute;\n z-index: 1;\n`;\n\nexport const Line = styled.div`\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n right: 0;\n }\n\n &:before {\n content: '';\n display: block;\n height: 100%;\n background-color: ${COLORS.neutral_500};\n position: absolute;\n left: 0;\n }\n\n &.small {\n height: 6px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 3px;\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n &:before {\n width: 3px;\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n }\n\n &.medium {\n height: 8px;\n border-radius: 4px;\n\n ${LineFill} {\n border-radius: 4px;\n }\n\n &:after {\n width: 4px;\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n\n &:before {\n width: 4px;\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n }\n\n &.large {\n height: 12px;\n border-radius: 6px;\n\n ${LineFill} {\n border-radius: 6px;\n }\n\n &:after {\n width: 6px;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n\n &:before {\n width: 6px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n }\n\n background-color: ${COLORS.neutral_100};\n\n ${LineFill} {\n background-color: ${COLORS.accent1_500};\n }\n\n &.inverted {\n background-color: ${COLORS.neutral_700};\n\n &:after,\n &:before {\n background-color: ${COLORS.neutral_400};\n }\n\n ${LineFill} {\n background-color: ${COLORS.accent1_400};\n }\n }\n`;\n\nconst Wrapper = styled.div`\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: 4px;\n height: 16px;\n\n &.small {\n gap: 4px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 6px;\n border-bottom-left-radius: 6px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 6px;\n border-bottom-right-radius: 6px;\n }\n\n }\n\n &.medium {\n gap: 6px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 8px;\n border-bottom-left-radius: 8px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 8px;\n border-bottom-right-radius: 8px;\n }\n }\n\n &.large {\n gap: 8px;\n\n ${Bar}:first-of-type {\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n }\n\n ${Bar}:last-of-type {\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n }\n }\n`;\n\nexport enum LinearProgressionType {\n Dots = 'dots',\n Line = 'line',\n Bars = 'bars',\n}\n\nexport enum LinearProgressionVariant {\n Normal = 'normal',\n Inverted = 'inverted',\n}\n\nexport interface LinearProgressionProps {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: LinearProgressionType;\n variant?: LinearProgressionVariant;\n\n value: number;\n max: number;\n}\n\nconst LinearProgression: React.FunctionComponent<LinearProgressionProps> = ({\n size = Size.Medium,\n type = LinearProgressionType.Line,\n variant = LinearProgressionVariant.Normal,\n value,\n max\n }) => {\n\n const renderBars = () => (\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Bar key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n )\n\n\n const renderDots = () =>\n <>\n {Array.from(Array(max).keys()).map(i => (\n <Dot key={i}\n className={`${Math.ceil(value) >= i + 1 ? 'active' : ''} ${Math.ceil(value) === i + 1 ? 'current' : ''} ${variant} ${size}`}/>\n ))}\n </>\n\n const renderLine = () =>\n <>\n <Line className={`${variant} ${size}`}>\n <LineFill style={{width: `${value / max * 100}%`}}/>\n </Line>\n </>\n\n\n const render = () => {\n switch (type) {\n case LinearProgressionType.Bars:\n return renderBars();\n case LinearProgressionType.Dots:\n return renderDots();\n case LinearProgressionType.Line:\n default:\n return renderLine();\n }\n }\n\n return (\n <Wrapper className={`${size} ${type} ${variant}`}>\n {render()}\n </Wrapper>\n )\n};\n\nexport default LinearProgression;\n"],"file":"LinearProgression.js"}
package/dist/LinearProgression/index.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["import LinearProgression, {LinearProgressionType, LinearProgressionVariant} from './LinearProgression';\n\nexport {LinearProgressionType, LinearProgressionVariant};\nexport {LinearProgression}\n"],"file":"index.cjs"}
package/dist/LinearProgression/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import LinearProgression, { LinearProgressionType, LinearProgressionVariant } from './LinearProgression';
2
- export { LinearProgressionType, LinearProgressionVariant };
3
- export { LinearProgression };
package/dist/LinearProgression/index.js DELETED
@@ -1,4 +0,0 @@
1
- import LinearProgression, { LinearProgressionType, LinearProgressionVariant } from './LinearProgression';
2
- export { LinearProgressionType, LinearProgressionVariant };
3
- export { LinearProgression };
4
- //# sourceMappingURL=index.js.map
package/dist/LinearProgression/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/LinearProgression/index.ts"],"names":["LinearProgression","LinearProgressionType","LinearProgressionVariant"],"mappings":"AAAA,OAAOA,iBAAP,IAA2BC,qBAA3B,EAAkDC,wBAAlD,QAAiF,qBAAjF;AAEA,SAAQD,qBAAR,EAA+BC,wBAA/B;AACA,SAAQF,iBAAR","sourcesContent":["import LinearProgression, {LinearProgressionType, LinearProgressionVariant} from './LinearProgression';\n\nexport {LinearProgressionType, LinearProgressionVariant};\nexport {LinearProgression}\n"],"file":"index.js"}