@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.20.full

package/dist/Card/HorizontalCard/__tests__/VerticalCard.test.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { fireEvent, render } from '../../../test-utils';
+import 'jest-styled-components';
+import { Card } from '../..';
+import { COLORS } from '../../../styles';
+import { SystemIcons } from '../../../icons';
+
+
+describe('<Card />',()=>{
+    it('renders top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection')).toBeDefined();
+    });
+
+    it('renders middle section', async () => {
+        const{getByTestId} = render(
+            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders bottom section', async () => {
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-bottomSection')).toBeDefined();
+    });
+
+    it('fires card clicked event on click', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.click(getByTestId('card-wrapper'));
+        expect(cardClicked).toBeCalledTimes(1);
+    });
+
+    it('fires card clicked event on keyDown', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(cardClicked).toBeCalledTimes(1);
+    });
+
+    it('renders tag in top section', async () => {
+        const{getByText} = render(
+            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
+        );
+
+        expect(getByText('test_label')).toBeDefined();
+    });
+
+    it('renders checkbox in top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
+    });
+
+    it('renders highlight ribbon in top section', async () => {
+        const{getByTestId, getByText} = render(
+            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
+        );
+
+        expect(getByText('testRibbon')).toBeDefined();
+        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
+    });
+
+    it('renders title ,description and category label in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testDescription')).toBeDefined();
+        expect(getByText('testCatLabel')).toBeDefined();
+    });
+
+    it('renders tags in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testTag2')).toBeDefined();
+    });
+
+    it('renders note text in bottom section', async () => {
+        const{getByText} = render(
+            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
+        );
+
+        expect(getByText('leftNote')).toBeDefined();
+        expect(getByText('rightNote')).toBeDefined();
+    });
+
+    it('renders author in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('renders actions in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+})

package/dist/Card/VerticalCard/Card.cjs

