@laerdal/life-react-components 1.5.1-dev.31 → 1.5.1-dev.32.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.
|
@@ -43,7 +43,7 @@ var Label = _styledComponents.default.div(_templateObject5 || (_templateObject5
|
|
|
43
43
|
|
|
44
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"])));
|
|
45
45
|
|
|
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);
|
|
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 gap: 4px;\n\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\n &.dots.small,\n &.dots.medium {\n ", " {\n padding: 0 2px;\n }\n }\n\n &.dots.large {\n ", " {\n padding: 0 3px;\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, Content, Content);
|
|
47
47
|
|
|
48
48
|
var LinearProgressType;
|
|
49
49
|
exports.LinearProgressType = LinearProgressType;
|
|
@@ -1 +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"}
|
|
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 gap: 4px;\n\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 &.dots.small,\n &.dots.medium {\n ${Content} {\n padding: 0 2px;\n }\n }\n\n &.dots.large {\n ${Content} {\n padding: 0 3px;\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"}
|
|
@@ -16,7 +16,7 @@ export var LineFill = styled.div(_templateObject3 || (_templateObject3 = _tagged
|
|
|
16
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);
|
|
17
17
|
var Label = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n"])), COLORS.black);
|
|
18
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);
|
|
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 gap: 4px;\n\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\n &.dots.small,\n &.dots.medium {\n ", " {\n padding: 0 2px;\n }\n }\n\n &.dots.large {\n ", " {\n padding: 0 3px;\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, Content, Content);
|
|
20
20
|
export var LinearProgressType;
|
|
21
21
|
|
|
22
22
|
(function (LinearProgressType) {
|
|
@@ -1 +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"}
|
|
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 gap: 4px;\n\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 &.dots.small,\n &.dots.medium {\n ${Content} {\n padding: 0 2px;\n }\n }\n\n &.dots.large {\n ${Content} {\n padding: 0 3px;\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"}
|