fix: markdown story styling (#1536)

* fix: markdown story styling

* refactor(docs): dry markdown wrapping components and shink document styling

* refactor(docs): dry docs stories more

.storybook/components/Docs/GettingStarted/GettingStarted.stories.tsx

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import GettingStartedDocs from '../../../../docs/GETTING_STARTED.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+export default {
+  title: 'Getting Started',
+  component: GettingStartedDocs,
+  ...markdownStorybookOptions,
+};
+
+export const GettingStarted: StoryObj = {
+  render: () => <GettingStartedDocs />,
+};

.storybook/components/Docs/Guildelines/Documents.stories.tsx

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import Code from '../../../../docs/CODE_GUIDELINES.md';
+import ComponentDocs from '../../../../docs/COMPONENTS.md';
+import IconDocs from '../../../../docs/ICONS.md';
+import LayoutDocs from '../../../../docs/LAYOUT.md';
+import TokenDocs from '../../../../docs/TOKENS.md';
+import TypographyDocs from '../../../../docs/TYPOGRAPHY.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+
+export default {
+  title: 'Documentation/Guidelines',
+  ...markdownStorybookOptions,
+};
+
+export const CodeGuidelines: StoryObj = {
+  render: () => <Code />,
+};
+
+export const Components: StoryObj = {
+  render: () => <ComponentDocs />,
+};
+
+export const Icons: StoryObj = {
+  render: () => <IconDocs />,
+};
+
+export const Layout: StoryObj = {
+  render: () => <LayoutDocs />,
+};
+
+export const Tokens: StoryObj = {
+  render: () => <TokenDocs />,
+};
+
+export const Typography: StoryObj = {
+  render: () => <TypographyDocs />,
+};

.storybook/components/Docs/MarkdownWrapper.module.css

@@ -0,0 +1,105 @@
+.markdown {
+  body {
+    margin: 8px;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+  }
+  h1 {
+    font-size: 2em;
+    margin-block-start: 0.67em;
+    margin-block-end: 0.67em;
+  }
+  h2 {
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+  }
+  h3 {
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+  }
+  h4 {
+    margin-block-start: 1.33em;
+    margin-block-end: 1.33em;
+  }
+  h5 {
+    font-size: 0.83em;
+    margin-block-start: 1.67em;
+    margin-block-end: 1.67em;
+  }
+  h6 {
+    font-size: 0.67em;
+    margin-block-start: 2.33em;
+    margin-block-end: 2.33em;
+  }
+  a {
+    color: -webkit-link;
+    text-decoration: underline;
+  }
+  hr {
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+  }
+  dl,
+  p {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+  }
+  dd {
+    margin-inline-start: 40px;
+  }
+  pre {
+    margin: 1em 0px;
+  }
+  fieldset {
+    margin-inline-start: 2px;
+    margin-inline-end: 2px;
+    padding-block-start: 0.35em;
+    padding-inline-start: 0.75em;
+    padding-inline-end: 0.75em;
+    padding-block-end: 0.625em;
+  }
+  legend {
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
+  }
+  ol,
+  ul {
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+  }
+  ol {
+    list-style-type: decimal;
+  }
+  ul {
+    list-style-type: disc;
+  }
+  ul ul,
+  ol ul {
+    list-style-type: circle;
+  }
+  ol ul,
+  ul ol,
+  ol ol,
+  ul ul {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+  }
+  textarea {
+    resize: auto;
+  }
+}

.storybook/components/Docs/Documentation.tsx → .storybook/components/Docs/MarkdownWrapper.tsx

@@ -1,25 +1,43 @@
+import type { Story } from '@storybook/react';
 import type { ReactNode } from 'react';
 import React, { useEffect } from 'react';
 // @ts-expect-error prism.js must be in JS
 import Prism from './prism';
 import { LayoutContainer } from '../../../src/components/LayoutContainer/LayoutContainer';
 import { LayoutLinelengthContainer } from '../../../src/components/LayoutLinelengthContainer/LayoutLinelengthContainer';
 import './prism.css';
+import styles from './MarkdownWrapper.module.css';
 
-export interface Props {
+type MarkdownWrapperProps = {
   /**
    * Child node(s) that can be nested inside component
    */
-  children?: ReactNode;
-}
+  children: ReactNode;
+};
 
-export const Documentation: React.FC<Props> = ({ children }) => {
+export const MarkdownWrapper = ({ children }: MarkdownWrapperProps) => {
   useEffect(() => {
     Prism.highlightAll();
   }, []);
   return (
-    <LayoutContainer>
+    <LayoutContainer className={styles['markdown']}>
       <LayoutLinelengthContainer>{children}</LayoutLinelengthContainer>
     </LayoutContainer>
   );
 };
+
+export const markdownStorybookOptions = {
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    axe: {
+      skip: true,
+    },
+  },
+  decorators: [
+    (Story: Story) => (
+      <MarkdownWrapper>
+        <Story />
+      </MarkdownWrapper>
+    ),
+  ],
+};

.storybook/components/Docs/Recipes/Recipes.stories.tsx

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import RecipesDocs from '../../../../docs/RECIPES.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+
+export default {
+  title: 'Documentation/Recipes',
+  component: RecipesDocs,
+  ...markdownStorybookOptions,
+};
+
+export const Recipes: StoryObj = {
+  render: () => <RecipesDocs />,
+};

.storybook/components/Docs/Theming/Theming.stories.tsx

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import React from 'react';
+import ThemingDocs from '../../../../docs/THEMING.md';
+import { markdownStorybookOptions } from '../MarkdownWrapper';
+
+export default {
+  title: 'Documentation/Theming',
+  component: ThemingDocs,
+  ...markdownStorybookOptions,
+};
+
+export const Theming: StoryObj = {
+  render: () => <ThemingDocs />,
+};