@ndlib/component-library 1.0.20 → 1.0.22

package/dist/components/elements/Dropdown/Dropdown.stories.js

@@ -3,12 +3,14 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { Button } from '../../elements/Button';
 import { Box } from '../../elements/layout/Box';
 import { Dropdown } from '.';
-import { Paragraph } from '../text/Paragraph';
+import { Paragraph } from '../Paragraph';
 import { Column } from '../layout/Column';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Dropdown',
     component: Dropdown,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.

package/dist/components/elements/Dropdown/index.js

@@ -50,7 +50,7 @@ export const Dropdown = (_a) => {
             }),
         ],
     });
-    const dropdownBoxStyles = Object.assign(Object.assign({}, floatingStyles), { minWidth: dropdownMinWidth, maxWidth: dropdownMaxWidth, zIndex: Z_INDEX.DIALOG, backgroundColor: COLOR.WHITE, boxShadow: boxShadow.NORMAL });
+    const dropdownBoxStyles = Object.assign(Object.assign({}, floatingStyles), { minWidth: dropdownMinWidth, maxWidth: dropdownMaxWidth, zIndex: Z_INDEX.DIALOG, backgroundColor: COLOR.WHITE, boxShadow: boxShadow === null || boxShadow === void 0 ? void 0 : boxShadow.NORMAL });
     const onClick = useCallback(() => {
         setIsOpen(!isOpen);
     }, [isOpen]);

package/dist/components/elements/GroupV2/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+type GroupV2ContextType = {
+    level: number;
+    labelId: string;
+    trackHeadingRendered: () => void;
+    labelTargetId: string;
+    type?: GROUPV2_TYPE;
+};
+export declare enum GROUPV2_TYPE {
+    REGION = "region",
+    GROUP = "group",
+    RAW = "raw"
+}
+export declare const useGroupV2: () => GroupV2ContextType;
+type GroupV2Props = Omit<StyledElementPropsV2<HTMLDivElement, {
+    type?: GROUPV2_TYPE;
+}>, 'children'> & {
+    children: React.ReactNode | ((context: GroupV2ContextType) => React.ReactNode);
+};
+export declare const GroupV2: React.FC<GroupV2Props>;
+export {};

package/dist/components/elements/GroupV2/index.js

@@ -0,0 +1,71 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useId, useRef } from 'react';
+import { useEnvironment } from '../../providers/env';
+import { processSx } from '../../../utils/processSx';
+export var GROUPV2_TYPE;
+(function (GROUPV2_TYPE) {
+    GROUPV2_TYPE["REGION"] = "region";
+    GROUPV2_TYPE["GROUP"] = "group";
+    GROUPV2_TYPE["RAW"] = "raw";
+})(GROUPV2_TYPE || (GROUPV2_TYPE = {}));
+const GROUPV2_TYPE_ROLE_MAP = {
+    [GROUPV2_TYPE.REGION]: 'region',
+    [GROUPV2_TYPE.GROUP]: 'group',
+    [GROUPV2_TYPE.RAW]: 'group',
+};
+const GroupV2Context = React.createContext({
+    level: 0,
+    labelId: '',
+    labelTargetId: '',
+    trackHeadingRendered: () => { },
+});
+export const useGroupV2 = () => React.useContext(GroupV2Context);
+export const GroupV2 = (_a) => {
+    var { type: typeProp, children, sx } = _a, rest = __rest(_a, ["type", "children", "sx"]);
+    const processedStyles = processSx(sx);
+    const { level: parentLevel } = useGroupV2();
+    const { flagInDevelopment } = useEnvironment();
+    const type = typeProp || GROUPV2_TYPE.REGION;
+    const uniqueId = useId();
+    const labelId = `group-label-${uniqueId}`;
+    const labelTargetId = `labeled-${uniqueId}`;
+    const headingRenderTracker = useRef({
+        hasHeadingRendered: false,
+    });
+    const trackHeadingRendered = () => {
+        headingRenderTracker.current.hasHeadingRendered = true;
+    };
+    useEffect(() => {
+        if (type === GROUPV2_TYPE.REGION) {
+            setTimeout(() => {
+                if (!headingRenderTracker.current.hasHeadingRendered) {
+                    flagInDevelopment('Every <GroupV2> component of type "region" must render a <Heading> component within it');
+                }
+            }, 500);
+        }
+    }, [flagInDevelopment, type]);
+    const level = Math.min(parentLevel + (type === GROUPV2_TYPE.REGION ? 1 : 0), 5);
+    const contextValue = {
+        level,
+        type,
+        trackHeadingRendered,
+        labelId,
+        labelTargetId,
+    };
+    const Main = (_jsx(GroupV2Context.Provider, Object.assign({ value: contextValue }, { children: typeof children === 'function' ? children(contextValue) : children })));
+    if (type === GROUPV2_TYPE.RAW) {
+        return Main;
+    }
+    return (_jsx("div", Object.assign({ role: GROUPV2_TYPE_ROLE_MAP[type], "aria-labelledby": labelId, style: Object.assign({ marginTop: '0.5rem', marginBottom: '0.5rem' }, processedStyles) }, rest, { children: Main })));
+};

