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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Card/VerticalCard/CardBottomSection.cjs +44 -12
  2. package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -1
  3. package/dist/Card/VerticalCard/CardBottomSection.d.ts +8 -1
  4. package/dist/Card/VerticalCard/CardBottomSection.js +45 -13
  5. package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -1
  6. package/package.json +137 -141
package/dist/Card/VerticalCard/CardBottomSection.cjs CHANGED
@@ -5,14 +5,19 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.CardBottomSectionProgressStyles = exports.CardBottomSectionNotesStyles = exports.CardBottomSectionNoteRightStyles = exports.CardBottomSectionNoteLeftStyles = exports.CardBottomSectionDivider = exports.CardBottomSectionContainer = exports.CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionAuthorStyles = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
8
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
11
  var React = _interopRequireWildcard(require("react"));
10
12
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
13
  var _index = require("../../index");
12
14
  var _Button = require("../../Button");
13
15
  var _jsxRuntime = require("react/jsx-runtime");
16
+ const _excluded = ["buttonText"];
14
17
  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); }
15
18
  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; }
19
+ 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; }
20
+ 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; }
16
21
  const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles = _styledComponents.default.div`
17
22
  padding: 8px 0;
18
23
  `;
@@ -105,6 +110,15 @@ const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledC
105
110
  padding: 0px 16px 8px 16px;
106
111
  width: calc(100% - 32px);
