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 = { + title: "Components / Paragraph", + tags: ["autodocs"], + component: Paragraph, +}; + +export default meta; +type Story = StoryObj; + +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( + ({ ...rest }, ref) => { + return ; + } +); + +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";