package/dist/components/elements/{text/Heading → Heading}/Heading.stories.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { GROUP_TYPE, Group } from '../../Group';
+import { GROUP_TYPE, Group } from '../Group';
 import { HEADING_SIZE, Heading } from '.';
-import { Column } from '../../layout/Column';
-import { COLOR } from '../../../../theme/colors';
+import { Column } from '../layout/Column';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Heading',
     component: Heading,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

package/dist/components/elements/{text/Heading → Heading}/Heading.test.js

@@ -9,10 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { vi } from 'vitest';
-import { render as _render } from '../../../../utils/test';
+import { render as _render } from '../../../utils/test';
 import { Heading } from '.';
-import { GROUP_TYPE, Group } from '../../Group';
-import { ENVIRONMENT } from '../../../providers/env';
+import { GROUP_TYPE, Group } from '../Group';
+import { ENVIRONMENT } from '../../providers/env';
 const render = (component) => {
     return _render(component, { env: ENVIRONMENT.DEV });
 };

package/dist/components/elements/{text/Heading → Heading}/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
-import { StyledElementProps } from '../../../../theme';
-import { COLOR } from '../../../../theme/colors';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { StyledElementProps } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
 type HeaderProps = StyledElementProps<HTMLSpanElement, {
     size?: HEADING_SIZE;
     standalone?: boolean;

package/dist/components/elements/{text/Heading → Heading}/index.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { useEffect } from 'react';
-import { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
-import { useTheme } from '../../../../theme';
-import { GROUP_TYPE, useGroup } from '../../Group';
-import { COLOR } from '../../../../theme/colors';
-import { useEnvironment } from '../../../providers/env';
-import { multiplyRemSize } from '../../../../utils/misc';
+import { getTypographyStyles, TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { useTheme } from '../../../theme';
+import { GROUP_TYPE, useGroup } from '../Group';
+import { COLOR } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
+import { multiplyRemSize } from '../../../utils/misc';
 export var HEADING_SIZE;
 (function (HEADING_SIZE) {
     HEADING_SIZE["SM"] = "sm";
@@ -39,7 +39,8 @@ const LEVEL_TYPOGRAPHY_MAP = {
     6: TYPOGRAPHY_TYPE.HEADING_SMALL,
 };
 export const Heading = (_a) => {
-    var { sx, size, standalone, id, underline, underlineColor, headlineStyles, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "id", "underline", "underlineColor", "headlineStyles", "typography", "level"]);
+    var _b, _c;
+    var { sx, size, standalone, id, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "id", "underline", "underlineColor", "typography", "level"]);
     const { level: groupLevel, type, trackHeadingRendered } = useGroup();
     const { flagInDevelopment } = useEnvironment();
     const theme = useTheme();
@@ -68,9 +69,9 @@ export const Heading = (_a) => {
         }
         return 0.55;
     };
-    const marginHeightMultiple = theme.lineHeights[typographyStyles.lineHeight] *
+    const marginHeightMultiple = (((_b = theme.lineHeights) === null || _b === void 0 ? void 0 : _b[typographyStyles.lineHeight]) || 1.625) *
         getMarginHeightMultiple(level);
-    const fontSize = theme.fontSizes[typographyStyles.fontSize];
+    const fontSize = ((_c = theme.fontSizes) === null || _c === void 0 ? void 0 : _c[typographyStyles.fontSize]) || '1rem';
     const topMargin = multiplyRemSize({
         size: fontSize,
         multiple: marginHeightMultiple,

package/dist/components/elements/HeadingV2/HeadingV2.module.css

@@ -0,0 +1,8 @@
+.heading {
+  padding-top: 0;
+  padding-bottom: 0;
+  border: 0;
+  border-style: solid;
+  border-bottom-color: var(--secondary);
+  color: var(--primary);
+}

package/dist/components/elements/HeadingV2/HeadingV2.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HeadingV2 } from '.';
+declare const meta: Meta<typeof HeadingV2>;
+export default meta;
+type Story = StoryObj<typeof HeadingV2>;
+export declare const Default: Story;
+export declare const Color: Story;
+export declare const Underline: Story;

package/dist/components/elements/HeadingV2/HeadingV2.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '.';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/HeadingV2',
+    component: HeadingV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { size: HEADINGV2_SIZE.XL, label: 'Extra Large (Default Level 1)' },
+    { size: HEADINGV2_SIZE.LG, label: 'Large (Default Level 2)' },
+    { size: HEADINGV2_SIZE.MD, label: 'Medium (Default Level 3)' },
+    { size: HEADINGV2_SIZE.SM, label: 'Small (Default Level 4-6)' },
+];
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: _jsx(HeadingV2, Object.assign({ size: size.size }, { children: size.label })) })))) })),
+    args: {
+        children: 'Heading V2',
+    },
+};
+export const Color = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: _jsx(HeadingV2, Object.assign({ size: size.size, sx: { color: COLOR.TEXT } }, { children: size.label })) })))) })),
+    args: {
+        children: 'Heading V2',
+    },
+};
+export const Underline = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: _jsx(HeadingV2, Object.assign({ size: size.size, underline: true }, { children: size.label })) })))) })),
+    args: {
+        children: 'Heading V2',
+    },
+};

