@laerdal/life-react-components 6.0.0-dev.26 → 6.0.0-dev.27

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCard.js","names":["React","styled","VerticalCardTopSection","VerticalCardMiddleSection","VerticalCardBottomSection","BOXSHADOWS","COLORS","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","VerticalCardTopLevelContainerStyles","div","props","generateToken","componentType","defaultVariant","theme","BOXSHADOW_L1","VerticalCardLink","a","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","cls","handleCardClick","e","preventDefault","_objectSpread","ref","role","tabIndex","onKeyDown","key","children","style","href","onClick","componentId","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = 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  position: relative;\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// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 100;\r\n  text-decoration: none;\r\n  color: inherit;\r\n  pointer-events: auto;\r\n  cursor: pointer;\r\n  \r\n  &:focus {\r\n    outline: none;\r\n  }\r\n  \r\n  &:focus-visible {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n  &.interactive:not(.disabled) {\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\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      ${VerticalCardTopLevelContainerStyles} {\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    ${VerticalCardTopLevelContainerStyles}{\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 VerticalCardProps 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?: VerticalCardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: VerticalCardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: VerticalCardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    id,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: VerticalCardProps) => {\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  const autoId = React.useId();\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  const handleCardClick = (e: React.MouseEvent) => {\r\n    e.preventDefault();\r\n    if (!disabled && onCardClicked) {\r\n      onCardClicked();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <VerticalCardContainerStyles ref={containerRef}\r\n            role=\"group\"\r\n            className={cls}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n            onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n            data-testid={'card-wrapper'}\r\n            {...rest}>\r\n      <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {/* Full-card link for accessibility */}\r\n        {onCardClicked && !disabled && (\r\n          <VerticalCardLink\r\n            href={'#'}\r\n            data-testid={'card-link'}\r\n            onClick={handleCardClick}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={-1}\r\n          />\r\n        )}\r\n        \r\n        {\r\n          topSectionProps &&\r\n          <VerticalCardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <VerticalCardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </VerticalCardTopLevelContainerStyles>\r\n    </VerticalCardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/{CardBottomSection.cjs → VerticalCardBottomSection.cjs}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardBottomSectionProgressStyles = exports.CardBottomSectionNotesStyles = exports.CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteLeftStyles = exports.CardBottomSectionDivider = exports.CardBottomSectionContainer = exports.CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionAuthorStyles = void 0;
+exports.default = exports.VerticalCardBottomSectionProgressStyles = exports.VerticalCardBottomSectionNotesStyles = exports.VerticalCardBottomSectionNoteRightStyles = exports.VerticalCardBottomSectionNoteLeftStyles = exports.VerticalCardBottomSectionDivider = exports.VerticalCardBottomSectionContainer = exports.VerticalCardBottomSectionButtonRowContainerStyles = exports.VerticalCardBottomSectionAuthorStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -18,10 +18,10 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionProgressStyles = exports.VerticalCardBottomSectionProgressStyles = _styledComponents.default.div`
   padding: 8px 0;
 `;
-const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionNotesStyles = exports.VerticalCardBottomSectionNotesStyles = _styledComponents.default.div`
   height: 48px;
   position: relative;
   color: ${props => _index.COLORS.generateToken({
@@ -32,7 +32,7 @@ const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _sty
   flex-direction: row;
   align-items: center;
 `;
-const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionAuthorStyles = exports.VerticalCardBottomSectionAuthorStyles = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -59,7 +59,7 @@ const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _s
     
   ` : ''}
 `;
