@ndlib/component-library 1.0.21 → 1.0.23

package/README.md

@@ -1,18 +1,22 @@
 # Hesburgh Component Library
 
-This is the repo for The Hesburgh Component Library, a set of React components that escapsulate the 
+This is the repo for The Hesburgh Component Library, a set of React components that escapsulate the
 design patterns used by the Hesburgh Library IT department.
 
 ## Using the library
+
 ### Installation
+
 To install the library in your project, run
+
 ```
 yarn install @ndlib/component-library
 ```
 
-### Setup 
+### Setup
 
 #### UiProvider
+
 In order for styles to be applied correctly, the `UiProvider` component must be included at the top of your project.
 
 ```tsx
@@ -21,20 +25,27 @@ In order for styles to be applied correctly, the `UiProvider` component must be
 </UiProvider>
 ```
 
-For frameworks that split application code by pages, it is recommended to add this provider at the root level rather than 
+#### UiProviderV2
+
+If you are using Version 2 components, you must use the `UiProviderV2` component at the top of your project as it compiles styles differently.
+
+```tsx
+<UIProviderV2>
+  <App>
+</UiProviderV2>
+```
+
+For frameworks that split application code by pages, it is recommended to add this provider at the root level rather than
 at the page level. In Gatsby, this can be done using the [wrapRootElement](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement) browser API.
 
 ```tsx
 exports.wrapRootElement = ({ element }) => {
-  return (
-    <UiProvider>
-      {element}
-    </UiProvider>
-  )
+  return <UiProvider>{element}</UiProvider>
 }
 ```
 
 #### Configuring Link
+
 By default, the `Link` component in this library will use a native HTML `<a>` component in its implementation. This behavior can be overriden
 by setting the `link.internalLink` and/or `link.externalLink` property on the `components` prop of the `UiProvider` component. If a custom component
 is provided, the custom component will be rendered by when the <Link /> component is used. It will receive the same props the <Link> receives, as well as an
