linkedunion-design-kit 1.4.6 → 1.4.8

package/dist/components/Typography/Body/Body.stories.js

@@ -0,0 +1,68 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Body } from "./Body";
+import Table from "../../../global/components/Table/Table";
+import { BODY_CLASSES, bodyTableHeaders, bodyTableRows } from ".";
+import { Dummy_Para } from "../../../utils/constants";
+export default {
+    title: "Components/Typography/Body",
+    component: Body,
+    parameters: {
+        docs: {
+            description: {
+                component: "A configurable body text component with design system-approved styling variants",
+            },
+        },
+    },
+    argTypes: {
+        body: {
+            description: "Typography variant class",
+            control: {
+                type: "select",
+                labels: BODY_CLASSES.reduce(function (acc, curr) {
+                    var _a;
+                    return (__assign(__assign({}, acc), (_a = {}, _a[curr] = curr, _a)));
+                }, {}),
+            },
+            options: BODY_CLASSES,
+            table: {
+                type: { summary: BODY_CLASSES.map(function (item) { return item; }).join(" | ") },
+                defaultValue: { summary: BODY_CLASSES[0] },
+            },
+        },
+        label: {
+            description: "Text content",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: Dummy_Para },
+            },
+        },
+        className: {
+            description: "Additional CSS classes",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "" },
+            },
+        },
+    },
+};
+var Template = function (args) { return _jsx(Body, __assign({}, args)); };
+export var _Body = Template.bind({});
+_Body.args = {
+    label: Dummy_Para,
+    body: BODY_CLASSES[0],
+    className: "",
+};
+export var BodyTokens = function () { return (_jsx(Table, { headers: bodyTableHeaders, rows: bodyTableRows, "aria-label": "Body text variants comparison" })); };

package/dist/components/Typography/Body/body.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/Typography/Body/body.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Body } from "./Body";
+import { BODY_CLASSES } from "./";
+import { Dummy_Para } from "../../../utils/constants";
+describe("Body Component", function () {
+    it("renders with default props", function () {
+        render(_jsx(Body, {}));
+        var divElement = screen.getByText(Dummy_Para);
+        expect(divElement).toBeInTheDocument();
+        expect(divElement).toHaveClass(BODY_CLASSES[0]);
+    });
+    describe("Body Component with different body classes", function () {
+        BODY_CLASSES.forEach(function (bodyClass) {
+            it("applies the correct class \"".concat(bodyClass, "\""), function () {
+                render(_jsx(Body, { body: bodyClass }));
+                var divElement = screen.getByText(Dummy_Para);
+                expect(divElement).toHaveClass(bodyClass);
+            });
+        });
+    });
+    it("applies additional class names from className prop", function () {
+        var customClass = "custom-class another-class";
+        render(_jsx(Body, { className: customClass }));
+        var divElement = screen.getByText(Dummy_Para);
+        expect(divElement).toHaveClass(BODY_CLASSES[0]);
+        expect(divElement).toHaveClass("custom-class");
+        expect(divElement).toHaveClass("another-class");
+    });
+    it("renders custom label when provided", function () {
+        var customLabel = "Custom Label Text";
+        render(_jsx(Body, { label: customLabel }));
+        var divElement = screen.getByText(customLabel);
+        expect(divElement).toBeInTheDocument();
+    });
+    it("passes additional props to the root div", function () {
+        var testId = "body-component";
+        var ariaLabel = "Body Component";
+        render(_jsx(Body, { "data-testid": testId, "aria-label": ariaLabel }));
+        var divElement = screen.getByTestId(testId);
+        expect(divElement).toHaveAttribute("aria-label", ariaLabel);
+    });
+});

package/dist/components/Typography/Body/index.d.ts

@@ -0,0 +1,14 @@
+import { FontFamily, FontSize, FontWeight, LineHeights, TextColor } from "../../../utils/enums";
+export declare const BODY_CLASSES: readonly ["lu-body-1", "lu-body-2", "lu-body-3", "lu-body-4"];
+export declare const bodyTableHeaders: {
+    title: string;
+    key: string;
+}[];
+export declare const bodyTableRows: {
+    alias: string;
+    fontFamily: FontFamily;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    lineHeight: LineHeights;
+    color: TextColor;
+}[];

