feat(admin-ui): handle typography - add Heading and Text components

packages/ui-new/src/Heading/Heading.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Heading } from "./Heading";
+
+const meta: Meta<typeof Heading> = {
+    title: "Components/Heading",
+    component: Heading,
+    tags: ["autodocs"],
+    argTypes: {
+        level: {
+            control: {
+                type: "number",
+                min: 1,
+                max: 6
+            }
+        }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Heading>;
+
+export const Heading1: Story = {
+    args: {
+        level: 1,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading2: Story = {
+    args: {
+        level: 2,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading3: Story = {
+    args: {
+        level: 3,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading4: Story = {
+    args: {
+        level: 4,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading5: Story = {
+    args: {
+        level: 5,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const Heading6: Story = {
+    args: {
+        level: 6,
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};

packages/ui-new/src/Heading/Heading.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "~/utils";
+
+export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
+
+// Create a mapping of variant to tag
+const TAG_MAP: Record<HeadingLevels, HeadingTags> = {
+    1: "h1",
+    2: "h2",
+    3: "h3",
+    4: "h4",
+    5: "h5",
+    6: "h6"
+};
+
+const headingVariants = cva("font-sans font-semibold", {
+    variants: {
+        level: {
+            1: "text-5xl leading-tight",
+            2: "text-4xl leading-tight",
+            3: "text-3xl leading-tight",
+            4: "text-xl leading-normal",
+            5: "text-base leading-normal",
+            6: "text-sm leading-normal"
+        }
+    },
+    defaultVariants: {
+        level: 1
+    }
+});
+
+export interface HeadingProps
+    extends React.HTMLAttributes<HTMLHeadingElement>,
+        VariantProps<typeof headingVariants> {
+    as?: HeadingTags;
+    text: string | React.ReactNode;
+}
+
+export const Heading = ({ level, text, className, as }: HeadingProps) => {
+    // Ensure `level` is a valid number, or fallback to a default value 1
+    const validatedLevel = level && level in TAG_MAP ? level : 1;
+
+    // Choose the tag: prefer `as`, otherwise use `TAG_MAP[validatedLevel]`
+    const Tag = as || TAG_MAP[validatedLevel] || TAG_MAP[1];
+
+    return <Tag className={cn(headingVariants({ level, className }))}>{text}</Tag>;
+};

packages/ui-new/src/Heading/index.ts

@@ -0,0 +1 @@
+export * from "./Heading";

packages/ui-new/src/Text/Text.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Text } from "./Text";
+
+const meta: Meta<typeof Text> = {
+    title: "Components/Text",
+    component: Text,
+    tags: ["autodocs"],
+    argTypes: {
+        size: { control: "select", options: ["sm", "md", "lg", "xl"] }
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const TextXl: Story = {
+    args: {
+        size: "xl",
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const TextLg: Story = {
+    args: {
+        size: "lg",
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const TextMd: Story = {
+    args: {
+        size: "md",
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};
+
+export const TextSm: Story = {
+    args: {
+        size: "sm",
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+    }
+};

packages/ui-new/src/Text/Text.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "~/utils";
+
+export type TextTags = "span" | "div";
+
+const textVariants = cva("font-sans font-normal", {
+    variants: {
+        size: {
+            xl: "text-xl leading-normal",
+            lg: "text-base leading-normal",
+            md: "text-sm leading-normal",
+            sm: "text-xs leading-normal"
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+
+export interface TextProps
+    extends React.HTMLAttributes<HTMLElement>,
+        VariantProps<typeof textVariants> {
+    as?: TextTags;
+    text: string | React.ReactNode;
+}
+
+export const Text = ({ size, text, className, as: Tag = "span" }: TextProps) => {
+    return <Tag className={cn(textVariants({ size, className }))}>{text}</Tag>;
+};

packages/ui-new/src/Text/index.ts

@@ -0,0 +1 @@
+export * from "./Text";

packages/ui-new/src/index.ts

@@ -4,12 +4,13 @@ export * from "./Button";
 export * from "./Card";
 export * from "./Drawer";
 export * from "./DropdownMenu";
+export * from "./Heading";
 export * from "./Input";
 export * from "./Label";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Sheet";
 export * from "./Table";
 export * from "./Textarea";
+export * from "./Text";
 export * from "./Tooltip";
-export * from "./Typography";

packages/ui-new/tailwind.config.js

@@ -25,13 +25,6 @@ module.exports = {
                 "2xl": "1400px"
             }
         },
-        fontSize: {
-            sm: "0.75rem", // 12px
-            md: "0.875rem", // 14px
-            base: "1rem", // 16px
-            lg: "1rem", // 16px
-            xl: "1.25rem" // 20px
-        },
         extend: {
             colors: {
                 border: "hsl(var(--border))",

packages/ui/src/Typography/Typography.tsx

@@ -1,21 +1,41 @@
 import React from "react";
-import {
-    Typography as RwmcTypography,
-    TypographyProps as RmwcTypographyProps
-} from "@rmwc/typography";
+import { TypographyProps as RmwcTypographyProps } from "@rmwc/typography";
+
+import { Heading, HeadingLevels, Text } from "@webiny/ui-new";
 
 interface TypographyProps extends RmwcTypographyProps {
     children?: React.ReactNode;
     className?: string;
+    /**
+     * @deprecated
+     */
     style?: React.CSSProperties;
     tag?: string;
 }
 
 /**
- * Use Ripple component to display a list of choices, once the handler is triggered.
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `<Heading />` or `<Text />` components from the `@webiny/admin-ui` package instead.
  */
 const Typography = (props: TypographyProps) => {
-    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;
+    const { children, use, className } = props;
+
+    // Define a mapping of use values to heading levels
+    const headingLevelMap: { [key: string]: HeadingLevels } = {
+        headline1: 1,
+        headline2: 2,
+        headline3: 3,
+        headline4: 4,
+        headline5: 5,
+        headline6: 6
+    };
+
+    if (use in headingLevelMap) {
+        const level = headingLevelMap[use];
+        return <Heading level={level} text={children} className={className} />;
+    }
+
+    return <Text size={"md"} text={children} className={className} />;
 };
 
 export { Typography, TypographyProps };