package/dist/components/elements/HeadingV2/HeadingV2.test.js

@@ -0,0 +1,51 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { vi } from 'vitest';
+import { render as _render } from '../../../utils/test';
+import { HeadingV2 } from '.';
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { ENVIRONMENT } from '../../providers/env';
+const render = (component) => {
+    return _render(component, { env: ENVIRONMENT.DEV });
+};
+describe('HeadingV2', () => {
+    const originalError = console.error;
+    beforeEach(() => {
+        console.error = vi.fn();
+    });
+    afterEach(() => {
+        console.error = originalError;
+        vi.useRealTimers();
+    });
+    it('renders without an error if passed standalone prop', () => {
+        const { getByText } = render(_jsx(HeadingV2, Object.assign({ standalone: true }, { children: "Foo" })));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders without an error if used within region Group component', () => {
+        const { getByText } = render(_jsx(GroupV2, { children: _jsx(HeadingV2, { children: "Foo" }) }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('throws if used outside a Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => render(_jsx(HeadingV2, { children: "Foo" }))).toThrow();
+    }));
+    it('throws if used within non-region Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        expect(() => render(_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.GROUP }, { children: _jsx(HeadingV2, { children: "Foo" }) })))).toThrow();
+    }));
+    it('labels group target automatically', () => {
+        const { getByText } = render(_jsx(GroupV2, { children: _jsx(HeadingV2, { children: "Foo" }) }));
+        expect(getByText('Foo')).toBeDefined();
+    });
+    it('is required to render region Group component', () => __awaiter(void 0, void 0, void 0, function* () {
+        vi.useFakeTimers();
+        render(_jsx(GroupV2, { children: "Foo" }));
+        expect(() => vi.runAllTimers()).toThrow();
+    }));
+});