107
112
  `;
113
+ const LeftItemContainer = _styledComponents.default.div`
114
+ flex: 1
115
+ `;
116
+ const RightItemContainer = _styledComponents.default.div`
117
+ display: flex;
118
+ flex-direction: row;
119
+ justify-content: flex-end;
120
+ color: ${props => _index.COLORS.getColor('neutral_600', props.theme)};
121
+ `;
108
122
  const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
109
123
  let {
110
124
  progressLevel,
@@ -114,6 +128,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
114
128
  noteLeftIcon,
115
129
  noteRight,
116
130
  noteRightIcon,
131
+ leftButton,
117
132
  authorName,
118
133
  logo,
119
134
  actions,
@@ -126,7 +141,20 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
126
141
  setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
127
142
  }, [length]);
128
143
  React.useImperativeHandle(ref, () => elRefs, [elRefs]);
129
- const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
144
+ const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
145
+ const renderLeftButton = () => {
146
+ if (leftButton) {
147
+ const {
148
+ buttonText
149
+ } = leftButton,
150
+ rest = (0, _objectWithoutProperties2.default)(leftButton, _excluded);
151
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, _objectSpread(_objectSpread({
152
+ 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
153
+ }, rest), {}, {
154
+ children: buttonText
155
+ }));
156
+ }
157
+ };
130
158
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionContainer, {
131
159
  "data-testid": 'card-bottomSection',
132
160
  children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionProgressStyles, {
@@ -157,17 +185,21 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
157
185
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
158
186
  children: authorName
159
187
  }), logo]
160
- }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardBottomSectionButtonRowContainerStyles, {
161
- children: actions.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
162
- ref: elRefs[index],
163
- disabled: disabled,
164
- variant: "secondary",
165
- shape: "circular",
166
- action: e => {
167
- x.onClick();
168
- },
169
- children: x.icon
170
- }, index))
188
+ }), (actions || leftButton) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionButtonRowContainerStyles, {
189
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftItemContainer, {
190
+ children: leftButton && renderLeftButton()
191
+ }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(RightItemContainer, {
192
+ children: actions.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
193
+ ref: elRefs[index],
194
+ disabled: disabled,
195
+ variant: "secondary",
196
+ shape: "circular",
197
+ action: e => {
198
+ x.onClick();
199
+ },
200
+ children: x.icon
201
+ }, index))
202
+ })]
171
203
  })]
172
204
  });
173
205
  });
package/dist/Card/VerticalCard/CardBottomSection.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardBottomSectionProgressStyles","exports","styled","div","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","jsxs","children","jsx","LinearProgress","size","Size","Small","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size\r\n} from '../../index';\r\nimport {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":[]}
1
+ {"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardBottomSectionProgressStyles","exports","styled","div","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties2","jsx","Button","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n COLORS,\r\n ComponentTextStyle,\r\n ComponentXXS,\r\n LinearProgress,\r\n LinearProgressType,\r\n LinearProgressVariant,\r\n Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n icon: React.ReactNode;\r\n onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n buttonText: string;\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. */\r\n progressLevel?: number;\r\n /** Optional. Maximum level of progress in the progress bar. */\r\n progressMax?: number;\r\n /** Optional. Type of the progress bar. */\r\n progressType?: LinearProgressType;\r\n\r\n /** Optional. Note text shown on the left side of the section. */\r\n noteLeft?: string;\r\n /** Optional. Note icon shown on the left side of the section. */\r\n noteLeftIcon?: React.ReactNode;\r\n /** Optional. Note text shown on the right side of the section. */\r\n noteRight?: string;\r\n /** Optional. Note icon shown on the right side of the section. */\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n leftButton?: CardStandardButton;\r\n\r\n /** Author name shown at the bottom-left part of the section. */\r\n authorName?: string;\r\n /** Array of actions shown on the bottom-right corner of the section. */\r\n actions?: ActionItem[];\r\n /** Logo shown on the right side of the section, in front of AuthorName. */\r\n logo?: React.ReactNode;\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n leftButton,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n}: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length || 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n const renderLeftButton = () => {\r\n if (leftButton){\r\n const {buttonText, ...rest} = leftButton;\r\n return (<Button \r\n size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n {...rest}>\r\n {buttonText}\r\n </Button>)\r\n }\r\n}\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft || noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight || noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n <LeftItemContainer>\r\n {leftButton && renderLeftButton()}\r\n </LeftItemContainer>\r\n\r\n { actions && <RightItemContainer>{actions.map((x, index) => (\r\n <IconButton ref={elRefs[index]}\r\n key={index}\r\n disabled={disabled}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </RightItemContainer>\r\n }\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Card/VerticalCard/CardBottomSection.d.ts CHANGED
@@ -1,9 +1,14 @@
1
1
  import * as React from 'react';
2
- import { LinearProgressType } from '../../index';
2
+ import { LinearProgressType, Size } from '../../index';
3
+ import { ButtonProps } from '../../Button';
3
4
  export interface ActionItem {
4
5
  icon: React.ReactNode;
5
6
  onClick: () => void;
6
7
  }
8
+ export type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
9
+ buttonText: string;
10
+ size?: Size.Small | Size.Medium | Size.Large;
11
+ };
7
12
  export interface CardBottomSectionProps {
8
13
  /** Optional. Current progress level shown in the progress bar. */
9
14
  progressLevel?: number;
@@ -19,6 +24,8 @@ export interface CardBottomSectionProps {
19
24
  noteRight?: string;
20
25
  /** Optional. Note icon shown on the right side of the section. */
21
26
  noteRightIcon?: React.ReactNode;
27
+ /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */
28
+ leftButton?: CardStandardButton;
22
29
  /** Author name shown at the bottom-left part of the section. */
23
30
  authorName?: string;
24
31
  /** Array of actions shown on the bottom-right corner of the section. */
package/dist/Card/VerticalCard/CardBottomSection.js CHANGED
@@ -1,8 +1,13 @@
1
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
1
3
  import _pt from "prop-types";
4
+ const _excluded = ["buttonText"];
5
+ 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; }
6
+ 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) { _defineProperty(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; }
2
7
  import * as React from 'react';
3
8
  import styled, { useTheme } from 'styled-components';
4
9
  import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
5
- import { IconButton } from '../../Button';
10
+ import { Button, IconButton } from '../../Button';
6
11
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
12
  export const CardBottomSectionProgressStyles = styled.div`
8
13
  padding: 8px 0;
