@laerdal/life-react-components 1.5.1-dev.23 → 1.5.1-dev.25
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.
- package/dist/Card/CardBottomSection.cjs +3 -3
- package/dist/Card/CardBottomSection.cjs.map +1 -1
- package/dist/Card/CardBottomSection.d.ts +2 -2
- package/dist/Card/CardBottomSection.js +4 -4
- package/dist/Card/CardBottomSection.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +1 -1
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +1 -1
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/{LinearProgression/LinearProgression.cjs → LinearProgress/LinearProgress.cjs} +37 -27
- package/dist/LinearProgress/LinearProgress.cjs.map +1 -0
- package/dist/{LinearProgression/LinearProgression.d.ts → LinearProgress/LinearProgress.d.ts} +8 -7
- package/dist/{LinearProgression/LinearProgression.js → LinearProgress/LinearProgress.js} +34 -25
- package/dist/LinearProgress/LinearProgress.js.map +1 -0
- package/dist/{LinearProgression → LinearProgress}/index.cjs +7 -7
- package/dist/LinearProgress/index.cjs.map +1 -0
- package/dist/LinearProgress/index.d.ts +3 -0
- package/dist/LinearProgress/index.js +4 -0
- package/dist/LinearProgress/index.js.map +1 -0
- package/dist/Modals/ModalContainer.cjs +6 -3
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.d.ts +1 -0
- package/dist/Modals/ModalContainer.js +6 -3
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +22 -3
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.d.ts +2 -0
- package/dist/Modals/ModalDialog.js +23 -4
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs +11 -7
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.d.ts +1 -0
- package/dist/Modals/ModalStyles.js +7 -6
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/SegmentControl/SegmentControl.cjs +1 -1
- package/dist/SegmentControl/SegmentControl.cjs.map +1 -1
- package/dist/SegmentControl/SegmentControl.js +1 -1
- package/dist/SegmentControl/SegmentControl.js.map +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/LinearProgression/LinearProgression.cjs.map +0 -1
- package/dist/LinearProgression/LinearProgression.js.map +0 -1
- package/dist/LinearProgression/index.cjs.map +0 -1
- package/dist/LinearProgression/index.d.ts +0 -3
- package/dist/LinearProgression/index.js +0 -4
- package/dist/LinearProgression/index.js.map +0 -1
|
@@ -24,6 +24,7 @@ export declare const CloseButtonWrapper: import("styled-components").StyledCompo
|
|
|
24
24
|
size?: Size | undefined;
|
|
25
25
|
hasImage?: boolean | undefined;
|
|
26
26
|
}, never>;
|
|
27
|
+
export declare const HeaderIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
27
28
|
export declare const BackButtonWrapper: import("styled-components").StyledComponent<"div", any, {
|
|
28
29
|
size?: Size | undefined;
|
|
29
30
|
hasImage?: boolean | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
|
|
4
4
|
|
|
5
5
|
import styled, { css } from 'styled-components';
|
|
6
6
|
import { COLORS } from '..';
|
|
@@ -28,11 +28,12 @@ export var ModalHoverModifier = styled.div(_templateObject8 || (_templateObject8
|
|
|
28
28
|
export var CloseButtonWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n button {\n ", "\n }\n"])), function (props) {
|
|
29
29
|
return props.hasImage ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n margin: -12px -12px 0 0 !important;\n "]))) : css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n left: unset;\n "])));
|
|
30
30
|
});
|
|
31
|
-
export var
|
|
32
|
-
export var
|
|
31
|
+
export var HeaderIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n button:hover {\n cursor: pointer !important;\n }\n"])));
|
|
32
|
+
export var BackButtonWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n button {\n margin: -12px 0 0 -12px !important;\n }\n"])));
|
|
33
|
+
export var ModalTitle = styled.h5(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n margin: 0;\n font-size: ", ";\n font-weight: bold;\n"])), function (props) {
|
|
33
34
|
return props.fontSize || '1.25em';
|
|
34
35
|
});
|
|
35
|
-
export var ModalNoteSection = styled.section(
|
|
36
|
+
export var ModalNoteSection = styled.section(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n background-color: ", ";\n font-size: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n display: flex;\n flex-direction: row;\n padding: ", ";\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ", ";\n }\n"])), function (props) {
|
|
36
37
|
return getBackgroundColor(props.state);
|
|
37
38
|
}, function (props) {
|
|
38
39
|
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "16px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '20px' : '18px';
|
|
@@ -45,12 +46,12 @@ export var ModalNoteSection = styled.section(_templateObject14 || (_templateObje
|
|
|
45
46
|
}, function (props) {
|
|
46
47
|
return getNoteMessageColor(props.state);
|
|
47
48
|
});
|
|
48
|
-
export var ModalBody = styled.section(
|
|
49
|
+
export var ModalBody = styled.section(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ", ";\n }\n\n p: first-of-type {\n padding-bottom: ", ";\n }\n"])), function (props) {
|
|
49
50
|
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
50
51
|
}, function (props) {
|
|
51
52
|
return (props === null || props === void 0 ? void 0 : props.size) === 'small' ? "8px" : (props === null || props === void 0 ? void 0 : props.size) === 'large' ? '24px' : '16px';
|
|
52
53
|
});
|
|
53
|
-
export var ModalFooter = styled.section(
|
|
54
|
+
export var ModalFooter = styled.section(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n margin-top: ", ";\n display: flex;\n justify-content: flex-end;\n\n gap: ", ";\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ", ";\n gap: ", ";\n }\n\n .footer-action.note {\n color: ", ";\n }\n"])), function (props) {
|
|
54
55
|
return (props === null || props === void 0 ? void 0 : props.size) === Size.Small ? "20px" : (props === null || props === void 0 ? void 0 : props.size) === Size.Large ? '28px' : '24px';
|
|
55
56
|
}, function (props) {
|
|
56
57
|
return (props === null || props === void 0 ? void 0 : props.size) === 'large' ? "16px" : '8px';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","Small","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,MAAT,QAAuB,IAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,OAAO,IAAMC,WAAW,GAAGJ,MAAM,CAACK,OAAV,6KAIL,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,YAAN,IAAsB,MAAjC;AAAA,CAJK,CAAjB;AAOP,OAAO,IAAMC,iBAAiB,GAAGR,MAAM,CAACI,WAAD,CAAT,0WAKlB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,aAAkBH,KAAK,CAACG,MAAN,IAAgBH,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8BJ,KAAK,CAACI,IAAN,KAAe,OAAf,GAAyB,EAAzB,GAA8B,EAA5E,CAAlB,UAAwG,EAApH;AAAA,CALkB,EAQhB,UAACJ,KAAD;AAAA,mBAAcA,KAAK,CAACG,MAApB;AAAA,CARgB,CAAvB;AAkBP,OAAO,IAAME,MAAM,GAAGX,MAAM,CAACY,GAAV,oKAAZ;AAOP,OAAO,IAAMC,iBAAiB,GAAGb,MAAM,CAACK,OAAV,yKAAvB;AAOP,OAAO,IAAMS,2BAA2B,GAAGd,MAAM,CAACY,GAAV,uLAEpB,UAACN,KAAD;AAAA,SAAY,CAACA,KAAK,CAACS,aAAP,GAAuB,aAAvB,GAAuC,KAAnD;AAAA,CAFoB,CAAjC;AAQP,OAAO,IAAMC,kBAAkB,GAAGhB,MAAM,CAACY,GAAV,uHAAxB;AAKP,OAAO,IAAMK,aAAa,GAAGjB,MAAM,CAACY,GAAV,2FAAnB;AAIP,OAAO,IAAMM,kBAAkB,GAAGlB,MAAM,CAACY,GAAV,8HAAxB;AAMP,OAAO,IAAMO,kBAAkB,GAAGnB,MAAM,CAACY,GAAV,qGAEzB,UAACN,KAAD;AAAA,SACAA,KAAK,CAACc,QAAN,GACInB,GADJ,yIAIIA,GAJJ,+GADA;AAAA,CAFyB,CAAxB;AAaP,OAAO,IAAMoB,iBAAiB,GAAGrB,MAAM,CAACY,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalStyles.ts"],"names":["styled","css","COLORS","Size","ModalHeader","section","props","marginBottom","StyledModalHeader","height","size","Column","div","ModalTitleSection","ModalHeaderActionsWithImage","hasBackButton","ModalHeaderActions","FlexContainer","ModalHoverModifier","CloseButtonWrapper","hasImage","HeaderIconWrapper","BackButtonWrapper","ModalTitle","h5","fontSize","ModalNoteSection","getBackgroundColor","state","getNoteMessageColor","ModalBody","ModalFooter","Small","Large","neutral_600","correct_100","warning_100","critical_100","primary_100","correct_700","warning_700","critical_700","primary_700"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '..';\nimport { Size } from '../types';\n\n/**\n * Modal styles\n */\nexport const ModalHeader = styled.section<{ marginBottom?: string }>`\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: ${(props) => props.marginBottom || '24px'};\n`;\n\nexport const StyledModalHeader = styled(ModalHeader)<{ marginBottom?: string; size?: string; height?: number }>`\n flex: 0 calc(50% - 5px);\n flex-direction: column;\n position: relative;\n text-align: left;\n height: ${(props) => (props.height ? `${props.height - (props.size === 'small' ? 16 : props.size === 'large' ? 32 : 24)}px` : '')};\n img {\n width: 100%;\n height: ${(props) => `${props.height}px`};\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n border-radius: 8px 8px 0 0;\n object-fit: cover;\n }\n`;\n\nexport const Column = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: stretch;\n height: 100%;\n`;\n\nexport const ModalTitleSection = styled.section`\n word-break: break-word;\n display: flex;\n width: 100%;\n justify-content: space-between;\n`;\n\nexport const ModalHeaderActionsWithImage = styled.div<{ hasBackButton?: boolean }>`\n display: flex;\n flex-direction: ${(props) => (!props.hasBackButton ? 'row-reverse' : 'row')};\n justify-content: space-between;\n width: 100%;\n z-index: 1;\n`;\n\nexport const ModalHeaderActions = styled.div`\n display: flex;\n margin: -12px -12px 0 0;\n`;\n\nexport const FlexContainer = styled.div`\n display: flex;\n`;\n\nexport const ModalHoverModifier = styled.div`\n button:hover {\n cursor: help !important;\n }\n`;\n\nexport const CloseButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n ${(props) =>\n props.hasImage\n ? css`\n margin: -12px -12px 0 0 !important;\n `\n : css`\n left: unset;\n `}\n }\n`;\n\nexport const HeaderIconWrapper = styled.div`\n button:hover {\n cursor: pointer !important;\n }\n`;\n\nexport const BackButtonWrapper = styled.div<{ size?: Size; hasImage?: boolean }>`\n button {\n margin: -12px 0 0 -12px !important;\n }\n`;\n\nexport const ModalTitle = styled.h5<{ fontSize?: string }>`\n margin: 0;\n font-size: ${(props) => props.fontSize || '1.25em'};\n font-weight: bold;\n`;\n\nexport const ModalNoteSection = styled.section<{ state: string; size?: string }>`\n background-color: ${(props) => getBackgroundColor(props.state)};\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n margin-top: ${(props) => (props?.size === 'small' ? `0px` : props?.size === 'large' ? '16px' : '4px')};\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n display: flex;\n flex-direction: row;\n padding: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '16px' : '12px')};\n border-radius: 2px;\n\n span {\n display: block;\n width: calc(100% - 32px);\n margin-left: 8px;\n color: ${(props) => getNoteMessageColor(props.state)};\n }\n`;\n\nexport const ModalBody = styled.section<{ size?: string }>`\n > :first-child {\n margin-top: 24px;\n }\n\n > :last-child {\n margin-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n\n p: first-of-type {\n padding-bottom: ${(props) => (props?.size === 'small' ? `8px` : props?.size === 'large' ? '24px' : '16px')};\n }\n`;\n\nexport const ModalFooter = styled.section<{ size?: Size }>`\n margin-top: ${(props) => (props?.size === Size.Small ? `20px` : props?.size === Size.Large ? '28px' : '24px')};\n display: flex;\n justify-content: flex-end;\n\n gap: ${(props) => (props?.size === 'large' ? `16px` : '8px')};\n\n .footer-action {\n order: -1;\n margin-right: auto;\n display: flex;\n align-items: center;\n font-size: ${(props) => (props?.size === 'small' ? `16px` : props?.size === 'large' ? '20px' : '18px')};\n gap: ${(props) => (props?.size === Size.Large ? `8px` : props?.size === Size.Small ? '4px' : '6px')};\n }\n\n .footer-action.note {\n color: ${COLORS.neutral_600};\n }\n`;\n\nexport const getBackgroundColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_100;\n case 'warning':\n return COLORS.warning_100;\n case 'critical':\n return COLORS.critical_100;\n default:\n return COLORS.primary_100;\n }\n};\n\nexport const getNoteMessageColor = (state: string) => {\n switch (state) {\n case 'positive':\n return COLORS.correct_700;\n case 'warning':\n return COLORS.warning_700;\n case 'critical':\n return COLORS.critical_700;\n default:\n return COLORS.primary_700;\n }\n};\n"],"file":"ModalStyles.js"}
|
|
@@ -33,7 +33,7 @@ var SegmentControlItemBackground = _styledComponents.default.div(_templateObject
|
|
|
33
33
|
|
|
34
34
|
exports.SegmentControlItemBackground = SegmentControlItemBackground;
|
|
35
35
|
|
|
36
|
-
var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n
|
|
36
|
+
var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
|
|
37
37
|
|
|
38
38
|
exports.SegmentControlItemWrapper = SegmentControlItemWrapper;
|
|
39
39
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAGO,IAAMA,yBAAyB,GAAGC,0BAAOC,GAAV,2QAS3BC,eAAOC,WAToB,CAA/B;;;;AAYA,IAAMC,4BAA4B,GAAGJ,0BAAOC,GAAV,sNAKnBC,eAAOG,UALY,CAAlC;;;;AASA,IAAMC,yBAAyB,GAAGN,0BAAOC,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.cjs"}
|
|
@@ -11,7 +11,7 @@ import { defaultOnMouseDownHandler } from '../common';
|
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ", ";\n"])), COLORS.neutral_600);
|
|
13
13
|
export var SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n padding: 4px 0px;\n"])), COLORS.neutral_20);
|
|
14
|
-
export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n
|
|
14
|
+
export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
|
|
15
15
|
export var SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ", ":first-of-type {\n ", " {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ", ":last-of-type {\n ", " {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ", " {\n ", "\n min-height: 32px;\n }\n }\n\n &.medium {\n ", " {\n ", "\n min-height: 40px;\n }\n }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
|
|
16
16
|
|
|
17
17
|
var SegmentControl = function SegmentControl(_ref) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,iBAAhB,EAAmCC,iBAAnC,EAAsDC,kBAAtD,EAA0EC,SAA1E,QAA0F,WAA1F;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;AAGA,OAAO,IAAMC,yBAAyB,GAAGP,MAAM,CAACQ,GAAV,6PAS3BP,MAAM,CAACQ,WAToB,CAA/B;AAYP,OAAO,IAAMC,4BAA4B,GAAGV,MAAM,CAACQ,GAAV,wMAKnBP,MAAM,CAACU,UALY,CAAlC;AASP,OAAO,IAAMC,yBAAyB,GAAGZ,MAAM,CAACQ,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.js"}
|
package/dist/index.cjs
CHANGED
|
@@ -420,15 +420,15 @@ Object.keys(_QuizButton).forEach(function (key) {
|
|
|
420
420
|
});
|
|
421
421
|
});
|
|
422
422
|
|
|
423
|
-
var
|
|
423
|
+
var _LinearProgress = require("./LinearProgress");
|
|
424
424
|
|
|
425
|
-
Object.keys(
|
|
425
|
+
Object.keys(_LinearProgress).forEach(function (key) {
|
|
426
426
|
if (key === "default" || key === "__esModule") return;
|
|
427
|
-
if (key in exports && exports[key] ===
|
|
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
|
|
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 './
|
|
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 './
|
|
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 './
|
|
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,
|
|
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 +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"}
|
|
@@ -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"}
|
|
@@ -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"}
|
|
@@ -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"}
|