From ecffb8cb418b8bd9044b7a2c74b681e2dc7fbd83 Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@hotmail.com>
Date: Fri, 4 Oct 2024 13:18:26 +0200
Subject: [PATCH] Add paragraph component (#867)

* add paragraph component

* export paragraph

* text as td

* change tag to p
---
 .changeset/silent-lamps-yawn.md                |  5 +++++
 src/components/Paragraph/Paragraph.stories.tsx | 18 ++++++++++++++++++
 src/components/Paragraph/Paragraph.tsx         | 10 ++++++++++
 src/components/Paragraph/index.ts              |  1 +
 src/components/Text/Text.tsx                   | 13 ++++++++++++-
 src/components/index.ts                        |  1 +
 6 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/silent-lamps-yawn.md
 create mode 100644 src/components/Paragraph/Paragraph.stories.tsx
 create mode 100644 src/components/Paragraph/Paragraph.tsx
 create mode 100644 src/components/Paragraph/index.ts

diff --git a/.changeset/silent-lamps-yawn.md b/.changeset/silent-lamps-yawn.md
new file mode 100644
index 00000000..4ffaa57e
--- /dev/null
+++ b/.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.
diff --git a/src/components/Paragraph/Paragraph.stories.tsx b/src/components/Paragraph/Paragraph.stories.tsx
new file mode 100644
index 00000000..787d221f
--- /dev/null
+++ b/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.",
+  },
+};
diff --git a/src/components/Paragraph/Paragraph.tsx b/src/components/Paragraph/Paragraph.tsx
new file mode 100644
index 00000000..08314334
--- /dev/null
+++ b/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";
diff --git a/src/components/Paragraph/index.ts b/src/components/Paragraph/index.ts
new file mode 100644
index 00000000..8bf2f8fc
--- /dev/null
+++ b/src/components/Paragraph/index.ts
@@ -0,0 +1 @@
+export * from "./Paragraph";
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 22cea878..c7c53d65 100644
--- a/src/components/Text/Text.tsx
+++ b/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;
 }> &
diff --git a/src/components/index.ts b/src/components/index.ts
index a58e6cef..5da55cf9 100644
--- a/src/components/index.ts
+++ b/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";