package/dist/components/elements/HeadingV2/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { StyledElementPropsV2 } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+type HeaderV2Props = StyledElementPropsV2<HTMLSpanElement, {
+    size?: HEADINGV2_SIZE;
+    standalone?: boolean;
+    id?: string;
+    underline?: boolean;
+    underlineColor?: COLOR;
+    typography?: TYPOGRAPHY_TYPE;
+    headlineStyles?: any;
+    level?: number;
+}>;
+export declare enum HEADINGV2_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl"
+}
+export declare const HeadingV2: React.FC<HeaderV2Props>;
+export {};

package/dist/components/elements/HeadingV2/index.js

@@ -0,0 +1,100 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { fontStyles, getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../theme/typography';
+import { GROUPV2_TYPE, useGroupV2 } from '../GroupV2';
+import { useEnvironment } from '../../providers/env';
+import { multiplyRemSize } from '../../../utils/misc';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './HeadingV2.module.css';
+export var HEADINGV2_SIZE;
+(function (HEADINGV2_SIZE) {
+    HEADINGV2_SIZE["SM"] = "sm";
+    HEADINGV2_SIZE["MD"] = "md";
+    HEADINGV2_SIZE["LG"] = "lg";
+    HEADINGV2_SIZE["XL"] = "xl";
+})(HEADINGV2_SIZE || (HEADINGV2_SIZE = {}));
+const SIZE_TYPOGRAPHY_MAP = {
+    [HEADINGV2_SIZE.SM]: TYPOGRAPHY_TYPE.HEADING_SMALL,
+    [HEADINGV2_SIZE.MD]: TYPOGRAPHY_TYPE.HEADING_MEDIUM,
+    [HEADINGV2_SIZE.LG]: TYPOGRAPHY_TYPE.HEADING_LARGE,
+    [HEADINGV2_SIZE.XL]: TYPOGRAPHY_TYPE.HEADING_XLARGE,
+};
+const LEVEL_TYPOGRAPHY_MAP = {
+    1: TYPOGRAPHY_TYPE.HEADING_XLARGE,
+    2: TYPOGRAPHY_TYPE.HEADING_LARGE,
+    3: TYPOGRAPHY_TYPE.HEADING_MEDIUM,
+    4: TYPOGRAPHY_TYPE.HEADING_SMALL,
+    5: TYPOGRAPHY_TYPE.HEADING_SMALL,
+    6: TYPOGRAPHY_TYPE.HEADING_SMALL,
+};
+export const HeadingV2 = (_a) => {
+    var { sx, size, standalone, id, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "id", "underline", "underlineColor", "typography", "level"]);
+    const { level: groupLevel, type, trackHeadingRendered } = useGroupV2();
+    const { flagInDevelopment } = useEnvironment();
+    const level = levelParam || groupLevel;
+    useEffect(() => {
+        trackHeadingRendered();
+    });
+    let typography = TYPOGRAPHY_TYPE.HEADING_MEDIUM;
+    if (typographyProp) {
+        typography = typographyProp;
+    }
+    else if (size) {
+        typography = SIZE_TYPOGRAPHY_MAP[size];
+    }
+    else if (level) {
+        typography =
+            LEVEL_TYPOGRAPHY_MAP[level];
+    }
+    const typographyStyles = getTypographyStyles(typography);
+    const typeSafeStyles = styles;
+    const getMarginHeightMultiple = (level) => {
+        if (level > 4) {
+            return 0.75;
+        }
+        if (level === 1 || level === 2) {
+            return 0.375;
+        }
+        return 0.55;
+    };
+    const marginHeightMultiple = fontStyles.lineHeights[typographyStyles.lineHeight] *
+        getMarginHeightMultiple(level);
+    const fontSize = fontStyles.fontSizes[typographyStyles.fontSize];
+    const topMargin = multiplyRemSize({
+        size: fontSize,
+        multiple: marginHeightMultiple,
+    });
+    if (type !== GROUPV2_TYPE.REGION && !standalone) {
+        flagInDevelopment('Heading component should be used within a Group component with property type={GROUP_TYPE.REGION} or given the standalone flag');
+    }
+    const processedStyles = processSx(sx);
+    const processedTypography = processSx(getTypographyStyles(typography));
+    const headerProps = Object.assign({ id: id, role: 'heading', 'aria-level': level, style: Object.assign(Object.assign({ borderBottomWidth: underline ? '2px' : 0, borderBottomColor: underlineColor ? underlineColor : '', marginTop: topMargin }, processedTypography), processedStyles) }, rest);
+    switch (level) {
+        case 1:
+            return _jsx("h1", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+        case 2:
+            return _jsx("h2", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+        case 3:
+            return _jsx("h3", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+        case 4:
+            return _jsx("h4", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+        case 5:
+            return _jsx("h5", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+        case 6:
+            return _jsx("h6", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+        default:
+            return _jsx("h6", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+    }
+};

package/dist/components/elements/Icon/Icon.stories.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GROUP_TYPE, Group } from '../Group';
-import { HEADING_SIZE, Heading } from '../text/Heading';
+import { HEADING_SIZE, Heading } from '../Heading';
 import { Column } from '../layout/Column';
 import { Icon } from './';
 import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
 import { COLOR } from '../../../theme/colors';
 import { FONT_SIZE } from '../../../theme/typography';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Icon',
     component: Icon,
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

package/dist/components/elements/IconV2/IconV2.module.css

@@ -0,0 +1,10 @@
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    cursor: pointer;
+    transform: scale(1.05);
+  }
+}

package/dist/components/elements/IconV2/IconV2.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconV2 } from '.';
+declare const meta: Meta<typeof IconV2>;
+export default meta;
+type Story = StoryObj<typeof IconV2>;
+export declare const Default: Story;
+export declare const CustomColor: Story;

package/dist/components/elements/IconV2/IconV2.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { IconV2 } from '.';
+import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
+import { COLOR } from '../../../theme/colors';
+import { FONT_SIZE } from '../../../theme/typography';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/IconV2',
+    component: IconV2,
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { size: FONT_SIZE.XXL, label: 'XX Large' },
+    { size: FONT_SIZE.XL, label: 'X Large' },
+    { size: FONT_SIZE.LG, label: 'Large' },
+    { size: FONT_SIZE.ML, label: 'Medium Large' },
+    { size: FONT_SIZE.MD, label: 'Medium' },
+    { size: FONT_SIZE.MS, label: 'Medium Small' },
+    { size: FONT_SIZE.SM, label: 'Small' },
+    { size: FONT_SIZE.XS, label: 'X Small' },
+];
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(IconV2, { icon: AccessAlarmIcon, size: size.size })] })))) })),
+};
+export const CustomColor = {
+    render: () => (_jsx(IconV2, { icon: AccessAlarmIcon, color: COLOR.SECONDARY, size: FONT_SIZE.LG })),
+};

