chore: add storybook integration for footer (#5)

* chore: add storybook integration for footer

Signed-off-by: Asitha de Silva <[email protected]>

* separate styling for footer component

Signed-off-by: Asitha de Silva <[email protected]>

* update packages

Signed-off-by: Asitha de Silva <[email protected]>

* fix pr comments

Signed-off-by: Asitha de Silva <[email protected]>

* header license

Signed-off-by: Asitha de Silva <[email protected]>

* remove line break between footer sentences

Signed-off-by: Asitha de Silva <[email protected]>

---------

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

.storybook/main.ts

@@ -0,0 +1,18 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,18 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import type { Preview } from '@storybook/web-components';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  }
+};
+
+export default preview;

README.md

@@ -20,7 +20,7 @@ The generated tokens are organized into three layers:
 npm install @linuxfoundation/lfx-ui-core
 ```
 
-## Components
+## Documentation
 
 - [Design Tokens](docs/design-tokens.md)
 - [Footer Component](docs/footer.md)

docs/footer.md

@@ -49,3 +49,14 @@ Then, use the component in your HTML:
 ```
 
 Example: [https://stackblitz.com/edit/vitejs-vite-vn2ysk?file=index.html](https://stackblitz.com/edit/vitejs-vite-vn2ysk?file=index.html)
+
+# Development
+
+To develop the component, run the following commands:
+
+```bash
+npm run build
+npm run storybook
+```
+
+This will build the component and start the storybook server. You can then navigate to [http://localhost:6006](http://localhost:6006) to view the component. Updates made to the component will be reflected live in the storybook environment.