package/dist/components/Typography/Body/index.js

@@ -0,0 +1,50 @@
+import { FontFamily, FontSize, FontWeight, LineHeights, TextColor, } from "../../../utils/enums";
+export var BODY_CLASSES = [
+    "lu-body-1",
+    "lu-body-2",
+    "lu-body-3",
+    "lu-body-4",
+];
+export var bodyTableHeaders = [
+    { title: "Alias Token Name", key: "alias" },
+    { title: "Font Family", key: "fontFamily" },
+    { title: "Font Size", key: "fontSize" },
+    { title: "Font Weight", key: "fontWeight" },
+    { title: "Line Height", key: "lineHeight" },
+    { title: "Color", key: "color" },
+];
+// Define rows
+export var bodyTableRows = [
+    {
+        alias: "lu-body-1",
+        fontFamily: FontFamily.Base,
+        fontSize: FontSize.XLarge,
+        fontWeight: FontWeight.Regular,
+        lineHeight: LineHeights.XS,
+        color: TextColor.Secondary,
+    },
+    {
+        alias: "lu-body-2",
+        fontFamily: FontFamily.Base,
+        fontSize: FontSize.Large,
+        fontWeight: FontWeight.Regular,
+        lineHeight: LineHeights.XS,
+        color: TextColor.Secondary,
+    },
+    {
+        alias: "lu-body-3",
+        fontFamily: FontFamily.Base,
+        fontSize: FontSize.Medium,
+        fontWeight: FontWeight.Regular,
+        lineHeight: LineHeights.XS,
+        color: TextColor.Secondary,
+    },
+    {
+        alias: "lu-body-4 ",
+        fontFamily: FontFamily.Base,
+        fontSize: FontSize.Small,
+        fontWeight: FontWeight.Regular,
+        lineHeight: LineHeights.XS,
+        color: TextColor.Secondary,
+    },
+];

package/dist/components/Typography/Body/type.d.ts

@@ -0,0 +1,7 @@
+import { BODY_CLASSES } from ".";
+export type BodyClass = (typeof BODY_CLASSES)[number];
+export interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    body?: BodyClass;
+    label?: string;
+    className?: string;
+}

package/dist/components/Typography/Body/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Typography/Display/Display.d.ts

@@ -0,0 +1,2 @@
+import { DisplayProps } from "./type";
+export declare const Display: ({ display, label, className, ...props }: DisplayProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/Display/Display.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { Dummy_Para } from "../../../utils/constants";
+import { Display_Classes } from "./";
+export var Display = function (_a) {
+    var _b = _a.display, display = _b === void 0 ? Display_Classes["lu-display-1"] : _b, _c = _a.label, label = _c === void 0 ? Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["display", "label", "className"]);
+    return (_jsx("div", __assign({}, props, { className: "".concat(display, " ").concat(className, " "), children: label })));
+};

package/dist/components/Typography/Display/Display.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+import { DisplayProps } from "./type";
+declare const _default: Meta<DisplayProps>;
+export default _default;
+export declare const _Display: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DisplayProps>;
+export declare const DisplayTokens: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/Display/Display.stories.js

@@ -0,0 +1,72 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Display } from "./Display";
+import { Display_Classes, displayTableHeaders, displayTableRows } from ".";
+import Table from "../../../global/components/Table/Table";
+import { Dummy_Para } from "../../../utils/constants";
+export default {
+    title: "Components/Typography/Display",
+    component: Display,
+    parameters: {
+        docs: {
+            description: {
+                component: "A configurable Display text component with design system-approved styling variants",
+            },
+        },
+    },
+    argTypes: {
+        display: {
+            description: "Typography variant class",
+            control: {
+                type: "select",
+                labels: Object.values(Display_Classes).reduce(function (acc, curr) {
+                    var _a;
+                    return (__assign(__assign({}, acc), (_a = {}, _a[curr] = curr, _a)));
+                }, {}),
+            },
+            options: Object.values(Display_Classes),
+            table: {
+                type: {
+                    summary: Object.values(Display_Classes)
+                        .map(function (item) { return item; })
+                        .join(" | "),
+                },
+                defaultValue: { summary: Display_Classes["lu-display-1"] },
+            },
+        },
+        label: {
+            description: "Text content",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: Dummy_Para },
+            },
+        },
+        className: {
+            description: "Additional CSS classes",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "" },
+            },
+        },
+    },
+};
+var Template = function (args) { return _jsx(Display, __assign({}, args)); };
+export var _Display = Template.bind({});
+_Display.args = {
+    label: Dummy_Para,
+    display: Display_Classes["lu-display-1"],
+    className: "",
+};
+export var DisplayTokens = function () { return (_jsx(Table, { headers: displayTableHeaders, rows: displayTableRows, "aria-label": "Display text variants comparison" })); };

