@laerdal/life-react-components 2.0.0-dev.1.full → 2.0.1-dev.2
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/HorizontalCard/HorizontalCardThumbnail.cjs +9 -5
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +8 -4
- package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +1 -1
- package/dist/Card/HorizontalCard/types.cjs.map +1 -1
- package/dist/Card/HorizontalCard/types.d.ts +3 -1
- package/dist/Card/HorizontalCard/types.js.map +1 -1
- package/dist/Card/VerticalCard/Card.cjs +8 -2
- package/dist/Card/VerticalCard/Card.cjs.map +1 -1
- package/dist/Card/VerticalCard/Card.d.ts +1 -0
- package/dist/Card/VerticalCard/Card.js +8 -2
- package/dist/Card/VerticalCard/Card.js.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.js +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs +28 -7
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardTopSection.d.ts +9 -2
- package/dist/Card/VerticalCard/CardTopSection.js +25 -5
- package/dist/Card/VerticalCard/CardTopSection.js.map +1 -1
- package/dist/Image/ImageWithFallbacks.cjs +6 -3
- package/dist/Image/ImageWithFallbacks.cjs.map +1 -1
- package/dist/Image/ImageWithFallbacks.js +6 -3
- package/dist/Image/ImageWithFallbacks.js.map +1 -1
- package/package.json +1 -1
|
@@ -15,17 +15,19 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
15
15
|
|
|
16
16
|
var _styles = require("../../styles");
|
|
17
17
|
|
|
18
|
+
var _Image = require("../../Image");
|
|
19
|
+
|
|
18
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
21
|
|
|
20
|
-
var _templateObject, _templateObject2
|
|
22
|
+
var _templateObject, _templateObject2;
|
|
21
23
|
|
|
22
24
|
var IconContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ", ";\n\n .disabled & {\n color: ", ";\n }\n"])), _styles.COLORS.black, _styles.COLORS.neutral_500);
|
|
23
25
|
|
|
24
|
-
var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n"])));
|
|
25
|
-
|
|
26
|
-
var Image = _styledComponents.default.img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 120px;\n height: 100%;\n\n .disabled & {\n filter: grayscale(100%);\n }\n"])));
|
|
26
|
+
var ImageContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n"])));
|
|
27
27
|
|
|
28
28
|
var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
|
|
29
|
+
var _image$fallbackSrc, _image$loader;
|
|
30
|
+
|
|
29
31
|
var image = _ref.image,
|
|
30
32
|
icon = _ref.icon;
|
|
31
33
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
@@ -35,9 +37,11 @@ var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
|
|
|
35
37
|
height: 48
|
|
36
38
|
})
|
|
37
39
|
}), image && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, {
|
|
38
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
40
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
|
|
41
|
+
fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
|
|
39
42
|
src: image.src,
|
|
40
43
|
alt: image.alt,
|
|
44
|
+
loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
|
|
41
45
|
width: image.width,
|
|
42
46
|
height: image.height
|
|
43
47
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","
|
|
1
|
+
{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["IconContainer","styled","div","COLORS","black","neutral_500","ImageContainer","HorizontalCardThumbnail","image","icon","React","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nconst IconContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ${COLORS.black};\n\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\n\nconst ImageContainer = styled.div`\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n image,\n icon\n }) => {\n\n return (\n <>\n {\n icon &&\n <IconContainer>\n {React.cloneElement(icon, {width: 48, height: 48})}\n </IconContainer>\n }\n {\n image &&\n <ImageContainer>\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n loader={image.loader ?? false} width={image.width} height={image.height}/>\n </ImageContainer>\n }\n </>\n )\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAEA,IAAMA,aAAa,GAAGC,yBAAA,CAAOC,GAAV,yPAORC,cAAA,CAAOC,KAPC,EAUND,cAAA,CAAOE,WAVD,CAAnB;;AAeA,IAAMC,cAAc,GAAGL,yBAAA,CAAOC,GAAV,2YAApB;;AAyBO,IAAMK,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;EAAA;;EAAA,IAFJC,KAEI,QAFJA,KAEI;EAAA,IADJC,IACI,QADJA,IACI;EAE5E,oBACE;IAAA,WAEIA,IAAI,iBACF,qBAAC,aAAD;MAAA,uBACGC,cAAA,CAAMC,YAAN,CAAmBF,IAAnB,EAAyB;QAACG,KAAK,EAAE,EAAR;QAAYC,MAAM,EAAE;MAApB,CAAzB;IADH,EAHN,EAQIL,KAAK,iBACH,qBAAC,cAAD;MAAA,uBACI,qBAAC,yBAAD;QAAoB,SAAS,wBAAEA,KAAK,CAACM,WAAR,mEAAuB,EAApD;QAAwD,GAAG,EAAEN,KAAK,CAACO,GAAnE;QAAwE,GAAG,EAAEP,KAAK,CAACQ,GAAnF;QACoB,MAAM,mBAAER,KAAK,CAACS,MAAR,yDAAkB,KAD5C;QACmD,KAAK,EAAET,KAAK,CAACI,KADhE;QACuE,MAAM,EAAEJ,KAAK,CAACK;MADrF;IADJ,EATN;EAAA,EADF;AAiBD,CAtBM"}
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2
|
|
3
|
+
var _templateObject, _templateObject2;
|
|
4
4
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { COLORS } from '../../styles';
|
|
8
|
+
import { ImageWithFallbacks } from "../../Image";
|
|
8
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
10
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
10
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
12
|
var IconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ", ";\n\n .disabled & {\n color: ", ";\n }\n"])), COLORS.black, COLORS.neutral_500);
|
|
12
|
-
var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n"])));
|
|
13
|
-
var Image = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 120px;\n height: 100%;\n\n .disabled & {\n filter: grayscale(100%);\n }\n"])));
|
|
13
|
+
var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n"])));
|
|
14
14
|
export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
|
|
15
|
+
var _image$fallbackSrc, _image$loader;
|
|
16
|
+
|
|
15
17
|
var image = _ref.image,
|
|
16
18
|
icon = _ref.icon;
|
|
17
19
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
@@ -21,9 +23,11 @@ export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
|
|
|
21
23
|
height: 48
|
|
22
24
|
})
|
|
23
25
|
}), image && /*#__PURE__*/_jsx(ImageContainer, {
|
|
24
|
-
children: /*#__PURE__*/_jsx(
|
|
26
|
+
children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
|
|
27
|
+
fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
|
|
25
28
|
src: image.src,
|
|
26
29
|
alt: image.alt,
|
|
30
|
+
loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
|
|
27
31
|
width: image.width,
|
|
28
32
|
height: image.height
|
|
29
33
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","IconContainer","div","black","neutral_500","ImageContainer","
|
|
1
|
+
{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","IconContainer","div","black","neutral_500","ImageContainer","HorizontalCardThumbnail","image","icon","cloneElement","width","height","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {COLORS} from '../../styles';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nconst IconContainer = styled.div`\n display: flex;\n justify-content: center;\n align-items: center;\n width: 80px;\n height: 80px;\n\n color: ${COLORS.black};\n\n .disabled & {\n color: ${COLORS.neutral_500};\n }\n`;\n\n\nconst ImageContainer = styled.div`\n height: 100%;\n overflow: hidden;\n border-bottom-left-radius: 8px;\n border-top-left-radius: 8px;\n width: 120px;\n\n img {\n mix-blend-mode: multiply;\n object-fit: cover;\n width: 100%;\n height: 100%;\n\n }\n\n .disabled & {\n img {\n filter: grayscale(100%);\n }\n }\n\n`;\n\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\n\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\n image,\n icon\n }) => {\n\n return (\n <>\n {\n icon &&\n <IconContainer>\n {React.cloneElement(icon, {width: 48, height: 48})}\n </IconContainer>\n }\n {\n image &&\n <ImageContainer>\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\n loader={image.loader ?? false} width={image.width} height={image.height}/>\n </ImageContainer>\n }\n </>\n )\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,QAAqB,cAArB;AACA,SAAQC,kBAAR,QAAiC,aAAjC;;;;AAEA,IAAMC,aAAa,GAAGH,MAAM,CAACI,GAAV,2OAORH,MAAM,CAACI,KAPC,EAUNJ,MAAM,CAACK,WAVD,CAAnB;AAeA,IAAMC,cAAc,GAAGP,MAAM,CAACI,GAAV,6XAApB;AAyBA,OAAO,IAAMI,uBAAuD,GAAG,SAA1DA,uBAA0D,OAGO;EAAA;;EAAA,IAFJC,KAEI,QAFJA,KAEI;EAAA,IADJC,IACI,QADJA,IACI;EAE5E,oBACE;IAAA,WAEIA,IAAI,iBACF,KAAC,aAAD;MAAA,uBACGX,KAAK,CAACY,YAAN,CAAmBD,IAAnB,EAAyB;QAACE,KAAK,EAAE,EAAR;QAAYC,MAAM,EAAE;MAApB,CAAzB;IADH,EAHN,EAQIJ,KAAK,iBACH,KAAC,cAAD;MAAA,uBACI,KAAC,kBAAD;QAAoB,SAAS,wBAAEA,KAAK,CAACK,WAAR,mEAAuB,EAApD;QAAwD,GAAG,EAAEL,KAAK,CAACM,GAAnE;QAAwE,GAAG,EAAEN,KAAK,CAACO,GAAnF;QACoB,MAAM,mBAAEP,KAAK,CAACQ,MAAR,yDAAkB,KAD5C;QACmD,KAAK,EAAER,KAAK,CAACG,KADhE;QACuE,MAAM,EAAEH,KAAK,CAACI;MADrF;IADJ,EATN;EAAA,EADF;AAiBD,CAtBM"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n label: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n variant?: 'outline' | 'elevated';\n action?: () => void;\n disabled?: boolean;\n title: string;\n description?: string;\n icon?: React.ReactElement;\n image?: { src: string;
|
|
1
|
+
{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n label: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n variant?: 'outline' | 'elevated';\n action?: () => void;\n disabled?: boolean;\n title: string;\n description?: string;\n icon?: React.ReactElement;\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n tags?: HorizontalCardTag[];\n progress?: HorizontalCardLinearProgression;\n actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];\n}\n"],"mappings":""}
|
|
@@ -30,9 +30,11 @@ export interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivEl
|
|
|
30
30
|
icon?: React.ReactElement;
|
|
31
31
|
image?: {
|
|
32
32
|
src: string;
|
|
33
|
-
|
|
33
|
+
fallbackSrc?: string;
|
|
34
|
+
alt: string;
|
|
34
35
|
height?: string;
|
|
35
36
|
width?: string;
|
|
37
|
+
loader?: boolean;
|
|
36
38
|
};
|
|
37
39
|
tags?: HorizontalCardTag[];
|
|
38
40
|
progress?: HorizontalCardLinearProgression;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n label: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n variant?: 'outline' | 'elevated';\n action?: () => void;\n disabled?: boolean;\n title: string;\n description?: string;\n icon?: React.ReactElement;\n image?: { src: string;
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n & {\n componentType: 'dropdown';\n icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n label: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n variant?: 'outline' | 'elevated';\n action?: () => void;\n disabled?: boolean;\n title: string;\n description?: string;\n icon?: React.ReactElement;\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n tags?: HorizontalCardTag[];\n progress?: HorizontalCardLinearProgression;\n actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];\n}\n"],"mappings":""}
|
|
@@ -35,7 +35,7 @@ var _index = require("../../index");
|
|
|
35
35
|
|
|
36
36
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
37
37
|
|
|
38
|
-
var _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className"];
|
|
38
|
+
var _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"];
|
|
39
39
|
|
|
40
40
|
var _templateObject, _templateObject2;
|
|
41
41
|
|
|
@@ -47,7 +47,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
47
47
|
|
|
48
48
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
49
49
|
|
|
50
|
-
var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n min-width: 240px;\n
|
|
50
|
+
var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n min-width: 240px;\n overflow: hidden;\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ", ";\n }\n\n .outline & {\n border: 1px solid ", ";\n }\n"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
|
|
51
51
|
|
|
52
52
|
exports.CardTopLevelContainer = CardTopLevelContainer;
|
|
53
53
|
|
|
@@ -64,6 +64,8 @@ var Card = function Card(_ref) {
|
|
|
64
64
|
_ref$variant = _ref.variant,
|
|
65
65
|
variant = _ref$variant === void 0 ? 'elevated' : _ref$variant,
|
|
66
66
|
className = _ref.className,
|
|
67
|
+
_ref$maxWidth = _ref.maxWidth,
|
|
68
|
+
maxWidth = _ref$maxWidth === void 0 ? 560 : _ref$maxWidth,
|
|
67
69
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
68
70
|
|
|
69
71
|
var _React$useState = React.useState([]),
|
|
@@ -89,6 +91,9 @@ var Card = function Card(_ref) {
|
|
|
89
91
|
"data-testid": 'card-wrapper'
|
|
90
92
|
}, rest), {}, {
|
|
91
93
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
|
|
94
|
+
style: {
|
|
95
|
+
maxWidth: maxWidth
|
|
96
|
+
},
|
|
92
97
|
children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({
|
|
93
98
|
ref: checkBoxRef
|
|
94
99
|
}, topSectionProps), {}, {
|
|
@@ -109,6 +114,7 @@ var Card = function Card(_ref) {
|
|
|
109
114
|
Card.propTypes = {
|
|
110
115
|
onCardClicked: _propTypes.default.func,
|
|
111
116
|
disabled: _propTypes.default.bool,
|
|
117
|
+
maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
112
118
|
variant: _propTypes.default.oneOf(['outline', 'elevated'])
|
|
113
119
|
};
|
|
114
120
|
var _default = Card;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n min-width: 240px;\n
|
|
1
|
+
{"version":3,"file":"Card.cjs","names":["CardTopLevelContainer","styled","div","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","Wrapper","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","React","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","cls","defaultOnMouseDownHandler","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n min-width: 240px;\n overflow: hidden;\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n\n .outline & {\n border: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const Wrapper = styled.div`\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:active, &.active-state {\n background-color: ${COLORS.primary_100};\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n\n &:active, &.active-state {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ${CardTopLevelContainer}{\n border: 1px solid ${COLORS.neutral_100};\n }\n }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n onCardClicked?: () => {};\n disabled?: boolean;\n maxWidth?: number | string;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled,\n variant = 'elevated',\n className,\n maxWidth = 560,\n ...rest\n }: CardProps) => {\n\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n return (\n <Wrapper ref={containerRef}\n className={cls}\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n onClick={e => !disabled && onCardClicked && onCardClicked()}\n data-testid={'card-wrapper'}\n {...rest}>\n <CardTopLevelContainer style={{maxWidth: maxWidth}}>\n {\n topSectionProps &&\n <CardTopSection ref={checkBoxRef}\n {...topSectionProps} disabled={disabled}/>\n }\n {\n middleSectionProps &&\n <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n }\n {\n bottomSectionProps &&\n <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n {...bottomSectionProps} disabled={disabled}/>\n }\n </CardTopLevelContainer>\n </Wrapper>\n\n );\n};\n\nexport default Card;\n"],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
|
|
|
7
7
|
export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
|
|
8
8
|
onCardClicked?: () => {};
|
|
9
9
|
disabled?: boolean;
|
|
10
|
+
maxWidth?: number | string;
|
|
10
11
|
topSectionProps?: CardTopSectionProps;
|
|
11
12
|
middleSectionProps?: CardMiddleSectionProps;
|
|
12
13
|
bottomSectionProps?: CardBottomSectionProps;
|
|
@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
5
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
6
6
|
import _pt from "prop-types";
|
|
7
|
-
var _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className"];
|
|
7
|
+
var _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"];
|
|
8
8
|
|
|
9
9
|
var _templateObject, _templateObject2;
|
|
10
10
|
|
|
@@ -20,7 +20,7 @@ import CardBottomSection from './CardBottomSection';
|
|
|
20
20
|
import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
|
|
21
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
22
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
23
|
-
export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n min-width: 240px;\n
|
|
23
|
+
export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n min-width: 240px;\n overflow: hidden;\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ", ";\n }\n\n .outline & {\n border: 1px solid ", ";\n }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
|
|
24
24
|
export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.interactive:focus {\n ", "\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ", " {\n &:hover {\n background-color: ", ";\n }\n\n &:active, &.active-state {\n background-color: ", ";\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ", " {\n &:hover {\n box-shadow: ", ";\n }\n\n &:active, &.active-state {\n box-shadow: ", ";\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ", "{\n border: 1px solid ", ";\n }\n }\n"])), focusStyles, CardTopLevelContainer, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainer, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainer, COLORS.neutral_100);
|
|
25
25
|
|
|
26
26
|
var Card = function Card(_ref) {
|
|
@@ -32,6 +32,8 @@ var Card = function Card(_ref) {
|
|
|
32
32
|
_ref$variant = _ref.variant,
|
|
33
33
|
variant = _ref$variant === void 0 ? 'elevated' : _ref$variant,
|
|
34
34
|
className = _ref.className,
|
|
35
|
+
_ref$maxWidth = _ref.maxWidth,
|
|
36
|
+
maxWidth = _ref$maxWidth === void 0 ? 560 : _ref$maxWidth,
|
|
35
37
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
36
38
|
|
|
37
39
|
var _React$useState = React.useState([]),
|
|
@@ -57,6 +59,9 @@ var Card = function Card(_ref) {
|
|
|
57
59
|
"data-testid": 'card-wrapper'
|
|
58
60
|
}, rest), {}, {
|
|
59
61
|
children: /*#__PURE__*/_jsxs(CardTopLevelContainer, {
|
|
62
|
+
style: {
|
|
63
|
+
maxWidth: maxWidth
|
|
64
|
+
},
|
|
60
65
|
children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({
|
|
61
66
|
ref: checkBoxRef
|
|
62
67
|
}, topSectionProps), {}, {
|
|
@@ -77,6 +82,7 @@ var Card = function Card(_ref) {
|
|
|
77
82
|
Card.propTypes = {
|
|
78
83
|
onCardClicked: _pt.func,
|
|
79
84
|
disabled: _pt.bool,
|
|
85
|
+
maxWidth: _pt.oneOfType([_pt.number, _pt.string]),
|
|
80
86
|
variant: _pt.oneOf(['outline', 'elevated'])
|
|
81
87
|
};
|
|
82
88
|
export default Card;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n min-width: 240px;\n
|
|
1
|
+
{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","CardTopLevelContainer","div","white","BOXSHADOW_L1","neutral_200","Wrapper","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","useState","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","cls","a","key","e","instance"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\n\nexport const CardTopLevelContainer = styled.div`\n background-color: ${COLORS.white};\n min-width: 240px;\n overflow: hidden;\n\n border-radius: 8px;\n\n background-clip: padding-box;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n .elevated & {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n }\n\n .outline & {\n border: 1px solid ${COLORS.neutral_200};\n }\n`;\n\n\nexport const Wrapper = styled.div`\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.interactive:not(.disabled) {\n cursor: pointer;\n\n &.outline:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n background-color: ${COLORS.primary_20};\n }\n\n &:active, &.active-state {\n background-color: ${COLORS.primary_100};\n }\n }\n }\n\n &.elevated:not(.action-within) {\n ${CardTopLevelContainer} {\n &:hover {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n }\n\n &:active, &.active-state {\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n }\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n ${CardTopLevelContainer}{\n border: 1px solid ${COLORS.neutral_100};\n }\n }\n`;\n\n\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\n onCardClicked?: () => {};\n disabled?: boolean;\n maxWidth?: number | string;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n variant?: 'outline' | 'elevated';\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled,\n variant = 'elevated',\n className,\n maxWidth = 560,\n ...rest\n }: CardProps) => {\n\n\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\n\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\n\n return (\n <Wrapper ref={containerRef}\n className={cls}\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\n onClick={e => !disabled && onCardClicked && onCardClicked()}\n data-testid={'card-wrapper'}\n {...rest}>\n <CardTopLevelContainer style={{maxWidth: maxWidth}}>\n {\n topSectionProps &&\n <CardTopSection ref={checkBoxRef}\n {...topSectionProps} disabled={disabled}/>\n }\n {\n middleSectionProps &&\n <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\n }\n {\n bottomSectionProps &&\n <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\n {...bottomSectionProps} disabled={disabled}/>\n }\n </CardTopLevelContainer>\n </Wrapper>\n\n );\n};\n\nexport default Card;\n"],"mappings":"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"}
|
|
@@ -58,7 +58,7 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
58
58
|
"data-testid": 'card-middleSection',
|
|
59
59
|
children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardColorBand, {
|
|
60
60
|
$color: colorBandColor
|
|
61
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardCategoryContainer, {
|
|
61
|
+
}), (categoryIcon || categoryLabel) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardCategoryContainer, {
|
|
62
62
|
extraTopMargin: Boolean(colorBandColor),
|
|
63
63
|
bottomMargin: Boolean(categoryIcon || categoryLabel),
|
|
64
64
|
children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardMiddleSection.cjs","names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled?: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = styled.div<{ $color: string }>`\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ${(props) => props.$color};\n`;\n\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled,\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer data-testid={'card-middleSection'} >\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n
|
|
1
|
+
{"version":3,"file":"CardMiddleSection.cjs","names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled?: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = styled.div<{ $color: string }>`\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ${(props) => props.$color};\n`;\n\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled,\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer data-testid={'card-middleSection'} >\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n {\n (categoryIcon || categoryLabel) &&\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardCategoryContainer>\n }\n <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n {title}\n </ComponentXL>\n {description && (\n <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n {description}\n </ComponentS>\n )}\n {tags && (\n <CardTagsContainer>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n {row2Tags && (\n <CardTagsContainer>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,yBAAA,CAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,yBAAA,CAAOC,GAAV,qMAMJ,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,yBAAA,CAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,yBAAA,CAAOC,GAAV,mQAQrBM,aAAA,CAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;EAAA,IAR5BC,cAQ4B,QAR5BA,cAQ4B;EAAA,IAP5BC,YAO4B,QAP5BA,YAO4B;EAAA,IAN5BC,aAM4B,QAN5BA,aAM4B;EAAA,IAL5BC,KAK4B,QAL5BA,KAK4B;EAAA,IAJ5BC,WAI4B,QAJ5BA,WAI4B;EAAA,IAH5BC,IAG4B,QAH5BA,IAG4B;EAAA,IAF5BC,QAE4B,QAF5BA,QAE4B;EAAA,IAD5BC,QAC4B,QAD5BA,QAC4B;EAC5B,oBACE,sBAAC,0BAAD;IAA4B,eAAa,oBAAzC;IAAA,WACGP,cAAc,iBAAI,qBAAC,aAAD;MAAe,MAAM,EAAEA;IAAvB,EADrB,EAGI,CAACC,YAAY,IAAIC,aAAjB,kBACA,sBAAC,qBAAD;MAAuB,cAAc,EAAEM,OAAO,CAACR,cAAD,CAA9C;MAAgE,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;MAAA,WACGD,YADH,eAEE,qBAAC,iBAAD;QAAY,SAAS,EAAEQ,yBAAA,CAAmBC,IAA1C;QAAgD,KAAK,EAAEb,aAAA,CAAOC,WAA9D;QAAA,UACGI;MADH,EAFF;IAAA,EAJJ,eAWE,qBAAC,kBAAD;MAAa,SAAS,EAAC,YAAvB;MAAoC,SAAS,EAAEO,yBAAA,CAAmBC,IAAlE;MAAwE,KAAK,EAAEH,QAAQ,GAAGV,aAAA,CAAOC,WAAV,GAAwBD,aAAA,CAAOc,KAAtH;MAAA,UACGR;IADH,EAXF,EAcGC,WAAW,iBACV,qBAAC,iBAAD;MAAY,SAAS,EAAC,kBAAtB;MAAyC,KAAK,EAAEP,aAAA,CAAOe,WAAvD;MAAA,UACGR;IADH,EAfJ,EAmBGC,IAAI,iBACH,qBAAC,iBAAD;MAAA,UACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;QAAA;;QAAA,oBACR,qBAAC,UAAD;UAAiC,KAAK,EAAED,CAAC,CAACE,KAA1C;UAAiD,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;QAAvE,aAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;MAAA,CAAT;IADH,EApBJ,EA0BGT,QAAQ,iBACP,qBAAC,iBAAD;MAAA,UACGA,QAAQ,CAACO,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;QAAA;;QAAA,oBACZ,qBAAC,UAAD;UAAiC,KAAK,EAAED,CAAC,CAACE,KAA1C;UAAiD,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;QAAvE,aAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;MAAA,CAAb;IADH,EA3BJ;EAAA,EADF;AAoCD,CA9CD;;;EAhEEf,c;EACAC,Y;EACAC,a;EACAC,K;EACAC,W;EACAC,I;IAMAW,K;;EALAV,Q;IAKAU,K;;EAJAT,Q;;eAyGaR,iB"}
|
|
@@ -28,7 +28,7 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
28
28
|
"data-testid": 'card-middleSection',
|
|
29
29
|
children: [colorBandColor && /*#__PURE__*/_jsx(CardColorBand, {
|
|
30
30
|
$color: colorBandColor
|
|
31
|
-
}), /*#__PURE__*/_jsxs(CardCategoryContainer, {
|
|
31
|
+
}), (categoryIcon || categoryLabel) && /*#__PURE__*/_jsxs(CardCategoryContainer, {
|
|
32
32
|
extraTopMargin: Boolean(colorBandColor),
|
|
33
33
|
bottomMargin: Boolean(categoryIcon || categoryLabel),
|
|
34
34
|
children: [categoryIcon, /*#__PURE__*/_jsx(ComponentS, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardMiddleSection.js","names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","index","label","variant"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled?: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = styled.div<{ $color: string }>`\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ${(props) => props.$color};\n`;\n\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled,\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer data-testid={'card-middleSection'} >\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n
|
|
1
|
+
{"version":3,"file":"CardMiddleSection.js","names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","index","label","variant"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\n\nexport interface CardMiddleSectionProps {\n colorBandColor?: string;\n categoryIcon?: React.ReactNode;\n categoryLabel?: string;\n title: string;\n description?: string;\n tags?: CardTag[];\n row2Tags?: CardTag[];\n disabled?: boolean;\n}\n\nexport interface CardTag {\n label: string;\n variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n display: flex;\n flex-grow: 1;\n width: calc(100% - 32px);\n position: relative;\n flex-direction: column;\n padding: 16px;\n gap: 8px;\n\n .descriptionBlock {\n padding: 2px 0;\n }\n\n .titleBlock {\n padding: 2px 0;\n }\n`;\n\nexport const CardColorBand = styled.div<{ $color: string }>`\n position: absolute;\n width: 100%;\n top: 0px;\n left: 0px;\n height: 8px;\n background-color: ${(props) => props.$color};\n`;\n\nexport const CardTagsContainer = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: none;\n gap: 6px;\n\n svg {\n color: ${COLORS.neutral_500};\n flex-grow: 0;\n flex-shrink: 0;\n }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n colorBandColor,\n categoryIcon,\n categoryLabel,\n title,\n description,\n tags,\n row2Tags,\n disabled,\n}: CardMiddleSectionProps) => {\n return (\n <CardMiddleSectionContainer data-testid={'card-middleSection'} >\n {colorBandColor && <CardColorBand $color={colorBandColor} />}\n {\n (categoryIcon || categoryLabel) &&\n <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardCategoryContainer>\n }\n <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n {title}\n </ComponentXL>\n {description && (\n <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n {description}\n </ComponentS>\n )}\n {tags && (\n <CardTagsContainer>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n {row2Tags && (\n <CardTagsContainer>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardTagsContainer>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA8DC,GAA9D,QAAsF,aAAtF;;;AAkBA,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAV,wTAAhC;AAkBP,OAAO,IAAMC,aAAa,GAAGR,MAAM,CAACO,GAAV,uLAMJ,UAACE,KAAD;EAAA,OAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;AASP,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACO,GAAV,uKAAvB;AAQP,OAAO,IAAMK,qBAAqB,GAAGZ,MAAM,CAACO,GAAV,qPAQrBN,MAAM,CAACY,WARc,CAA3B;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;EAAA,IAR5BC,cAQ4B,QAR5BA,cAQ4B;EAAA,IAP5BC,YAO4B,QAP5BA,YAO4B;EAAA,IAN5BC,aAM4B,QAN5BA,aAM4B;EAAA,IAL5BC,KAK4B,QAL5BA,KAK4B;EAAA,IAJ5BC,WAI4B,QAJ5BA,WAI4B;EAAA,IAH5BC,IAG4B,QAH5BA,IAG4B;EAAA,IAF5BC,QAE4B,QAF5BA,QAE4B;EAAA,IAD5BC,QAC4B,QAD5BA,QAC4B;EAC5B,oBACE,MAAC,0BAAD;IAA4B,eAAa,oBAAzC;IAAA,WACGP,cAAc,iBAAI,KAAC,aAAD;MAAe,MAAM,EAAEA;IAAvB,EADrB,EAGI,CAACC,YAAY,IAAIC,aAAjB,kBACA,MAAC,qBAAD;MAAuB,cAAc,EAAEM,OAAO,CAACR,cAAD,CAA9C;MAAgE,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;MAAA,WACGD,YADH,eAEE,KAAC,UAAD;QAAY,SAAS,EAAEb,kBAAkB,CAACqB,IAA1C;QAAgD,KAAK,EAAEvB,MAAM,CAACY,WAA9D;QAAA,UACGI;MADH,EAFF;IAAA,EAJJ,eAWE,KAAC,WAAD;MAAa,SAAS,EAAC,YAAvB;MAAoC,SAAS,EAAEd,kBAAkB,CAACqB,IAAlE;MAAwE,KAAK,EAAEF,QAAQ,GAAGrB,MAAM,CAACY,WAAV,GAAwBZ,MAAM,CAACwB,KAAtH;MAAA,UACGP;IADH,EAXF,EAcGC,WAAW,iBACV,KAAC,UAAD;MAAY,SAAS,EAAC,kBAAtB;MAAyC,KAAK,EAAElB,MAAM,CAACyB,WAAvD;MAAA,UACGP;IADH,EAfJ,EAmBGC,IAAI,iBACH,KAAC,iBAAD;MAAA,UACGA,IAAI,CAACO,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;QAAA;;QAAA,oBACR,KAAC,GAAD;UAAiC,KAAK,EAAED,CAAC,CAACE,KAA1C;UAAiD,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;QAAvE,aAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;MAAA,CAAT;IADH,EApBJ,EA0BGR,QAAQ,iBACP,KAAC,iBAAD;MAAA,UACGA,QAAQ,CAACM,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;QAAA;;QAAA,oBACZ,KAAC,GAAD;UAAiC,KAAK,EAAED,CAAC,CAACE,KAA1C;UAAiD,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;QAAvE,aAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;MAAA,CAAb;IADH,EA3BJ;EAAA,EADF;AAoCD,CA9CD;;;EAhEEd,c;EACAC,Y;EACAC,a;EACAC,K;EACAC,W;EACAC,I;IAMAU,K;;EALAT,Q;IAKAS,K;;EAJAR,Q;;AAyGF,eAAeR,iBAAf"}
|
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.default = exports.CardTopTagContainer = exports.CardTopSectionContainer = exports.CardRibbonContainer = exports.
|
|
10
|
+
exports.default = exports.CardTopTagContainer = exports.CardTopSectionContainer = exports.CardRibbonContainer = exports.CardImageContainer = exports.CardCheckboxContainer = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -25,6 +25,8 @@ var _Tag = require("../../Tag");
|
|
|
25
25
|
|
|
26
26
|
var _index = require("../../index");
|
|
27
27
|
|
|
28
|
+
var _Image = require("../../Image");
|
|
29
|
+
|
|
28
30
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
31
|
|
|
30
32
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
|
|
@@ -33,15 +35,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
33
35
|
|
|
34
36
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
35
37
|
|
|
36
|
-
var
|
|
38
|
+
var CardImageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n height: 100%;\n width: 100%;\n 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"])));
|
|
37
39
|
|
|
38
|
-
exports.
|
|
40
|
+
exports.CardImageContainer = CardImageContainer;
|
|
39
41
|
|
|
40
42
|
var CardTopTagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n"])));
|
|
41
43
|
|
|
42
44
|
exports.CardTopTagContainer = CardTopTagContainer;
|
|
43
45
|
|
|
44
|
-
var CardTopSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: 100%;\n
|
|
46
|
+
var CardTopSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: 100%;\n overflow: visible;\n\n ", "\n"])), function (props) {
|
|
45
47
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
46
48
|
});
|
|
47
49
|
|
|
@@ -59,6 +61,8 @@ var CardCheckboxContainer = _styledComponents.default.div(_templateObject5 || (_
|
|
|
59
61
|
|
|
60
62
|
exports.CardCheckboxContainer = CardCheckboxContainer;
|
|
61
63
|
var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
64
|
+
var _image$height, _image$fallbackSrc, _image$loader;
|
|
65
|
+
|
|
62
66
|
var selected = _ref.selected,
|
|
63
67
|
setSelected = _ref.setSelected,
|
|
64
68
|
image = _ref.image,
|
|
@@ -74,8 +78,18 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
74
78
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionContainer, {
|
|
75
79
|
disabled: disabled,
|
|
76
80
|
"data-testid": 'card-topSection',
|
|
77
|
-
|
|
78
|
-
|
|
81
|
+
style: {
|
|
82
|
+
height: (_image$height = image === null || image === void 0 ? void 0 : image.height) !== null && _image$height !== void 0 ? _image$height : 200
|
|
83
|
+
},
|
|
84
|
+
children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardImageContainer, {
|
|
85
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
|
|
86
|
+
fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
|
|
87
|
+
src: image.src,
|
|
88
|
+
alt: image.alt,
|
|
89
|
+
loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
|
|
90
|
+
width: image.width,
|
|
91
|
+
height: image.height
|
|
92
|
+
})
|
|
79
93
|
}), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardCheckboxContainer, {
|
|
80
94
|
"data-testid": 'card-topSection-checkbox',
|
|
81
95
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
|
|
@@ -113,7 +127,14 @@ CardTopSection.propTypes = {
|
|
|
113
127
|
highlightRibbonIcon: _propTypes.default.node,
|
|
114
128
|
highlightRibbonContentColor: _propTypes.default.string,
|
|
115
129
|
highlightRibbonBgColor: _propTypes.default.string,
|
|
116
|
-
image: _propTypes.default.
|
|
130
|
+
image: _propTypes.default.shape({
|
|
131
|
+
src: _propTypes.default.string.isRequired,
|
|
132
|
+
fallbackSrc: _propTypes.default.string,
|
|
133
|
+
alt: _propTypes.default.string.isRequired,
|
|
134
|
+
height: _propTypes.default.string,
|
|
135
|
+
width: _propTypes.default.string,
|
|
136
|
+
loader: _propTypes.default.bool
|
|
137
|
+
}),
|
|
117
138
|
disabled: _propTypes.default.bool
|
|
118
139
|
};
|
|
119
140
|
var _default = CardTopSection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardTopSection.cjs","names":["
|
|
1
|
+
{"version":3,"file":"CardTopSection.cjs","names":["CardImageContainer","styled","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","ComponentTextStyle","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\nimport Checkbox from '../../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../../Tag';\n\nimport {COLORS} from '../../index';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport interface CardTopSectionProps {\n selected?: boolean;\n setSelected?: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n tagVariant?: TagVariants;\n highlightRibbonText?: string;\n highlightRibbonIcon?: React.ReactNode;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n disabled?: boolean;\n}\n\nexport const CardImageContainer = styled.div`\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n height: 100%;\n width: 100%;\n 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`;\n\nexport const CardTopTagContainer = styled.div`\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\n position: relative;\n width: 100%;\n overflow: visible;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n`;\n\nexport const CardRibbonContainer = 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\nexport const CardCheckboxContainer = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection = React.forwardRef(({\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, ref: React.Ref<HTMLDivElement>) => {\n\n return (\n <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\n {\n image &&\n <CardImageContainer>\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\n </CardImageContainer>\n }\n {(!!selected || !!setSelected) && (\n <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n <Checkbox ref={ref}\n disabled={disabled}\n select={(selected: boolean) => setSelected && setSelected(selected)}\n selected={selected || false}/>\n </CardCheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <CardTopTagContainer>\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n </CardTopTagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\n $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </CardRibbonContainer>\n )}\n </CardTopSectionContainer>\n );\n});\n\nexport default CardTopSection;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAgBO,IAAMA,kBAAkB,GAAGC,yBAAA,CAAOC,GAAV,sUAAxB;;;;AAcA,IAAMC,mBAAmB,GAAGF,yBAAA,CAAOC,GAAV,0KAAzB;;;;AAQA,IAAME,uBAAuB,GAAGH,yBAAA,CAAOC,GAAV,+JAKhC,UAAAG,KAAK;EAAA,OAAIA,KAAK,CAACC,QAAN,yDAGN,EAHE;AAAA,CAL2B,CAA7B;;;;AAWA,IAAMC,mBAAmB,GAAGN,yBAAA,CAAOC,GAAV,ocAEV,UAAAG,KAAK;EAAA,OAAIA,KAAK,CAACG,gBAAV;AAAA,CAFK,EAcnB,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACI,MAAV;AAAA,CAdc,CAAzB;;;;AAsBA,IAAMC,qBAAqB,GAAGT,yBAAA,CAAOC,GAAV,8MAOVS,aAAA,CAAOC,KAPG,CAA3B;;;AAWP,IAAMC,cAAc,gBAAGC,KAAK,CAACC,UAAN,CAAiB,gBAYyBC,GAZzB,EAY4D;EAAA;;EAAA,IAXzDC,QAWyD,QAXzDA,QAWyD;EAAA,IAVzDC,WAUyD,QAVzDA,WAUyD;EAAA,IATzDC,KASyD,QATzDA,KASyD;EAAA,IARzDC,QAQyD,QARzDA,QAQyD;EAAA,IAPzDC,OAOyD,QAPzDA,OAOyD;EAAA,2BANzDC,UAMyD;EAAA,IANzDA,UAMyD,gCAN5C,UAM4C;EAAA,IALzDC,mBAKyD,QALzDA,mBAKyD;EAAA,IAJzDC,mBAIyD,QAJzDA,mBAIyD;EAAA,IAHzDC,2BAGyD,QAHzDA,2BAGyD;EAAA,IAFzDC,sBAEyD,QAFzDA,sBAEyD;EAAA,IADzDpB,QACyD,QADzDA,QACyD;EAElG,oBACE,sBAAC,uBAAD;IAAyB,QAAQ,EAAEA,QAAnC;IAA6C,eAAa,iBAA1D;IAA6E,KAAK,EAAE;MAACqB,MAAM,mBAAER,KAAF,aAAEA,KAAF,uBAAEA,KAAK,CAAEQ,MAAT,yDAAmB;IAA1B,CAApF;IAAA,WAEIR,KAAK,iBACL,qBAAC,kBAAD;MAAA,uBACI,qBAAC,yBAAD;QAAoB,SAAS,wBAAEA,KAAK,CAACS,WAAR,mEAAuB,EAApD;QAAwD,GAAG,EAAET,KAAK,CAACU,GAAnE;QAAwE,GAAG,EAAEV,KAAK,CAACW,GAAnF;QAAwF,MAAM,mBAAEX,KAAK,CAACY,MAAR,yDAAkB,KAAhH;QAAuH,KAAK,EAAEZ,KAAK,CAACa,KAApI;QAA2I,MAAM,EAAEb,KAAK,CAACQ;MAAzJ;IADJ,EAHJ,EAOG,CAAC,CAAC,CAACV,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,qBAAC,qBAAD;MAAuB,eAAa,0BAApC;MAAA,uBACE,qBAAC,iBAAD;QAAU,GAAG,EAAEF,GAAf;QACU,QAAQ,EAAEV,QADpB;QAEU,MAAM,EAAE,gBAACW,QAAD;UAAA,OAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;QAAA,CAFlB;QAGU,QAAQ,EAAEA,QAAQ,IAAI;MAHhC;IADF,EARJ,EAeG,CAACG,QAAQ,IAAIC,OAAb,kBACC,qBAAC,mBAAD;MAAA,uBACE,qBAAC,QAAD;QAAK,KAAK,EAAED,QAAZ;QAAsB,OAAO,EAAEE,UAA/B;QAA2C,IAAI,EAAED;MAAjD;IADF,EAhBJ,EAoBG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,sBAAC,mBAAD;MAAqB,eAAa,wBAAlC;MAA4D,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAnG;MACqB,gBAAgB,EAAEnB,QAAQ,GAAGK,aAAA,CAAOsB,WAAV,GAAwBP,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EADjG;MAAA,WAEGH,mBAFH,EAGGC,mBAAmB,iBAClB,qBAAC,sBAAD;QAAY,KAAK,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAlD;QAAsD,SAAS,EAAES,8BAAA,CAAmBC,OAApF;QAAA,UACGX;MADH,EAJJ;IAAA,EArBJ;EAAA,EADF;AAkCD,CAhDsB,CAAvB;;EA/EEP,Q;EACAC,W;EACAE,Q;EACAC,O;EAEAG,mB;EACAD,mB;EACAE,2B;EACAC,sB;EACAP,K;IAAUU,G;IAAaD,W;IAAsBE,G;IAAaH,M;IAAiBK,K;IAAgBD,M;;EAC3FzB,Q;;eAuHaO,c"}
|
|
@@ -10,10 +10,17 @@ export interface CardTopSectionProps {
|
|
|
10
10
|
highlightRibbonIcon?: React.ReactNode;
|
|
11
11
|
highlightRibbonContentColor?: string;
|
|
12
12
|
highlightRibbonBgColor?: string;
|
|
13
|
-
image?:
|
|
13
|
+
image?: {
|
|
14
|
+
src: string;
|
|
15
|
+
fallbackSrc?: string;
|
|
16
|
+
alt: string;
|
|
17
|
+
height?: string;
|
|
18
|
+
width?: string;
|
|
19
|
+
loader?: boolean;
|
|
20
|
+
};
|
|
14
21
|
disabled?: boolean;
|
|
15
22
|
}
|
|
16
|
-
export declare const
|
|
23
|
+
export declare const CardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
24
|
export declare const CardTopTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
25
|
export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
|
|
19
26
|
disabled?: boolean | undefined;
|
|
@@ -9,11 +9,12 @@ import { ComponentS, ComponentTextStyle } from '../../styles/typography';
|
|
|
9
9
|
import Checkbox from '../../InputFields/Checkbox';
|
|
10
10
|
import { Tag } from '../../Tag';
|
|
11
11
|
import { COLORS } from '../../index';
|
|
12
|
+
import { ImageWithFallbacks } from "../../Image";
|
|
12
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
export var
|
|
15
|
+
export var CardImageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n height: 100%;\n width: 100%;\n 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"])));
|
|
15
16
|
export var CardTopTagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n"])));
|
|
16
|
-
export var CardTopSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n
|
|
17
|
+
export var CardTopSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n width: 100%;\n overflow: visible;\n\n ", "\n"])), function (props) {
|
|
17
18
|
return props.disabled ? "\n img, svg {\n filter: grayscale(100%);\n }" : '';
|
|
18
19
|
});
|
|
19
20
|
export var CardRibbonContainer = 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) {
|
|
@@ -23,6 +24,8 @@ export var CardRibbonContainer = styled.div(_templateObject4 || (_templateObject
|
|
|
23
24
|
});
|
|
24
25
|
export var CardCheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n .checkbox-icon {\n background-color: ", ";\n }\n"])), COLORS.white);
|
|
25
26
|
var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
27
|
+
var _image$height, _image$fallbackSrc, _image$loader;
|
|
28
|
+
|
|
26
29
|
var selected = _ref.selected,
|
|
27
30
|
setSelected = _ref.setSelected,
|
|
28
31
|
image = _ref.image,
|
|
@@ -38,8 +41,18 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
38
41
|
return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
|
|
39
42
|
disabled: disabled,
|
|
40
43
|
"data-testid": 'card-topSection',
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
style: {
|
|
45
|
+
height: (_image$height = image === null || image === void 0 ? void 0 : image.height) !== null && _image$height !== void 0 ? _image$height : 200
|
|
46
|
+
},
|
|
47
|
+
children: [image && /*#__PURE__*/_jsx(CardImageContainer, {
|
|
48
|
+
children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
|
|
49
|
+
fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
|
|
50
|
+
src: image.src,
|
|
51
|
+
alt: image.alt,
|
|
52
|
+
loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
|
|
53
|
+
width: image.width,
|
|
54
|
+
height: image.height
|
|
55
|
+
})
|
|
43
56
|
}), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardCheckboxContainer, {
|
|
44
57
|
"data-testid": 'card-topSection-checkbox',
|
|
45
58
|
children: /*#__PURE__*/_jsx(Checkbox, {
|
|
@@ -77,7 +90,14 @@ CardTopSection.propTypes = {
|
|
|
77
90
|
highlightRibbonIcon: _pt.node,
|
|
78
91
|
highlightRibbonContentColor: _pt.string,
|
|
79
92
|
highlightRibbonBgColor: _pt.string,
|
|
80
|
-
image: _pt.
|
|
93
|
+
image: _pt.shape({
|
|
94
|
+
src: _pt.string.isRequired,
|
|
95
|
+
fallbackSrc: _pt.string,
|
|
96
|
+
alt: _pt.string.isRequired,
|
|
97
|
+
height: _pt.string,
|
|
98
|
+
width: _pt.string,
|
|
99
|
+
loader: _pt.bool
|
|
100
|
+
}),
|
|
81
101
|
disabled: _pt.bool
|
|
82
102
|
};
|
|
83
103
|
export default CardTopSection;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardTopSection.js","names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","
|
|
1
|
+
{"version":3,"file":"CardTopSection.js","names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","CardImageContainer","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\nimport Checkbox from '../../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../../Tag';\n\nimport {COLORS} from '../../index';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport interface CardTopSectionProps {\n selected?: boolean;\n setSelected?: (arg0: boolean) => void;\n tagLabel?: string;\n tagIcon?: React.ReactNode;\n tagVariant?: TagVariants;\n highlightRibbonText?: string;\n highlightRibbonIcon?: React.ReactNode;\n highlightRibbonContentColor?: string;\n highlightRibbonBgColor?: string;\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n disabled?: boolean;\n}\n\nexport const CardImageContainer = styled.div`\n border-top-right-radius: 8px;\n border-top-left-radius: 8px;\n height: 100%;\n width: 100%;\n 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`;\n\nexport const CardTopTagContainer = styled.div`\n position: absolute;\n\n top: 16px;\n left: 16px;\n width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\n position: relative;\n width: 100%;\n overflow: visible;\n\n ${props => props.disabled ? `\n img, svg {\n filter: grayscale(100%);\n }` : ''}\n`;\n\nexport const CardRibbonContainer = 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\nexport const CardCheckboxContainer = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n\n .checkbox-icon {\n background-color: ${COLORS.white};\n }\n`;\n\nconst CardTopSection = React.forwardRef(({\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, ref: React.Ref<HTMLDivElement>) => {\n\n return (\n <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\n {\n image &&\n <CardImageContainer>\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\n </CardImageContainer>\n }\n {(!!selected || !!setSelected) && (\n <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n <Checkbox ref={ref}\n disabled={disabled}\n select={(selected: boolean) => setSelected && setSelected(selected)}\n selected={selected || false}/>\n </CardCheckboxContainer>\n )}\n {(tagLabel || tagIcon) && (\n <CardTopTagContainer>\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n </CardTopTagContainer>\n )}\n {(highlightRibbonIcon || highlightRibbonText) && (\n <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\n $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n {highlightRibbonIcon}\n {highlightRibbonText && (\n <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n {highlightRibbonText}\n </ComponentS>\n )}\n </CardRibbonContainer>\n )}\n </CardTopSectionContainer>\n );\n});\n\nexport default CardTopSection;\n"],"mappings":"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"}
|
|
@@ -29,7 +29,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
29
29
|
|
|
30
30
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
31
|
|
|
32
|
-
var _excluded = ["src", "alt"];
|
|
32
|
+
var _excluded = ["src", "alt", "fallbacks", "loader", "loading"];
|
|
33
33
|
|
|
34
34
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
35
|
|
|
@@ -52,7 +52,7 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
52
52
|
_this.state = {
|
|
53
53
|
src: props.src,
|
|
54
54
|
fallbackIndex: 0,
|
|
55
|
-
fallbacks: _this.props.fallbacks.split('
|
|
55
|
+
fallbacks: _this.props.fallbacks.split('|'),
|
|
56
56
|
loaded: false
|
|
57
57
|
};
|
|
58
58
|
return _this;
|
|
@@ -65,7 +65,7 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
65
65
|
this.setState({
|
|
66
66
|
src: this.props.src,
|
|
67
67
|
fallbackIndex: 0,
|
|
68
|
-
fallbacks: this.props.fallbacks.split('
|
|
68
|
+
fallbacks: this.props.fallbacks.split('|'),
|
|
69
69
|
loaded: false
|
|
70
70
|
});
|
|
71
71
|
}
|
|
@@ -98,6 +98,9 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
98
98
|
var _this$props = this.props,
|
|
99
99
|
src = _this$props.src,
|
|
100
100
|
alt = _this$props.alt,
|
|
101
|
+
fallbacks = _this$props.fallbacks,
|
|
102
|
+
loader = _this$props.loader,
|
|
103
|
+
loading = _this$props.loading,
|
|
101
104
|
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
102
105
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
103
106
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", _objectSpread({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageWithFallbacks.cjs","names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","rest","onError","onLoad","
|
|
1
|
+
{"version":3,"file":"ImageWithFallbacks.cjs","names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","React","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n fallbacks: string;\n src: string;\n alt: string;\n loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n src: string;\n fallbackIndex: number;\n fallbacks: string[];\n loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n constructor(props: ImageWithFallbacksProps) {\n super(props);\n this.state = {\n src: props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks.split('|'),\n loaded: false,\n };\n }\n componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n this.setState({\n src: this.props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks.split('|'),\n loaded: false,\n });\n }\n }\n onError() {\n if (this.state.fallbackIndex > this.state.fallbacks.length) {\n return;\n }\n this.setState({\n src: this.state.fallbacks[this.state.fallbackIndex],\n fallbackIndex: this.state.fallbackIndex + 1,\n fallbacks: this.state.fallbacks,\n });\n }\n onLoad() {\n this.setState({ ...this.state, loaded: true });\n }\n render() {\n const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\n return (\n <>\n <img src={this.state.src}\n onError={() => this.onError()}\n onChange={() => this.onLoad()}\n onLoad={() => this.onLoad()}\n alt={this.props.alt}\n {...rest}/>\n {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n </>\n );\n }\n}\n\nexport default ImageWithFallbacks;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;IAgBMA,kB;;;;;EACJ,4BAAYC,KAAZ,EAA4C;IAAA;;IAAA;IAC1C,0BAAMA,KAAN;IACA,MAAKC,KAAL,GAAa;MACXC,GAAG,EAAEF,KAAK,CAACE,GADA;MAEXC,aAAa,EAAE,CAFJ;MAGXC,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;MAIXC,MAAM,EAAE;IAJG,CAAb;IAF0C;EAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;MACrD,IAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;QACpF,KAAKI,QAAL,CAAc;UACZN,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;UAEZC,aAAa,EAAE,CAFH;UAGZC,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;UAIZC,MAAM,EAAE;QAJI,CAAd;MAMD;IACF;;;WACD,mBAAU;MACR,IAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;QAC1D;MACD;;MACD,KAAKD,QAAL,CAAc;QACZN,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;QAEZA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;QAGZC,SAAS,EAAE,KAAKH,KAAL,CAAWG;MAHV,CAAd;IAKD;;;WACD,kBAAS;MACP,KAAKI,QAAL,iCAAmB,KAAKP,KAAxB;QAA+BK,MAAM,EAAE;MAAvC;IACD;;;WACD,kBAAS;MAAA;;MACP,kBAAwD,KAAKN,KAA7D;MAAA,IAAOE,GAAP,eAAOA,GAAP;MAAA,IAAYQ,GAAZ,eAAYA,GAAZ;MAAA,IAAiBN,SAAjB,eAAiBA,SAAjB;MAAA,IAA4BO,MAA5B,eAA4BA,MAA5B;MAAA,IAAoCC,OAApC,eAAoCA,OAApC;MAAA,IAAgDC,IAAhD;MACA,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,KAAKZ,KAAL,CAAWC,GAArB;UACK,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAL,EAAN;UAAA,CADd;UAEK,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAL,EAAN;UAAA,CAFf;UAGK,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAL,EAAN;UAAA,CAHb;UAIK,GAAG,EAAE,KAAKf,KAAL,CAAWU;QAJrB,GAKSG,IALT,EADF,EAOG,KAAKb,KAAL,CAAWW,MAAX,IAAqB,CAAC,KAAKV,KAAL,CAAWK,MAAjC,iBAA2C,qBAAC,kBAAD;UAAkB,EAAE,EAAC;QAArB,EAP9C;MAAA,EADF;IAWD;;;EA9C8BU,cAAA,CAAMC,S;;8BAAjClB,kB;EAbJK,S;EACAF,G;EACAQ,G;EACAC,M;;eA2DaZ,kB"}
|
|
@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
|
|
|
6
6
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
8
|
import _pt from "prop-types";
|
|
9
|
-
var _excluded = ["src", "alt"];
|
|
9
|
+
var _excluded = ["src", "alt", "fallbacks", "loader", "loading"];
|
|
10
10
|
|
|
11
11
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
12
12
|
|
|
@@ -36,7 +36,7 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
36
36
|
_this.state = {
|
|
37
37
|
src: props.src,
|
|
38
38
|
fallbackIndex: 0,
|
|
39
|
-
fallbacks: _this.props.fallbacks.split('
|
|
39
|
+
fallbacks: _this.props.fallbacks.split('|'),
|
|
40
40
|
loaded: false
|
|
41
41
|
};
|
|
42
42
|
return _this;
|
|
@@ -49,7 +49,7 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
49
49
|
this.setState({
|
|
50
50
|
src: this.props.src,
|
|
51
51
|
fallbackIndex: 0,
|
|
52
|
-
fallbacks: this.props.fallbacks.split('
|
|
52
|
+
fallbacks: this.props.fallbacks.split('|'),
|
|
53
53
|
loaded: false
|
|
54
54
|
});
|
|
55
55
|
}
|
|
@@ -82,6 +82,9 @@ var ImageWithFallbacks = /*#__PURE__*/function (_React$Component) {
|
|
|
82
82
|
var _this$props = this.props,
|
|
83
83
|
src = _this$props.src,
|
|
84
84
|
alt = _this$props.alt,
|
|
85
|
+
fallbacks = _this$props.fallbacks,
|
|
86
|
+
loader = _this$props.loader,
|
|
87
|
+
loading = _this$props.loading,
|
|
85
88
|
rest = _objectWithoutProperties(_this$props, _excluded);
|
|
86
89
|
|
|
87
90
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","rest","onError","onLoad","
|
|
1
|
+
{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n fallbacks: string;\n src: string;\n alt: string;\n loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n src: string;\n fallbackIndex: number;\n fallbacks: string[];\n loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n constructor(props: ImageWithFallbacksProps) {\n super(props);\n this.state = {\n src: props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks.split('|'),\n loaded: false,\n };\n }\n componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n this.setState({\n src: this.props.src,\n fallbackIndex: 0,\n fallbacks: this.props.fallbacks.split('|'),\n loaded: false,\n });\n }\n }\n onError() {\n if (this.state.fallbackIndex > this.state.fallbacks.length) {\n return;\n }\n this.setState({\n src: this.state.fallbacks[this.state.fallbackIndex],\n fallbackIndex: this.state.fallbackIndex + 1,\n fallbacks: this.state.fallbacks,\n });\n }\n onLoad() {\n this.setState({ ...this.state, loaded: true });\n }\n render() {\n const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\n return (\n <>\n <img src={this.state.src}\n onError={() => this.onError()}\n onChange={() => this.onLoad()}\n onLoad={() => this.onLoad()}\n alt={this.props.alt}\n {...rest}/>\n {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n </>\n );\n }\n}\n\nexport default ImageWithFallbacks;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAASA,gBAAT,QAAiC,IAAjC;AACA,OAAOC,KAAP,MAAkB,OAAlB;;;;;IAgBMC,kB;;;;;EACJ,4BAAYC,KAAZ,EAA4C;IAAA;;IAAA;;IAC1C,0BAAMA,KAAN;IACA,MAAKC,KAAL,GAAa;MACXC,GAAG,EAAEF,KAAK,CAACE,GADA;MAEXC,aAAa,EAAE,CAFJ;MAGXC,SAAS,EAAE,MAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHA;MAIXC,MAAM,EAAE;IAJG,CAAb;IAF0C;EAQ3C;;;;WACD,4BAAmBC,SAAnB,EAAuD;MACrD,IAAIA,SAAS,CAACL,GAAV,KAAkB,KAAKF,KAAL,CAAWE,GAA7B,IAAoCK,SAAS,CAACH,SAAV,KAAwB,KAAKJ,KAAL,CAAWI,SAA3E,EAAsF;QACpF,KAAKI,QAAL,CAAc;UACZN,GAAG,EAAE,KAAKF,KAAL,CAAWE,GADJ;UAEZC,aAAa,EAAE,CAFH;UAGZC,SAAS,EAAE,KAAKJ,KAAL,CAAWI,SAAX,CAAqBC,KAArB,CAA2B,GAA3B,CAHC;UAIZC,MAAM,EAAE;QAJI,CAAd;MAMD;IACF;;;WACD,mBAAU;MACR,IAAI,KAAKL,KAAL,CAAWE,aAAX,GAA2B,KAAKF,KAAL,CAAWG,SAAX,CAAqBK,MAApD,EAA4D;QAC1D;MACD;;MACD,KAAKD,QAAL,CAAc;QACZN,GAAG,EAAE,KAAKD,KAAL,CAAWG,SAAX,CAAqB,KAAKH,KAAL,CAAWE,aAAhC,CADO;QAEZA,aAAa,EAAE,KAAKF,KAAL,CAAWE,aAAX,GAA2B,CAF9B;QAGZC,SAAS,EAAE,KAAKH,KAAL,CAAWG;MAHV,CAAd;IAKD;;;WACD,kBAAS;MACP,KAAKI,QAAL,iCAAmB,KAAKP,KAAxB;QAA+BK,MAAM,EAAE;MAAvC;IACD;;;WACD,kBAAS;MAAA;;MACP,kBAAwD,KAAKN,KAA7D;MAAA,IAAOE,GAAP,eAAOA,GAAP;MAAA,IAAYQ,GAAZ,eAAYA,GAAZ;MAAA,IAAiBN,SAAjB,eAAiBA,SAAjB;MAAA,IAA4BO,MAA5B,eAA4BA,MAA5B;MAAA,IAAoCC,OAApC,eAAoCA,OAApC;MAAA,IAAgDC,IAAhD;;MACA,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,KAAKZ,KAAL,CAAWC,GAArB;UACK,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAL,EAAN;UAAA,CADd;UAEK,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAL,EAAN;UAAA,CAFf;UAGK,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAL,EAAN;UAAA,CAHb;UAIK,GAAG,EAAE,KAAKf,KAAL,CAAWU;QAJrB,GAKSG,IALT,EADF,EAOG,KAAKb,KAAL,CAAWW,MAAX,IAAqB,CAAC,KAAKV,KAAL,CAAWK,MAAjC,iBAA2C,KAAC,gBAAD;UAAkB,EAAE,EAAC;QAArB,EAP9C;MAAA,EADF;IAWD;;;;EA9C8BR,KAAK,CAACkB,S;;gBAAjCjB,kB;EAbJK,S;EACAF,G;EACAQ,G;EACAC,M;;;AA2DF,eAAeZ,kBAAf"}
|