-const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledComponents.default.div`
+const VerticalCardBottomSectionDivider = exports.VerticalCardBottomSectionDivider = _styledComponents.default.div`
   border-top: 1px;
   border-top-color: ${props => _index.COLORS.generateToken({
   componentType: 'border',
@@ -68,7 +68,7 @@ const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledCompo
   border-top-style: solid;
   width: 100%;
 `;
-const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionNoteLeftStyles = exports.VerticalCardBottomSectionNoteLeftStyles = _styledComponents.default.div`
   position: absolute;
   left: 0px;
   display: flex;
@@ -81,7 +81,7 @@ const CardBottomSectionNoteLeftStyles = exports.CardBottomSectionNoteLeftStyles
     flex-shrink: 0;
   }
 `;
-const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionNoteRightStyles = exports.VerticalCardBottomSectionNoteRightStyles = _styledComponents.default.div`
   position: absolute;
   right: 0px;
   display: flex;
@@ -94,7 +94,7 @@ const CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteRightStyle
     flex-shrink: 0;
   }
 `;
-const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButtonRowContainerStyles = _styledComponents.default.div`
+const VerticalCardBottomSectionButtonRowContainerStyles = exports.VerticalCardBottomSectionButtonRowContainerStyles = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
@@ -129,7 +129,7 @@ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButto
 }, props.theme)};
   }
 `;
-const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div`
+const VerticalCardBottomSectionContainer = exports.VerticalCardBottomSectionContainer = _styledComponents.default.div`
   padding: 0px 16px 8px 16px;
   width: calc(100% - 32px);
 `;
@@ -142,7 +142,7 @@ const RightItemContainer = _styledComponents.default.div`
   justify-content: flex-end;
   color: ${props => _index.COLORS.getColor('neutral_600', props.theme)};
 `;
-const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const VerticalCardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
     progressMax,
@@ -172,7 +172,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           onClick
         } = leftButton,
         rest = (0, _objectWithoutProperties2.default)(leftButton, _excluded);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.TextButton, _objectSpread(_objectSpread({
         className: "card-bottom-section-action-button",
         ref: elRefs[0],
         size: leftButton.size && [_index.Size.XSmall, _index.Size.XSmall, _index.Size.XXSmall].includes(leftButton.size) ? _index.Size.Small : leftButton.size == _index.Size.Large ? _index.Size.Large : _index.Size.Medium
@@ -185,9 +185,9 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }));
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
-    children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionProgressStyles, {
+    children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardBottomSectionProgressStyles, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LinearProgress, {
         size: _index.Size.Small,
         type: progressType,
@@ -195,8 +195,8 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         value: progressLevel,
         max: progressMax ?? progressLevel
       })
-    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNotesStyles, {
-      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteLeftStyles, {
+    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionNotesStyles, {
+      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
           color: _index.COLORS.generateToken({
             componentType: 'icon',
@@ -205,7 +205,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           textStyle: _index.ComponentTextStyle.Bold,
           children: noteLeft
         })]
-      }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteRightStyles, {
+      }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
           color: _index.COLORS.generateToken({
             componentType: 'icon',
@@ -215,13 +215,13 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: noteRight
         })]
       })]
-    }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionAuthorStyles, {
+    }), (authorName || logo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionAuthorStyles, {
       $disabled: disabled,
       "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
         children: authorName
       }), logo]
