@laerdal/life-react-components 3.2.1-dev.13 → 3.2.1-dev.15
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/types.cjs.map +1 -1
- package/dist/Card/HorizontalCard/types.d.ts +1 -1
- package/dist/Card/HorizontalCard/types.js.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs +4 -17
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.d.ts +2 -0
- package/dist/Card/VerticalCard/CardMiddleSection.js +4 -17
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React, { ReactNode } from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from '../../types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\n \nexport interface CustomContentProps extends Testable{\n content:ReactNode;\n}\n\n\nexport type HorizontalCardCustomContent =\n CustomContentProps\n & { componentType: 'custom'; }\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\n\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, 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":""}
|
|
1
|
+
{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React, { ReactNode } from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from '../../types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\n \nexport interface CustomContentProps extends Testable{\n content:ReactNode;\n}\n\n\nexport type HorizontalCardCustomContent =\n CustomContentProps\n & { componentType: 'custom'; }\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\n\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, 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 | HorizontalCardCustomContent)[];\n}\n"],"mappings":""}
|
|
@@ -45,5 +45,5 @@ export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes
|
|
|
45
45
|
};
|
|
46
46
|
tags?: HorizontalCardTag[];
|
|
47
47
|
progress?: HorizontalCardLinearProgression;
|
|
48
|
-
actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];
|
|
48
|
+
actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
|
|
49
49
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React, { ReactNode } from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from '../../types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\n \nexport interface CustomContentProps extends Testable{\n content:ReactNode;\n}\n\n\nexport type HorizontalCardCustomContent =\n CustomContentProps\n & { componentType: 'custom'; }\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\n\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, 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":""}
|
|
1
|
+
{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React, { ReactNode } from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from '../../types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n componentType: 'icon';\n icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n & { componentType: 'toggle'; }\n\n \nexport interface CustomContentProps extends Testable{\n content:ReactNode;\n}\n\n\nexport type HorizontalCardCustomContent =\n CustomContentProps\n & { componentType: 'custom'; }\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\n\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, 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 | HorizontalCardCustomContent)[];\n}\n"],"mappings":""}
|
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
|
|
9
9
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
10
|
var React = _interopRequireWildcard(require("react"));
|
|
12
11
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
12
|
var _index = require("../../index");
|
|
@@ -60,7 +59,8 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
60
59
|
var _x$variant;
|
|
61
60
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
|
|
62
61
|
label: x.label,
|
|
63
|
-
variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
|
|
62
|
+
variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral',
|
|
63
|
+
icon: x.icon
|
|
64
64
|
}, "".concat(x.label, "_").concat(index));
|
|
65
65
|
})
|
|
66
66
|
}), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
|
|
@@ -68,26 +68,13 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
68
68
|
var _x$variant2;
|
|
69
69
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
|
|
70
70
|
label: x.label,
|
|
71
|
-
variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
|
|
71
|
+
variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral',
|
|
72
|
+
icon: x.icon
|
|
72
73
|
}, "".concat(x.label, "_").concat(index));
|
|
73
74
|
})
|
|
74
75
|
})]
|
|
75
76
|
});
|
|
76
77
|
};
|
|
77
|
-
CardMiddleSection.propTypes = {
|
|
78
|
-
colorBandColor: _propTypes.default.string,
|
|
79
|
-
categoryIcon: _propTypes.default.node,
|
|
80
|
-
categoryLabel: _propTypes.default.string,
|
|
81
|
-
title: _propTypes.default.string.isRequired,
|
|
82
|
-
description: _propTypes.default.string,
|
|
83
|
-
tags: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
84
|
-
label: _propTypes.default.string.isRequired
|
|
85
|
-
})),
|
|
86
|
-
row2Tags: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
87
|
-
label: _propTypes.default.string.isRequired
|
|
88
|
-
})),
|
|
89
|
-
disabled: _propTypes.default.bool
|
|
90
|
-
};
|
|
91
78
|
var _default = CardMiddleSection;
|
|
92
79
|
exports.default = _default;
|
|
93
80
|
//# sourceMappingURL=CardMiddleSection.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardMiddleSection.cjs","names":["CardMiddleSectionContainer","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardMiddleSectionCategoryStyles = 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 && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\n {\n (categoryIcon || categoryLabel) &&\n <CardMiddleSectionCategoryStyles extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardMiddleSectionCategoryStyles>\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 <CardMiddleSectionTagsStyles>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n {row2Tags && (\n <CardMiddleSectionTagsStyles>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CardMiddleSection.cjs","names":["CardMiddleSectionContainer","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant","icon"],"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';\nimport { ReactNode } from 'react';\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 icon?: ReactNode\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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardMiddleSectionCategoryStyles = 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 && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\n {\n (categoryIcon || categoryLabel) &&\n <CardMiddleSectionCategoryStyles extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardMiddleSectionCategoryStyles>\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 <CardMiddleSectionTagsStyles>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n {row2Tags && (\n <CardMiddleSectionTagsStyles>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAAoG;AAAA;AAAA;AAAA;AAoB7F,IAAMA,0BAA0B,GAAGC,yBAAM,CAACC,GAAG,sUAgBnD;AAAC;AAEK,IAAMC,gCAAgC,GAAGF,yBAAM,CAACC,GAAG,qMAMpC,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,EAC5C;AAAC;AAEK,IAAMC,2BAA2B,GAAGL,yBAAM,CAACC,GAAG,qLAMpD;AAAC;AAEK,IAAMK,+BAA+B,GAAGN,yBAAM,CAACC,GAAG,mQAQ5CM,aAAM,CAACC,WAAW,CAI9B;AAAC;AAEF,IAAMC,iBAAkE,GAAG,SAArEA,iBAAkE,OAS1C;EAAA,IAR5BC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;EAER,oBACE,sBAAC,0BAA0B;IAAC,eAAa,oBAAqB;IAAA,WAC3DP,cAAc,iBAAI,qBAAC,gCAAgC;MAAC,MAAM,EAAEA;IAAe,EAAG,EAE7E,CAACC,YAAY,IAAIC,aAAa,kBAC9B,sBAAC,+BAA+B;MAAC,cAAc,EAAEM,OAAO,CAACR,cAAc,CAAE;MAAC,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAa,CAAE;MAAA,WAC5HD,YAAY,eACb,qBAAC,iBAAU;QAAC,SAAS,EAAEQ,yBAAkB,CAACC,IAAK;QAAC,KAAK,EAAEb,aAAM,CAACC,WAAY;QAAA,UACvEI;MAAa,EACH;IAAA,EACmB,eAEpC,qBAAC,kBAAW;MAAC,SAAS,EAAC,YAAY;MAAC,SAAS,EAAEO,yBAAkB,CAACC,IAAK;MAAC,KAAK,EAAEH,QAAQ,GAAGV,aAAM,CAACC,WAAW,GAAGD,aAAM,CAACc,KAAM;MAAA,UACzHR;IAAK,EACM,EACbC,WAAW,iBACV,qBAAC,iBAAU;MAAC,SAAS,EAAC,kBAAkB;MAAC,KAAK,EAAEP,aAAM,CAACe,WAAY;MAAA,UAChER;IAAW,EAEf,EACAC,IAAI,iBACH,qBAAC,2BAA2B;MAAA,UACzBA,IAAI,CAACQ,GAAG,CAAC,UAACC,CAAC,EAAEC,KAAK;QAAA;QAAA,oBACjB,qBAAC,UAAG;UAA6B,KAAK,EAAED,CAAC,CAACE,KAAM;UAAC,OAAO,gBAAEF,CAAC,CAACG,OAAO,mDAAI,SAAU;UAAC,IAAI,EAAEH,CAAC,CAACI;QAAK,aAAlFJ,CAAC,CAACE,KAAK,cAAID,KAAK,EAAqE;MAAA,CACnG;IAAC,EAEL,EACAT,QAAQ,iBACP,qBAAC,2BAA2B;MAAA,UACzBA,QAAQ,CAACO,GAAG,CAAC,UAACC,CAAC,EAAEC,KAAK;QAAA;QAAA,oBACrB,qBAAC,UAAG;UAA6B,KAAK,EAAED,CAAC,CAACE,KAAM;UAAC,OAAO,iBAAEF,CAAC,CAACG,OAAO,qDAAI,SAAU;UAAC,IAAI,EAAEH,CAAC,CAACI;QAAK,aAAlFJ,CAAC,CAACE,KAAK,cAAID,KAAK,EAAqE;MAAA,CACnG;IAAC,EAEL;EAAA,EAC0B;AAEjC,CAAC;AAAC,eAEahB,iBAAiB;AAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TagVariants } from '../../index';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
3
4
|
export interface CardMiddleSectionProps {
|
|
4
5
|
colorBandColor?: string;
|
|
5
6
|
categoryIcon?: React.ReactNode;
|
|
@@ -13,6 +14,7 @@ export interface CardMiddleSectionProps {
|
|
|
13
14
|
export interface CardTag {
|
|
14
15
|
label: string;
|
|
15
16
|
variant?: TagVariants;
|
|
17
|
+
icon?: ReactNode;
|
|
16
18
|
}
|
|
17
19
|
export declare const CardMiddleSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
20
|
export declare const CardMiddleSectionColorBandStyles: import("styled-components").StyledComponent<"div", any, {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
import _pt from "prop-types";
|
|
3
2
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
4
3
|
import * as React from 'react';
|
|
5
4
|
import styled from 'styled-components';
|
|
@@ -47,7 +46,8 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
47
46
|
var _x$variant;
|
|
48
47
|
return /*#__PURE__*/_jsx(Tag, {
|
|
49
48
|
label: x.label,
|
|
50
|
-
variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
|
|
49
|
+
variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral',
|
|
50
|
+
icon: x.icon
|
|
51
51
|
}, "".concat(x.label, "_").concat(index));
|
|
52
52
|
})
|
|
53
53
|
}), row2Tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
|
|
@@ -55,25 +55,12 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
|
|
|
55
55
|
var _x$variant2;
|
|
56
56
|
return /*#__PURE__*/_jsx(Tag, {
|
|
57
57
|
label: x.label,
|
|
58
|
-
variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
|
|
58
|
+
variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral',
|
|
59
|
+
icon: x.icon
|
|
59
60
|
}, "".concat(x.label, "_").concat(index));
|
|
60
61
|
})
|
|
61
62
|
})]
|
|
62
63
|
});
|
|
63
64
|
};
|
|
64
|
-
CardMiddleSection.propTypes = {
|
|
65
|
-
colorBandColor: _pt.string,
|
|
66
|
-
categoryIcon: _pt.node,
|
|
67
|
-
categoryLabel: _pt.string,
|
|
68
|
-
title: _pt.string.isRequired,
|
|
69
|
-
description: _pt.string,
|
|
70
|
-
tags: _pt.arrayOf(_pt.shape({
|
|
71
|
-
label: _pt.string.isRequired
|
|
72
|
-
})),
|
|
73
|
-
row2Tags: _pt.arrayOf(_pt.shape({
|
|
74
|
-
label: _pt.string.isRequired
|
|
75
|
-
})),
|
|
76
|
-
disabled: _pt.bool
|
|
77
|
-
};
|
|
78
65
|
export default CardMiddleSection;
|
|
79
66
|
//# sourceMappingURL=CardMiddleSection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardMiddleSection.js","names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardMiddleSectionCategoryStyles = 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 && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\n {\n (categoryIcon || categoryLabel) &&\n <CardMiddleSectionCategoryStyles extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardMiddleSectionCategoryStyles>\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 <CardMiddleSectionTagsStyles>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n {row2Tags && (\n <CardMiddleSectionTagsStyles>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CardMiddleSection.js","names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","index","label","variant","icon"],"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';\nimport { ReactNode } from 'react';\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 icon?: ReactNode\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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = styled.div`\n display: flex;\n flex-direction: row;\n padding: 4px 0;\n gap: 4px;\n flex-wrap: wrap;\n`;\n\nexport const CardMiddleSectionCategoryStyles = 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 && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\n {\n (categoryIcon || categoryLabel) &&\n <CardMiddleSectionCategoryStyles extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n {categoryIcon}\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n {categoryLabel}\n </ComponentS>\n </CardMiddleSectionCategoryStyles>\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 <CardMiddleSectionTagsStyles>\n {tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n {row2Tags && (\n <CardMiddleSectionTagsStyles>\n {row2Tags.map((x, index) => (\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\n ))}\n </CardMiddleSectionTagsStyles>\n )}\n </CardMiddleSectionContainer>\n );\n};\n\nexport default CardMiddleSection;\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,UAAU,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,GAAG,QAAqB,aAAa;AAAC;AAAA;AAoBpG,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAG,wTAgBnD;AAED,OAAO,IAAMC,gCAAgC,GAAGR,MAAM,CAACO,GAAG,uLAMpC,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,EAC5C;AAED,OAAO,IAAMC,2BAA2B,GAAGX,MAAM,CAACO,GAAG,uKAMpD;AAED,OAAO,IAAMK,+BAA+B,GAAGZ,MAAM,CAACO,GAAG,qPAQ5CN,MAAM,CAACY,WAAW,CAI9B;AAED,IAAMC,iBAAkE,GAAG,SAArEA,iBAAkE,OAS1C;EAAA,IAR5BC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;EAER,oBACE,MAAC,0BAA0B;IAAC,eAAa,oBAAqB;IAAA,WAC3DP,cAAc,iBAAI,KAAC,gCAAgC;MAAC,MAAM,EAAEA;IAAe,EAAG,EAE7E,CAACC,YAAY,IAAIC,aAAa,kBAC9B,MAAC,+BAA+B;MAAC,cAAc,EAAEM,OAAO,CAACR,cAAc,CAAE;MAAC,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAa,CAAE;MAAA,WAC5HD,YAAY,eACb,KAAC,UAAU;QAAC,SAAS,EAAEb,kBAAkB,CAACqB,IAAK;QAAC,KAAK,EAAEvB,MAAM,CAACY,WAAY;QAAA,UACvEI;MAAa,EACH;IAAA,EACmB,eAEpC,KAAC,WAAW;MAAC,SAAS,EAAC,YAAY;MAAC,SAAS,EAAEd,kBAAkB,CAACqB,IAAK;MAAC,KAAK,EAAEF,QAAQ,GAAGrB,MAAM,CAACY,WAAW,GAAGZ,MAAM,CAACwB,KAAM;MAAA,UACzHP;IAAK,EACM,EACbC,WAAW,iBACV,KAAC,UAAU;MAAC,SAAS,EAAC,kBAAkB;MAAC,KAAK,EAAElB,MAAM,CAACyB,WAAY;MAAA,UAChEP;IAAW,EAEf,EACAC,IAAI,iBACH,KAAC,2BAA2B;MAAA,UACzBA,IAAI,CAACO,GAAG,CAAC,UAACC,CAAC,EAAEC,KAAK;QAAA;QAAA,oBACjB,KAAC,GAAG;UAA6B,KAAK,EAAED,CAAC,CAACE,KAAM;UAAC,OAAO,gBAAEF,CAAC,CAACG,OAAO,mDAAI,SAAU;UAAC,IAAI,EAAEH,CAAC,CAACI;QAAK,aAAlFJ,CAAC,CAACE,KAAK,cAAID,KAAK,EAAqE;MAAA,CACnG;IAAC,EAEL,EACAR,QAAQ,iBACP,KAAC,2BAA2B;MAAA,UACzBA,QAAQ,CAACM,GAAG,CAAC,UAACC,CAAC,EAAEC,KAAK;QAAA;QAAA,oBACrB,KAAC,GAAG;UAA6B,KAAK,EAAED,CAAC,CAACE,KAAM;UAAC,OAAO,iBAAEF,CAAC,CAACG,OAAO,qDAAI,SAAU;UAAC,IAAI,EAAEH,CAAC,CAACI;QAAK,aAAlFJ,CAAC,CAACE,KAAK,cAAID,KAAK,EAAqE;MAAA,CACnG;IAAC,EAEL;EAAA,EAC0B;AAEjC,CAAC;AAED,eAAef,iBAAiB"}
|