feat: add react logo story and css logo story to storybook

frameless · May 28, 2024 · 2f3fc05 · 2f3fc05
1 parent b53f6f8
commit 2f3fc05
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 12 deletions.
diff --git a/packages/storybook/src/css-logo.stories.tsx b/packages/storybook/src/css-logo.stories.tsx
@@ -1,36 +1,40 @@
 /* @license CC0-1.0 */
 
-// import readme from '@frameless/components-css/logo/README.md?raw';
+import '@frameless/components-css/logo/index.scss';
+import readme from '@frameless/components-css/logo/README.md?raw';
+import { Logo } from '@frameless/components-react/src/Logo';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Logo } from '@utrecht/component-library-react/dist/css-module';
-// import { Logo } from '@frameless/components-react'; // TODO: use frameless package instead
-// import '@frameless/components-css/logo/index.scss';
-
-// TODO: change the below code to correct css logo component code
 
 const meta = {
   title: 'CSS Component/Logo',
+
   id: 'css-logo',
+
   component: Logo,
+
   argTypes: {
     children: {
       name: 'Content',
-      description: 'Logo text',
+
+      description: 'Logo',
+
       type: {
         name: 'string',
         required: true,
       },
+
       defaultValue: '',
     },
   },
-  args: {
-    children: 'Opslaan en verder',
-  },
+
+  args: {},
+
   tags: ['autodocs'],
+
   parameters: {
     docs: {
       description: {
-        // component: readme,
+        component: readme,
       },
     },
   },
@@ -41,5 +45,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  name: 'Frameless logo',
+  name: 'Frameless Logo',
+  args: {},
+  parameters: {},
 };
diff --git a/packages/storybook/src/react-logo.stories.tsx b/packages/storybook/src/react-logo.stories.tsx
@@ -0,0 +1,56 @@
+/* @license CC0-1.0 */
+
+import readme from '@frameless/components-css/logo/README.md?raw';
+import { Logo } from '@frameless/components-react/src/Logo';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import '@frameless/components-css/logo/index.scss';
+
+// adds Logo to Storybook
+const meta = {
+  title: 'React Component/Logo',
+
+  id: 'react-logo',
+
+  component: Logo,
+
+  argTypes: {
+    children: {
+      name: 'Content',
+
+      description: 'Logo',
+
+      type: {
+        name: 'string',
+        required: true,
+      },
+
+      defaultValue: '',
+    },
+  },
+
+  args: {},
+
+  tags: ['autodocs'],
+
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+// defines that this (part of the) story is documentation
+type Story = StoryObj<typeof meta>;
+
+// adds Frameless Logo section to Logo in Storybook
+export const Default: Story = {
+  name: 'Frameless Logo', // in sidenav shows Frameless logo below Docs
+  args: {},
+  parameters: {},
+};
+//