@laerdal/life-react-components 3.3.1-dev.1 → 3.3.1-dev.3
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/HorizontalCardActions.cjs +4 -0
- package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +1 -1
- package/dist/Card/HorizontalCard/HorizontalCardActions.js +4 -0
- package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +1 -1
- package/dist/Card/HorizontalCard/types.cjs.map +1 -1
- package/dist/Card/HorizontalCard/types.d.ts +8 -2
- 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
|
@@ -33,6 +33,10 @@ var HorizontalCardActions = /*#__PURE__*/_react.default.forwardRef(function (_re
|
|
|
33
33
|
}, [elRefs]);
|
|
34
34
|
var renderAction = function renderAction(item, index) {
|
|
35
35
|
switch (item.componentType) {
|
|
36
|
+
case 'custom':
|
|
37
|
+
{
|
|
38
|
+
return item.content;
|
|
39
|
+
}
|
|
36
40
|
case 'icon':
|
|
37
41
|
{
|
|
38
42
|
var _item$disabled;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardActions.cjs","names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"mappings":";;;;;;;;;AAAA;
|
|
1
|
+
{"version":3,"file":"HorizontalCardActions.cjs","names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","content","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n HorizontalCardCustomContent,\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent,\n index: number) => {\n switch (item.componentType) {\n case 'custom': {\n return item.content\n }\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"mappings":"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"}
|
|
@@ -27,6 +27,10 @@ export var HorizontalCardActions = /*#__PURE__*/React.forwardRef(function (_ref,
|
|
|
27
27
|
}, [elRefs]);
|
|
28
28
|
var renderAction = function renderAction(item, index) {
|
|
29
29
|
switch (item.componentType) {
|
|
30
|
+
case 'custom':
|
|
31
|
+
{
|
|
32
|
+
return item.content;
|
|
33
|
+
}
|
|
30
34
|
case 'icon':
|
|
31
35
|
{
|
|
32
36
|
var _item$disabled;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalCardActions.js","names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton,\n index: number) => {\n switch (item.componentType) {\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;
|
|
1
|
+
{"version":3,"file":"HorizontalCardActions.js","names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","content","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n HorizontalCardCustomContent,\n HorizontalCardDropdownButton,\n HorizontalCardIconButton,\n HorizontalCardProps,\n HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n const length = actions?.length || 0;\n\n React.useEffect(() => {\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n }, [length]);\n\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent,\n index: number) => {\n switch (item.componentType) {\n case 'custom': {\n return item.content\n }\n case 'icon': {\n return <IconButton ref={elRefs[index]}\n key={index}\n variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={item.action}\n tooltip={item.tooltip}\n disabled={item.disabled ?? disabled}>\n {item.icon}\n </IconButton>\n }\n case 'toggle': {\n return <ToggleButton ref={elRefs[index]}\n key={index}\n active={item.active}\n onChange={item.onChange}\n defaultState={item.defaultState}\n activeState={item.activeState}\n disabled={item.disabled ?? disabled}/>\n }\n case 'dropdown': {\n return <DropdownButton ref={elRefs[index]}\n key={index}\n type={'icon'}\n items={item.items}\n itemsType={item.itemsType}\n onClick={item.onClick}\n icon={item.icon}\n action={item.action}\n actionIcon={item.actionIcon}\n actionLabel={item.actionLabel}\n actionVariant={item.actionVariant}\n actionLoading={item.actionLoading}\n multiSelect={item.multiSelect}\n scrollable={item.scrollable}\n pinTopItem={item.pinTopItem}\n maxHeight={item.maxHeight}\n disabled={item.disabled ?? disabled}/>\n }\n }\n }\n\n\n return (\n <>\n {\n actions?.length &&\n <Container>\n {actions?.map((item, index) => renderAction(item, index))}\n </Container>\n }\n </>\n )\n});\n"],"mappings":"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"}
|
|
@@ -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';\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\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 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":""}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IconButtonProps } from '../../Button/Iconbutton';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
3
|
import { ToggleButtonProps } from '../../Toggles/ToggleButton';
|
|
4
4
|
import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
|
|
5
5
|
import { TagVariants } from '../../Tag';
|
|
@@ -12,6 +12,12 @@ export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disable
|
|
|
12
12
|
export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
|
|
13
13
|
componentType: 'toggle';
|
|
14
14
|
};
|
|
15
|
+
export interface CustomContentProps extends Testable {
|
|
16
|
+
content: ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export type HorizontalCardCustomContent = CustomContentProps & {
|
|
19
|
+
componentType: 'custom';
|
|
20
|
+
};
|
|
15
21
|
export type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
|
|
16
22
|
componentType: 'dropdown';
|
|
17
23
|
icon: React.ReactNode;
|
|
@@ -39,5 +45,5 @@ export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes
|
|
|
39
45
|
};
|
|
40
46
|
tags?: HorizontalCardTag[];
|
|
41
47
|
progress?: HorizontalCardLinearProgression;
|
|
42
|
-
actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];
|
|
48
|
+
actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
|
|
43
49
|
}
|
|
@@ -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';\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\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 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"}
|