@laerdal/life-react-components 5.0.9 → 6.0.0-dev.1.full

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -1,59 +1,123 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
 import { IconButton } from '../../Button';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
-export var CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), function (props) {
-  return COLORS.getColor('neutral_500', props.theme);
-});
-export var CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
-  return props.$disabled ? "\n    color: ".concat(COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
-});
-export var CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-});
-export var CardBottomSectionNoteLeftStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardBottomSectionNoteRightStyles = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-});
-export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var progressLevel = _ref.progressLevel,
-    progressMax = _ref.progressMax,
-    _ref$progressType = _ref.progressType,
-    progressType = _ref$progressType === void 0 ? LinearProgressType.Line : _ref$progressType,
-    noteLeft = _ref.noteLeft,
-    noteLeftIcon = _ref.noteLeftIcon,
-    noteRight = _ref.noteRight,
-    noteRightIcon = _ref.noteRightIcon,
-    authorName = _ref.authorName,
-    logo = _ref.logo,
-    actions = _ref.actions,
-    disabled = _ref.disabled;
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    elRefs = _React$useState2[0],
-    setElRefs = _React$useState2[1];
-  var theme = useTheme();
-  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
-  React.useEffect(function () {
-    setElRefs(Array(length || 0).fill(null).map(function () {
-      return /*#__PURE__*/React.createRef();
-    }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CardBottomSectionProgressStyles = styled.div`
+  padding: 8px 0;
+`;
+export const CardBottomSectionNotesStyles = styled.div`
+  height: 48px;
+  position: relative;
+  color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+export const CardBottomSectionAuthorStyles = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 48px;
+
+  div:first-child {
+    flex-grow: 2;
+  }
+
+  svg, img {
+    width: 80px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  ${props => props.$disabled ? `
+    color: ${COLORS.getColor('neutral_300', props.theme)};
+    svg, img {
+      filter: grayscale(100%);
+    }
+    
+  ` : ''}
+`;
+export const CardBottomSectionDivider = styled.div`
+  border-top: 1px;
+  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-style: solid;
+  width: 100%;
+`;
+export const CardBottomSectionNoteLeftStyles = styled.div`
+  position: absolute;
+  left: 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    margin-right: 4px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+export const CardBottomSectionNoteRightStyles = styled.div`
+  position: absolute;
+  right: 0px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  svg {
+    margin-right: 4px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+export const CardBottomSectionButtonRowContainerStyles = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: 1px;
+  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-style: solid;
+
+  button:last-child {
+    margin: 8px 0px 0px 0px;
+  }
+
+  button:not(:last-child) {
+    margin: 8px 0px 0px 0px;
+  }
+
+  svg {
+    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  }
+`;
+export const CardBottomSectionContainer = styled.div`
+  padding: 0px 16px 8px 16px;
+  width: calc(100% - 32px);
+`;
+const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    progressLevel,
+    progressMax,
+    progressType = LinearProgressType.Line,
+    noteLeft,
+    noteLeftIcon,
+    noteRight,
+    noteRightIcon,
+    authorName,
+    logo,
+    actions,
+    disabled
+  } = _ref;
+  const [elRefs, setElRefs] = React.useState([]);
+  const theme = useTheme();
+  const length = actions?.length || 0;
+  React.useEffect(() => {
+    setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
   }, [length]);
-  React.useImperativeHandle(ref, function () {
-    return elRefs;
-  }, [elRefs]);
-  var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
+  React.useImperativeHandle(ref, () => elRefs, [elRefs]);
+  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
     "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
@@ -62,7 +126,7 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         type: progressType,
         variant: LinearProgressVariant.Normal,
         value: progressLevel,
-        max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
+        max: progressMax ?? progressLevel
       })
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {
@@ -85,18 +149,16 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: authorName
       }), logo]
     }), actions && /*#__PURE__*/_jsx(CardBottomSectionButtonRowContainerStyles, {
-      children: actions.map(function (x, index) {
-        return /*#__PURE__*/_jsx(IconButton, {
-          ref: elRefs[index],
-          disabled: disabled,
-          variant: "secondary",
-          shape: "circular",
-          action: function action(e) {
-            x.onClick();
-          },
-          children: x.icon
-        }, index);
-      })
+      children: actions.map((x, index) => /*#__PURE__*/_jsx(IconButton, {
+        ref: elRefs[index],
+        disabled: disabled,
+        variant: "secondary",
+        shape: "circular",
+        action: e => {
+          x.onClick();
+        },
+        children: x.icon
+      }, index))
     })]
   });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","_React$useState","useState","_React$useState2","_slicedToArray","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\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  /** 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 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                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\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;\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 && <CardBottomSectionButtonRowContainerStyles>\r\n        {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      </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.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","props","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\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  /** 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 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                                              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;\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 && <CardBottomSectionButtonRowContainerStyles>\r\n        {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      </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/CardMiddleSection.cjs

@@ -1,41 +1,72 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.default = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-var CardMiddleSectionContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
-exports.CardMiddleSectionContainer = CardMiddleSectionContainer;
-var CardMiddleSectionColorBandStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
-  return props.$color;
-});
-exports.CardMiddleSectionColorBandStyles = CardMiddleSectionColorBandStyles;
-var CardMiddleSectionTagsStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-exports.CardMiddleSectionTagsStyles = CardMiddleSectionTagsStyles;
-var CardMiddleSectionCategoryStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
-  return _index.COLORS.getColor('neutral_500', props.theme);
-});
-exports.CardMiddleSectionCategoryStyles = CardMiddleSectionCategoryStyles;
-var CardMiddleSection = function CardMiddleSection(_ref) {
-  var colorBandColor = _ref.colorBandColor,
-    categoryIcon = _ref.categoryIcon,
-    categoryLabel = _ref.categoryLabel,
-    title = _ref.title,
-    description = _ref.description,
-    tags = _ref.tags,
-    row2Tags = _ref.row2Tags,
-    disabled = _ref.disabled;
-  var theme = (0, _styledComponents.useTheme)();
+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`
+  display: flex;
+  flex-grow: 1;
+  width: calc(100% - 32px);
+  position: relative;
+  flex-direction: column;
+  padding: 16px;
+  gap: 8px;
+
+  .descriptionBlock {
+    padding: 2px 0;
+  }
+
+  .titleBlock {
+    padding: 2px 0;
+  }
+`;
+const CardMiddleSectionColorBandStyles = exports.CardMiddleSectionColorBandStyles = _styledComponents.default.div`
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  height: 8px;
+  background-color: ${props => props.$color};
+`;
+const CardMiddleSectionTagsStyles = exports.CardMiddleSectionTagsStyles = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  padding: 4px 0;
+  gap: 4px;
+  flex-wrap: wrap;
+`;
+const CardMiddleSectionCategoryStyles = exports.CardMiddleSectionCategoryStyles = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: none;
+  gap: 6px;
+
+  svg {
+    color: ${props => _index.COLORS.getColor('neutral_500', props.theme)};
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+const CardMiddleSection = _ref => {
+  let {
+    colorBandColor,
+    categoryIcon,
+    categoryLabel,
+    title,
+    description,
+    tags,
+    row2Tags,
+    disabled
+  } = _ref;
+  const theme = (0, _styledComponents.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionContainer, {
     "data-testid": 'card-middleSection',
     children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionColorBandStyles, {
@@ -58,26 +89,19 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       color: _index.COLORS.getColor('neutral_600', theme),
       children: description
     }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
-      children: tags.map(function (x, index) {
-        var _x$variant;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
-          label: x.label,
-          variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral',
-          icon: x.icon
-        }, "".concat(x.label, "_").concat(index));
-      })
+      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, {
-      children: row2Tags.map(function (x, index) {
-        var _x$variant2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
-          label: x.label,
-          variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral',
-          icon: x.icon
-        }, "".concat(x.label, "_").concat(index));
-      })
+      children: row2Tags.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
+        label: x.label,
+        variant: x.variant ?? 'neutral',
+        icon: x.icon
+      }, `${x.label}_${index}`))
     })]
   });
 };