@@ -62,28 +73,34 @@ const WrappedApp = () => {
 ```
 
 ## Running locally
+
 Dependencies must be installed before storybook can be started. Dependencies can be installed with: `yarn install`.
 
 To build and deploy your storybook locally for development, run `yarn start`
 
 ## Deploying Storybook
+
 Whenever a commit is added to the main branch, the contents of the `/docs` folder will be deployed to our Github pages site.
 
 To build a new version of the storybook to be deployed, run `yarn build-storybook`. Our storybook build uses [vite](https://vitejs.dev/).
 
 ## Running tests
+
 Tests are run using [vitest](https://vitest.dev/), a test-runner built for vite that is similar to jest. Test suite can be run with: `yarn test`
 
 ## Linting
+
 Changes should be linted before commits. Run our linter with `yarn lint`. Failed linting will block builds and deploys. Our lint process uses `eslint` and `prettier`.
 Running `yarn lint:fix` will fix any issues that can be automatically fixed.
 
 ## Building for npm
+
 The build process for the npm module for this library uses `tsc`. ESM exports are used to better support tree-shaking. When adding new code to this library,
 be careful to ensure than importing the module do not cause side-effects. In other words, don't execute any process or do any state management outside
 of exported properties or functions because this code might be removed by tree-shaker. See examples below:
 
 ### Wrong
+
 ```jsx
 // This code may get removed by tree-shaker
 setTimeout(() => {
@@ -92,6 +109,7 @@ setTimeout(() => {
 ```
 
 ### Right
+
 ```jsx
 export const myFunction = () => {
   setTimeout(() => {

package/dist/assets/index-3cfb730f.js

@@ -0,0 +1 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const r of e)if(r.type==="childList")for(const o of r.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&i(o)}).observe(document,{childList:!0,subtree:!0});function s(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerPolicy&&(r.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?r.credentials="include":e.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function i(e){if(e.ep)return;e.ep=!0;const r=s(e);fetch(e.href,r)}})();

package/dist/components/composites/Card/Card.stories.js

@@ -7,10 +7,12 @@ import { CARD_LAYOUT, CARD_SIZE, Card } from '.';
 import { COLOR, Column, LABEL_SIZE, Label, Paragraph, ReadMore, TYPOGRAPHY_TYPE, } from '../../..';
 import { Icon } from '../../elements/Icon';
 import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Composites/Card',
     component: Card,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const headlinedCards = [

package/dist/components/composites/Card/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
-import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
-import { ReadMore } from '../../elements/text/ReadMore';
+import { HEADING_SIZE, Heading } from '../../elements/Heading';
+import { ReadMore } from '../../elements/ReadMore';
 import { useTheme } from '../../../theme';
 import { GROUP_TYPE, Group } from '../../elements/Group';
 import { Box } from '../../elements/layout/Box';
@@ -53,6 +53,7 @@ const DateDisplay = ({ date: dateString }) => {
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
 export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
+    var _a;
     const theme = useTheme();
     const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
@@ -86,7 +87,7 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
             if (onClick && e.key === KEY_CODES.ENTER) {
                 onClick();
             }
-        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? theme.boxShadow.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : COLOR.WHITE, borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
+        }, tabIndex: onClick ? 0 : undefined, sx: Object.assign({ boxShadow: raised || heading ? (_a = theme.boxShadow) === null || _a === void 0 ? void 0 : _a.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : COLOR.WHITE, borderBottom: 'solid 2px', borderColor: COLOR.TRANSPARENT, cursor: onClick ? 'pointer' : undefined, display: 'flex', flexDirection: layout === CARD_LAYOUT.HORIZONTAL ? 'row' : 'column', alignItems: 'flex-start', ':hover,:focus': onClick
                 ? {
                     transform: 'scale(1.01)',
                     borderColor: COLOR.ND_SKY_BLUE_DARK,

package/dist/components/composites/CardV2/CardV2.module.css

@@ -0,0 +1,74 @@
+.groupCardWrapper {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  background-color: var(--white);
+  border-bottom: 2px solid;
+  border-color: transparent;
+}
+
+.groupCardWrapperWithHover {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 2px solid;
+  border-color: transparent;
+  transition: all 0.15s ease-in-out;
+}
+
+.groupCardWrapperWithHover:hover, .groupCardWrapperWithHover:focus {
+  transform: scale(1.01);
+  border-color: var(--ndSkyBlueDark);
+  background-color: var(--ndSkyBlue);
+  cursor: pointer;
+}
+
+.leftBadge {
+  position: absolute;
+  left: -1rem;
+  top: 20px;
+  z-index: 1;
+}
+
+.rightBadge {
+  position: absolute;
+  right: -1rem;
+  top: 20px;
+  z-index: 1;
+}
+
+.containImageContainer {
+  width: 500px;
+  height: 280px;
+  background-color: var(--extraExtraLightGray);
+  border: 1px solid var(--extraLightGray);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.headingOuterWrapper {
+  background-color: var(--primary);
+  color: var(--white);
+  width: 100%;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 0.5rem;
+}
+
+.heading {
+  color: var(--white);
+  white-space: nowrap;
+}
+
+.dateWrapper {
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem;
+  background-color: var(--ndGoldLight);
+}

package/dist/components/composites/CardV2/CardV2.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardV2 } from '.';
+declare const meta: Meta<typeof CardV2>;
+export default meta;
+type Story = StoryObj<typeof CardV2>;
+export declare const Default: Story;
+export declare const ContainedImage: Story;
+export declare const TruncateHeadline: Story;
+export declare const Horizontal: Story;
+export declare const CustomBackgroundColor: Story;
+export declare const DateCards: Story;
+export declare const Clickable: Story;
+export declare const ShouldShowHoverStyle: Story;
+export declare const Raised: Story;
+export declare const Heading: Story;
+export declare const CustomImageHeading: Story;
+export declare const LeftBadge: Story;
+export declare const RightBadge: Story;
+export declare const LeftAndRightBadges: Story;

package/dist/components/composites/CardV2/CardV2.stories.js

@@ -0,0 +1,187 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import AccessTime from '@mui/icons-material/AccessTimeFilled';
+import CalendarIcon from '@mui/icons-material/CalendarMonth';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import { CollectionsBookmark } from '@mui/icons-material';
+import { Bookmark } from '@mui/icons-material';
+import { CARDV2_LAYOUT, CARDV2_SIZE, CardV2 } from '.';
+import { COLOR, FONT_SIZE, ColumnV2, LABELV2_SIZE, LabelV2, ParagraphV2, ReadMoreV2, TYPOGRAPHY_TYPE, BoxV2, } from '../../..';
+import { IconV2 } from '../../elements/IconV2';
+import { BUTTONV2_TYPE, ButtonV2 } from '../../elements/ButtonV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Composites/CardV2',
+    component: CardV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const headlinedCards = [
+    {
+        headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
+        image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/14_15_I_Ten_American_Diaries_29a3788848.jpg',
+        size: CARDV2_SIZE.SM,
+        inlineStyles: {
+            width: '500px',
+        },
+    },
+    {
+        headline: 'Paws, Hooves, Fins & Feathers',
+        image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/RBSC_Spring2020_Rep_2_a88660826b.jpg',
+        size: CARDV2_SIZE.SM,
+        inlineStyles: {
+            width: '500px',
+        },
+    },
+    {
+        headline: 'Tracy C. Bergstrom, director of the Specialized Collection Services Program',
+        image: 'https://strapi-prod-library-website-contentbucket52d4b12c-1whgwwl6746tz.s3.us-east-1.amazonaws.com/Tracy_News_218x275_1dd180dc80.jpg',
+        size: CARDV2_SIZE.SM,
+        inlineStyles: {
+            width: '500px',
+        },
+    },
+    {
+        headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer. Other text to make this longer than the other card.',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png',
+        size: CARDV2_SIZE.SM,
+        inlineStyles: {
+            width: '500px',
+        },
+    },
+];
+const basicCards = [
+    {
+        children: _jsx(ParagraphV2, { children: "Basic card 1" }),
+        size: CARDV2_SIZE.SM,
+        inlineStyles: {
+            width: '500px',
+        },
+    },
+    {
+        children: _jsx(ParagraphV2, { children: "Basic card 2" }),
+        size: CARDV2_SIZE.SM,
+        inlineStyles: {
+            width: '500px',
+        },
+    },
+];
+const dateCards = [
+    {
+        displayDate: new Date().toISOString(),
+        headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
+        size: CARDV2_SIZE.SM,
+    },
+    {
+        displayDate: new Date().toISOString(),
+        headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
+        size: CARDV2_SIZE.SM,
+    },
+];
+const horizontalCards = [
+    {
+        headline: 'Exhibit — Printing the Nation: A Century of Irish Book Arts',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/7aCd5Sm86JdtQepGBKDUfy/dcb4d97dd3a1d3ee810e8bcaa82dc715/Spring_Exhibit_2023-Rep.jpg?w=296',
+        size: CARDV2_SIZE.SM,
+        children: (_jsxs(_Fragment, { children: [_jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(IconV2, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(IconV2, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(ParagraphV2, { children: "This exhibit demonstrates the art and craft of the Irish book since 1900." })] })),
+    },
+    {
+        headline: 'One Book, One Michiana Digital Exhibit — Papers Alight: Contextualizing Mike Curato’s Flamer',
+        image: 'https://images.ctfassets.net/cfblb1f7i85j/2sGpdDbNkl6MPnlem6wq1R/995c786624613b5ff07228e481996385/One.Book.2023-Rep.png?w=296',
+        size: CARDV2_SIZE.SM,
+        children: (_jsxs(_Fragment, { children: [_jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(IconV2, { icon: CalendarIcon, sx: { mr: 1 } }), "Monday, February 6 \u2013 Monday, July 31, 2023"] })), _jsxs(LabelV2, Object.assign({ color: COLOR.PRIMARY, size: LABELV2_SIZE.SM, sx: {
+                        display: 'flex',
+                    } }, { children: [_jsx(IconV2, { icon: AccessTime, sx: { mr: 1 } }), "M-F: 9:30am \u2013 4:30pm"] })), _jsx(ReadMoreV2, Object.assign({ typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, lines: 2 }, { children: "This online exhibition displays rare materials from Hesburgh Libraries collections that place Mike Curato\u2019s teen graphic novel into a historical and social context." }))] })),
+    },
+];
+const leftBadge = (_jsx(BoxV2, Object.assign({ sx: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bg: COLOR.ND_BLUE,
+    } }, { children: _jsx(IconV2, { icon: CollectionsBookmark, size: FONT_SIZE.MD, color: COLOR.WHITE }) })));
+const rightBadge = (_jsx(BoxV2, Object.assign({ sx: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bg: COLOR.WHITE,
+        borderColor: COLOR.ND_BLUE,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+    } }, { children: _jsx(IconV2, { icon: Bookmark, size: FONT_SIZE.MD, color: COLOR.ND_BLUE }) })));
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i })))) })),
+    args: {},
+};
+export const ContainedImage = {
+    render: () => (_jsx(ColumnV2, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px' }, props, { key: i })))) })),
+    args: {},
+};
+export const TruncateHeadline = {
+    render: () => (_jsx(ColumnV2, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, truncateHeadlineAfter: 2, shouldShowHoverStyle: true })))) })),
+    args: {},
+};
+export const Horizontal = {
+    render: () => (_jsx(ColumnV2, { children: horizontalCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, layout: CARDV2_LAYOUT.HORIZONTAL })))) })),
+    args: {},
+};
+export const CustomBackgroundColor = {
+    render: () => (_jsx(ColumnV2, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, backgroundColor: COLOR.ND_SKY_BLUE })))) })),
+    args: {},
+};
+export const DateCards = {
+    render: () => (_jsx(ColumnV2, { children: dateCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, layout: CARDV2_LAYOUT.HORIZONTAL, inlineStyles: { height: '120px' }, backgroundColor: COLOR.TRANSPARENT })))) })),
+    args: {},
+};
+export const Clickable = {
+    render: () => (_jsx(ColumnV2, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { onClick: () => {
+                alert('Card clicked');
+            }, key: i })))) })),
+    args: {},
+};
+export const ShouldShowHoverStyle = {
+    render: () => (_jsx(ColumnV2, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { shouldShowHoverStyle: true, key: i })))) })),
+    args: {},
+};
+export const Raised = {
+    render: () => (_jsx(ColumnV2, { children: basicCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { raised: true, key: i })))) })),
+    args: {},
+};
+export const Heading = {
+    render: () => (_jsx(ColumnV2, { children: basicCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, heading: "Heading", headingIcon: BookmarkIcon, headingAction: _jsx(ButtonV2, Object.assign({ type: BUTTONV2_TYPE.TEXT, color: COLOR.WHITE, onClick: () => { } }, { children: "Click Me" })) })))) })),
+    args: {},
+};
+export const CustomImageHeading = {
+    render: () => (_jsx(ColumnV2, { children: basicCards.map((props, i) => (_createElement(CardV2, Object.assign({}, props, { key: i, heading: "Heading", headingStyles: {
+                backgroundImage: `url(https://library.nd.edu/static/media/jesus.2.4a2b137e.png)`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPositionX: 'right',
+                backgroundPositionY: '-15px',
+            } })))) })),
+    args: {},
+};
+export const LeftBadge = {
+    render: () => (_jsx(ColumnV2, Object.assign({ sx: { ml: '1.5rem' } }, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', leftBadge: leftBadge }, props, { key: i })))) }))),
+    args: {},
+};
+export const RightBadge = {
+    render: () => (_jsx(ColumnV2, Object.assign({ sx: { ml: '1.5rem' } }, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', rightBadge: rightBadge }, props, { key: i })))) }))),
+    args: {},
+};
+export const LeftAndRightBadges = {
+    render: () => (_jsx(ColumnV2, Object.assign({ sx: { ml: '1.5rem' } }, { children: headlinedCards.map((props, i) => (_createElement(CardV2, Object.assign({ containImage: true, containerHeight: '280px', leftBadge: leftBadge, rightBadge: rightBadge }, props, { key: i })))) }))),
+    args: {},
+};

package/dist/components/composites/CardV2/CardV2.test.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { CardV2 } from '.';
+import { KEY_CODES } from '../../../utils/misc';
+const MOCK_HEADLINE = 'MOCK HEADLINE';
+const MOCK_BODY = 'MOCK BODY';
+describe('CardV2', () => {
+    const mockClickHandler = vi.fn();
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders contents', () => {
+        const { getByText } = render(_jsx(CardV2, Object.assign({ headline: MOCK_HEADLINE }, { children: MOCK_BODY })));
+        expect(getByText(MOCK_HEADLINE)).toBeDefined();
+        expect(getByText(MOCK_BODY)).toBeDefined();
+    });
+    it('fires handler when clicked', () => {
+        const { getByRole } = render(_jsx(CardV2, { headline: MOCK_HEADLINE, onClick: mockClickHandler }));
+        const card = getByRole('button');
+        fireEvent.click(card);
+        expect(mockClickHandler).toBeCalledTimes(1);
+        fireEvent.keyDown(card, {
+            key: KEY_CODES.ENTER,
+        });
+        expect(mockClickHandler).toBeCalledTimes(2);
+    });
+    it('labels card with headline when passed', () => {
+        const { getByText } = render(_jsx(CardV2, { headline: MOCK_HEADLINE }));
+        expect(getByText(MOCK_HEADLINE)).toBeDefined();
+    });
+    it('labels card with heading when passed', () => {
+        const { getByText } = render(_jsx(CardV2, { heading: MOCK_HEADLINE }));
+        expect(getByText(MOCK_HEADLINE)).toBeDefined();
+    });
+    it('renders the image with containImage prop', () => {
+        const imageSrc = 'https://via.placeholder.com/150';
+        const altText = 'Test Image';
+        const containerWidth = '500px';
+        const containerHeight = '280px';
+        render(_jsx(CardV2, { image: imageSrc, alt: altText, containImage: true, containerWidth: containerWidth, containerHeight: containerHeight }));
+        const imageElement = screen.getByAltText(altText);
+        expect(imageElement).toBeInTheDocument();
+        expect(imageElement).toHaveStyle({
+            width: '100%',
+            height: 'auto',
+            objectFit: 'scale-down',
+        });
+        const containerElement = imageElement.closest('div');
+        expect(containerElement).toHaveStyle({
+            width: containerWidth,
+            height: containerHeight,
+        });
+    });
+    it('renders the image without containImage prop', () => {
+        const imageSrc = 'https://via.placeholder.com/150';
+        const altText = 'Test Image';
+        render(_jsx(CardV2, { image: imageSrc, alt: altText }));
+        const imageElement = screen.getByAltText(altText);
+        expect(imageElement).toBeInTheDocument();
+        expect(imageElement).toHaveStyle({
+            width: '100%',
+            height: 'auto',
+        });
+    });
+});

package/dist/components/composites/CardV2/index.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export declare enum CARDV2_LAYOUT {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export declare enum CARDV2_SIZE {
+    SM = "SM",
+    MD = "MD",
+    LG = "LG"
+}
+type CardChildren = React.ReactNode;
+export type CardV2Props = StyledElementPropsV2<HTMLDivElement, {
+    headline?: string;
+    heading?: string;
+    headlineStyles?: StylesPropV2;
+    headingStyles?: StylesPropV2;
+    headingIcon?: React.FC;
+    headingAction?: React.ReactNode;
+    truncateHeadlineAfter?: number;
+    body?: React.ReactNode;
+    image?: string;
+    alt?: string;
+    layout?: CARDV2_LAYOUT;
+    size?: CARDV2_SIZE;
+    displayDate?: string;
+    onClick?: () => void;
+    raised?: boolean;
+    imageHeight?: string;
+    imageWidth?: string;
+    containerWidth?: string;
+    containerHeight?: string;
+    inlineStyles?: any;
+    containImage?: boolean;
+    backgroundColor?: COLOR;
+    shouldShowHoverStyle?: boolean;
+    className?: string;
+    leftBadge?: React.ReactNode;
+    rightBadge?: React.ReactNode;
+}, CardChildren>;
+export declare const CardV2: React.FC<CardV2Props>;
+export {};

package/dist/components/composites/CardV2/index.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { HEADINGV2_SIZE, HeadingV2 } from '../../elements/HeadingV2';
+import { BOX_SHADOW } from '../../../theme';
+import { GROUPV2_TYPE, GroupV2 } from '../../elements/GroupV2';
+import { BoxV2 } from '../../elements/layoutV2/BoxV2';
+import { IconV2 } from '../../elements/IconV2';
+import { ColumnV2, FONT, FONT_SIZE, RowV2, TYPOGRAPHY_TYPE } from '../../..';
+import { COLOR } from '../../../theme/colors';
+import { KEY_CODES } from '../../../utils/misc';
+import * as styles from './CardV2.module.css';
+import clsx from 'clsx';
+export var CARDV2_LAYOUT;
+(function (CARDV2_LAYOUT) {
+    CARDV2_LAYOUT["VERTICAL"] = "vertical";
+    CARDV2_LAYOUT["HORIZONTAL"] = "horizontal";
+})(CARDV2_LAYOUT || (CARDV2_LAYOUT = {}));
+export var CARDV2_SIZE;
+(function (CARDV2_SIZE) {
+    CARDV2_SIZE["SM"] = "SM";
+    CARDV2_SIZE["MD"] = "MD";
+    CARDV2_SIZE["LG"] = "LG";
+})(CARDV2_SIZE || (CARDV2_SIZE = {}));
+const MONTH_LABELS = [
+    'JAN',
+    'FEB',
+    'MAR',
+    'APR',
+    'MAY',
+    'JUN',
+    'JUL',
+    'AUG',
+    'SEP',
+    'OCT',
+    'NOV',
+    'DEC',
+];
+const typeSafeStyles = styles;
+const DateDisplay = ({ date: dateString }) => {
+    const date = React.useMemo(() => {
+        return new Date(dateString);
+    }, [dateString]);
+    return (_jsxs(ColumnV2, Object.assign({ className: typeSafeStyles.dateWrapper, sx: {
+            fontFamily: FONT.BRANDED2,
+            boxShadow: BOX_SHADOW.EMPHASIZED,
+        } }, { children: [_jsx(BoxV2, Object.assign({ sx: {
+                    fontSize: FONT_SIZE.LG,
+                } }, { children: date.getDate() })), _jsx(BoxV2, Object.assign({ sx: {
+                    fontSize: FONT_SIZE.MD,
+                    marginTop: '0.25rem',
+                } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
+};
+export const CardV2 = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, leftBadge, rightBadge, className, shouldShowHoverStyle, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, inlineStyles, children, }) => {
+    const contentPaddingX = size === CARDV2_SIZE.SM ? 3 : 4;
+    const isVertical = !layout || layout === CARDV2_LAYOUT.VERTICAL;
+    const [objectFit, setObjectFit] = useState('scale-down');
+    useEffect(() => {
+        if (image) {
+            const img = new Image();
+            img.onload = () => {
+                if (img.width > img.height) {
+                    setObjectFit('contain');
+                }
+                else {
+                    setObjectFit('scale-down');
+                }
+            };
+            img.src = image;
+        }
+    }, [image]);
+    const imageHeight = imageHeightProp || (isVertical ? 'auto' : '100%');
+    const imageWidth = imageWidthProp || (isVertical ? '100%' : 'auto');
+    const contentPaddingY = isVertical ? contentPaddingX : 2;
+    const typography = size === CARDV2_SIZE.SM
+        ? TYPOGRAPHY_TYPE.HEADLINE_SMALL
+        : TYPOGRAPHY_TYPE.HEADLINE_MEDIUM;
+    const baseCardClass = onClick || shouldShowHoverStyle
+        ? typeSafeStyles.groupCardWrapperWithHover
+        : typeSafeStyles.groupCardWrapper;
+    return (_jsxs(GroupV2, Object.assign({ type: headline || heading ? GROUPV2_TYPE.REGION : GROUPV2_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
+            if (onClick && e.key === KEY_CODES.ENTER) {
+                onClick();
+            }
+        }, tabIndex: onClick ? 0 : undefined, className: clsx(baseCardClass, className), sx: Object.assign({ boxShadow: raised || heading ? BOX_SHADOW.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : '', flexDirection: layout === CARDV2_LAYOUT.HORIZONTAL ? 'row' : 'column' }, inlineStyles) }, { children: [leftBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.leftBadge }, { children: leftBadge }))), rightBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.rightBadge }, { children: rightBadge }))), image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
+                    width: imageWidth,
+                    height: imageHeight,
+                } })), image && containImage && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.containImageContainer, sx: {
+                    width: containerWidth ? containerWidth : '',
+                    height: containerHeight ? containerHeight : '',
+                } }, { children: _jsx("img", { src: image, alt: alt, style: {
+                        width: imageWidth,
+                        height: imageHeight,
+                        objectFit: objectFit,
+                    } }) }))), displayDate && _jsx(DateDisplay, { date: displayDate }), heading && (_jsxs(RowV2, Object.assign({ className: typeSafeStyles.headingOuterWrapper, sx: Object.assign({}, headingStyles) }, { children: [_jsxs(RowV2, Object.assign({ align: "center", sx: { px: contentPaddingX } }, { children: [headingIcon && (_jsx(IconV2, { icon: headingIcon, size: FONT_SIZE.LG, color: COLOR.WHITE, className: typeSafeStyles.icon })), _jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM, className: typeSafeStyles.heading, sx: {
+                                    mt: 0,
+                                } }, { children: heading }))] })), _jsx(RowV2, Object.assign({ align: "center", sx: { px: contentPaddingX } }, { children: headingAction && headingAction }))] }))), _jsx(RowV2, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(ColumnV2, Object.assign({ justify: "center" }, { children: [headline && (_jsx(HeadingV2, Object.assign({ typography: typography, sx: Object.assign({ mt: 0, display: '-webkit-box', WebkitBoxOrient: 'vertical', overflow: 'hidden', WebkitLineClamp: truncateHeadlineAfter
+                                    ? truncateHeadlineAfter
+                                    : 0 }, headlineStyles) }, { children: headline }))), children && (_jsx(BoxV2, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: children })))] })) }))] })));
+};

package/dist/components/composites/DragDropList/DragDropList.stories.js

@@ -1,11 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DragDropList, DragHandle } from './index';
 import React from 'react';
-import { Paragraph } from '../../elements/text/Paragraph';
+import { Paragraph } from '../../elements/Paragraph';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Composites/DragDropList',
     component: DragDropList,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const _items = [