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

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

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

package/dist/Card/VerticalCard/Card.cjs

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CardTopLevelContainerStyles = exports.CardLink = exports.CardContainerStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
+var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
+var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
+var _index = require("../../index");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "id", "maxWidth"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _styledComponents.default.div`
+  background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+  min-width: 240px;
+  overflow: hidden;
+
+  border-radius: 8px;
+
+  background-clip: padding-box;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .elevated & {
+    box-shadow: ${_index.BOXSHADOWS.BOXSHADOW_L1};
+  }
+
+  .outline & {
+    border: 1px solid ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  }
+`;
+
+// Full-card link that covers the entire card area
+const CardLink = exports.CardLink = _styledComponents.default.a`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  text-decoration: none;
+  color: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    ${_index.focusStyles}
+  }
+`;
+const CardContainerStyles = exports.CardContainerStyles = _styledComponents.default.div`
+  &.interactive:not(.disabled) {
+    &:focus {
+      ${_index.focusStyles}
+    }
+
+    &:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+        }
+
+        &:active, &.active-state {
+          background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+        }
+      }
+    }
+
+    &.elevated:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          box-shadow: ${_index.BOXSHADOWS.BOXSHADOW_L3};
+        }
+
+        &:active, &.active-state {
+          box-shadow: ${_index.BOXSHADOWS.BOXSHADOW_L2};
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    ${CardTopLevelContainerStyles}{
+      border: 1px solid ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+    }
+  }
+`;
+const Card = _ref => {
+  let {
+      onCardClicked,
+      topSectionProps,
+      middleSectionProps,
+      bottomSectionProps,
+      disabled,
+      variant = 'elevated',
+      className,
+      id,
+      maxWidth = 560
+    } = _ref,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const [actionsRefs, setActionsRefs] = React.useState([]);
+  const checkBoxRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const autoId = React.useId();
+  (0, _index.useActionWithin)(containerRef, [...actionsRefs, checkBoxRef]);
+  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;
+  const handleCardClick = e => {
+    e.preventDefault();
+    if (!disabled && onCardClicked) {
+      onCardClicked();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContainerStyles, _objectSpread(_objectSpread({
+    ref: containerRef,
+    role: "group",
+    className: cls,
+    "aria-labelledby": `${autoId}-title`,
+    tabIndex: !!onCardClicked && !disabled ? 0 : -1,
+    onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(),
+    "data-testid": 'card-wrapper'
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainerStyles, {
+      style: {
+        maxWidth: maxWidth
+      },
+      children: [onCardClicked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardLink, {
+        href: '#',
+        "data-testid": 'card-link',
+        onClick: handleCardClick,
+        "aria-labelledby": `${autoId}-title`,
+        tabIndex: -1
+      }), topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({
+        ref: checkBoxRef
+      }, topSectionProps), {}, {
+        disabled: disabled
+      })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+        componentId: autoId,
+        disabled: disabled
+      })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({
+        ref: instance => {
+          setActionsRefs(instance ?? []);
+        }
+      }, bottomSectionProps), {}, {
+        disabled: disabled
+      }))]
+    })
+  }));
+};
+Card.propTypes = {
+  onCardClicked: _propTypes.default.func,
+  disabled: _propTypes.default.bool,
+  maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  variant: _propTypes.default.oneOf(['outline', 'elevated'])
+};
+var _default = exports.default = Card;
+//# sourceMappingURL=Card.cjs.map

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

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

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { CardTopSectionProps } from './CardTopSection';
+import { CardMiddleSectionProps } from './CardMiddleSection';
+import { CardBottomSectionProps } from './CardBottomSection';
+export declare const CardTopLevelContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const CardContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+    /** Action to be executed when Card is clicked. */
+    onCardClicked?: () => void;
+    /** If disabled then users can not click on the card, also styles are greyed out.*/
+    disabled?: boolean;
+    /** Maximum width of the card. */
+    maxWidth?: number | string;
+    /** Properties of Card top section. */
+    topSectionProps?: CardTopSectionProps;
+    /** Properties of Card middle section. */
+    middleSectionProps?: CardMiddleSectionProps;
+    /** Properties of Card bottom section. */
+    bottomSectionProps?: CardBottomSectionProps;
+    /** Card container style variant. */
+    variant?: 'outline' | 'elevated';
+}
+declare const Card: React.FunctionComponent<CardProps>;
+export default Card;