@@ -96,6 +101,15 @@ export const CardBottomSectionContainer = styled.div`
96
101
  padding: 0px 16px 8px 16px;
97
102
  width: calc(100% - 32px);
98
103
  `;
104
+ const LeftItemContainer = styled.div`
105
+ flex: 1
106
+ `;
107
+ const RightItemContainer = styled.div`
108
+ display: flex;
109
+ flex-direction: row;
110
+ justify-content: flex-end;
111
+ color: ${props => COLORS.getColor('neutral_600', props.theme)};
112
+ `;
99
113
  const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
100
114
  let {
101
115
  progressLevel,
@@ -105,6 +119,7 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
105
119
  noteLeftIcon,
106
120
  noteRight,
107
121
  noteRightIcon,
122
+ leftButton,
108
123
  authorName,
109
124
  logo,
110
125
  actions,
@@ -117,7 +132,20 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
117
132
  setElRefs(Array(length || 0).fill(null).map(() => /*#__PURE__*/React.createRef()));
118
133
  }, [length]);
119
134
  React.useImperativeHandle(ref, () => elRefs, [elRefs]);
120
- const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
135
+ const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;
136
+ const renderLeftButton = () => {
137
+ if (leftButton) {
138
+ const {
139
+ buttonText
140
+ } = leftButton,
141
+ rest = _objectWithoutProperties(leftButton, _excluded);
142
+ return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
143
+ size: leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small : leftButton.size == Size.Large ? Size.Large : Size.Medium
144
+ }, rest), {}, {
145
+ children: buttonText
146
+ }));
147
+ }
148
+ };
121
149
  return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
122
150
  "data-testid": 'card-bottomSection',
123
151
  children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomSectionDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardBottomSectionProgressStyles, {
@@ -148,17 +176,21 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
148
176
  children: [/*#__PURE__*/_jsx(ComponentXXS, {
149
177
  children: authorName
150
178
  }), logo]
151
- }), actions && /*#__PURE__*/_jsx(CardBottomSectionButtonRowContainerStyles, {
152
- children: actions.map((x, index) => /*#__PURE__*/_jsx(IconButton, {
153
- ref: elRefs[index],
154
- disabled: disabled,
155
- variant: "secondary",
156
- shape: "circular",
157
- action: e => {
158
- x.onClick();
159
- },
160
- children: x.icon
161
- }, index))
179
+ }), (actions || leftButton) && /*#__PURE__*/_jsxs(CardBottomSectionButtonRowContainerStyles, {
180
+ children: [/*#__PURE__*/_jsx(LeftItemContainer, {
181
+ children: leftButton && renderLeftButton()
182
+ }), actions && /*#__PURE__*/_jsx(RightItemContainer, {
183
+ children: actions.map((x, index) => /*#__PURE__*/_jsx(IconButton, {
184
+ ref: elRefs[index],
185
+ disabled: disabled,
186
+ variant: "secondary",
187
+ shape: "circular",
188
+ action: e => {
189
+ x.onClick();
190
+ },
191
+ children: x.icon
192
+ }, index))
193
+ })]
162
194
  })]
163
195
  });
164
196
  });
