Add paragraph component (#867)

* add paragraph component

* export paragraph

* text as td

* change tag to p

.changeset/silent-lamps-yawn.md

@@ -0,0 +1,5 @@
+---
+"@saleor/macaw-ui": patch
+---
+
+Macaw-ui now exports new Paragraph component that is Text displayed as block.

src/components/Paragraph/Paragraph.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Paragraph } from "./index";
+
+const meta: Meta<typeof Paragraph> = {
+  title: "Components / Paragraph",
+  tags: ["autodocs"],
+  component: Paragraph,
+};
+
+export default meta;
+type Story = StoryObj<typeof Paragraph>;
+
+export const Default: Story = {
+  args: {
+    size: 4,
+    children: "Some text displayed as block.",
+  },
+};

src/components/Paragraph/Paragraph.tsx

@@ -0,0 +1,10 @@
+import { forwardRef } from "react";
+import { TextProps, Text } from "../Text";
+
+export const Paragraph = forwardRef<HTMLSpanElement, TextProps>(
+  ({ ...rest }, ref) => {
+    return <Text ref={ref} display="block" as="p" {...rest} />;
+  }
+);
+
+Paragraph.displayName = "Paragraph";

src/components/Paragraph/index.ts

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

src/components/Text/Text.tsx

@@ -8,7 +8,18 @@ import { text, TextVariants } from "./Text.css";
 
 export type TextProps = PropsWithBox<{
   children: ReactNode;
-  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "a" | "strong";
+  as?:
+    | "h1"
+    | "h2"
+    | "h3"
+    | "h4"
+    | "h5"
+    | "h6"
+    | "p"
+    | "span"
+    | "a"
+    | "strong"
+    | "td";
   className?: string;
   size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
 }> &

src/components/index.ts

@@ -16,6 +16,7 @@ export * from "./Input";
 export * from "./List";
 export * from "./Modal";
 export * from "./Multiselect";
+export * from "./Paragraph";
 export * from "./Popover";
 export * from "./RadioGroup";
 export * from "./RangeInput";