@laerdal/life-react-components 6.1.2-dev.1.full → 6.1.3-dev.1.full

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 (7) hide show
  1. package/dist/Card/VerticalCard/VerticalCard.cjs +3 -2
  2. package/dist/Card/VerticalCard/VerticalCard.cjs.map +1 -1
  3. package/dist/Card/VerticalCard/VerticalCard.d.ts +2 -2
  4. package/dist/Card/VerticalCard/VerticalCard.js +3 -2
  5. package/dist/Card/VerticalCard/VerticalCard.js.map +1 -1
  6. package/dist/Card/VerticalCard/__tests__/VerticalCard.test.tsx +16 -0
  7. package/package.json +1 -1
package/dist/Card/VerticalCard/VerticalCard.cjs CHANGED
@@ -138,7 +138,7 @@ const VerticalCard = _ref => {
138
138
  const handleCardClick = e => {
139
139
  e.preventDefault();
140
140
  if (!disabled && onCardClicked) {
141
- onCardClicked();
141
+ onCardClicked(e);
142
142
  }
143
143
  };
144
144
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardContainerStyles, _objectSpread(_objectSpread({
@@ -147,7 +147,7 @@ const VerticalCard = _ref => {
147
147
  className: cls,
148
148
  "aria-labelledby": `${autoId}-title`,
149
149
  tabIndex: !!onCardClicked && !disabled ? 0 : -1,
150
- onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(),
150
+ onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e),
151
151
  "data-testid": 'card-wrapper'
152
152
  }, rest), {}, {
153
153
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardTopLevelContainerStyles, {
@@ -158,6 +158,7 @@ const VerticalCard = _ref => {
158
158
  href: '#',
159
159
  "data-testid": 'card-link',
160
160
  onClick: handleCardClick,
161
+ onAuxClick: handleCardClick,
161
162
  "aria-labelledby": `${autoId}-title`,
162
163
  tabIndex: -1
163
164
  }), topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalCardTopSection.default, _objectSpread(_objectSpread({
package/dist/Card/VerticalCard/VerticalCard.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VerticalCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_VerticalCardTopSection","_VerticalCardMiddleSection","_VerticalCardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","VerticalCardTopLevelContainerStyles","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","BOXSHADOWS","BOXSHADOW_L1","VerticalCardLink","focusStyles","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","useActionWithin","cls","handleCardClick","preventDefault","jsx","ref","role","tabIndex","onKeyDown","key","children","jsxs","style","href","onClick","componentId","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n min-width: 240px;\r\n overflow: hidden;\r\n\r\n border-radius: 8px;\r\n\r\n background-clip: padding-box;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n\r\n .elevated & {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n }\r\n\r\n .outline & {\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n }\r\n`;\r\n\r\n// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 100;\r\n text-decoration: none;\r\n color: inherit;\r\n pointer-events: auto;\r\n cursor: pointer;\r\n \r\n &:focus {\r\n outline: none;\r\n }\r\n \r\n &:focus-visible {\r\n ${focusStyles}\r\n }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n &.interactive:not(.disabled) {\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n }\r\n\r\n &:active, &.active-state {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.elevated:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n }\r\n\r\n &:active, &.active-state {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n ${VerticalCardTopLevelContainerStyles}{\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n /** Action to be executed when Card is clicked. */\r\n onCardClicked?: () => void;\r\n /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n disabled?: boolean;\r\n /** Maximum width of the card. */\r\n maxWidth?: number | string;\r\n /** Properties of Card top section. */\r\n topSectionProps?: VerticalCardTopSectionProps;\r\n /** Properties of Card middle section. */\r\n middleSectionProps?: VerticalCardMiddleSectionProps;\r\n /** Properties of Card bottom section. */\r\n bottomSectionProps?: VerticalCardBottomSectionProps;\r\n /** Card container style variant. */\r\n variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n onCardClicked,\r\n topSectionProps,\r\n middleSectionProps,\r\n bottomSectionProps,\r\n disabled,\r\n variant = 'elevated',\r\n className,\r\n id,\r\n maxWidth = 560,\r\n ...rest\r\n }: VerticalCardProps) => {\r\n\r\n\r\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const autoId = React.useId();\r\n\r\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n const handleCardClick = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n if (!disabled && onCardClicked) {\r\n onCardClicked();\r\n }\r\n };\r\n\r\n return (\r\n <VerticalCardContainerStyles ref={containerRef}\r\n role=\"group\"\r\n className={cls}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n data-testid={'card-wrapper'}\r\n {...rest}>\r\n <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n {/* Full-card link for accessibility */}\r\n {onCardClicked && !disabled && (\r\n <VerticalCardLink\r\n href={'#'}\r\n data-testid={'card-link'}\r\n onClick={handleCardClick}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={-1}\r\n />\r\n )}\r\n \r\n {\r\n topSectionProps &&\r\n <VerticalCardTopSection ref={checkBoxRef}\r\n {...topSectionProps} disabled={disabled}/>\r\n }\r\n {\r\n middleSectionProps &&\r\n <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n }\r\n {\r\n bottomSectionProps &&\r\n <VerticalCardBottomSection ref={instance => {\r\n setActionsRefs(instance ?? []);\r\n }}\r\n {...bottomSectionProps} disabled={disabled}/>\r\n }\r\n </VerticalCardTopLevelContainerStyles>\r\n </VerticalCardContainerStyles>\r\n );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"VerticalCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_VerticalCardTopSection","_VerticalCardMiddleSection","_VerticalCardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","VerticalCardTopLevelContainerStyles","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","BOXSHADOWS","BOXSHADOW_L1","VerticalCardLink","focusStyles","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","useActionWithin","cls","handleCardClick","preventDefault","jsx","ref","role","tabIndex","onKeyDown","key","children","jsxs","style","href","onClick","onAuxClick","componentId","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n min-width: 240px;\r\n overflow: hidden;\r\n\r\n border-radius: 8px;\r\n\r\n background-clip: padding-box;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n\r\n .elevated & {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n }\r\n\r\n .outline & {\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n }\r\n`;\r\n\r\n// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 100;\r\n text-decoration: none;\r\n color: inherit;\r\n pointer-events: auto;\r\n cursor: pointer;\r\n \r\n &:focus {\r\n outline: none;\r\n }\r\n \r\n &:focus-visible {\r\n ${focusStyles}\r\n }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n &.interactive:not(.disabled) {\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n }\r\n\r\n &:active, &.active-state {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.elevated:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n }\r\n\r\n &:active, &.active-state {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n ${VerticalCardTopLevelContainerStyles}{\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */\r\n onCardClicked?: (e: React.MouseEvent | React.KeyboardEvent) => void;\r\n /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n disabled?: boolean;\r\n /** Maximum width of the card. */\r\n maxWidth?: number | string;\r\n /** Properties of Card top section. */\r\n topSectionProps?: VerticalCardTopSectionProps;\r\n /** Properties of Card middle section. */\r\n middleSectionProps?: VerticalCardMiddleSectionProps;\r\n /** Properties of Card bottom section. */\r\n bottomSectionProps?: VerticalCardBottomSectionProps;\r\n /** Card container style variant. */\r\n variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n onCardClicked,\r\n topSectionProps,\r\n middleSectionProps,\r\n bottomSectionProps,\r\n disabled,\r\n variant = 'elevated',\r\n className,\r\n id,\r\n maxWidth = 560,\r\n ...rest\r\n }: VerticalCardProps) => {\r\n\r\n\r\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const autoId = React.useId();\r\n\r\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n const handleCardClick = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n if (!disabled && onCardClicked) {\r\n onCardClicked(e);\r\n }\r\n };\r\n\r\n return (\r\n <VerticalCardContainerStyles ref={containerRef}\r\n role=\"group\"\r\n className={cls}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e)}\r\n data-testid={'card-wrapper'}\r\n {...rest}>\r\n <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n {/* Full-card link for accessibility */}\r\n {onCardClicked && !disabled && (\r\n <VerticalCardLink\r\n href={'#'}\r\n data-testid={'card-link'}\r\n onClick={handleCardClick}\r\n onAuxClick={handleCardClick}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={-1}\r\n />\r\n )}\r\n \r\n {\r\n topSectionProps &&\r\n <VerticalCardTopSection ref={checkBoxRef}\r\n {...topSectionProps} disabled={disabled}/>\r\n }\r\n {\r\n middleSectionProps &&\r\n <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n }\r\n {\r\n bottomSectionProps &&\r\n <VerticalCardBottomSection ref={instance => {\r\n setActionsRefs(instance ?? []);\r\n }}\r\n {...bottomSectionProps} disabled={disabled}/>\r\n }\r\n </VerticalCardTopLevelContainerStyles>\r\n </VerticalCardContainerStyles>\r\n );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Card/VerticalCard/VerticalCard.d.ts CHANGED
@@ -6,8 +6,8 @@ export declare const VerticalCardTopLevelContainerStyles: import("styled-compone
6
6
  export declare const VerticalCardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
7
7
  export declare const VerticalCardContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
8
8
  export interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
9
- /** Action to be executed when Card is clicked. */
10
- onCardClicked?: () => void;
9
+ /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */
10
+ onCardClicked?: (e: React.MouseEvent | React.KeyboardEvent) => void;
11
11
  /** If disabled then users can not click on the card, also styles are greyed out.*/
12
12
  disabled?: boolean;
13
13
  /** Maximum width of the card. */
package/dist/Card/VerticalCard/VerticalCard.js CHANGED
@@ -129,7 +129,7 @@ const VerticalCard = _ref => {
129
129
  const handleCardClick = e => {
130
130
  e.preventDefault();
131
131
  if (!disabled && onCardClicked) {
132
- onCardClicked();
132
+ onCardClicked(e);
133
133
  }
134
134
  };
135
135
  return /*#__PURE__*/_jsx(VerticalCardContainerStyles, _objectSpread(_objectSpread({
@@ -138,7 +138,7 @@ const VerticalCard = _ref => {
138
138
  className: cls,
139
139
  "aria-labelledby": `${autoId}-title`,
140
140
  tabIndex: !!onCardClicked && !disabled ? 0 : -1,
141
- onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(),
141
+ onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e),
142
142
  "data-testid": 'card-wrapper'
143
143
  }, rest), {}, {
144
144
  children: /*#__PURE__*/_jsxs(VerticalCardTopLevelContainerStyles, {
@@ -149,6 +149,7 @@ const VerticalCard = _ref => {
149
149
  href: '#',
150
150
  "data-testid": 'card-link',
151
151
  onClick: handleCardClick,
152
+ onAuxClick: handleCardClick,
152
153
  "aria-labelledby": `${autoId}-title`,
153
154
  tabIndex: -1
154
155
  }), topSectionProps && /*#__PURE__*/_jsx(VerticalCardTopSection, _objectSpread(_objectSpread({
package/dist/Card/VerticalCard/VerticalCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VerticalCard.js","names":["React","styled","VerticalCardTopSection","VerticalCardMiddleSection","VerticalCardBottomSection","BOXSHADOWS","COLORS","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","VerticalCardTopLevelContainerStyles","div","props","generateToken","componentType","defaultVariant","theme","BOXSHADOW_L1","VerticalCardLink","a","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","cls","handleCardClick","e","preventDefault","_objectSpread","ref","role","tabIndex","onKeyDown","key","children","style","href","onClick","componentId","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n min-width: 240px;\r\n overflow: hidden;\r\n\r\n border-radius: 8px;\r\n\r\n background-clip: padding-box;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n\r\n .elevated & {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n }\r\n\r\n .outline & {\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n }\r\n`;\r\n\r\n// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 100;\r\n text-decoration: none;\r\n color: inherit;\r\n pointer-events: auto;\r\n cursor: pointer;\r\n \r\n &:focus {\r\n outline: none;\r\n }\r\n \r\n &:focus-visible {\r\n ${focusStyles}\r\n }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n &.interactive:not(.disabled) {\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n }\r\n\r\n &:active, &.active-state {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.elevated:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n }\r\n\r\n &:active, &.active-state {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n ${VerticalCardTopLevelContainerStyles}{\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n /** Action to be executed when Card is clicked. */\r\n onCardClicked?: () => void;\r\n /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n disabled?: boolean;\r\n /** Maximum width of the card. */\r\n maxWidth?: number | string;\r\n /** Properties of Card top section. */\r\n topSectionProps?: VerticalCardTopSectionProps;\r\n /** Properties of Card middle section. */\r\n middleSectionProps?: VerticalCardMiddleSectionProps;\r\n /** Properties of Card bottom section. */\r\n bottomSectionProps?: VerticalCardBottomSectionProps;\r\n /** Card container style variant. */\r\n variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n onCardClicked,\r\n topSectionProps,\r\n middleSectionProps,\r\n bottomSectionProps,\r\n disabled,\r\n variant = 'elevated',\r\n className,\r\n id,\r\n maxWidth = 560,\r\n ...rest\r\n }: VerticalCardProps) => {\r\n\r\n\r\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const autoId = React.useId();\r\n\r\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n const handleCardClick = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n if (!disabled && onCardClicked) {\r\n onCardClicked();\r\n }\r\n };\r\n\r\n return (\r\n <VerticalCardContainerStyles ref={containerRef}\r\n role=\"group\"\r\n className={cls}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n data-testid={'card-wrapper'}\r\n {...rest}>\r\n <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n {/* Full-card link for accessibility */}\r\n {onCardClicked && !disabled && (\r\n <VerticalCardLink\r\n href={'#'}\r\n data-testid={'card-link'}\r\n onClick={handleCardClick}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={-1}\r\n />\r\n )}\r\n \r\n {\r\n topSectionProps &&\r\n <VerticalCardTopSection ref={checkBoxRef}\r\n {...topSectionProps} disabled={disabled}/>\r\n }\r\n {\r\n middleSectionProps &&\r\n <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n }\r\n {\r\n bottomSectionProps &&\r\n <VerticalCardBottomSection ref={instance => {\r\n setActionsRefs(instance ?? []);\r\n }}\r\n {...bottomSectionProps} disabled={disabled}/>\r\n }\r\n </VerticalCardTopLevelContainerStyles>\r\n </VerticalCardContainerStyles>\r\n );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,sBAAsB,MAAqC,0BAA0B;AAC5F,OAAOC,yBAAyB,MAAwC,6BAA6B;AACrG,OAAOC,yBAAyB,MAAwC,6BAA6B;AACrG,SAAQC,UAAU,EAAEC,MAAM,EAA6BC,WAAW,EAAEC,eAAe,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAExG,OAAO,MAAMC,mCAAmC,GAAGZ,MAAM,CAACa,GAAG;AAC7D,sBAAsBC,KAAK,IAAIT,MAAM,CAACU,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBd,UAAU,CAACe,YAAY;AACzC;AACA;AACA;AACA,wBAAwBL,KAAK,IAAIT,MAAM,CAACU,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAE;AAAQ,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AACtH;AACA,CAAC;;AAED;AACA,OAAO,MAAME,gBAAgB,GAAGpB,MAAM,CAACqB,CAAC;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMf,WAAW;AACjB;AACA,CAAC;AAED,OAAO,MAAMgB,2BAA2B,GAAGtB,MAAM,CAACa,GAAG;AACrD;AACA;AACA,QAAQP,WAAW;AACnB;AACA;AACA;AACA,QAAQM,mCAAmC;AAC3C;AACA,8BAA8BE,KAAK,IAAIT,MAAM,CAACU,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEO,KAAK,EAAC;AAAO,CAAC,EAAET,KAAK,CAACI,KAAK,CAAC;AACrH;AACA;AACA;AACA,8BAA8BJ,KAAK,IAAIT,MAAM,CAACU,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEO,KAAK,EAAC;AAAQ,CAAC,EAAET,KAAK,CAACI,KAAK,CAAC;AACtH;AACA;AACA;AACA;AACA;AACA,QAAQN,mCAAmC;AAC3C;AACA,wBAAwBR,UAAU,CAACoB,YAAY;AAC/C;AACA;AACA;AACA,wBAAwBpB,UAAU,CAACqB,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMb,mCAAmC;AACzC,0BAA0BE,KAAK,IAAIT,MAAM,CAACU,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEO,KAAK,EAAC;AAAU,CAAC,EAAET,KAAK,CAACI,KAAK,CAAC;AAChH;AACA;AACA,CAAC;AAoBD,MAAMQ,YAAwD,GAAGC,IAAA,IAWU;EAAA,IAXT;MACdC,aAAa;MACbC,eAAe;MACfC,kBAAkB;MAClBC,kBAAkB;MAClBC,QAAQ;MACRC,OAAO,GAAG,UAAU;MACpBC,SAAS;MACTC,EAAE;MACFC,QAAQ,GAAG;IAEM,CAAC,GAAAT,IAAA;IADfU,IAAI,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAIzD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG1C,KAAK,CAAC2C,QAAQ,CAAwC,EAAE,CAAC;EAC/F,MAAMC,WAAW,GAAI5C,KAAK,CAAC6C,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAMC,YAAY,GAAG9C,KAAK,CAAC6C,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAME,MAAM,GAAG/C,KAAK,CAACgD,KAAK,CAAC,CAAC;EAE5BxC,eAAe,CAACsC,YAAY,EAAE,CAAC,GAAGL,WAAW,EAAEG,WAAW,CAAC,CAAC;EAE5D,MAAMK,GAAG,GAAG,GAAG,CAAC,CAACpB,aAAa,GAAG,aAAa,GAAG,EAAE,IAAII,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIC,OAAO,IAAIC,SAAS,IAAI,EAAE,EAAE;EAEjH,MAAMe,eAAe,GAAIC,CAAmB,IAAK;IAC/CA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClB,IAAI,CAACnB,QAAQ,IAAIJ,aAAa,EAAE;MAC9BA,aAAa,CAAC,CAAC;IACjB;EACF,CAAC;EAED,oBACEnB,IAAA,CAACa,2BAA2B,EAAA8B,aAAA,CAAAA,aAAA;IAACC,GAAG,EAAER,YAAa;IACvCS,IAAI,EAAC,OAAO;IACZpB,SAAS,EAAEc,GAAI;IACf,mBAAiB,GAAGF,MAAM,QAAS;IACnCS,QAAQ,EAAE,CAAC,CAAC3B,aAAa,IAAI,CAACI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAChDwB,SAAS,EAAEN,CAAC,IAAIA,CAAC,CAACO,GAAG,KAAK,OAAO,IAAI,CAACzB,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAE;IACnF,eAAa;EAAe,GACxBS,IAAI;IAAAqB,QAAA,eACd/C,KAAA,CAACC,mCAAmC;MAAC+C,KAAK,EAAE;QAACvB,QAAQ,EAAEA;MAAQ,CAAE;MAAAsB,QAAA,GAE9D9B,aAAa,IAAI,CAACI,QAAQ,iBACzBvB,IAAA,CAACW,gBAAgB;QACfwC,IAAI,EAAE,GAAI;QACV,eAAa,WAAY;QACzBC,OAAO,EAAEZ,eAAgB;QACzB,mBAAiB,GAAGH,MAAM,QAAS;QACnCS,QAAQ,EAAE,CAAC;MAAE,CACd,CACF,EAGC1B,eAAe,iBACfpB,IAAA,CAACR,sBAAsB,EAAAmD,aAAA,CAAAA,aAAA;QAACC,GAAG,EAAEV;MAAY,GACnCd,eAAe;QAAEG,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAG5CF,kBAAkB,iBAClBrB,IAAA,CAACP,yBAAyB,EAAAkD,aAAA,CAAAA,aAAA,KAAKtB,kBAAkB;QAAEgC,WAAW,EAAEhB,MAAO;QAACd,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAG7FD,kBAAkB,iBAClBtB,IAAA,CAACN,yBAAyB,EAAAiD,aAAA,CAAAA,aAAA;QAACC,GAAG,EAAEU,QAAQ,IAAI;UAC1CtB,cAAc,CAACsB,QAAQ,IAAI,EAAE,CAAC;QAChC;MAAE,GACqBhC,kBAAkB;QAAEC,QAAQ,EAAEA;MAAS,EAAC,CAAC;IAAA,CAE/B;EAAC,EACX,CAAC;AAElC,CAAC;AAACN,YAAA,CAAAsC,SAAA;EArFApC,aAAa,EAAAqC,GAAA,CAAAC,IAAA;EAEblC,QAAQ,EAAAiC,GAAA,CAAAE,IAAA;EAER/B,QAAQ,EAAA6B,GAAA,CAAAG,SAAA,EAAAH,GAAA,CAAAI,MAAA,EAAAJ,GAAA,CAAAK,MAAA;EAQRrC,OAAO,EAAAgC,GAAA,CAAAM,KAAA,EAAG,SAAS,EAAG,UAAU;AAAA;AA2ElC,eAAe7C,YAAY","ignoreList":[]}
1
+ {"version":3,"file":"VerticalCard.js","names":["React","styled","VerticalCardTopSection","VerticalCardMiddleSection","VerticalCardBottomSection","BOXSHADOWS","COLORS","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","VerticalCardTopLevelContainerStyles","div","props","generateToken","componentType","defaultVariant","theme","BOXSHADOW_L1","VerticalCardLink","a","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","cls","handleCardClick","e","preventDefault","_objectSpread","ref","role","tabIndex","onKeyDown","key","children","style","href","onClick","onAuxClick","componentId","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n min-width: 240px;\r\n overflow: hidden;\r\n\r\n border-radius: 8px;\r\n\r\n background-clip: padding-box;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n\r\n .elevated & {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n }\r\n\r\n .outline & {\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n }\r\n`;\r\n\r\n// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 100;\r\n text-decoration: none;\r\n color: inherit;\r\n pointer-events: auto;\r\n cursor: pointer;\r\n \r\n &:focus {\r\n outline: none;\r\n }\r\n \r\n &:focus-visible {\r\n ${focusStyles}\r\n }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n &.interactive:not(.disabled) {\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n }\r\n\r\n &:active, &.active-state {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.elevated:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n }\r\n\r\n &:active, &.active-state {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n ${VerticalCardTopLevelContainerStyles}{\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */\r\n onCardClicked?: (e: React.MouseEvent | React.KeyboardEvent) => void;\r\n /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n disabled?: boolean;\r\n /** Maximum width of the card. */\r\n maxWidth?: number | string;\r\n /** Properties of Card top section. */\r\n topSectionProps?: VerticalCardTopSectionProps;\r\n /** Properties of Card middle section. */\r\n middleSectionProps?: VerticalCardMiddleSectionProps;\r\n /** Properties of Card bottom section. */\r\n bottomSectionProps?: VerticalCardBottomSectionProps;\r\n /** Card container style variant. */\r\n variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n onCardClicked,\r\n topSectionProps,\r\n middleSectionProps,\r\n bottomSectionProps,\r\n disabled,\r\n variant = 'elevated',\r\n className,\r\n id,\r\n maxWidth = 560,\r\n ...rest\r\n }: VerticalCardProps) => {\r\n\r\n\r\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const autoId = React.useId();\r\n\r\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n const handleCardClick = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n if (!disabled && onCardClicked) {\r\n onCardClicked(e);\r\n }\r\n };\r\n\r\n return (\r\n <VerticalCardContainerStyles ref={containerRef}\r\n role=\"group\"\r\n className={cls}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e)}\r\n data-testid={'card-wrapper'}\r\n {...rest}>\r\n <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n {/* Full-card link for accessibility */}\r\n {onCardClicked && !disabled && (\r\n <VerticalCardLink\r\n href={'#'}\r\n data-testid={'card-link'}\r\n onClick={handleCardClick}\r\n onAuxClick={handleCardClick}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={-1}\r\n />\r\n )}\r\n \r\n {\r\n topSectionProps &&\r\n <VerticalCardTopSection ref={checkBoxRef}\r\n {...topSectionProps} disabled={disabled}/>\r\n }\r\n {\r\n middleSectionProps &&\r\n <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n }\r\n {\r\n bottomSectionProps &&\r\n <VerticalCardBottomSection ref={instance => {\r\n setActionsRefs(instance ?? []);\r\n }}\r\n {...bottomSectionProps} disabled={disabled}/>\r\n }\r\n </VerticalCardTopLevelContainerStyles>\r\n </VerticalCardContainerStyles>\r\n );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Card/VerticalCard/__tests__/VerticalCard.test.tsx CHANGED
@@ -39,6 +39,21 @@ describe('<VerticalCard />',()=>{
39
39
 
40
40
  fireEvent.click(getByTestId('card-link'));
41
41
  expect(cardClicked).toHaveBeenCalled();
42
+ expect(cardClicked.mock.calls[0][0]).toBeDefined();
43
+ });
44
+
45
+ it('fires card clicked event on middle mouse click and prevents default', async () => {
46
+ const cardClicked = jest.fn();
47
+ const{getByTestId} = render(
48
+ <VerticalCard bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
49
+ );
50
+
51
+ const link = getByTestId('card-link');
52
+ const auxClickEvent = new MouseEvent('auxclick', { bubbles: true, button: 1 });
53
+ const preventDefaultSpy = jest.spyOn(auxClickEvent, 'preventDefault');
54
+ link.dispatchEvent(auxClickEvent);
55
+ expect(cardClicked).toHaveBeenCalled();
56
+ expect(preventDefaultSpy).toHaveBeenCalled();
42
57
  });
43
58
 
44
59
  it('fires card clicked event on keyDown', async () => {
@@ -49,6 +64,7 @@ describe('<VerticalCard />',()=>{
49
64
 
50
65
  fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
51
66
  expect(cardClicked).toHaveBeenCalled();
67
+ expect(cardClicked.mock.calls[0][0]).toBeDefined();
52
68
  });
53
69
 
54
70
  it('renders tag in top section', async () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "6.1.2-dev.1.full",
3
+ "version": "6.1.3-dev.1.full",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan \u003cerik.martirosyan@laerdal.com\u003e",
6
6
  "contributors": [