@laerdal/life-react-components 6.0.6 → 6.0.7
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.
|
@@ -71,7 +71,7 @@ const VerticalCardTopSectionCheckboxContainer = exports.VerticalCardTopSectionCh
|
|
|
71
71
|
position: absolute;
|
|
72
72
|
top: 0;
|
|
73
73
|
right: 0;
|
|
74
|
-
z-index:
|
|
74
|
+
z-index: 120;
|
|
75
75
|
|
|
76
76
|
.checkbox-icon {
|
|
77
77
|
background-color: ${props => _index.COLORS.getColor('white', props.theme)};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalCardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","VerticalCardTopSectionImageContainer","exports","styled","div","VerticalCardTopSectionTagContainer","VerticalCardTopSectionContainer","props","disabled","VerticalCardTopSectionRibbonContainer","$backgroundColor","$color","VerticalCardTopSectionCheckboxContainer","COLORS","getColor","theme","VerticalCardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","role","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","generateToken","componentType","state","ComponentS","color","isOnFill","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface VerticalCardTopSectionProps {\r\n /** Sets initial state of select Checkbox. */\r\n selected?: boolean;\r\n /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n setSelected?: (arg0: boolean) => void;\r\n /** Label shown in the tag in the top-left corner of the Card. */\r\n tagLabel?: string;\r\n /** Icon shown in the tag in the top-left corner of the Card. */\r\n tagIcon?: React.ReactNode;\r\n /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n tagVariant?: TagVariants;\r\n /** Text shown in the Ribbon, under the Image. */\r\n highlightRibbonText?: string;\r\n /** Icon shown in the Ribbon, under the Image. */\r\n highlightRibbonIcon?: React.ReactNode;\r\n /** Content color (text and image) of the Ribbon, under the Image. */\r\n highlightRibbonContentColor?: string;\r\n /** Background color of the Ribbon, shown under the Image. */\r\n highlightRibbonBgColor?: string;\r\n /** Details of the Image shown in the section. */\r\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const VerticalCardTopSectionImageContainer = styled.div`\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n height: 100%;\r\n width: 100%;\r\n img{\r\n object-fit: cover;\r\n width: 100%;\r\n height: 100%;\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionTagContainer = styled.div`\r\n position: absolute;\r\n\r\n top: 16px;\r\n left: 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nexport const VerticalCardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n position: relative;\r\n width: 100%;\r\n overflow: visible;\r\n\r\n ${props => props.disabled ? `\r\n img, svg {\r\n filter: grayscale(100%);\r\n }` : ''}\r\n`;\r\n\r\nexport const VerticalCardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n min-height: calc(40px - 16px);\r\n background-color: ${props => props.$backgroundColor};\r\n width: calc(100% - 32px);\r\n position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n padding: 8px 16px 8px 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n\r\n svg {\r\n color: ${props => props.$color};\r\n width: 24px;\r\n height: 24px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionCheckboxContainer = styled.div`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 1;\r\n\r\n .checkbox-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n`;\r\n\r\nconst VerticalCardTopSection = React.forwardRef(({\r\n selected,\r\n setSelected,\r\n image,\r\n tagLabel,\r\n tagIcon,\r\n tagVariant = 'positive',\r\n highlightRibbonIcon,\r\n highlightRibbonText,\r\n highlightRibbonContentColor,\r\n highlightRibbonBgColor,\r\n disabled\r\n }: VerticalCardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n const theme = useTheme();\r\n return (\r\n <VerticalCardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n {\r\n image &&\r\n <VerticalCardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n </VerticalCardTopSectionImageContainer>\r\n }\r\n {(!!selected || !!setSelected) && (\r\n <VerticalCardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n <Checkbox ref={ref}\r\n disabled={disabled}\r\n select={(selected: boolean) => setSelected && setSelected(selected)}\r\n selected={selected || false}/>\r\n </VerticalCardTopSectionCheckboxContainer>\r\n )}\r\n {(tagLabel || tagIcon) && (\r\n <VerticalCardTopSectionTagContainer>\r\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n </VerticalCardTopSectionTagContainer>\r\n )}\r\n {(highlightRibbonIcon || highlightRibbonText) && (\r\n <VerticalCardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n {highlightRibbonIcon}\r\n {highlightRibbonText && (\r\n <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n {highlightRibbonText}\r\n </ComponentS>\r\n )}\r\n </VerticalCardTopSectionRibbonContainer>\r\n )}\r\n </VerticalCardTopSectionContainer>\r\n );\r\n});\r\n\r\nexport default VerticalCardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"VerticalCardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","VerticalCardTopSectionImageContainer","exports","styled","div","VerticalCardTopSectionTagContainer","VerticalCardTopSectionContainer","props","disabled","VerticalCardTopSectionRibbonContainer","$backgroundColor","$color","VerticalCardTopSectionCheckboxContainer","COLORS","getColor","theme","VerticalCardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","role","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","generateToken","componentType","state","ComponentS","color","isOnFill","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface VerticalCardTopSectionProps {\r\n /** Sets initial state of select Checkbox. */\r\n selected?: boolean;\r\n /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n setSelected?: (arg0: boolean) => void;\r\n /** Label shown in the tag in the top-left corner of the Card. */\r\n tagLabel?: string;\r\n /** Icon shown in the tag in the top-left corner of the Card. */\r\n tagIcon?: React.ReactNode;\r\n /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n tagVariant?: TagVariants;\r\n /** Text shown in the Ribbon, under the Image. */\r\n highlightRibbonText?: string;\r\n /** Icon shown in the Ribbon, under the Image. */\r\n highlightRibbonIcon?: React.ReactNode;\r\n /** Content color (text and image) of the Ribbon, under the Image. */\r\n highlightRibbonContentColor?: string;\r\n /** Background color of the Ribbon, shown under the Image. */\r\n highlightRibbonBgColor?: string;\r\n /** Details of the Image shown in the section. */\r\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const VerticalCardTopSectionImageContainer = styled.div`\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n height: 100%;\r\n width: 100%;\r\n img{\r\n object-fit: cover;\r\n width: 100%;\r\n height: 100%;\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionTagContainer = styled.div`\r\n position: absolute;\r\n\r\n top: 16px;\r\n left: 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nexport const VerticalCardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n position: relative;\r\n width: 100%;\r\n overflow: visible;\r\n\r\n ${props => props.disabled ? `\r\n img, svg {\r\n filter: grayscale(100%);\r\n }` : ''}\r\n`;\r\n\r\nexport const VerticalCardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n min-height: calc(40px - 16px);\r\n background-color: ${props => props.$backgroundColor};\r\n width: calc(100% - 32px);\r\n position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n padding: 8px 16px 8px 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n\r\n svg {\r\n color: ${props => props.$color};\r\n width: 24px;\r\n height: 24px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionCheckboxContainer = styled.div`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 120;\r\n\r\n .checkbox-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n`;\r\n\r\nconst VerticalCardTopSection = React.forwardRef(({\r\n selected,\r\n setSelected,\r\n image,\r\n tagLabel,\r\n tagIcon,\r\n tagVariant = 'positive',\r\n highlightRibbonIcon,\r\n highlightRibbonText,\r\n highlightRibbonContentColor,\r\n highlightRibbonBgColor,\r\n disabled\r\n }: VerticalCardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n const theme = useTheme();\r\n return (\r\n <VerticalCardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n {\r\n image &&\r\n <VerticalCardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n </VerticalCardTopSectionImageContainer>\r\n }\r\n {(!!selected || !!setSelected) && (\r\n <VerticalCardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n <Checkbox ref={ref}\r\n disabled={disabled}\r\n select={(selected: boolean) => setSelected && setSelected(selected)}\r\n selected={selected || false}/>\r\n </VerticalCardTopSectionCheckboxContainer>\r\n )}\r\n {(tagLabel || tagIcon) && (\r\n <VerticalCardTopSectionTagContainer>\r\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n </VerticalCardTopSectionTagContainer>\r\n )}\r\n {(highlightRibbonIcon || highlightRibbonText) && (\r\n <VerticalCardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n {highlightRibbonIcon}\r\n {highlightRibbonText && (\r\n <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n {highlightRibbonText}\r\n </ComponentS>\r\n )}\r\n </VerticalCardTopSectionRibbonContainer>\r\n )}\r\n </VerticalCardTopSectionContainer>\r\n );\r\n});\r\n\r\nexport default VerticalCardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalCardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","VerticalCardTopSectionImageContainer","div","VerticalCardTopSectionTagContainer","VerticalCardTopSectionContainer","props","disabled","VerticalCardTopSectionRibbonContainer","$backgroundColor","$color","VerticalCardTopSectionCheckboxContainer","getColor","theme","VerticalCardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","role","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","generateToken","componentType","state","color","isOnFill","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"sources":["../../../src/Card/VerticalCard/VerticalCardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface VerticalCardTopSectionProps {\r\n /** Sets initial state of select Checkbox. */\r\n selected?: boolean;\r\n /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n setSelected?: (arg0: boolean) => void;\r\n /** Label shown in the tag in the top-left corner of the Card. */\r\n tagLabel?: string;\r\n /** Icon shown in the tag in the top-left corner of the Card. */\r\n tagIcon?: React.ReactNode;\r\n /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n tagVariant?: TagVariants;\r\n /** Text shown in the Ribbon, under the Image. */\r\n highlightRibbonText?: string;\r\n /** Icon shown in the Ribbon, under the Image. */\r\n highlightRibbonIcon?: React.ReactNode;\r\n /** Content color (text and image) of the Ribbon, under the Image. */\r\n highlightRibbonContentColor?: string;\r\n /** Background color of the Ribbon, shown under the Image. */\r\n highlightRibbonBgColor?: string;\r\n /** Details of the Image shown in the section. */\r\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const VerticalCardTopSectionImageContainer = styled.div`\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n height: 100%;\r\n width: 100%;\r\n img{\r\n object-fit: cover;\r\n width: 100%;\r\n height: 100%;\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionTagContainer = styled.div`\r\n position: absolute;\r\n\r\n top: 16px;\r\n left: 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nexport const VerticalCardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n position: relative;\r\n width: 100%;\r\n overflow: visible;\r\n\r\n ${props => props.disabled ? `\r\n img, svg {\r\n filter: grayscale(100%);\r\n }` : ''}\r\n`;\r\n\r\nexport const VerticalCardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n min-height: calc(40px - 16px);\r\n background-color: ${props => props.$backgroundColor};\r\n width: calc(100% - 32px);\r\n position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n padding: 8px 16px 8px 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n\r\n svg {\r\n color: ${props => props.$color};\r\n width: 24px;\r\n height: 24px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionCheckboxContainer = styled.div`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 1;\r\n\r\n .checkbox-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n`;\r\n\r\nconst VerticalCardTopSection = React.forwardRef(({\r\n selected,\r\n setSelected,\r\n image,\r\n tagLabel,\r\n tagIcon,\r\n tagVariant = 'positive',\r\n highlightRibbonIcon,\r\n highlightRibbonText,\r\n highlightRibbonContentColor,\r\n highlightRibbonBgColor,\r\n disabled\r\n }: VerticalCardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n const theme = useTheme();\r\n return (\r\n <VerticalCardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n {\r\n image &&\r\n <VerticalCardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n </VerticalCardTopSectionImageContainer>\r\n }\r\n {(!!selected || !!setSelected) && (\r\n <VerticalCardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n <Checkbox ref={ref}\r\n disabled={disabled}\r\n select={(selected: boolean) => setSelected && setSelected(selected)}\r\n selected={selected || false}/>\r\n </VerticalCardTopSectionCheckboxContainer>\r\n )}\r\n {(tagLabel || tagIcon) && (\r\n <VerticalCardTopSectionTagContainer>\r\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n </VerticalCardTopSectionTagContainer>\r\n )}\r\n {(highlightRibbonIcon || highlightRibbonText) && (\r\n <VerticalCardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n {highlightRibbonIcon}\r\n {highlightRibbonText && (\r\n <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n {highlightRibbonText}\r\n </ComponentS>\r\n )}\r\n </VerticalCardTopSectionRibbonContainer>\r\n )}\r\n </VerticalCardTopSectionContainer>\r\n );\r\n});\r\n\r\nexport default VerticalCardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"VerticalCardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","VerticalCardTopSectionImageContainer","div","VerticalCardTopSectionTagContainer","VerticalCardTopSectionContainer","props","disabled","VerticalCardTopSectionRibbonContainer","$backgroundColor","$color","VerticalCardTopSectionCheckboxContainer","getColor","theme","VerticalCardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","role","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","generateToken","componentType","state","color","isOnFill","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"sources":["../../../src/Card/VerticalCard/VerticalCardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface VerticalCardTopSectionProps {\r\n /** Sets initial state of select Checkbox. */\r\n selected?: boolean;\r\n /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n setSelected?: (arg0: boolean) => void;\r\n /** Label shown in the tag in the top-left corner of the Card. */\r\n tagLabel?: string;\r\n /** Icon shown in the tag in the top-left corner of the Card. */\r\n tagIcon?: React.ReactNode;\r\n /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n tagVariant?: TagVariants;\r\n /** Text shown in the Ribbon, under the Image. */\r\n highlightRibbonText?: string;\r\n /** Icon shown in the Ribbon, under the Image. */\r\n highlightRibbonIcon?: React.ReactNode;\r\n /** Content color (text and image) of the Ribbon, under the Image. */\r\n highlightRibbonContentColor?: string;\r\n /** Background color of the Ribbon, shown under the Image. */\r\n highlightRibbonBgColor?: string;\r\n /** Details of the Image shown in the section. */\r\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const VerticalCardTopSectionImageContainer = styled.div`\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n height: 100%;\r\n width: 100%;\r\n img{\r\n object-fit: cover;\r\n width: 100%;\r\n height: 100%;\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionTagContainer = styled.div`\r\n position: absolute;\r\n\r\n top: 16px;\r\n left: 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nexport const VerticalCardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n position: relative;\r\n width: 100%;\r\n overflow: visible;\r\n\r\n ${props => props.disabled ? `\r\n img, svg {\r\n filter: grayscale(100%);\r\n }` : ''}\r\n`;\r\n\r\nexport const VerticalCardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n min-height: calc(40px - 16px);\r\n background-color: ${props => props.$backgroundColor};\r\n width: calc(100% - 32px);\r\n position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n padding: 8px 16px 8px 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n\r\n svg {\r\n color: ${props => props.$color};\r\n width: 24px;\r\n height: 24px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const VerticalCardTopSectionCheckboxContainer = styled.div`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 120;\r\n\r\n .checkbox-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n`;\r\n\r\nconst VerticalCardTopSection = React.forwardRef(({\r\n selected,\r\n setSelected,\r\n image,\r\n tagLabel,\r\n tagIcon,\r\n tagVariant = 'positive',\r\n highlightRibbonIcon,\r\n highlightRibbonText,\r\n highlightRibbonContentColor,\r\n highlightRibbonBgColor,\r\n disabled\r\n }: VerticalCardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n const theme = useTheme();\r\n return (\r\n <VerticalCardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n {\r\n image &&\r\n <VerticalCardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n </VerticalCardTopSectionImageContainer>\r\n }\r\n {(!!selected || !!setSelected) && (\r\n <VerticalCardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n <Checkbox ref={ref}\r\n disabled={disabled}\r\n select={(selected: boolean) => setSelected && setSelected(selected)}\r\n selected={selected || false}/>\r\n </VerticalCardTopSectionCheckboxContainer>\r\n )}\r\n {(tagLabel || tagIcon) && (\r\n <VerticalCardTopSectionTagContainer>\r\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n </VerticalCardTopSectionTagContainer>\r\n )}\r\n {(highlightRibbonIcon || highlightRibbonText) && (\r\n <VerticalCardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n {highlightRibbonIcon}\r\n {highlightRibbonText && (\r\n <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n {highlightRibbonText}\r\n </ComponentS>\r\n )}\r\n </VerticalCardTopSectionRibbonContainer>\r\n )}\r\n </VerticalCardTopSectionContainer>\r\n );\r\n});\r\n\r\nexport default VerticalCardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
|