package/dist/Card/VerticalCard/CardBottomSection.js.map CHANGED
@@ -1 +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","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":[]}
1
+ {"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","Button","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","props","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties","_excluded","_objectSpread","size","XSmall","XXSmall","includes","Small","Large","Medium","children","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 { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n icon: React.ReactNode;\r\n onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n buttonText: string;\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n /** Optional. Current progress level shown in the progress bar. */\r\n progressLevel?: number;\r\n /** Optional. Maximum level of progress in the progress bar. */\r\n progressMax?: number;\r\n /** Optional. Type of the progress bar. */\r\n progressType?: LinearProgressType;\r\n\r\n /** Optional. Note text shown on the left side of the section. */\r\n noteLeft?: string;\r\n /** Optional. Note icon shown on the left side of the section. */\r\n noteLeftIcon?: React.ReactNode;\r\n /** Optional. Note text shown on the right side of the section. */\r\n noteRight?: string;\r\n /** Optional. Note icon shown on the right side of the section. */\r\n noteRightIcon?: React.ReactNode;\r\n\r\n /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n leftButton?: CardStandardButton;\r\n\r\n /** Author name shown at the bottom-left part of the section. */\r\n authorName?: string;\r\n /** Array of actions shown on the bottom-right corner of the section. */\r\n actions?: ActionItem[];\r\n /** Logo shown on the right side of the section, in front of AuthorName. */\r\n logo?: React.ReactNode;\r\n /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n height: 48px;\r\n position: relative;\r\n color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n height: 48px;\r\n\r\n div:first-child {\r\n flex-grow: 2;\r\n }\r\n\r\n svg, img {\r\n width: 80px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n ${props => props.$disabled ? `\r\n color: ${COLORS.getColor('neutral_300', props.theme)};\r\n svg, img {\r\n filter: grayscale(100%);\r\n }\r\n \r\n ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n position: absolute;\r\n left: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n position: absolute;\r\n right: 0px;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n\r\n svg {\r\n margin-right: 4px;\r\n flex-grow: 0;\r\n flex-shrink: 0;\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: center;\r\n border-top: 1px;\r\n border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n border-top-style: solid;\r\n\r\n button:last-child {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n button:not(:last-child) {\r\n margin: 8px 0px 0px 0px;\r\n }\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n padding: 0px 16px 8px 16px;\r\n width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n progressLevel,\r\n progressMax,\r\n progressType = LinearProgressType.Line,\r\n noteLeft,\r\n noteLeftIcon,\r\n noteRight,\r\n noteRightIcon,\r\n leftButton,\r\n authorName,\r\n logo,\r\n actions,\r\n disabled\r\n}: CardBottomSectionProps,\r\n ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n const theme = useTheme();\r\n const length = actions?.length || 0;\r\n\r\n React.useEffect(() => {\r\n setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n }, [length]);\r\n\r\n React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n const renderLeftButton = () => {\r\n if (leftButton){\r\n const {buttonText, ...rest} = leftButton;\r\n return (<Button \r\n size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n {...rest}>\r\n {buttonText}\r\n </Button>)\r\n }\r\n}\r\n\r\n return (\r\n <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n <LinearProgress size={Size.Small}\r\n type={progressType}\r\n variant={LinearProgressVariant.Normal}\r\n value={progressLevel}\r\n max={progressMax ?? progressLevel}/>\r\n </CardBottomSectionProgressStyles>}\r\n\r\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n {(noteLeft || noteLeftIcon) && (\r\n <CardBottomSectionNoteLeftStyles>\r\n {noteLeftIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n </CardBottomSectionNoteLeftStyles>\r\n )}\r\n {(noteRight || noteRightIcon) && (\r\n <CardBottomSectionNoteRightStyles>\r\n {noteRightIcon}\r\n <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n </CardBottomSectionNoteRightStyles>\r\n )}\r\n </CardBottomSectionNotesStyles>}\r\n\r\n {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n <ComponentXXS>{authorName}</ComponentXXS>\r\n {logo}\r\n </CardBottomSectionAuthorStyles>}\r\n\r\n {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n <LeftItemContainer>\r\n {leftButton && renderLeftButton()}\r\n </LeftItemContainer>\r\n\r\n { actions && <RightItemContainer>{actions.map((x, index) => (\r\n <IconButton ref={elRefs[index]}\r\n key={index}\r\n disabled={disabled}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n x.onClick();\r\n }}>\r\n {x.icon}\r\n </IconButton>\r\n ))}\r\n </RightItemContainer>\r\n }\r\n </CardBottomSectionButtonRowContainerStyles>}\r\n </CardBottomSectionContainer>\r\n );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,143 +1,139 @@
1
1
  {
2
- "name": "@laerdal/life-react-components",
3
- "version": "6.0.0-dev.1.full",
4
- "private": false,
5
- "author": "Erik Martirosyan \u003cerik.martirosyan@laerdal.com\u003e",
6
- "contributors": [
7
-
8
- ],
9
- "description": "Laerdal LIFE component library for React.",
10
- "keywords": [
11
-
12
- ],
13
- "license": "UNLICENSED",
14
- "repository": {
15
- "type": "git",
16
- "url": "https://github.com/Laerdal-Medical/dcs-life-react-js"
17
- },
18
- "main": "dist/index.cjs",
19
- "module": "dist/index.js",
20
- "types": "dist/index.d.ts",
21
- "exports": {
22
- ".": {
23
- "require": "./dist/index.cjs",
24
- "import": "./dist/index.js",
25
- "types": "./dist/index.d.ts"
26
- }
27
- },
28
- "sideEffects": false,
29
- "files": [
30
- "dist"
31
- ],
32
- "scripts": {
33
- "bump": "yarn version --patch",
34
- "build": "yarn build:babel:esm \u0026\u0026 yarn build:babel:cjs \u0026\u0026 tsc --emitDeclarationOnly --declaration --declarationDir dist \u0026\u0026 node scripts/copyTS.cjs",
35
- "build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .js",
36
- "build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .cjs",
37
- "clean": "rimraf dist",
38
- "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
39
- "test": "jest src/",
40
- "test:coverage": "jest --collectCoverage src/",
41
- "test-watch": "jest --watch",
42
- "storybook": "storybook dev -p 6006",
43
- "build-storybook": "storybook build"
44
- },
45
- "eslintConfig": {
46
- "extends": [
47
- "react-app",
48
- "plugin:storybook/recommended"
49
- ]
50
- },
51
- "browserslist": {
52
- "production": [
53
- "\u003e0.2%",
54
- "not dead",
55
- "not op_mini all"
56
- ],
57
- "development": [
58
- "last 1 chrome version",
59
- "last 1 firefox version",
60
- "last 1 safari version"
61
- ]
62
- },
63
- "omlet": {
64
- "exports": {
65
- ".": "src/index.ts"
66
- }
67
- },
68
- "dependencies": {
69
- "@laerdal/figma-svg": "^5.2.2",
70
- "@types/node": "^18.0.6",
71
- "animated-scroll-to": "^2.3.0",
72
- "dayjs": "^1.11.5",
73
- "nanoid": "3.3.11",
74
- "react": "^19.0.0",
75
- "react-datepicker": "^8.2.1",
76
- "react-dom": "^19.0.0",
77
- "react-inlinesvg": "^4.2.0",
78
- "react-modal": "^3.16.0",
79
- "react-quill": "^2.0.0",
80
- "react-resize-detector": "^11.0.1",
81
- "rooks": "^7.1.1",
82
- "styled-components": "^6.1.13",
83
- "typescript": "^5.1.2"
84
- },
85
- "devDependencies": {
86
- "@babel/cli": "^7.22.0",
87
- "@babel/plugin-proposal-class-properties": "^7.18.6",
88
- "@babel/plugin-proposal-export-default-from": "^7.22.0",
89
- "@babel/plugin-proposal-numeric-separator": "^7.18.6",
90
- "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
91
- "@babel/plugin-transform-runtime": "^7.22.0",
92
- "@babel/preset-env": "^7.22.0",
93
- "@babel/preset-react": "^7.22.0",
94
- "@babel/preset-typescript": "^7.27.0",
95
- "@babel/runtime": "^7.22.0",
96
- "@chromatic-com/storybook": "1.4.0",
97
- "@laerdal/navigation": "^3.2.0",
98
- "@storybook/addon-essentials": "^8.1.3",
99
- "@storybook/addon-interactions": "^8.1.3",
100
- "@storybook/addon-links": "^8.1.3",
101
- "@storybook/addon-onboarding": "^8.1.3",
102
- "@storybook/addon-webpack5-compiler-swc": "1.0.2",
103
- "@storybook/addons": "^7.6.17",
104
- "@storybook/blocks": "^8.1.3",
105
- "@storybook/react": "^8.1.3",
106
- "@storybook/react-webpack5": "^8.1.3",
107
- "@storybook/test": "^8.1.3",
108
- "@testing-library/dom": "^10.4.0",
109
- "@testing-library/jest-dom": "^6.5.0",
110
- "@testing-library/react": "^16.0.1",
111
- "@testing-library/user-event": "^14.5.2",
112
- "@types/jest": "^29.5.12",
113
- "@types/react": "^19.1.2",
114
- "@types/react-datepicker": "^4.4.2",
115
- "@types/react-dom": "^18.3.0",
116
- "@types/react-modal": "^3.13.1",
117
- "babel-plugin-inline-react-svg": "^2.0.1",
118
- "babel-plugin-typescript-to-proptypes": "^2.0.0",
119
- "concurrently": "^5.2.0",
120
- "cross-env": "^7.0.3",
121
- "eslint-plugin-storybook": "^0.8.0",
122
- "history": "^5.3.0",
123
- "jest": "^29.7.0",
124
- "jest-environment-jsdom": "^29.7.0",
125
- "jest-styled-components": "^7.2.0",
126
- "jest-svg-transformer": "^1.0.0",
127
- "react-router": "^6.0.0",
128
- "react-share": "^5.1.0",
129
- "regenerator-runtime": "^0.13.9",
130
- "storybook": "^8.1.3",
131
- "ts-jest": "^29.2.5"
132
- },
133
- "peerDependencies": {
134
- "@babel/core": "^7.0.0",
135
- "react": "^19",
136
- "react-dom": "^19"
137
- },
138
- "resolutions": {
139
- "nwsapi": "2.2.9",
140
- "date-fns": "2.24.0",
141
- "@types/react": "19.1.2"
142
- }
2
+ "name": "@laerdal/life-react-components",
3
+ "version": "6.0.0-dev.2",
4
+ "private": false,
5
+ "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
+ "contributors": [],
7
+ "description": "Laerdal LIFE component library for React.",
8
+ "keywords": [],
9
+ "license": "UNLICENSED",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "https://github.com/Laerdal-Medical/dcs-life-react-js"
13
+ },
14
+ "main": "dist/index.cjs",
15
+ "module": "dist/index.js",
16
+ "types": "dist/index.d.ts",
17
+ "exports": {
18
+ ".": {
19
+ "require": "./dist/index.cjs",
20
+ "import": "./dist/index.js",
21
+ "types": "./dist/index.d.ts"
22
+ }
23
+ },
24
+ "sideEffects": false,
25
+ "files": [
26
+ "dist"
27
+ ],
28
+ "scripts": {
29
+ "bump": "yarn version --patch",
30
+ "build": "yarn build:babel:esm && yarn build:babel:cjs && tsc --emitDeclarationOnly --declaration --declarationDir dist && node scripts/copyTS.cjs",
31
+ "build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .js",
32
+ "build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .cjs",
33
+ "clean": "rimraf dist",
34
+ "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
35
+ "test": "jest src/",
36
+ "test:coverage": "jest --collectCoverage src/",
37
+ "test-watch": "jest --watch",
38
+ "storybook": "storybook dev -p 6006",
39
+ "build-storybook": "storybook build"
40
+ },
41
+ "eslintConfig": {
42
+ "extends": [
43
+ "react-app",
44
+ "plugin:storybook/recommended"
45
+ ]
46
+ },
47
+ "browserslist": {
48
+ "production": [
49
+ ">0.2%",
50
+ "not dead",
51
+ "not op_mini all"
52
+ ],
53
+ "development": [
54
+ "last 1 chrome version",
55
+ "last 1 firefox version",
56
+ "last 1 safari version"
57
+ ]
58
+ },
59
+ "omlet": {
60
+ "exports": {
61
+ ".": "src/index.ts"
62
+ }
63
+ },
64
+ "dependencies": {
65
+ "@laerdal/figma-svg": "^5.2.2",
66
+ "@types/node": "^18.0.6",
67
+ "animated-scroll-to": "^2.3.0",
68
+ "dayjs": "^1.11.5",
69
+ "nanoid": "3.3.11",
70
+ "react": "^19.0.0",
71
+ "react-datepicker": "^8.2.1",
72
+ "react-dom": "^19.0.0",
73
+ "react-inlinesvg": "^4.2.0",
74
+ "react-modal": "^3.16.0",
75
+ "react-quill": "^2.0.0",
76
+ "react-resize-detector": "^11.0.1",
77
+ "rooks": "^7.1.1",
78
+ "styled-components": "^6.1.13",
79
+ "typescript": "^5.1.2"
80
+ },
81
+ "devDependencies": {
82
+ "@babel/cli": "^7.22.0",
83
+ "@babel/plugin-proposal-class-properties": "^7.18.6",
84
+ "@babel/plugin-proposal-export-default-from": "^7.22.0",
85
+ "@babel/plugin-proposal-numeric-separator": "^7.18.6",
86
+ "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
87
+ "@babel/plugin-transform-runtime": "^7.22.0",
88
+ "@babel/preset-env": "^7.22.0",
89
+ "@babel/preset-react": "^7.22.0",
90
+ "@babel/preset-typescript": "^7.27.0",
91
+ "@babel/runtime": "^7.22.0",
92
+ "@chromatic-com/storybook": "1.4.0",
93
+ "@laerdal/navigation": "^3.2.0",
94
+ "@storybook/addon-essentials": "^8.1.3",
95
+ "@storybook/addon-interactions": "^8.1.3",
96
+ "@storybook/addon-links": "^8.1.3",
97
+ "@storybook/addon-onboarding": "^8.1.3",
98
+ "@storybook/addon-webpack5-compiler-swc": "1.0.2",
99
+ "@storybook/addons": "^7.6.17",
100
+ "@storybook/blocks": "^8.1.3",
101
+ "@storybook/react": "^8.1.3",
102
+ "@storybook/react-webpack5": "^8.1.3",
103
+ "@storybook/test": "^8.1.3",
104
+ "@testing-library/dom": "^10.4.0",
105
+ "@testing-library/jest-dom": "^6.5.0",
106
+ "@testing-library/react": "^16.0.1",
107
+ "@testing-library/user-event": "^14.5.2",
108
+ "@types/jest": "^29.5.12",
109
+ "@types/react": "^19.1.2",
110
+ "@types/react-datepicker": "^4.4.2",
111
+ "@types/react-dom": "^18.3.0",
112
+ "@types/react-modal": "^3.13.1",
113
+ "babel-plugin-inline-react-svg": "^2.0.1",
114
+ "babel-plugin-typescript-to-proptypes": "^2.0.0",
115
+ "concurrently": "^5.2.0",
116
+ "cross-env": "^7.0.3",
117
+ "eslint-plugin-storybook": "^0.8.0",
118
+ "history": "^5.3.0",
119
+ "jest": "^29.7.0",
120
+ "jest-environment-jsdom": "^29.7.0",
121
+ "jest-styled-components": "^7.2.0",
122
+ "jest-svg-transformer": "^1.0.0",
123
+ "react-router": "^6.0.0",
124
+ "react-share": "^5.1.0",
125
+ "regenerator-runtime": "^0.13.9",
126
+ "storybook": "^8.1.3",
127
+ "ts-jest": "^29.2.5"
128
+ },
129
+ "peerDependencies": {
130
+ "@babel/core": "^7.0.0",
131
+ "react": "^19",
132
+ "react-dom": "^19"
133
+ },
134
+ "resolutions": {
135
+ "nwsapi": "2.2.9",
136
+ "date-fns": "2.24.0",
137
+ "@types/react": "19.1.2"
138
+ }
143
139
  }