diff --git a/src/components/Common/ArticleSectionHeading.css b/src/components/Common/ArticleSectionHeading.css index f21dbc385..6d70c8736 100644 --- a/src/components/Common/ArticleSectionHeading.css +++ b/src/components/Common/ArticleSectionHeading.css @@ -1,7 +1,5 @@ .ArticleSectionHeading { margin-bottom: 1rem; - font-size: 13px; color: var(--black-600); - font-weight: var(--weight-semi-bold); text-transform: uppercase; } diff --git a/src/components/Common/ArticleSectionHeading.tsx b/src/components/Common/ArticleSectionHeading.tsx index e5c61436f..d5cc0f3df 100644 --- a/src/components/Common/ArticleSectionHeading.tsx +++ b/src/components/Common/ArticleSectionHeading.tsx @@ -1,5 +1,7 @@ import React from 'react' +import Heading from './Typography/Heading' + import './ArticleSectionHeading.css' interface Props { @@ -7,5 +9,9 @@ interface Props { } export default function ArticleSectionHeading({ children }: Props) { - return

{children}

+ return ( + + {children} + + ) } diff --git a/src/components/Common/Typography/Heading.css b/src/components/Common/Typography/Heading.css index b0a4c9750..07f16450f 100644 --- a/src/components/Common/Typography/Heading.css +++ b/src/components/Common/Typography/Heading.css @@ -32,6 +32,11 @@ letter-spacing: 0.3px; } +.Heading--2xs { + font-size: 13px; + line-height: 18px; +} + .Heading--weight-normal { font-weight: var(--weight-light); } diff --git a/src/components/Common/Typography/Heading.tsx b/src/components/Common/Typography/Heading.tsx index ece1f1c76..c17cd478f 100644 --- a/src/components/Common/Typography/Heading.tsx +++ b/src/components/Common/Typography/Heading.tsx @@ -10,7 +10,7 @@ type HeadingTypes = 'h1' | 'h3' type Props = React.HTMLAttributes & { className?: string as?: HeadingTypes - size?: FontSize + size?: FontSize | '2xs' weight?: FontWeight } diff --git a/src/stories/Heading.stories.tsx b/src/stories/Heading.stories.tsx index a075e2e6e..5acce7b36 100644 --- a/src/stories/Heading.stories.tsx +++ b/src/stories/Heading.stories.tsx @@ -1,20 +1,19 @@ import type { Meta, StoryObj } from '@storybook/react' -import Heading from '../components/Common/Typography/Heading' +import HeadingComponent from '../components/Common/Typography/Heading' -const meta: Meta = { +const meta: Meta = { title: 'Common/Typography/Heading', - component: Heading, + component: HeadingComponent, parameters: { layout: 'centered', }, - tags: ['autodocs'], } export default meta -type Story = StoryObj +type Story = StoryObj -export const Default: Story = { +export const Heading: Story = { args: { children: 'Heading', size: 'lg', diff --git a/src/stories/Label.stories.tsx b/src/stories/Label.stories.tsx index 6b5bccafc..ef7f8a80b 100644 --- a/src/stories/Label.stories.tsx +++ b/src/stories/Label.stories.tsx @@ -1,20 +1,19 @@ import type { Meta, StoryObj } from '@storybook/react' -import Label from '../components/Common/Typography/Label' +import LabelComponent from '../components/Common/Typography/Label' -const meta: Meta = { +const meta: Meta = { title: 'Common/Typography/Label', - component: Label, + component: LabelComponent, parameters: { layout: 'centered', }, - tags: ['autodocs'], } export default meta -type Story = StoryObj +type Story = StoryObj -export const Default: Story = { +export const Label: Story = { args: { children: 'Label', }, diff --git a/src/stories/Pill.stories.tsx b/src/stories/Pill.stories.tsx index 6f3ff78d5..34867da81 100644 --- a/src/stories/Pill.stories.tsx +++ b/src/stories/Pill.stories.tsx @@ -31,3 +31,21 @@ export const Shiny: Story = { color: 'red', }, } + +export const Medium: Story = { + args: { + children: 'REJECTED', + style: 'medium', + size: 'md', + color: 'red', + }, +} + +export const Light: Story = { + args: { + children: 'REJECTED', + style: 'light', + size: 'md', + color: 'red', + }, +} diff --git a/src/stories/SidebarLinkButton.stories.tsx b/src/stories/SidebarLinkButton.stories.tsx new file mode 100644 index 000000000..ad0e3d034 --- /dev/null +++ b/src/stories/SidebarLinkButton.stories.tsx @@ -0,0 +1,51 @@ +import React from 'react' + +import type { Meta, StoryObj } from '@storybook/react' + +import Forum from '../components/Icon/Forum' +import OpenFolder from '../components/Icon/OpenFolder' +import SidebarLinkButton from '../components/Proposal/View/SidebarLinkButton' + +const meta: Meta = { + title: 'Common/SidebarLinkButton', + component: SidebarLinkButton, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} + +export default meta +type Story = StoryObj + +const Container = (props: any) =>
+ +export const External: Story = { + args: { + icon: , + isExternal: true, + children: 'Discuss in the forum', + }, + decorators: [ + (Story) => ( + + + + ), + ], +} + +export const Internal: Story = { + args: { + icon: , + isExternal: false, + children: 'View all proposals', + }, + decorators: [ + (Story) => ( + + + + ), + ], +} diff --git a/src/stories/Text.stories.tsx b/src/stories/Text.stories.tsx index 4737a0764..8a128868c 100644 --- a/src/stories/Text.stories.tsx +++ b/src/stories/Text.stories.tsx @@ -1,20 +1,19 @@ import type { Meta, StoryObj } from '@storybook/react' -import Text from '../components/Common/Typography/Text' +import TextComponent from '../components/Common/Typography/Text' -const meta: Meta = { +const meta: Meta = { title: 'Common/Typography/Text', - component: Text, + component: TextComponent, parameters: { layout: 'centered', }, - tags: ['autodocs'], } export default meta -type Story = StoryObj +type Story = StoryObj -export const Default: Story = { +export const Text: Story = { args: { children: 'Text', size: 'md',