package/dist/components/Typography/Display/Display.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/Typography/Display/Display.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Dummy_Para } from "../../../utils/constants";
+import { Display } from "./Display";
+import { Display_Classes } from "./";
+describe("Body Component", function () {
+    it("renders with default props", function () {
+        render(_jsx(Display, {}));
+        var divElement = screen.getByText(Dummy_Para);
+        expect(divElement).toBeInTheDocument();
+        expect(divElement).toHaveClass(Display_Classes["lu-display-1"]);
+    });
+    describe("Body Component with different body classes", function () {
+        Object.values(Display_Classes).forEach(function (displayClass) {
+            it("applies the correct class \"".concat(displayClass, "\""), function () {
+                render(_jsx(Display, { display: displayClass }));
+                var divElement = screen.getByText(Dummy_Para);
+                expect(divElement).toHaveClass(displayClass);
+            });
+        });
+    });
+    it("applies additional class names from className prop", function () {
+        var customClass = "custom-class another-class";
+        render(_jsx(Display, { className: customClass }));
+        var divElement = screen.getByText(Dummy_Para);
+        expect(divElement).toHaveClass(Display_Classes["lu-display-1"]);
+        expect(divElement).toHaveClass("custom-class");
+        expect(divElement).toHaveClass("another-class");
+    });
+    it("renders custom label when provided", function () {
+        var customLabel = "Custom Label Text";
+        render(_jsx(Display, { label: customLabel }));
+        var divElement = screen.getByText(customLabel);
+        expect(divElement).toBeInTheDocument();
+    });
+    it("passes additional props to the root div", function () {
+        var testId = "body-component";
+        var ariaLabel = "Body Component";
+        render(_jsx(Display, { "data-testid": testId, "aria-label": ariaLabel }));
+        var divElement = screen.getByTestId(testId);
+        expect(divElement).toHaveAttribute("aria-label", ariaLabel);
+    });
+});

package/dist/components/Typography/Display/index.d.ts

