@laerdal/life-react-components 6.0.0-dev.26 → 6.0.0-dev.27
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/README.md +1 -1
- package/dist/Button/DualFunctionButton.cjs +4 -4
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.d.ts +2 -2
- package/dist/Button/DualFunctionButton.js +4 -4
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Button/{Button.cjs → TextButton.cjs} +179 -92
- package/dist/Button/TextButton.cjs.map +1 -0
- package/dist/Button/TextButton.d.ts +70 -0
- package/dist/Button/{Button.js → TextButton.js} +178 -91
- package/dist/Button/TextButton.js.map +1 -0
- package/dist/Button/__tests__/Button.test.tsx +8 -8
- package/dist/Button/__tests__/TextButton.test.tsx +45 -0
- package/dist/Button/index.cjs +11 -11
- package/dist/Button/index.cjs.map +1 -1
- package/dist/Button/index.d.ts +2 -2
- package/dist/Button/index.js +2 -2
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/VerticalCard/{Card.cjs → VerticalCard.cjs} +20 -20
- package/dist/Card/VerticalCard/VerticalCard.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCard.d.ts +25 -0
- package/dist/Card/VerticalCard/{Card.js → VerticalCard.js} +19 -19
- package/dist/Card/VerticalCard/VerticalCard.js.map +1 -0
- package/dist/Card/VerticalCard/{CardBottomSection.cjs → VerticalCardBottomSection.cjs} +21 -21
- package/dist/Card/VerticalCard/VerticalCardBottomSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardBottomSection.d.ts +53 -0
- package/dist/Card/VerticalCard/{CardBottomSection.js → VerticalCardBottomSection.js} +21 -21
- package/dist/Card/VerticalCard/VerticalCardBottomSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.cjs → VerticalCardMiddleSection.cjs} +16 -16
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.d.ts +42 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.js → VerticalCardMiddleSection.js} +15 -15
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.cjs → VerticalCardTopSection.cjs} +15 -15
- package/dist/Card/VerticalCard/VerticalCardTopSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.d.ts → VerticalCardTopSection.d.ts} +8 -8
- package/dist/Card/VerticalCard/{CardTopSection.js → VerticalCardTopSection.js} +14 -14
- package/dist/Card/VerticalCard/VerticalCardTopSection.js.map +1 -0
- package/dist/Card/{HorizontalCard → VerticalCard}/__tests__/VerticalCard.test.tsx +15 -15
- package/dist/Card/VerticalCard/index.cjs +25 -25
- package/dist/Card/VerticalCard/index.cjs.map +1 -1
- package/dist/Card/VerticalCard/index.d.ts +7 -7
- package/dist/Card/VerticalCard/index.js +7 -7
- package/dist/Card/VerticalCard/index.js.map +1 -1
- package/dist/Chips/__tests__/ChoiceChips.test.tsx +1 -1
- package/dist/Dropdown/DropdownContent.cjs +2 -2
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +2 -2
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +2 -2
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +3 -3
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -1
- package/dist/GlobalNavigationBar/types.cjs.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +2 -2
- package/dist/GlobalNavigationBar/types.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +2 -2
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.js +3 -3
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +2 -2
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.js +3 -3
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs.map +1 -1
- package/dist/Modals/ModalTypes.d.ts +3 -3
- package/dist/Modals/ModalTypes.js.map +1 -1
- package/dist/Popover/Popover.cjs +1 -1
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js +2 -2
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs.map +1 -1
- package/dist/SideMenu/SideMenuFooter.js +2 -2
- package/dist/SideMenu/SideMenuFooter.js.map +1 -1
- package/dist/SideMenu/types.cjs.map +1 -1
- package/dist/SideMenu/types.d.ts +2 -2
- package/dist/SideMenu/types.js.map +1 -1
- package/dist/Table/TableBody.cjs +1 -1
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +2 -2
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.d.ts +2 -2
- package/dist/Table/TableTypes.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +1 -1
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +2 -2
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.d.ts +2 -2
- package/dist/Tile/TileTypes.js.map +1 -1
- package/dist/Toasters/Toast.cjs +1 -2
- package/dist/Toasters/Toast.cjs.map +1 -1
- package/dist/Toasters/Toast.js +2 -3
- package/dist/Toasters/Toast.js.map +1 -1
- package/package.json +1 -1
- package/dist/Button/Button.cjs.map +0 -1
- package/dist/Button/Button.d.ts +0 -70
- package/dist/Button/Button.js.map +0 -1
- package/dist/Card/VerticalCard/Card.cjs.map +0 -1
- package/dist/Card/VerticalCard/Card.d.ts +0 -25
- package/dist/Card/VerticalCard/Card.js.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.d.ts +0 -53
- package/dist/Card/VerticalCard/CardBottomSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.d.ts +0 -42
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.js.map +0 -1
- package/dist/Card/__tests__/Card.test.tsx +0 -146
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { LinearProgressType, Size } from '../../index';
|
|
3
|
-
import { ButtonProps } from '../../Button';
|
|
4
|
-
export interface ActionItem {
|
|
5
|
-
/** Optional. Variant of the action button, defaults to 'secondary'. */
|
|
6
|
-
variant?: 'primary' | 'secondary';
|
|
7
|
-
/** Icon to be used in the icon button. */
|
|
8
|
-
icon: React.ReactNode;
|
|
9
|
-
/** Click handler for the action button. */
|
|
10
|
-
onClick: () => void;
|
|
11
|
-
}
|
|
12
|
-
export type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
|
|
13
|
-
buttonText: string;
|
|
14
|
-
size?: Size.Small | Size.Medium | Size.Large;
|
|
15
|
-
};
|
|
16
|
-
export interface CardBottomSectionProps {
|
|
17
|
-
/** Optional. Current progress level shown in the progress bar. */
|
|
18
|
-
progressLevel?: number;
|
|
19
|
-
/** Optional. Maximum level of progress in the progress bar. */
|
|
20
|
-
progressMax?: number;
|
|
21
|
-
/** Optional. Type of the progress bar. */
|
|
22
|
-
progressType?: LinearProgressType;
|
|
23
|
-
/** Optional. Note text shown on the left side of the section. */
|
|
24
|
-
noteLeft?: string;
|
|
25
|
-
/** Optional. Note icon shown on the left side of the section. */
|
|
26
|
-
noteLeftIcon?: React.ReactNode;
|
|
27
|
-
/** Optional. Note text shown on the right side of the section. */
|
|
28
|
-
noteRight?: string;
|
|
29
|
-
/** Optional. Note icon shown on the right side of the section. */
|
|
30
|
-
noteRightIcon?: React.ReactNode;
|
|
31
|
-
/** Optional. Note icon/Hyperlink/button shown on the left side of the section. */
|
|
32
|
-
leftButton?: CardStandardButton;
|
|
33
|
-
/** Author name shown at the bottom-left part of the section. */
|
|
34
|
-
authorName?: string;
|
|
35
|
-
/** Array of actions shown on the bottom-right corner of the section. */
|
|
36
|
-
actions?: ActionItem[];
|
|
37
|
-
/** Logo shown on the right side of the section, in front of AuthorName. */
|
|
38
|
-
logo?: React.ReactNode;
|
|
39
|
-
/** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
|
|
40
|
-
disabled?: boolean;
|
|
41
|
-
}
|
|
42
|
-
export declare const CardBottomSectionProgressStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
43
|
-
export declare const CardBottomSectionNotesStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
44
|
-
export declare const CardBottomSectionAuthorStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
45
|
-
$disabled?: boolean;
|
|
46
|
-
}>> & string;
|
|
47
|
-
export declare const CardBottomSectionDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
48
|
-
export declare const CardBottomSectionNoteLeftStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
49
|
-
export declare const CardBottomSectionNoteRightStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
50
|
-
export declare const CardBottomSectionButtonRowContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
51
|
-
export declare const CardBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
52
|
-
declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement | null>[]>>;
|
|
53
|
-
export default CardBottomSection;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","Button","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","props","generateToken","componentType","defaultVariant","theme","CardBottomSectionAuthorStyles","$disabled","state","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","onClick","rest","_objectWithoutProperties","_excluded","_objectSpread","className","size","XSmall","XXSmall","includes","Small","Large","Medium","e","stopPropagation","children","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","icon","propTypes","_pt","number","string","node","arrayOf","oneOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n /** Optional. Variant of the action button, defaults to 'secondary'. */\r\n variant?: 'primary' | 'secondary';\r\n /** Icon to be used in the icon button. */\r\n icon: React.ReactNode;\r\n /** Click handler for the action button. */\r\n onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n buttonText: string;\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. */\r\n progressLevel?: number;\r\n /** Optional. Maximum level of progress in the progress bar. */\r\n progressMax?: number;\r\n /** Optional. Type of the progress bar. */\r\n progressType?: LinearProgressType;\r\n\r\n /** Optional. Note text shown on the left side of the section. */\r\n noteLeft?: string;\r\n /** Optional. Note icon shown on the left side of the section. */\r\n noteLeftIcon?: React.ReactNode;\r\n /** Optional. Note text shown on the right side of the section. */\r\n noteRight?: string;\r\n /** Optional. Note icon shown on the right side of the section. */\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n leftButton?: CardStandardButton;\r\n\r\n /** Author name shown at the bottom-left part of the section. */\r\n authorName?: string;\r\n /** Array of actions shown on the bottom-right corner of the section. */\r\n actions?: ActionItem[];\r\n /** Logo shown on the right side of the section, in front of AuthorName. */\r\n logo?: React.ReactNode;\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n .card-bottom-section-action-button {\r\n z-index: 2000;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n .card-bottom-section-action-button {\r\n z-index: 2000;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({componentType:'icon', defaultVariant:'subtle' }, props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n leftButton,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n}: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length || 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array((length || 0) + (leftButton ? 1 : 0)).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length, leftButton]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n const renderLeftButton = () => {\r\n if (leftButton){\r\n const {buttonText, onClick, ...rest} = leftButton;\r\n return (<Button className=\"card-bottom-section-action-button\"\r\n ref={elRefs[0]}\r\n size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n {...rest}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onClick && onClick(e);\r\n }}>\r\n {buttonText}\r\n </Button>)\r\n }\r\n}\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft || noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight || noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n <LeftItemContainer>\r\n {leftButton && renderLeftButton()}\r\n </LeftItemContainer>\r\n\r\n { actions && <RightItemContainer>{actions.map((x, index) => (\r\n <IconButton ref={elRefs[index + (leftButton ? 1 : 0)]}\r\n className=\"card-bottom-section-action-button\"\r\n key={index}\r\n z-index={2000}\r\n disabled={disabled}\r\n variant={x.variant ?? \"secondary\"}\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </RightItemContainer>\r\n }\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","exports","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","generateToken","componentType","defaultVariant","theme","CardMiddleSectionTitle","h3","ComponentXLStyling","ComponentTextStyle","Bold","$disabled","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","componentId","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","color","id","className","map","x","index","Tag","label","variant","icon","propTypes","_propTypes","string","node","isRequired","arrayOf","shape","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXLStyling, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n /** Color of the band to be shown on the top of middle section. */\r\n colorBandColor?: string;\r\n /** Icon to be shown on the left side of the categoryLabel. */\r\n categoryIcon?: React.ReactNode;\r\n /** Label to be shown at the top part of the middle section. */\r\n categoryLabel?: string;\r\n /** Main title of the Card component. */\r\n title: string;\r\n /** Description of the Card. */\r\n description?: string;\r\n /** Tags to be shown under the description. */\r\n tags?: CardTag[];\r\n /** Second row of tags if needed. */\r\n row2Tags?: CardTag[];\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n /** Top level Id of Card component */\r\n componentId?: string;\r\n}\r\n\r\nexport interface CardTag {\r\n label: string;\r\n variant?: TagVariants;\r\n icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n display: flex;\r\n flex-grow: 1;\r\n width: calc(100% - 32px);\r\n position: relative;\r\n flex-direction: column;\r\n padding: 16px;\r\n gap: 8px;\r\n\r\n .descriptionBlock {\r\n padding: 2px 0;\r\n }\r\n\r\n .titleBlock {\r\n padding: 2px 0;\r\n }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n position: absolute;\r\n width: 100%;\r\n top: 0px;\r\n left: 0px;\r\n height: 8px;\r\n background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n padding: 4px 0;\r\n gap: 4px;\r\n flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: none;\r\n gap: 6px;\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardMiddleSectionTitle = styled.h3<{ $disabled?: boolean }>`\r\n ${props => ComponentXLStyling(ComponentTextStyle.Bold, props.$disabled \r\n ? COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)\r\n : COLORS.generateToken({componentType:'text',defaultVariant:'default'}, props.theme)\r\n )}\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n colorBandColor,\r\n categoryIcon,\r\n categoryLabel,\r\n title,\r\n description,\r\n tags,\r\n row2Tags,\r\n disabled,\r\n componentId\r\n}: CardMiddleSectionProps) => {\r\n const theme = useTheme();\r\n \r\n return (\r\n <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n {\r\n (categoryIcon || categoryLabel) &&\r\n <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n {categoryIcon}\r\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n {categoryLabel}\r\n </ComponentS>\r\n </CardMiddleSectionCategoryStyles>\r\n }\r\n <CardMiddleSectionTitle \r\n id={`${componentId}-title`} \r\n className=\"titleBlock\"\r\n $disabled={disabled}>\r\n {title}\r\n </CardMiddleSectionTitle>\r\n {description && (\r\n <ComponentS className=\"descriptionBlock\" color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n {description}\r\n </ComponentS>\r\n )}\r\n {tags && (\r\n <CardMiddleSectionTagsStyles>\r\n {tags.map((x, index) => (\r\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n ))}\r\n </CardMiddleSectionTagsStyles>\r\n )}\r\n {row2Tags && (\r\n <CardMiddleSectionTagsStyles>\r\n {row2Tags.map((x, index) => (\r\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n ))}\r\n </CardMiddleSectionTagsStyles>\r\n )}\r\n </CardMiddleSectionContainer>\r\n );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { TagVariants } from '../../index';
|
|
3
|
-
import { ReactNode } from 'react';
|
|
4
|
-
export interface CardMiddleSectionProps {
|
|
5
|
-
/** Color of the band to be shown on the top of middle section. */
|
|
6
|
-
colorBandColor?: string;
|
|
7
|
-
/** Icon to be shown on the left side of the categoryLabel. */
|
|
8
|
-
categoryIcon?: React.ReactNode;
|
|
9
|
-
/** Label to be shown at the top part of the middle section. */
|
|
10
|
-
categoryLabel?: string;
|
|
11
|
-
/** Main title of the Card component. */
|
|
12
|
-
title: string;
|
|
13
|
-
/** Description of the Card. */
|
|
14
|
-
description?: string;
|
|
15
|
-
/** Tags to be shown under the description. */
|
|
16
|
-
tags?: CardTag[];
|
|
17
|
-
/** Second row of tags if needed. */
|
|
18
|
-
row2Tags?: CardTag[];
|
|
19
|
-
/** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
/** Top level Id of Card component */
|
|
22
|
-
componentId?: string;
|
|
23
|
-
}
|
|
24
|
-
export interface CardTag {
|
|
25
|
-
label: string;
|
|
26
|
-
variant?: TagVariants;
|
|
27
|
-
icon?: ReactNode;
|
|
28
|
-
}
|
|
29
|
-
export declare const CardMiddleSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
30
|
-
export declare const CardMiddleSectionColorBandStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
31
|
-
$color: string;
|
|
32
|
-
}>> & string;
|
|
33
|
-
export declare const CardMiddleSectionTagsStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
34
|
-
export declare const CardMiddleSectionCategoryStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
35
|
-
$extraTopMargin: boolean;
|
|
36
|
-
$bottomMargin: boolean;
|
|
37
|
-
}>> & string;
|
|
38
|
-
export declare const CardMiddleSectionTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
|
|
39
|
-
$disabled?: boolean;
|
|
40
|
-
}>> & string;
|
|
41
|
-
declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
|
|
42
|
-
export default CardMiddleSection;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXLStyling","Tag","jsx","_jsx","jsxs","_jsxs","CardMiddleSectionContainer","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","generateToken","componentType","defaultVariant","theme","CardMiddleSectionTitle","h3","Bold","$disabled","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","componentId","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","color","id","className","map","x","index","label","variant","icon","propTypes","_pt","string","node","isRequired","arrayOf","shape","bool"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXLStyling, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n /** Color of the band to be shown on the top of middle section. */\r\n colorBandColor?: string;\r\n /** Icon to be shown on the left side of the categoryLabel. */\r\n categoryIcon?: React.ReactNode;\r\n /** Label to be shown at the top part of the middle section. */\r\n categoryLabel?: string;\r\n /** Main title of the Card component. */\r\n title: string;\r\n /** Description of the Card. */\r\n description?: string;\r\n /** Tags to be shown under the description. */\r\n tags?: CardTag[];\r\n /** Second row of tags if needed. */\r\n row2Tags?: CardTag[];\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n /** Top level Id of Card component */\r\n componentId?: string;\r\n}\r\n\r\nexport interface CardTag {\r\n label: string;\r\n variant?: TagVariants;\r\n icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n display: flex;\r\n flex-grow: 1;\r\n width: calc(100% - 32px);\r\n position: relative;\r\n flex-direction: column;\r\n padding: 16px;\r\n gap: 8px;\r\n\r\n .descriptionBlock {\r\n padding: 2px 0;\r\n }\r\n\r\n .titleBlock {\r\n padding: 2px 0;\r\n }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n position: absolute;\r\n width: 100%;\r\n top: 0px;\r\n left: 0px;\r\n height: 8px;\r\n background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n padding: 4px 0;\r\n gap: 4px;\r\n flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding: none;\r\n gap: 6px;\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardMiddleSectionTitle = styled.h3<{ $disabled?: boolean }>`\r\n ${props => ComponentXLStyling(ComponentTextStyle.Bold, props.$disabled \r\n ? COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)\r\n : COLORS.generateToken({componentType:'text',defaultVariant:'default'}, props.theme)\r\n )}\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n colorBandColor,\r\n categoryIcon,\r\n categoryLabel,\r\n title,\r\n description,\r\n tags,\r\n row2Tags,\r\n disabled,\r\n componentId\r\n}: CardMiddleSectionProps) => {\r\n const theme = useTheme();\r\n \r\n return (\r\n <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n {\r\n (categoryIcon || categoryLabel) &&\r\n <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n {categoryIcon}\r\n <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n {categoryLabel}\r\n </ComponentS>\r\n </CardMiddleSectionCategoryStyles>\r\n }\r\n <CardMiddleSectionTitle \r\n id={`${componentId}-title`} \r\n className=\"titleBlock\"\r\n $disabled={disabled}>\r\n {title}\r\n </CardMiddleSectionTitle>\r\n {description && (\r\n <ComponentS className=\"descriptionBlock\" color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n {description}\r\n </ComponentS>\r\n )}\r\n {tags && (\r\n <CardMiddleSectionTagsStyles>\r\n {tags.map((x, index) => (\r\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n ))}\r\n </CardMiddleSectionTagsStyles>\r\n )}\r\n {row2Tags && (\r\n <CardMiddleSectionTagsStyles>\r\n {row2Tags.map((x, index) => (\r\n <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n ))}\r\n </CardMiddleSectionTagsStyles>\r\n )}\r\n </CardMiddleSectionContainer>\r\n );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardTopSectionImageContainer","exports","styled","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","COLORS","getColor","theme","CardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","role","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","generateToken","componentType","state","ComponentS","color","isOnFill","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n /** Sets initial state of select Checkbox. */\r\n selected?: boolean;\r\n /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n setSelected?: (arg0: boolean) => void;\r\n /** Label shown in the tag in the top-left corner of the Card. */\r\n tagLabel?: string;\r\n /** Icon shown in the tag in the top-left corner of the Card. */\r\n tagIcon?: React.ReactNode;\r\n /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n tagVariant?: TagVariants;\r\n /** Text shown in the Ribbon, under the Image. */\r\n highlightRibbonText?: string;\r\n /** Icon shown in the Ribbon, under the Image. */\r\n highlightRibbonIcon?: React.ReactNode;\r\n /** Content color (text and image) of the Ribbon, under the Image. */\r\n highlightRibbonContentColor?: string;\r\n /** Background color of the Ribbon, shown under the Image. */\r\n highlightRibbonBgColor?: string;\r\n /** Details of the Image shown in the section. */\r\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n height: 100%;\r\n width: 100%;\r\n img{\r\n object-fit: cover;\r\n width: 100%;\r\n height: 100%;\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n }\r\n`;\r\n\r\nexport const CardTopSectionTagContainer = styled.div`\r\n position: absolute;\r\n\r\n top: 16px;\r\n left: 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n position: relative;\r\n width: 100%;\r\n overflow: visible;\r\n\r\n ${props => props.disabled ? `\r\n img, svg {\r\n filter: grayscale(100%);\r\n }` : ''}\r\n`;\r\n\r\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n min-height: calc(40px - 16px);\r\n background-color: ${props => props.$backgroundColor};\r\n width: calc(100% - 32px);\r\n position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n padding: 8px 16px 8px 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n\r\n svg {\r\n color: ${props => props.$color};\r\n width: 24px;\r\n height: 24px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardTopSectionCheckboxContainer = styled.div`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 1;\r\n\r\n .checkbox-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n selected,\r\n setSelected,\r\n image,\r\n tagLabel,\r\n tagIcon,\r\n tagVariant = 'positive',\r\n highlightRibbonIcon,\r\n highlightRibbonText,\r\n highlightRibbonContentColor,\r\n highlightRibbonBgColor,\r\n disabled\r\n }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n const theme = useTheme();\r\n return (\r\n <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n {\r\n image &&\r\n <CardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n </CardTopSectionImageContainer>\r\n }\r\n {(!!selected || !!setSelected) && (\r\n <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n <Checkbox ref={ref}\r\n disabled={disabled}\r\n select={(selected: boolean) => setSelected && setSelected(selected)}\r\n selected={selected || false}/>\r\n </CardTopSectionCheckboxContainer>\r\n )}\r\n {(tagLabel || tagIcon) && (\r\n <CardTopSectionTagContainer>\r\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n </CardTopSectionTagContainer>\r\n )}\r\n {(highlightRibbonIcon || highlightRibbonText) && (\r\n <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n {highlightRibbonIcon}\r\n {highlightRibbonText && (\r\n <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n {highlightRibbonText}\r\n </ComponentS>\r\n )}\r\n </CardTopSectionRibbonContainer>\r\n )}\r\n </CardTopSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","CardTopSectionImageContainer","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","getColor","theme","CardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","role","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","generateToken","componentType","state","color","isOnFill","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n /** Sets initial state of select Checkbox. */\r\n selected?: boolean;\r\n /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n setSelected?: (arg0: boolean) => void;\r\n /** Label shown in the tag in the top-left corner of the Card. */\r\n tagLabel?: string;\r\n /** Icon shown in the tag in the top-left corner of the Card. */\r\n tagIcon?: React.ReactNode;\r\n /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n tagVariant?: TagVariants;\r\n /** Text shown in the Ribbon, under the Image. */\r\n highlightRibbonText?: string;\r\n /** Icon shown in the Ribbon, under the Image. */\r\n highlightRibbonIcon?: React.ReactNode;\r\n /** Content color (text and image) of the Ribbon, under the Image. */\r\n highlightRibbonContentColor?: string;\r\n /** Background color of the Ribbon, shown under the Image. */\r\n highlightRibbonBgColor?: string;\r\n /** Details of the Image shown in the section. */\r\n image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n height: 100%;\r\n width: 100%;\r\n img{\r\n object-fit: cover;\r\n width: 100%;\r\n height: 100%;\r\n border-top-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n }\r\n`;\r\n\r\nexport const CardTopSectionTagContainer = styled.div`\r\n position: absolute;\r\n\r\n top: 16px;\r\n left: 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n position: relative;\r\n width: 100%;\r\n overflow: visible;\r\n\r\n ${props => props.disabled ? `\r\n img, svg {\r\n filter: grayscale(100%);\r\n }` : ''}\r\n`;\r\n\r\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\r\n min-height: calc(40px - 16px);\r\n background-color: ${props => props.$backgroundColor};\r\n width: calc(100% - 32px);\r\n position: absolute;\r\n bottom: 0px;\r\n left: 0px;\r\n padding: 8px 16px 8px 16px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n gap: 8px;\r\n\r\n svg {\r\n color: ${props => props.$color};\r\n width: 24px;\r\n height: 24px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardTopSectionCheckboxContainer = styled.div`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n z-index: 1;\r\n\r\n .checkbox-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n selected,\r\n setSelected,\r\n image,\r\n tagLabel,\r\n tagIcon,\r\n tagVariant = 'positive',\r\n highlightRibbonIcon,\r\n highlightRibbonText,\r\n highlightRibbonContentColor,\r\n highlightRibbonBgColor,\r\n disabled\r\n }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n const theme = useTheme();\r\n return (\r\n <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n {\r\n image &&\r\n <CardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n </CardTopSectionImageContainer>\r\n }\r\n {(!!selected || !!setSelected) && (\r\n <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n <Checkbox ref={ref}\r\n disabled={disabled}\r\n select={(selected: boolean) => setSelected && setSelected(selected)}\r\n selected={selected || false}/>\r\n </CardTopSectionCheckboxContainer>\r\n )}\r\n {(tagLabel || tagIcon) && (\r\n <CardTopSectionTagContainer>\r\n <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n </CardTopSectionTagContainer>\r\n )}\r\n {(highlightRibbonIcon || highlightRibbonText) && (\r\n <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n {highlightRibbonIcon}\r\n {highlightRibbonText && (\r\n <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n {highlightRibbonText}\r\n </ComponentS>\r\n )}\r\n </CardTopSectionRibbonContainer>\r\n )}\r\n </CardTopSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { fireEvent, getByRole, render } from '../../test-utils';
|
|
3
|
-
import 'jest-styled-components';
|
|
4
|
-
import { Card } from '../..';
|
|
5
|
-
import { COLORS } from '../../styles';
|
|
6
|
-
import { SystemIcons } from '../../icons';
|
|
7
|
-
|
|
8
|
-
describe('<Card />',()=>{
|
|
9
|
-
it('renders top section', async () => {
|
|
10
|
-
const{getByTestId} = render(
|
|
11
|
-
<Card topSectionProps={{disabled: false}} disabled/>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
expect(getByTestId('card-topSection')).toBeDefined();
|
|
15
|
-
//expect(getByTestId('card-middleSection')).toBeDefined();
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
it('renders middle section', async () => {
|
|
19
|
-
const{getByTestId} = render(
|
|
20
|
-
<Card middleSectionProps={{title:'title',disabled:false}} disabled/>
|
|
21
|
-
);
|
|
22
|
-
|
|
23
|
-
expect(getByTestId('card-middleSection')).toBeDefined();
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
it('renders bottom section', async () => {
|
|
27
|
-
const{getByTestId} = render(
|
|
28
|
-
<Card bottomSectionProps={{disabled:false}} disabled/>
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
expect(getByTestId('card-bottomSection')).toBeDefined();
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
it('fires card clicked event on click', async () => {
|
|
35
|
-
const cardClicked = jest.fn();
|
|
36
|
-
const{getByTestId} = render(
|
|
37
|
-
<Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
fireEvent.click(getByTestId('card-link'));
|
|
41
|
-
expect(cardClicked).toHaveBeenCalled();
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
it('fires card clicked event on keyDown', async () => {
|
|
45
|
-
const cardClicked = jest.fn();
|
|
46
|
-
const{getByTestId} = render(
|
|
47
|
-
<Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
|
|
48
|
-
);
|
|
49
|
-
|
|
50
|
-
fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
|
|
51
|
-
expect(cardClicked).toHaveBeenCalled();
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
it('renders tag in top section', async () => {
|
|
55
|
-
const{getByText} = render(
|
|
56
|
-
<Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
|
|
57
|
-
);
|
|
58
|
-
|
|
59
|
-
expect(getByText('test_label')).toBeDefined();
|
|
60
|
-
});
|
|
61
|
-
|
|
62
|
-
it('renders checkbox in top section', async () => {
|
|
63
|
-
const{getByTestId} = render(
|
|
64
|
-
<Card topSectionProps={{disabled: false, selected: true}} disabled/>
|
|
65
|
-
);
|
|
66
|
-
|
|
67
|
-
expect(getByTestId('card-topSection-checkbox')).toBeDefined();
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
it('renders highlight ribbon in top section', async () => {
|
|
71
|
-
const{getByTestId, getByText} = render(
|
|
72
|
-
<Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
expect(getByText('testRibbon')).toBeDefined();
|
|
76
|
-
expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
it('renders title ,description and category label in middle section', async () => {
|
|
80
|
-
const{getByText} = render(
|
|
81
|
-
<Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
|
|
82
|
-
);
|
|
83
|
-
|
|
84
|
-
expect(getByText('testTitle')).toBeDefined();
|
|
85
|
-
expect(getByText('testDescription')).toBeDefined();
|
|
86
|
-
expect(getByText('testCatLabel')).toBeDefined();
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
it('renders tags in middle section', async () => {
|
|
90
|
-
const{getByText} = render(
|
|
91
|
-
<Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
expect(getByText('testTitle')).toBeDefined();
|
|
95
|
-
expect(getByText('testTag2')).toBeDefined();
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
it('renders note text in bottom section', async () => {
|
|
99
|
-
const{getByText} = render(
|
|
100
|
-
<Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
|
|
101
|
-
);
|
|
102
|
-
|
|
103
|
-
expect(getByText('leftNote')).toBeDefined();
|
|
104
|
-
expect(getByText('rightNote')).toBeDefined();
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
it('renders author in bottom section', async () => {
|
|
108
|
-
const{getByText,getByTestId} = render(
|
|
109
|
-
<Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
|
|
110
|
-
);
|
|
111
|
-
|
|
112
|
-
expect(getByText('testAuthor')).toBeDefined();
|
|
113
|
-
expect(getByTestId('card-bottomSection-author')).toBeDefined();
|
|
114
|
-
});
|
|
115
|
-
|
|
116
|
-
it('renders actions in bottom section', async () => {
|
|
117
|
-
const{getByText,getByTestId} = render(
|
|
118
|
-
<Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
|
|
119
|
-
);
|
|
120
|
-
|
|
121
|
-
expect(getByText('testAuthor')).toBeDefined();
|
|
122
|
-
expect(getByTestId('card-bottomSection-author')).toBeDefined();
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
it('fires leftButton click event on click', async () => {
|
|
126
|
-
const leftButtonClicked = jest.fn();
|
|
127
|
-
const{getByRole} = render(
|
|
128
|
-
<Card bottomSectionProps={{disabled: true,
|
|
129
|
-
authorName:'testAuthor',
|
|
130
|
-
actions:[],
|
|
131
|
-
leftButton: {
|
|
132
|
-
variant: 'tertiary',
|
|
133
|
-
buttonText: 'button',
|
|
134
|
-
onClick: (e) => {
|
|
135
|
-
e.stopPropagation();
|
|
136
|
-
leftButtonClicked();
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}}
|
|
140
|
-
disabled={true}/>
|
|
141
|
-
);
|
|
142
|
-
|
|
143
|
-
fireEvent.click(getByRole('button'));
|
|
144
|
-
expect(leftButtonClicked).toBeCalledTimes(1);
|
|
145
|
-
});
|
|
146
|
-
})
|