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',