package/dist/Card/VerticalCard/Card.js

@@ -0,0 +1,178 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _pt from "prop-types";
+const _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "id", "maxWidth"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _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; }
+import * as React from 'react';
+import styled from 'styled-components';
+import CardTopSection from './CardTopSection';
+import CardMiddleSection from './CardMiddleSection';
+import CardBottomSection from './CardBottomSection';
+import { BOXSHADOWS, COLORS, focusStyles, useActionWithin } from '../../index';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CardTopLevelContainerStyles = styled.div`
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+  min-width: 240px;
+  overflow: hidden;
+
+  border-radius: 8px;
+
+  background-clip: padding-box;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  .elevated & {
+    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};
+  }
+
+  .outline & {
+    border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  }
+`;
+
+// Full-card link that covers the entire card area
+export const CardLink = styled.a`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  text-decoration: none;
+  color: inherit;
+  pointer-events: auto;
+  cursor: pointer;
+  
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    ${focusStyles}
+  }
+`;
+export const CardContainerStyles = styled.div`
+  &.interactive:not(.disabled) {
+    &:focus {
+      ${focusStyles}
+    }
+
+    &:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+        }
+
+        &:active, &.active-state {
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+        }
+      }
+    }
+
+    &.elevated:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};
+        }
+
+        &:active, &.active-state {
+          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    ${CardTopLevelContainerStyles}{
+      border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
+    }
+  }
+`;
+const Card = _ref => {
+  let {
+      onCardClicked,
+      topSectionProps,
+      middleSectionProps,
+      bottomSectionProps,
+      disabled,
+      variant = 'elevated',
+      className,
+      id,
+      maxWidth = 560
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const [actionsRefs, setActionsRefs] = React.useState([]);
+  const checkBoxRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const autoId = React.useId();
+  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);
+  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;
+  const handleCardClick = e => {
+    e.preventDefault();
+    if (!disabled && onCardClicked) {
+      onCardClicked();
+    }
+  };
+  return /*#__PURE__*/_jsx(CardContainerStyles, _objectSpread(_objectSpread({
+    ref: containerRef,
+    role: "group",
+    className: cls,
+    "aria-labelledby": `${autoId}-title`,
+    tabIndex: !!onCardClicked && !disabled ? 0 : -1,
+    onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(),
+    "data-testid": 'card-wrapper'
+  }, rest), {}, {
+    children: /*#__PURE__*/_jsxs(CardTopLevelContainerStyles, {
+      style: {
+        maxWidth: maxWidth
+      },
+      children: [onCardClicked && !disabled && /*#__PURE__*/_jsx(CardLink, {
+        href: '#',
+        "data-testid": 'card-link',
+        onClick: handleCardClick,
+        "aria-labelledby": `${autoId}-title`,
+        tabIndex: -1
+      }), topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({
+        ref: checkBoxRef
+      }, topSectionProps), {}, {
+        disabled: disabled
+      })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
+        componentId: autoId,
+        disabled: disabled
+      })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({
+        ref: instance => {
+          setActionsRefs(instance ?? []);
+        }
+      }, bottomSectionProps), {}, {
+        disabled: disabled
+      }))]
+    })
+  }));
+};
+Card.propTypes = {
+  onCardClicked: _pt.func,
+  disabled: _pt.bool,
+  maxWidth: _pt.oneOfType([_pt.number, _pt.string]),
+  variant: _pt.oneOf(['outline', 'elevated'])
+};
+export default Card;
+//# sourceMappingURL=Card.js.map

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

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