@@ -0,0 +1,38 @@
+import { FontFamily, FontSize, FontWeight, LineHeights, TextColor } from ".././../../utils/enums";
+export declare enum Display_Classes {
+    "lu-display-1" = "lu-display-1",
+    "lu-display-2" = "lu-display-2",
+    "lu-display-3" = "lu-display-3"
+}
+export declare const customDisplay: {
+    ".lu-display-1": {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    ".lu-display-2": {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    ".lu-display-3": {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+};
+export declare const displayTableHeaders: {
+    title: string;
+    key: string;
+}[];
+export declare const displayTableRows: {
+    alias: string;
+    fontFamily: FontFamily;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    lineHeight: LineHeights;
+    color: TextColor;
+}[];

package/dist/components/Typography/Display/index.js

@@ -0,0 +1,61 @@
+import { FontFamily, FontSize, FontWeight, LineHeights, TextColor, } from ".././../../utils/enums";
+export var Display_Classes;
+(function (Display_Classes) {
+    Display_Classes["lu-display-1"] = "lu-display-1";
+    Display_Classes["lu-display-2"] = "lu-display-2";
+    Display_Classes["lu-display-3"] = "lu-display-3";
+})(Display_Classes || (Display_Classes = {}));
+export var customDisplay = {
+    ".lu-display-1": {
+        fontSize: "var(--core-800)",
+        fontWeight: "700",
+        lineHeight: "1.5",
+        color: "var(--black)",
+    },
+    ".lu-display-2": {
+        fontSize: "var(--core-600)",
+        fontWeight: "600",
+        lineHeight: "1.5",
+        color: "var(--black)",
+    },
+    ".lu-display-3": {
+        fontSize: "var(--core-400)",
+        fontWeight: "500",
+        lineHeight: "1.5",
+        color: "var(--black)",
+    },
+};
+export var displayTableHeaders = [
+    { title: "Alias Token Name", key: "alias" },
+    { title: "Font Family", key: "fontFamily" },
+    { title: "Font Size", key: "fontSize" },
+    { title: "Font Weight", key: "fontWeight" },
+    { title: "Line Height", key: "lineHeight" },
+    { title: "Color", key: "color" },
+];
+export var displayTableRows = [
+    {
+        alias: "lu-display-1",
+        fontFamily: FontFamily.Base,
+        fontSize: FontSize.Huge,
+        fontWeight: FontWeight.Regular,
+        lineHeight: LineHeights.BASE,
+        color: TextColor.Default,
+    },
+    {
+        alias: "lu-display-2 ",
+        fontFamily: FontFamily.Base,
+        fontSize: FontSize.SevenXLarge,
+        fontWeight: FontWeight.SemiBold,
+        lineHeight: LineHeights.BASE,
+        color: TextColor.Default,
+    },
+    {
+        alias: "lu-display-3",
+        fontFamily: FontFamily.Base,
+        fontSize: FontSize.FourXLarge,
+        fontWeight: FontWeight.Medium,
+        lineHeight: LineHeights.BASE,
+        color: TextColor.Default,
+    },
+];

package/dist/components/Typography/Display/type.d.ts

@@ -0,0 +1,8 @@
+import { Display_Classes } from ".";
+type DisplayKey = keyof typeof Display_Classes;
+export interface DisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+    display?: DisplayKey;
+    label?: string;
+    className?: string;
+}
+export {};

package/dist/components/Typography/Display/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Typography/Headings/Heading.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/Typography/Headings/Heading.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Dummy_Para } from "../../../utils/constants";
+import { Heading } from "./Headings";
+import { Heading_Classes } from "./";
+describe("Heading Component", function () {
+    it("renders with default props", function () {
+        render(_jsx(Heading, {}));
+        var divElement = screen.getByText(Dummy_Para);
+        expect(divElement).toBeInTheDocument();
+        expect(divElement).toHaveClass(Heading_Classes["lu-heading-h1"]);
+    });
+    describe("Heading Component with different body classes", function () {
+        Object.values(Heading_Classes).forEach(function (headingClass) {
+            it("applies the correct class \"".concat(headingClass, "\""), function () {
+                render(_jsx(Heading, { heading: headingClass }));
+                var divElement = screen.getByText(Dummy_Para);
+                expect(divElement).toHaveClass(headingClass);
+            });
+        });
+    });
+    it("applies additional class names from className prop", function () {
+        var customClass = "custom-class another-class";
+        render(_jsx(Heading, { className: customClass }));
+        var divElement = screen.getByText(Dummy_Para);
+        expect(divElement).toHaveClass(Heading_Classes["lu-heading-h1"]);
+        expect(divElement).toHaveClass("custom-class");
+        expect(divElement).toHaveClass("another-class");
+    });
+    it("renders custom label when provided", function () {
+        var customLabel = "Custom Label Text";
+        render(_jsx(Heading, { label: customLabel }));
+        var divElement = screen.getByText(customLabel);
+        expect(divElement).toBeInTheDocument();
+    });
+    it("passes additional props to the root div", function () {
+        var testId = "body-component";
+        var ariaLabel = "Body Component";
+        render(_jsx(Heading, { "data-testid": testId, "aria-label": ariaLabel }));
+        var divElement = screen.getByTestId(testId);
+        expect(divElement).toHaveAttribute("aria-label", ariaLabel);
+    });
+});

package/dist/components/Typography/Headings/Headings.d.ts

@@ -1,2 +1,2 @@
-import { HeadingProps } from "@/types/interface";
-export declare const Heading: ({ heading, label, className }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+import { HeadingProps } from "./type";
+export declare const Heading: ({ heading, label, className, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/Headings/Headings.js

@@ -1,5 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { Dummy_Para } from "../../../utils/constants";
+import { Heading_Classes } from "./";
 export var Heading = function (_a) {
-    var _b = _a.heading, heading = _b === void 0 ? 'lu-heading-h1' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.className, className = _d === void 0 ? '' : _d;
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "".concat(heading, " ").concat(className), children: label }) }));
+    var _b = _a.heading, heading = _b === void 0 ? Heading_Classes["lu-heading-h1"] : _b, _c = _a.label, label = _c === void 0 ? Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["heading", "label", "className"]);
+    return (_jsx("h1", __assign({}, props, { className: "".concat(heading, " ").concat(className), children: label })));
 };

