feat: introduce subsectionheader

Orfium · Oct 26, 2023 · ab9b32e · ab9b32e
1 parent e293dc9
commit ab9b32e
Show file tree

Hide file tree

Showing 16 changed files with 31 additions and 35 deletions.
diff --git a/docs/GETTING_STARTED.stories.mdx b/docs/GETTING_STARTED.stories.mdx
@@ -10,7 +10,7 @@ import { Meta } from '@storybook/addon-docs';
   }}
 />
 
-## 📦 Installation
+<SubsectionHeader title="📦 Installation" />
 
 ```text
 $ npm install @orfium/ictinus
@@ -27,7 +27,7 @@ Remember: this is a release candidate, we encourage you to lock version on insta
 $ yarn add @orfium/ictinus@next
 ```
 
-## 🔨 Usage
+<SubsectionHeader title="🔨 Usage" />
 
 1. Start by wrapping your App with ictinus `ThemeProvider` component like below
 
@@ -47,7 +47,7 @@ const App = () => (
 import { Select, Button } from '@orfium/ictinus';
 ```
 
-## ✨ Extra
+<SubsectionHeader title="✨ Extra" />
 
 ### Theme usage
 

diff --git a/docs/WELCOME.stories.mdx b/docs/WELCOME.stories.mdx
@@ -24,21 +24,17 @@ atoms, molecules, organisms, templates and pages.
 
 </p>
 
-<br />
 <br />
 
-## What's Inside
+<SubsectionHeader title="What's Inside" />
 
 - [Getting Started](?path=/story/guide-getting-started--page)
 - [Design Tokens](?path=/story/design-tokens-about--page)
-- [Components](?path=/story/design-system-avatar--avatar-with-icon)
+- [Components](?path=/docs/updated-components-avatar-avatar--overview)
 
-<br />
 <br />
 
-## Our Mission
-
-<br />
+<SubsectionHeader title="Our Mission" />
 
 ### Documentation
 
@@ -58,3 +54,6 @@ across products and platforms.
 ### Team Enabling
 
 We prioritize the needs of our teams, ensuring that our design system is accessible to everyone, regardless of their level of expertise. We provide training and support to ensure that our teams have the skills and knowledge they need to use the design system effectively
+
+<br />
+<br />
diff --git a/docs/guides/BREAKPOINTS.stories.mdx b/docs/guides/BREAKPOINTS.stories.mdx
@@ -20,7 +20,7 @@ The breakpoints are used internally in various components to make them responsiv
 
 Showing or hiding is based on the defined breakpoints as well. Our idea is based on the mobile-first principle which it shows how it works below.
 
-## Defined breakpoints
+<SubsectionHeader title="Defined breakpoints" />
 
 | Breakpoint | min-width |
 | ---------- | --------- |

diff --git a/src/components/Avatar/Avatar.stories.mdx b/src/components/Avatar/Avatar.stories.mdx
@@ -59,7 +59,7 @@ import Overview from '../../storybook/Overview';
   ]}
 />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Avatar with icon
 

diff --git a/src/components/Avatar/AvatarStack.stories.mdx b/src/components/Avatar/AvatarStack.stories.mdx
@@ -5,7 +5,6 @@ import AvatarStack from './AvatarStack';
 import Stack from '../storyUtils/Stack';
 import { BASE_SHADE } from '../../theme/palette';
 import { FIGMA_URL } from '../../utils/common';
-import SectionHeader from '../../storybook/SectionHeader';
 import Overview from '../../storybook/Overview';
 
 <Meta
@@ -61,7 +60,7 @@ import Overview from '../../storybook/Overview';
 
 <Props of={AvatarStack} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Avatar Stack
 

diff --git a/src/components/Box/Box.stories.mdx b/src/components/Box/Box.stories.mdx
@@ -63,7 +63,7 @@ import Overview from '../../storybook/Overview';
 
 <Props of={Box} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Box Padding (All sides)
 

diff --git a/src/components/Button/Button.stories.mdx b/src/components/Button/Button.stories.mdx
@@ -93,7 +93,7 @@ import { getIconSelectorKnob } from '../../utils/stories';
 
 <Props of={Button} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Button Types
 
@@ -300,10 +300,10 @@ Can be only combined with a right icon, not with a left icon at the same time.
   </Story>
 </Preview>
 
-### Button Playground
+### Playground
 
 <Preview>
-  <Story name="Button Playground" parameters={{ decorators: [withKnobs] }}>
+  <Story name="Playground" parameters={{ decorators: [withKnobs] }}>
     <Stack isVertical>
       <Button
         isBlock

diff --git a/src/components/DropdownButton/DropdownButton.stories.mdx b/src/components/DropdownButton/DropdownButton.stories.mdx
@@ -67,7 +67,7 @@ import Overview from '../../storybook/Overview';
   component.
 </Tip>
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Button with DropdownButton
 

diff --git a/src/components/IconButton/IconButton.stories.mdx b/src/components/IconButton/IconButton.stories.mdx
@@ -57,7 +57,7 @@ import Overview from '../../storybook/Overview';
 
 <Tip>Upon hovering, it is recommended to always display a label tooltip for an icon button.</Tip>
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Types
 

diff --git a/src/components/Link/Link.stories.mdx b/src/components/Link/Link.stories.mdx
@@ -67,12 +67,12 @@ import Overview from '../../storybook/Overview';
 
 <Props of={Link} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
-### Style
+### Link Styles
 
 <Preview>
-  <Story name="Style">
+  <Story name="Link Styles">
     <Stack isVertical>
       <Link href="#">Primary</Link>
     </Stack>
@@ -84,13 +84,13 @@ import Overview from '../../storybook/Overview';
   </Story>
 </Preview>
 
-### Placement
+### Link Placement
 
 Inline: Used within a body of copy; always with underline text decoration for better discoverability <br/>
 Block: Used without a body of copy; without underline text decoration
 
 <Preview>
-  <Story name="Placement">
+  <Story name="Link Placement">
     <Stack isVertical>
       <div>
         This is an{' '}
@@ -110,10 +110,10 @@ Block: Used without a body of copy; without underline text decoration
   </Story>
 </Preview>
 
-### Sizes
+### Link Sizes
 
 <Preview>
-  <Story name="Sizes">
+  <Story name="Link Sizes">
     <Stack isVertical>
       <Link href="#" size={1}>
         Size 1

diff --git a/src/components/List/stories/List.stories.mdx b/src/components/List/stories/List.stories.mdx
@@ -64,7 +64,7 @@ const MyComponent = () => {
 
 <Props of={List} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### List
 

diff --git a/src/components/List/stories/ListItem.stories.mdx b/src/components/List/stories/ListItem.stories.mdx
@@ -75,7 +75,7 @@ const MyComponent = () => {
 
 <Props of={ListItem} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### List Item Compilations
 

diff --git a/src/components/List/stories/ListItemText.stories.mdx b/src/components/List/stories/ListItemText.stories.mdx
@@ -70,7 +70,7 @@ const MyComponent = () => {
 
 <Props of={ListItemText} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### ListItemText normal
 

diff --git a/src/components/List/stories/ListSection.stories.mdx b/src/components/List/stories/ListSection.stories.mdx
@@ -74,7 +74,7 @@ const MyComponent = () => {
 
 <Props of={ListSection} />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Normal ListSection
 

diff --git a/src/components/Tooltip/Tooltip.stories.mdx b/src/components/Tooltip/Tooltip.stories.mdx
@@ -64,7 +64,7 @@ import Button from '../Button';
   ]}
 />
 
-## Variants
+<SubsectionHeader title="Variants" />
 
 ### Text Tooltip
 

diff --git a/src/components/Typography/Typography.stories.mdx b/src/components/Typography/Typography.stories.mdx
@@ -55,9 +55,7 @@ import Overview from '../../storybook/Overview';
 
 <Props of={Typography} />
 
-## Variants
-
-### Variants
+<SubsectionHeader title="Variants" />
 
 General use of Typography based on available variants
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,7 @@ import Overview from '../../storybook/Overview'; @@
       ]}
     />
-    ## Variants
+    <SubsectionHeader title="Variants" />
     ### Avatar with icon
@@ Expand Down @@