@@ -21,7 +21,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _styledComponents.default.div`
-  background-color: ${props => _index.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   min-width: 240px;
   overflow: hidden;
 
@@ -37,7 +40,10 @@ const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _style
   }
 
   .outline & {
-    border: 1px solid ${props => _index.COLORS.getColor('neutral_200', props.theme)};
+    border: 1px solid ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 const CardContainerStyles = exports.CardContainerStyles = _styledComponents.default.div`
@@ -51,11 +57,17 @@ const CardContainerStyles = exports.CardContainerStyles = _styledComponents.defa
     &.outline:not(.action-within) {
       ${CardTopLevelContainerStyles} {
         &:hover {
-          background-color: ${props => _index.COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
 
         &:active, &.active-state {
-          background-color: ${props => _index.COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
     }
@@ -76,7 +88,10 @@ const CardContainerStyles = exports.CardContainerStyles = _styledComponents.defa
   &.disabled {
     cursor: not-allowed;
     ${CardTopLevelContainerStyles}{
-      border: 1px solid ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+      border: 1px solid ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/Card/VerticalCard/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_CardTopSection","_CardMiddleSection","_CardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardTopLevelContainerStyles","exports","styled","div","props","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_L1","CardContainerStyles","focusStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","useActionWithin","cls","jsx","ref","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","onClick","children","jsxs","style","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_CardTopSection","_CardMiddleSection","_CardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardTopLevelContainerStyles","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","BOXSHADOWS","BOXSHADOW_L1","CardContainerStyles","focusStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","useActionWithin","cls","jsx","ref","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","onClick","children","jsxs","style","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/Card.js

@@ -12,7 +12,10 @@ import CardBottomSection from './CardBottomSection';
 import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CardTopLevelContainerStyles = styled.div`
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   min-width: 240px;
   overflow: hidden;
 
@@ -28,7 +31,10 @@ export const CardTopLevelContainerStyles = styled.div`
   }
 
   .outline & {
-    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+    border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 export const CardContainerStyles = styled.div`
@@ -42,11 +48,17 @@ export const CardContainerStyles = styled.div`
     &.outline:not(.action-within) {
       ${CardTopLevelContainerStyles} {
         &:hover {
-          background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
 
         &:active, &.active-state {
-          background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
     }
@@ -67,7 +79,10 @@ export const CardContainerStyles = styled.div`
   &.disabled {
     cursor: not-allowed;
     ${CardTopLevelContainerStyles}{
-      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+      border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/Card/VerticalCard/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","CardTopLevelContainerStyles","div","props","getColor","theme","BOXSHADOW_L1","CardContainerStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","cls","_objectSpread","ref","tabIndex","onMouseDown","onKeyDown","a","key","onClick","e","children","style","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","CardTopLevelContainerStyles","div","props","generateToken","componentType","defaultVariant","theme","BOXSHADOW_L1","CardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","cls","_objectSpread","ref","tabIndex","onMouseDown","onKeyDown","a","key","onClick","e","children","style","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.cjs

@@ -24,7 +24,10 @@ const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles
 const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _styledComponents.default.div`
   height: 48px;
   position: relative;
-  color: ${props => _index.COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -46,7 +49,10 @@ const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _s
   }
 
   ${props => props.$disabled ? `
-    color: ${_index.COLORS.getColor('neutral_300', props.theme)};
+    color: ${_index.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     svg, img {
       filter: grayscale(100%);
     }
@@ -55,7 +61,10 @@ const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _s
 `;
 const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledComponents.default.div`
   border-top: 1px;
-  border-top-color: ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
   width: 100%;
 `;
@@ -91,7 +100,10 @@ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButto
   justify-content: flex-end;
   align-items: center;
   border-top: 1px;
-  border-top-color: ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
 
   button:last-child {
@@ -103,7 +115,10 @@ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButto
   }
 
   svg {
-    color: ${props => _index.COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => _index.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div`
@@ -168,13 +183,19 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
-          color: _index.COLORS.getColor('neutral_500', theme),
+          color: _index.COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: _index.ComponentTextStyle.Bold,
           children: noteLeft
         })]
       }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
-          color: _index.COLORS.getColor('neutral_500', theme),
+          color: _index.COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: _index.ComponentTextStyle.Bold,
           children: noteRight
         })]

package/dist/Card/VerticalCard/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardBottomSectionProgressStyles","exports","styled","div","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties2","jsx","Button","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"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  icon: React.ReactNode;\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.getColor('neutral_500', 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.getColor('neutral_300', 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.getColor('neutral_100', 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.getColor('neutral_100', 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  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', 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).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\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, ...rest} = leftButton;\r\n      return (<Button \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        {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.getColor('neutral_500', 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.getColor('neutral_500', 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]}\r\n              key={index}\r\n              disabled={disabled}\r\n              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":[]}
+{"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardBottomSectionProgressStyles","exports","styled","div","CardBottomSectionNotesStyles","props","COLORS","generateToken","componentType","defaultVariant","theme","CardBottomSectionAuthorStyles","$disabled","state","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties2","jsx","Button","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"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  icon: React.ReactNode;\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  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\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).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\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, ...rest} = leftButton;\r\n      return (<Button \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        {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]}\r\n              key={index}\r\n              disabled={disabled}\r\n              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":[]}

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -15,7 +15,10 @@ export const CardBottomSectionProgressStyles = styled.div`
 export const CardBottomSectionNotesStyles = styled.div`
   height: 48px;
   position: relative;
-  color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -37,7 +40,10 @@ export const CardBottomSectionAuthorStyles = styled.div`
   }
 
   ${props => props.$disabled ? `
-    color: ${COLORS.getColor('neutral_300', props.theme)};
+    color: ${COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     svg, img {
       filter: grayscale(100%);
     }
@@ -46,7 +52,10 @@ export const CardBottomSectionAuthorStyles = styled.div`
 `;
 export const CardBottomSectionDivider = styled.div`
   border-top: 1px;
-  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
   width: 100%;
 `;
@@ -82,7 +91,10 @@ export const CardBottomSectionButtonRowContainerStyles = styled.div`
   justify-content: flex-end;
   align-items: center;
   border-top: 1px;
-  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
 
   button:last-child {
@@ -94,7 +106,10 @@ export const CardBottomSectionButtonRowContainerStyles = styled.div`
   }
 
   svg {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 export const CardBottomSectionContainer = styled.div`
@@ -159,13 +174,19 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.getColor('neutral_500', theme),
+          color: COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: ComponentTextStyle.Bold,
           children: noteLeft
         })]
       }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.getColor('neutral_500', theme),
+          color: COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: ComponentTextStyle.Bold,
           children: noteRight
         })]