package/dist/components/Typography/Headings/Headings.stories.d.ts

@@ -1,4 +1,6 @@
 import { Meta } from "@storybook/react";
-declare const _default: Meta;
+import { HeadingProps } from "./type";
+declare const _default: Meta<HeadingProps>;
 export default _default;
-export declare const heading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("@storybook/csf").Args>;
+export declare const _Heading: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, HeadingProps>;
+export declare const HeadingTokens: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/Headings/Headings.stories.js

@@ -12,20 +12,51 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Heading } from "./Headings";
 import { headingsList } from "../../../utils";
+import Table from "../../../global/components/Table/Table";
+import { Heading_Classes, headingTableHeaders, headingTableRows } from "./";
+import { Dummy_Para } from "../../../utils/constants";
 export default {
-    title: "Components/Typography/Headings",
+    title: "Components/Typography/Heading",
     component: Heading,
 };
 var Template = function (args) { return _jsx(Heading, __assign({}, args)); };
-export var heading = Template.bind({});
-heading.args = {
-    label: 'The quick brown fox  jumps over the dog.',
-    heading: 'lu-heading-h1',
-    className: ''
+export var _Heading = Template.bind({});
+_Heading.args = {
+    label: Dummy_Para,
+    heading: Heading_Classes["lu-heading-h1"],
+    className: "",
 };
-heading.argTypes = {
+_Heading.argTypes = {
     heading: {
-        control: { type: "select", labels: Object.fromEntries(headingsList.map(function (heading) { return [heading.key, heading.label]; })) },
+        control: {
+            type: "select",
+            labels: Object.fromEntries(headingsList.map(function (heading) { return [heading.key, heading.label]; })),
+        },
         options: headingsList.map(function (heading) { return heading.key; }),
+        table: {
+            type: {
+                summary: Object.values(Heading_Classes)
+                    .map(function (item) { return item; })
+                    .join(" | "),
+            },
+            defaultValue: { summary: Heading_Classes["lu-heading-h1"] },
+        },
+    },
+    label: {
+        description: "Text content",
+        control: "text",
+        table: {
+            type: { summary: "string" },
+            defaultValue: { summary: Dummy_Para },
+        },
+    },
+    className: {
+        description: "Additional CSS classes",
+        control: "text",
+        table: {
+            type: { summary: "string" },
+            defaultValue: { summary: "" },
+        },
     },
 };
+export var HeadingTokens = function () { return (_jsx(Table, { tableClassName: "lu-mb-500", headers: headingTableHeaders, rows: headingTableRows, "aria-label": "Heading text variants comparison" })); };

package/dist/components/Typography/Headings/index.d.ts

@@ -0,0 +1,21 @@
+import { FontFamily, FontSize, FontWeight, LineHeights, TextColor } from "../../../utils/enums";
+export declare const headingTableHeaders: {
+    title: string;
+    key: string;
+}[];
+export declare enum Heading_Classes {
+    "lu-heading-h1" = "lu-heading-h1",
+    "lu-heading-h2" = "lu-heading-h2",
+    "lu-heading-h3" = "lu-heading-h3",
+    "lu-heading-h4" = "lu-heading-h4",
+    "lu-heading-h5" = "lu-heading-h5",
+    "lu-heading-h6" = "lu-heading-h6"
+}
+export declare const headingTableRows: {
+    headingClass: Heading_Classes;
+    fontFamily: FontFamily;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    lineHeight: LineHeights;
+    color: TextColor;
+}[];