@laerdal/life-react-components 1.6.0-dev.13.full → 1.6.0-dev.15.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.
|
@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
35
35
|
|
|
36
36
|
var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n"])));
|
|
37
37
|
|
|
38
|
-
var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n"])));
|
|
38
|
+
var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n"])));
|
|
39
39
|
|
|
40
40
|
var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ", "\n\n ", "\n"])), function (props) {
|
|
41
41
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
@@ -43,7 +43,7 @@ var Container = _styledComponents.default.div(_templateObject3 || (_templateObje
|
|
|
43
43
|
return props.interactionType == _.InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
|
|
44
44
|
});
|
|
45
45
|
|
|
46
|
-
var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n min-height: calc(40px - 16px);\n background-color: ", ";\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ", ";\n
|
|
46
|
+
var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n min-height: calc(40px - 16px);\n background-color: ", ";\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n svg {\n color: ", ";\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), function (props) {
|
|
47
47
|
return props.$backgroundColor;
|
|
48
48
|
}, function (props) {
|
|
49
49
|
return props.$color;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","ComponentTextStyle","Regular"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAiBA,IAAMA,GAAG,GAAGC,0BAAOC,GAAV,6MAAT;;AAQA,IAAMC,YAAY,GAAGF,0BAAOG,GAAV,
|
|
1
|
+
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","ComponentTextStyle","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\nimport { Tag, TagVariants } from '../Tag';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n interactionType: InteractionType;\n selected: boolean;\n setSelected: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n tagVariant?: TagVariants;\n highlightRibbonText?: string;\n highlightRibbonIcon?: string;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: string;\n disabled: boolean;\n}\n\nconst Img = styled.img`\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n`;\n\nconst TagContainer = styled.div`\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n\n ${props =>\n props.interactionType == InteractionType.Clickable\n ? `\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n `\n : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n min-height: calc(40px - 16px);\n background-color: ${props => props.$backgroundColor};\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n svg {\n color: ${props => props.$color};\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CheckboxContainer = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n interactionType,\n selected,\n setSelected,\n image,\n tagLabel,\n tagIcon,\n tagVariant = 'positive',\n highlightRibbonIcon,\n highlightRibbonText,\n highlightRibbonContentColor,\n highlightRibbonBgColor,\n disabled\n}: CardTopSectionProps) => {\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n <Img src={image} />\n {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n <CheckboxContainer>\n <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n </CheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <TagContainer>\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon} />\n </TagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </RibbonContainer>\n )}\n </Container>\n );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}
|
|
@@ -12,13 +12,13 @@ import { COLORS, InteractionType } from '..';
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
var Img = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n"])));
|
|
15
|
-
var TagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n"])));
|
|
15
|
+
var TagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n"])));
|
|
16
16
|
var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ", "\n\n ", "\n"])), function (props) {
|
|
17
17
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.interactionType == InteractionType.Clickable ? "\n cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n ") : '';
|
|
20
20
|
});
|
|
21
|
-
var RibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n min-height: calc(40px - 16px);\n background-color: ", ";\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ", ";\n
|
|
21
|
+
var RibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n min-height: calc(40px - 16px);\n background-color: ", ";\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n svg {\n color: ", ";\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n"])), function (props) {
|
|
22
22
|
return props.$backgroundColor;
|
|
23
23
|
}, function (props) {
|
|
24
24
|
return props.$color;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","InteractionType","Img","img","TagContainer","div","Container","props","disabled","interactionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","Regular"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,UAAT,EAAqBC,kBAArB,QAA+C,sBAA/C;AACA,OAAOC,QAAP,MAAyC,yBAAzC;AACA,SAASC,GAAT,QAAiC,QAAjC;AAEA,SAASC,MAAT,EAAiBC,eAAjB,QAAwC,IAAxC;;;AAiBA,IAAMC,GAAG,GAAGP,MAAM,CAACQ,GAAV,+LAAT;AAQA,IAAMC,YAAY,GAAGT,MAAM,CAACU,GAAV
|
|
1
|
+
{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","InteractionType","Img","img","TagContainer","div","Container","props","disabled","interactionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { StyledCheckBox } from '../InputFields/Checkbox';\nimport { Tag, TagVariants } from '../Tag';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n interactionType: InteractionType;\n selected: boolean;\n setSelected: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n tagVariant?: TagVariants;\n highlightRibbonText?: string;\n highlightRibbonIcon?: string;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: string;\n disabled: boolean;\n}\n\nconst Img = styled.img`\n object-fit: cover;\n width: 100%;\n height: 100%;\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n`;\n\nconst TagContainer = styled.div`\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n position: relative;\n width: 100%;\n height: 200px;\n overflow: visible;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n\n ${props =>\n props.interactionType == InteractionType.Clickable\n ? `\n cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n `\n : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n min-height: calc(40px - 16px);\n background-color: ${props => props.$backgroundColor};\n width: calc(100% - 32px);\n position: absolute;\n bottom: 0px;\n left: 0px;\n padding: 8px 16px 8px 16px;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n\n svg {\n color: ${props => props.$color};\n width: 24px;\n height: 24px;\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CheckboxContainer = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n interactionType,\n selected,\n setSelected,\n image,\n tagLabel,\n tagIcon,\n tagVariant = 'positive',\n highlightRibbonIcon,\n highlightRibbonText,\n highlightRibbonContentColor,\n highlightRibbonBgColor,\n disabled\n}: CardTopSectionProps) => {\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n <Img src={image} />\n {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n <CheckboxContainer>\n <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n </CheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <TagContainer>\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon} />\n </TagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </RibbonContainer>\n )}\n </Container>\n );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}
|