feat: add sidebar link button story

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;
 }

src/components/Common/ArticleSectionHeading.tsx

@@ -1,11 +1,17 @@
 import React from 'react'
 
+import Heading from './Typography/Heading'
+
 import './ArticleSectionHeading.css'
 
 interface Props {
   children: React.ReactText
 }
 
 export default function ArticleSectionHeading({ children }: Props) {
-  return <h2 className="ArticleSectionHeading">{children}</h2>
+  return (
+    <Heading className="ArticleSectionHeading" size="2xs" weight="semi-bold">
+      {children}
+    </Heading>
+  )
 }

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);
 }

src/components/Common/Typography/Heading.tsx

@@ -10,7 +10,7 @@ type HeadingTypes = 'h1' | 'h3'
 type Props = React.HTMLAttributes<HTMLHeadingElement> & {
   className?: string
   as?: HeadingTypes
-  size?: FontSize
+  size?: FontSize | '2xs'
   weight?: FontWeight
 }
 

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<typeof Heading> = {
+const meta: Meta<typeof HeadingComponent> = {
   title: 'Common/Typography/Heading',
-  component: Heading,
+  component: HeadingComponent,
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
 }
 
 export default meta
-type Story = StoryObj<typeof Heading>
+type Story = StoryObj<typeof HeadingComponent>
 
-export const Default: Story = {
+export const Heading: Story = {
   args: {
     children: 'Heading',
     size: 'lg',

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<typeof Label> = {
+const meta: Meta<typeof LabelComponent> = {
   title: 'Common/Typography/Label',
-  component: Label,
+  component: LabelComponent,
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
 }
 
 export default meta
-type Story = StoryObj<typeof Label>
+type Story = StoryObj<typeof LabelComponent>
 
-export const Default: Story = {
+export const Label: Story = {
   args: {
     children: 'Label',
   },

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

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<typeof SidebarLinkButton> = {
+  title: 'Common/SidebarLinkButton',
+  component: SidebarLinkButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SidebarLinkButton>
+
+const Container = (props: any) => <div style={{ width: '250px' }} {...props} />
+
+export const External: Story = {
+  args: {
+    icon: <Forum size={20} />,
+    isExternal: true,
+    children: 'Discuss in the forum',
+  },
+  decorators: [
+    (Story) => (
+      <Container>
+        <Story />
+      </Container>
+    ),
+  ],
+}
+
+export const Internal: Story = {
+  args: {
+    icon: <OpenFolder size={20} />,
+    isExternal: false,
+    children: 'View all proposals',
+  },
+  decorators: [
+    (Story) => (
+      <Container>
+        <Story />
+      </Container>
+    ),
+  ],
+}

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<typeof Text> = {
+const meta: Meta<typeof TextComponent> = {
   title: 'Common/Typography/Text',
-  component: Text,
+  component: TextComponent,
   parameters: {
     layout: 'centered',
   },
-  tags: ['autodocs'],
 }
 
 export default meta
-type Story = StoryObj<typeof Text>
+type Story = StoryObj<typeof TextComponent>
 
-export const Default: Story = {
+export const Text: Story = {
   args: {
     children: 'Text',
     size: 'md',