-    }), (actions || leftButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionButtonRowContainerStyles, {
+    }), (actions || leftButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardBottomSectionButtonRowContainerStyles, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftItemContainer, {
         children: leftButton && renderLeftButton()
       }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(RightItemContainer, {
@@ -241,7 +241,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-CardBottomSection.propTypes = {
+VerticalCardBottomSection.propTypes = {
   progressLevel: _propTypes.default.number,
   progressMax: _propTypes.default.number,
   noteLeft: _propTypes.default.string,
@@ -257,5 +257,5 @@ CardBottomSection.propTypes = {
   logo: _propTypes.default.node,
   disabled: _propTypes.default.bool
 };
-var _default = exports.default = CardBottomSection;
-//# sourceMappingURL=CardBottomSection.cjs.map
+var _default = exports.default = VerticalCardBottomSection;
+//# sourceMappingURL=VerticalCardBottomSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardBottomSection.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","VerticalCardBottomSectionProgressStyles","exports","styled","div","VerticalCardBottomSectionNotesStyles","props","COLORS","generateToken","componentType","defaultVariant","theme","VerticalCardBottomSectionAuthorStyles","$disabled","state","VerticalCardBottomSectionDivider","VerticalCardBottomSectionNoteLeftStyles","VerticalCardBottomSectionNoteRightStyles","VerticalCardBottomSectionButtonRowContainerStyles","VerticalCardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","VerticalCardBottomSection","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","onClick","rest","_objectWithoutProperties2","jsx","TextButton","className","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","stopPropagation","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","icon","propTypes","_propTypes","number","string","node","arrayOf","oneOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCardBottomSection.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 { TextButton, TextButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface VerticalCardActionItem {\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 VerticalCardStandardButton = Pick<TextButtonProps, '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 VerticalCardBottomSectionProps {\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?: VerticalCardStandardButton;\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?: VerticalCardActionItem[];\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 VerticalCardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNotesStyles = 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 VerticalCardBottomSectionAuthorStyles = 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 VerticalCardBottomSectionDivider = 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 VerticalCardBottomSectionNoteLeftStyles = 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 VerticalCardBottomSectionNoteRightStyles = 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 VerticalCardBottomSectionButtonRowContainerStyles = 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 VerticalCardBottomSectionContainer = 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 VerticalCardBottomSection = 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}: VerticalCardBottomSectionProps,\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 (<TextButton 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      </TextButton>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <VerticalCardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <VerticalCardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <VerticalCardBottomSectionProgressStyles>\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      </VerticalCardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <VerticalCardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <VerticalCardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <VerticalCardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteRightStyles>\r\n        )}\r\n      </VerticalCardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <VerticalCardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </VerticalCardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <VerticalCardBottomSectionButtonRowContainerStyles>\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      </VerticalCardBottomSectionButtonRowContainerStyles>}\r\n    </VerticalCardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default VerticalCardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/VerticalCardBottomSection.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { LinearProgressType, Size } from '../../index';
+import { TextButtonProps } from '../../Button';
+export interface VerticalCardActionItem {
+    /** Optional. Variant of the action button, defaults to 'secondary'. */
+    variant?: 'primary' | 'secondary';
+    /** Icon to be used in the icon button. */
+    icon: React.ReactNode;
+    /** Click handler for the action button. */
+    onClick: () => void;
+}
+export type VerticalCardStandardButton = Pick<TextButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
+    buttonText: string;
+    size?: Size.Small | Size.Medium | Size.Large;
+};
+export interface VerticalCardBottomSectionProps {
+    /** Optional. Current progress level shown in the progress bar. */
+    progressLevel?: number;
+    /** Optional. Maximum level of progress in the progress bar. */
+    progressMax?: number;
+    /** Optional. Type of the progress bar. */
+    progressType?: LinearProgressType;
+    /** Optional. Note text shown on the left side of the section. */
+    noteLeft?: string;
+    /** Optional. Note icon shown on the left side of the section. */
+    noteLeftIcon?: React.ReactNode;
+    /** Optional. Note text shown on the right side of the section. */
+    noteRight?: string;
+    /** Optional. Note icon shown on the right side of the section. */
+    noteRightIcon?: React.ReactNode;
+    /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */
+    leftButton?: VerticalCardStandardButton;
+    /** Author name shown at the bottom-left part of the section.  */
+    authorName?: string;
+    /** Array of actions shown on the bottom-right corner of the section. */
+    actions?: VerticalCardActionItem[];
+    /** Logo shown on the right side of the section, in front of AuthorName. */
+    logo?: React.ReactNode;
+    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
+    disabled?: boolean;
+}
+export declare const VerticalCardBottomSectionProgressStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionNotesStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionAuthorStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const VerticalCardBottomSectionDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionNoteLeftStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionNoteRightStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionButtonRowContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const VerticalCardBottomSection: React.ForwardRefExoticComponent<VerticalCardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement | null>[]>>;
+export default VerticalCardBottomSection;

package/dist/Card/VerticalCard/{CardBottomSection.js → VerticalCardBottomSection.js}

@@ -7,12 +7,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
-import { Button, IconButton } from '../../Button';
+import { TextButton, IconButton } from '../../Button';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardBottomSectionProgressStyles = styled.div`
+export const VerticalCardBottomSectionProgressStyles = styled.div`
   padding: 8px 0;
 `;
-export const CardBottomSectionNotesStyles = styled.div`
+export const VerticalCardBottomSectionNotesStyles = styled.div`
   height: 48px;
   position: relative;
   color: ${props => COLORS.generateToken({
@@ -23,7 +23,7 @@ export const CardBottomSectionNotesStyles = styled.div`
   flex-direction: row;
   align-items: center;
 `;
-export const CardBottomSectionAuthorStyles = styled.div`
+export const VerticalCardBottomSectionAuthorStyles = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -50,7 +50,7 @@ export const CardBottomSectionAuthorStyles = styled.div`
     
   ` : ''}
 `;
-export const CardBottomSectionDivider = styled.div`
+export const VerticalCardBottomSectionDivider = styled.div`
   border-top: 1px;
   border-top-color: ${props => COLORS.generateToken({
   componentType: 'border',
@@ -59,7 +59,7 @@ export const CardBottomSectionDivider = styled.div`
   border-top-style: solid;
   width: 100%;
 `;
-export const CardBottomSectionNoteLeftStyles = styled.div`
+export const VerticalCardBottomSectionNoteLeftStyles = styled.div`
   position: absolute;
   left: 0px;
   display: flex;
@@ -72,7 +72,7 @@ export const CardBottomSectionNoteLeftStyles = styled.div`
     flex-shrink: 0;
   }
 `;
-export const CardBottomSectionNoteRightStyles = styled.div`
+export const VerticalCardBottomSectionNoteRightStyles = styled.div`
   position: absolute;
   right: 0px;
   display: flex;
@@ -85,7 +85,7 @@ export const CardBottomSectionNoteRightStyles = styled.div`
     flex-shrink: 0;
   }
 `;
-export const CardBottomSectionButtonRowContainerStyles = styled.div`
+export const VerticalCardBottomSectionButtonRowContainerStyles = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
@@ -120,7 +120,7 @@ export const CardBottomSectionButtonRowContainerStyles = styled.div`
 }, props.theme)};
   }
 `;
-export const CardBottomSectionContainer = styled.div`
+export const VerticalCardBottomSectionContainer = styled.div`
   padding: 0px 16px 8px 16px;
   width: calc(100% - 32px);
 `;
@@ -133,7 +133,7 @@ const RightItemContainer = styled.div`
   justify-content: flex-end;
   color: ${props => COLORS.getColor('neutral_600', props.theme)};
 `;
-const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const VerticalCardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     progressLevel,
     progressMax,
@@ -163,7 +163,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           onClick
         } = leftButton,
         rest = _objectWithoutProperties(leftButton, _excluded);
-      return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
+      return /*#__PURE__*/_jsx(TextButton, _objectSpread(_objectSpread({
         className: "card-bottom-section-action-button",
         ref: elRefs[0],
         size: leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small : leftButton.size == Size.Large ? Size.Large : Size.Medium
@@ -176,9 +176,9 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }));
     }
   };
-  return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
+  return /*#__PURE__*/_jsxs(VerticalCardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
-    children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
+    children: [haveAtLeastSomething && /*#__PURE__*/_jsx(VerticalCardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(VerticalCardBottomSectionProgressStyles, {
       children: /*#__PURE__*/_jsx(LinearProgress, {
         size: Size.Small,
         type: progressType,
@@ -186,8 +186,8 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         value: progressLevel,
         max: progressMax ?? progressLevel
       })
-    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
-      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {
+    }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionNotesStyles, {
+      children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
           color: COLORS.generateToken({
             componentType: 'icon',
@@ -196,7 +196,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           textStyle: ComponentTextStyle.Bold,
           children: noteLeft
         })]
-      }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteRightStyles, {
+      }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
           color: COLORS.generateToken({
             componentType: 'icon',
@@ -206,13 +206,13 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: noteRight
         })]
       })]
-    }), (authorName || logo) && /*#__PURE__*/_jsxs(CardBottomSectionAuthorStyles, {
+    }), (authorName || logo) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionAuthorStyles, {
       $disabled: disabled,
       "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/_jsx(ComponentXXS, {
         children: authorName
       }), logo]
-    }), (actions || leftButton) && /*#__PURE__*/_jsxs(CardBottomSectionButtonRowContainerStyles, {
+    }), (actions || leftButton) && /*#__PURE__*/_jsxs(VerticalCardBottomSectionButtonRowContainerStyles, {
       children: [/*#__PURE__*/_jsx(LeftItemContainer, {
         children: leftButton && renderLeftButton()
       }), actions && /*#__PURE__*/_jsx(RightItemContainer, {
@@ -232,7 +232,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-CardBottomSection.propTypes = {
+VerticalCardBottomSection.propTypes = {
   progressLevel: _pt.number,
   progressMax: _pt.number,
   noteLeft: _pt.string,
@@ -248,5 +248,5 @@ CardBottomSection.propTypes = {
   logo: _pt.node,
   disabled: _pt.bool
 };
-export default CardBottomSection;
-//# sourceMappingURL=CardBottomSection.js.map
+export default VerticalCardBottomSection;
+//# sourceMappingURL=VerticalCardBottomSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","TextButton","IconButton","jsx","_jsx","jsxs","_jsxs","VerticalCardBottomSectionProgressStyles","div","VerticalCardBottomSectionNotesStyles","props","generateToken","componentType","defaultVariant","theme","VerticalCardBottomSectionAuthorStyles","$disabled","state","VerticalCardBottomSectionDivider","VerticalCardBottomSectionNoteLeftStyles","VerticalCardBottomSectionNoteRightStyles","VerticalCardBottomSectionButtonRowContainerStyles","VerticalCardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","VerticalCardBottomSection","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/VerticalCardBottomSection.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 { TextButton, TextButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface VerticalCardActionItem {\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 VerticalCardStandardButton = Pick<TextButtonProps, '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 VerticalCardBottomSectionProps {\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?: VerticalCardStandardButton;\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?: VerticalCardActionItem[];\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 VerticalCardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const VerticalCardBottomSectionNotesStyles = 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 VerticalCardBottomSectionAuthorStyles = 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 VerticalCardBottomSectionDivider = 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 VerticalCardBottomSectionNoteLeftStyles = 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 VerticalCardBottomSectionNoteRightStyles = 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 VerticalCardBottomSectionButtonRowContainerStyles = 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 VerticalCardBottomSectionContainer = 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 VerticalCardBottomSection = 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}: VerticalCardBottomSectionProps,\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 (<TextButton 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      </TextButton>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <VerticalCardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <VerticalCardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <VerticalCardBottomSectionProgressStyles>\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      </VerticalCardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <VerticalCardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <VerticalCardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <VerticalCardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </VerticalCardBottomSectionNoteRightStyles>\r\n        )}\r\n      </VerticalCardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <VerticalCardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </VerticalCardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <VerticalCardBottomSectionButtonRowContainerStyles>\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      </VerticalCardBottomSectionButtonRowContainerStyles>}\r\n    </VerticalCardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default VerticalCardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/{CardMiddleSection.cjs → VerticalCardMiddleSection.cjs}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardMiddleSectionTitle = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
+exports.default = exports.VerticalCardMiddleSectionTitle = exports.VerticalCardMiddleSectionTagsStyles = exports.VerticalCardMiddleSectionContainer = exports.VerticalCardMiddleSectionColorBandStyles = exports.VerticalCardMiddleSectionCategoryStyles = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -12,7 +12,7 @@ var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CardMiddleSectionContainer = exports.CardMiddleSectionContainer = _styledComponents.default.div`
+const VerticalCardMiddleSectionContainer = exports.VerticalCardMiddleSectionContainer = _styledComponents.default.div`
   display: flex;
   flex-grow: 1;
   width: calc(100% - 32px);
@@ -29,7 +29,7 @@ const CardMiddleSectionContainer = exports.CardMiddleSectionContainer = _styledC
     padding: 2px 0;
   }
 `;
-const CardMiddleSectionColorBandStyles = exports.CardMiddleSectionColorBandStyles = _styledComponents.default.div`
+const VerticalCardMiddleSectionColorBandStyles = exports.VerticalCardMiddleSectionColorBandStyles = _styledComponents.default.div`
   position: absolute;
   width: 100%;
   top: 0px;
@@ -37,14 +37,14 @@ const CardMiddleSectionColorBandStyles = exports.CardMiddleSectionColorBandStyle
   height: 8px;
   background-color: ${props => props.$color};
 `;
-const CardMiddleSectionTagsStyles = exports.CardMiddleSectionTagsStyles = _styledComponents.default.div`
+const VerticalCardMiddleSectionTagsStyles = exports.VerticalCardMiddleSectionTagsStyles = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   padding: 4px 0;
   gap: 4px;
   flex-wrap: wrap;
 `;
-const CardMiddleSectionCategoryStyles = exports.CardMiddleSectionCategoryStyles = _styledComponents.default.div`
+const VerticalCardMiddleSectionCategoryStyles = exports.VerticalCardMiddleSectionCategoryStyles = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -60,7 +60,7 @@ const CardMiddleSectionCategoryStyles = exports.CardMiddleSectionCategoryStyles
     flex-shrink: 0;
   }
 `;
-const CardMiddleSectionTitle = exports.CardMiddleSectionTitle = _styledComponents.default.h3`
+const VerticalCardMiddleSectionTitle = exports.VerticalCardMiddleSectionTitle = _styledComponents.default.h3`
   ${props => (0, _index.ComponentXLStyling)(_index.ComponentTextStyle.Bold, props.$disabled ? _index.COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'subtle'
@@ -69,7 +69,7 @@ const CardMiddleSectionTitle = exports.CardMiddleSectionTitle = _styledComponent
   defaultVariant: 'default'
 }, props.theme))}
 `;
