Migrate content stories to tsx format (#294)

* migrate breadcrumbs and change url paths to doc

* lint fix

* migrate content to tsx

* migrate content stories to tsx

* merge main

* clean up

* add html bullet points instead of jsdoc comment

src/components/content/ContentArea/ContentArea.stories.tsx

@@ -0,0 +1,55 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Theme } from '../../../../.storybook/components'
+import { ContentArea } from './ContentArea'
+
+const meta = {
+  component: ContentArea,
+  args: {
+    children: 'Multiple blocks',
+  },
+  argTypes: {
+    children: {
+      options: ['Multiple blocks', 'One block'],
+      mapping: {
+        'Multiple blocks': (
+          <>
+            <div className="bg-neutral-200">Block A</div>
+            <div className="bg-neutral-100">Block B</div>
+            <div className="bg-neutral-200">Block C</div>
+          </>
+        ),
+        'One block': <div className="bg-neutral-200">Block A</div>,
+      },
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme component="content" items={['area']} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof ContentArea>
+
+export default meta
+
+type Story = StoryObj<typeof ContentArea>
+
+export const Default: Story = {}

src/components/content/ContentArea/ContentArea.tsx

@@ -7,6 +7,9 @@ export type ContentAreaProps = ClassNameProps & {
   children?: ReactNode
 }
 
+/**
+ * This component makes sure that there is enough space between multiple sections and actions on a page.
+ */
 export function ContentArea({ className, children }: ContentAreaProps) {
   const { content } = useTheme()
   return (

src/components/content/ContentMessage/ContentMessage.stories.tsx

@@ -0,0 +1,82 @@
+import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
+import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning'
+import IconError from '@aboutbits/react-material-icons/dist/IconError'
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/addon-docs'
+import { Meta, StoryObj } from '@storybook/react'
+import { Theme } from '../../../../.storybook/components'
+import { Tone } from '../../types'
+import { ContentMessage } from './ContentMessage'
+
+const meta = {
+  component: ContentMessage,
+  args: {
+    title: 'No items',
+    text: 'No data available for this view',
+    icon: IconInfo,
+  },
+  argTypes: {
+    icon: {
+      options: ['None', 'Info', 'Warning', 'Error'],
+      mapping: {
+        None: undefined,
+        Info: IconInfo,
+        Warning: IconWarning,
+        Error: IconError,
+      },
+      control: { type: 'select' },
+    },
+    tone: {
+      options: Object.values(Tone),
+      control: { type: 'select' },
+    },
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Subheading>Subcomponents</Subheading>
+          It is composed of the following components, which can also be used
+          separately for custom purposes:
+          <ul>
+            <li>ContentMessageContainer</li>
+            <li>ContentMessageIcon</li>
+            <li>ContentMessageTitle</li>
+            <li>ContentMessageText</li>
+          </ul>
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Theme component="content" items={['message']} />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof ContentMessage>
+
+export default meta
+
+type Story = StoryObj<typeof ContentMessage>
+
+export const Default: Story = {}
+
+export const Tones: Story = {
+  render: (args) => (
+    <div className="flex flex-row gap-2">
+      <ContentMessage {...args} tone={Tone.Primary} title="Primary" />
+      <ContentMessage {...args} tone={Tone.Informative} title="Informative" />
+      <ContentMessage {...args} tone={Tone.Success} title="Success" />
+      <ContentMessage {...args} tone={Tone.Warning} title="Warning" />
+      <ContentMessage {...args} tone={Tone.Critical} title="Critical" />
+    </div>
+  ),
+}

src/components/content/ContentMessage/ContentMessage.tsx

@@ -16,6 +16,11 @@ export type ContentMessageProps = ClassNameProps &
     iconProps?: Partial<ContentMessageIconProps>
   }
 
+/**
+ *
+ * This component renders a message with icon in the given tone. It can
+ * be used to create a warning or error message inside a section.
+ */
 export function ContentMessage({
   className,
   icon,