package/dist/components/elements/IconV2/IconV2.test.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi, describe, it, beforeEach, afterEach, expect } from 'vitest';
+import { IconV2 } from '.';
+import { COLOR } from '../../../theme/colors';
+import { FONT_SIZE } from '../../../theme/typography';
+import { useEnvironment } from '../../providers/env';
+vi.mock('../../providers/env', () => ({
+    useEnvironment: vi.fn(),
+}));
+describe('IconV2 Component', () => {
+    const MockIcon = () => _jsx("svg", { "data-testid": "mock-icon" });
+    const mockFlagInDevelopment = vi.fn();
+    beforeEach(() => {
+        ;
+        useEnvironment.mockReturnValue({
+            flagInDevelopment: mockFlagInDevelopment,
+        });
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders the icon component', () => {
+        render(_jsx(IconV2, { icon: MockIcon }));
+        expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    });
+    it('applies the correct size and color', () => {
+        render(_jsx(IconV2, { icon: MockIcon, size: FONT_SIZE.LG, color: COLOR.SECONDARY }));
+        const iconElement = screen.getByTestId('mock-icon');
+        expect(iconElement).toHaveStyle({
+            fontSize: 'inherit',
+            color: 'color: rgb(211, 159, 16)',
+        });
+    });
+    it('calls flagInDevelopment if onClick is provided without aria-label', () => {
+        render(_jsx(IconV2, { icon: MockIcon, onClick: vi.fn() }));
+        expect(mockFlagInDevelopment).toHaveBeenCalledWith('Icon component with onClick should have an aria-label and tabIndex={0}');
+    });
+    it('does not call flagInDevelopment if onClick is provided with aria-label', () => {
+        render(_jsx(IconV2, { icon: MockIcon, onClick: vi.fn(), "aria-label": "icon" }));
+        expect(mockFlagInDevelopment).not.toHaveBeenCalled();
+    });
+    it('renders with tabIndex and role when onClick is provided', () => {
+        render(_jsx(IconV2, { icon: MockIcon, onClick: vi.fn(), "aria-label": "icon" }));
+        const divElement = screen.getByRole('button');
+        expect(divElement).toHaveAttribute('tabIndex', '0');
+    });
+    it('does not render with tabIndex and role when onClick is not provided', () => {
+        render(_jsx(IconV2, { icon: MockIcon }));
+        const divElement = screen.getByTestId('mock-icon').parentElement;
+        expect(divElement).not.toHaveAttribute('tabIndex');
+        expect(divElement).not.toHaveAttribute('role', 'button');
+    });
+    it('handles onClick event', () => {
+        const handleClick = vi.fn();
+        render(_jsx(IconV2, { icon: MockIcon, onClick: handleClick, "aria-label": "icon" }));
+        const divElement = screen.getByRole('button');
+        fireEvent.click(divElement);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/components/elements/IconV2/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { COLOR } from '../../../theme/colors';
+import { StyledElementPropsV2 } from '../../../theme';
+import { FONT_SIZE } from '../../../theme/typography';
+export type IconV2Props = StyledElementPropsV2<HTMLDivElement, {
+    icon: React.FC<any>;
+    size?: FONT_SIZE;
+    color?: COLOR;
+}>;
+export declare const IconV2: React.FC<IconV2Props>;

package/dist/components/elements/IconV2/index.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { COLOR, colors } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './IconV2.module.css';
+const typeSafeStyles = styles;
+export const IconV2 = (_a) => {
+    var { icon, size, color, sx, onClick } = _a, rest = __rest(_a, ["icon", "size", "color", "sx", "onClick"]);
+    const InnerComponent = icon;
+    const processedStyles = processSx(Object.assign({ fontSize: size }, sx));
+    const { flagInDevelopment } = useEnvironment();
+    if (onClick && !rest['aria-label']) {
+        flagInDevelopment('Icon component with onClick should have an aria-label and tabIndex={0}');
+    }
+    return (_jsx("div", Object.assign({ tabIndex: onClick ? 0 : undefined, role: onClick ? 'button' : 'none', onClick: onClick, className: typeSafeStyles.iconWrapper, style: processedStyles }, rest, { children: React.createElement(InnerComponent, {
+            style: {
+                fontSize: 'inherit',
+                color: colors[color || COLOR.PRIMARY],
+            },
+        }) })));
+};

package/dist/components/elements/{text/Inline → Inline}/Inline.stories.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Bold, Italic } from '.';
 import { Paragraph } from '../Paragraph';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Inline',
     component: Bold,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

package/dist/components/elements/{text/Inline → Inline}/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyledElementProps } from '../../../../theme';
+import { StyledElementProps } from '../../../theme';
 type InlineProps = StyledElementProps<HTMLSpanElement>;
 export declare const Bold: React.FC<InlineProps>;
 export declare const Italic: React.FC<InlineProps>;