-const CardMiddleSection = _ref => {
+const VerticalCardMiddleSection = _ref => {
   let {
     colorBandColor,
     categoryIcon,
@@ -82,11 +82,11 @@ const CardMiddleSection = _ref => {
     componentId
   } = _ref;
   const theme = (0, _styledComponents.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardMiddleSectionContainer, {
     "data-testid": 'card-middleSection',
-    children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionColorBandStyles, {
+    children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardMiddleSectionColorBandStyles, {
       $color: colorBandColor
-    }), (categoryIcon || categoryLabel) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionCategoryStyles, {
+    }), (categoryIcon || categoryLabel) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardMiddleSectionCategoryStyles, {
       $extraTopMargin: Boolean(colorBandColor),
       $bottomMargin: Boolean(categoryIcon || categoryLabel),
       children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
@@ -97,7 +97,7 @@ const CardMiddleSection = _ref => {
         }, theme),
         children: categoryLabel
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTitle, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardMiddleSectionTitle, {
       id: `${componentId}-title`,
       className: "titleBlock",
       $disabled: disabled,
@@ -109,13 +109,13 @@ const CardMiddleSection = _ref => {
         defaultVariant: 'subtle'
       }, theme),
       children: description
-    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
+    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardMiddleSectionTagsStyles, {
       children: tags.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
         label: x.label,
         variant: x.variant ?? 'neutral',
         icon: x.icon
       }, `${x.label}_${index}`))
-    }), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
+    }), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardMiddleSectionTagsStyles, {
       children: row2Tags.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
         label: x.label,
         variant: x.variant ?? 'neutral',
@@ -124,7 +124,7 @@ const CardMiddleSection = _ref => {
     })]
   });
 };
-CardMiddleSection.propTypes = {
+VerticalCardMiddleSection.propTypes = {
   colorBandColor: _propTypes.default.string,
   categoryIcon: _propTypes.default.node,
   categoryLabel: _propTypes.default.string,
@@ -141,5 +141,5 @@ CardMiddleSection.propTypes = {
   disabled: _propTypes.default.bool,
   componentId: _propTypes.default.string
 };
-var _default = exports.default = CardMiddleSection;
-//# sourceMappingURL=CardMiddleSection.cjs.map
+var _default = exports.default = VerticalCardMiddleSection;
+//# sourceMappingURL=VerticalCardMiddleSection.cjs.map