-var _default = CardMiddleSection;
-exports["default"] = _default;
+var _default = exports.default = CardMiddleSection;
 //# sourceMappingURL=CardMiddleSection.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","styled","div","_taggedTemplateLiteral2","exports","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","_x$variant","Tag","label","variant","icon","concat","_x$variant2","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","exports","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","Tag","label","variant","icon","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,37 +1,37 @@
-import * as React from 'react';
-import { TagVariants } from '../../index';
-import { ReactNode } from 'react';
-export interface CardMiddleSectionProps {
-    /** Color of the band to be shown on the top of middle section. */
-    colorBandColor?: string;
-    /** Icon to be shown on the left side of the categoryLabel. */
-    categoryIcon?: React.ReactNode;
-    /** Label to be shown at the top part of the middle section. */
-    categoryLabel?: string;
-    /** Main title of the Card component. */
-    title: string;
-    /** Description of the Card. */
-    description?: string;
-    /** Tags to be shown under the description. */
-    tags?: CardTag[];
-    /** Second row of tags if needed. */
-    row2Tags?: CardTag[];
-    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
-    disabled?: boolean;
-}
-export interface CardTag {
-    label: string;
-    variant?: TagVariants;
-    icon?: ReactNode;
-}
-export declare const CardMiddleSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardMiddleSectionColorBandStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $color: string;
-}>> & string;
-export declare const CardMiddleSectionTagsStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardMiddleSectionCategoryStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $extraTopMargin: boolean;
-    $bottomMargin: boolean;
-}>> & string;
-declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
-export default CardMiddleSection;
+import * as React from 'react';
+import { TagVariants } from '../../index';
+import { ReactNode } from 'react';
+export interface CardMiddleSectionProps {
+    /** Color of the band to be shown on the top of middle section. */
+    colorBandColor?: string;
+    /** Icon to be shown on the left side of the categoryLabel. */
+    categoryIcon?: React.ReactNode;
+    /** Label to be shown at the top part of the middle section. */
+    categoryLabel?: string;
+    /** Main title of the Card component. */
+    title: string;
+    /** Description of the Card. */
+    description?: string;
+    /** Tags to be shown under the description. */
+    tags?: CardTag[];
+    /** Second row of tags if needed. */
+    row2Tags?: CardTag[];
+    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
+    disabled?: boolean;
+}
+export interface CardTag {
+    label: string;
+    variant?: TagVariants;
+    icon?: ReactNode;
+}
+export declare const CardMiddleSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardMiddleSectionColorBandStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color: string;
+}>> & string;
+export declare const CardMiddleSectionTagsStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardMiddleSectionCategoryStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $extraTopMargin: boolean;
+    $bottomMargin: boolean;
+}>> & string;
+declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
+export default CardMiddleSection;