Update docs build to include button

.storybook/main.ts

@@ -26,6 +26,7 @@ const config: StorybookConfig = {
               options: {
               },
             },
+            require.resolve("postcss-loader"),
           ],
         },],
       }
@@ -40,11 +41,11 @@ const config: StorybookConfig = {
     });
 
     // Add CSS support
-    config.module.rules.push({
-      test: /\.css$/,
-      use: ['postcss-loader'],
-      include: path.resolve(__dirname, '../'),
-    });
+    // config.module.rules.push({
+    //   test: /\.css$/,
+    //   use: ['postcss-loader'],
+    //   include: path.resolve(__dirname, '../'),
+    // });
 
     // Return the updated Storybook Webpack config
     return config;

assets/css/styles.css

@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
 .container {
   max-width: 1200px;

components/button/README.md

@@ -0,0 +1,19 @@
+# Button Component
+
+This is the button component for the Drupal theme. It includes a copyright notice with the current year.
+
+## Files
+
+- **button.twig**: Twig template file for the button component.
+- **button.css**: CSS file for styling the button component.
+- **button.stories.yml**: YAML file containing stories for the button component (for Storybook integration).
+- **button.component.yml**: YAML file containing metadata about the button component.
+
+## Usage
+
+Include the button component in your main HTML template (`html.twig`) using Twig's `include` statement.
+
+```twig
+{% include '@theme/components/button/button.twig' with {
+  'year': "now"|date("Y")
+} %}

components/button/button.component.yml

@@ -0,0 +1,2 @@
+name: "Button Component"
+description: "A button component for the Drupal theme."

components/button/button.stories.ts

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/html';
+import buttonTemplate from './button.twig'; // Import the Twig template
+
+const meta: Meta = {
+  title: 'Example/Button',
+  parameters: {
+    layout: 'fullscreen', // Adjust as needed
+  },
+};
+
+export default meta;
+
+type Story = () => string;
+
+// Story for the button component
+export const Default: Story = () => {
+  // Mock data for demonstration purposes
+  const size = 'medium'; // Set the desired size ('small', 'medium', 'large')
+  const buttonClass = 'bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600';
+  const buttonLabel = 'Click Me';
+
+  // Render the Twig template with mock data
+  return buttonTemplate({
+    size,
+    buttonClass,
+    buttonAttributes: '', // Add any additional attributes as needed
+    buttonLabel,
+  });
+};

components/button/button.twig

@@ -0,0 +1,11 @@
+{# Define classes for different button sizes #}
+{% set sizeClasses = {
+  'small': 'text-sm px-4 py-2',
+  'medium': 'px-4 py-2',
+  'large': 'text-lg px-6 py-3'
+} %}
+
+{# Include any necessary classes and attributes #}
+<button class="bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600 {{ sizeClasses[size] }} {{ buttonClass }}" {{ buttonAttributes }}>
+  {{ buttonLabel }}
+</button>

components/footer/footer.stories.ts

@@ -1,4 +1,3 @@
-// Footer.stories.ts
 import { Meta } from '@storybook/html';
 import footerTemplate from './footer.twig'; // Import the Twig template
 

components/header/header.stories.ts

@@ -1,4 +1,3 @@
-// Header.stories.ts
 import { Meta } from '@storybook/html';
 import headerTemplate from './header.twig'; // Import the Twig template
 

docs/iframe.html

@@ -363,8 +363,8 @@
             window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
 
 
-      import './runtime~main.1afb860f.iframe.bundle.js';
+      import './runtime~main.561e91a1.iframe.bundle.js';
 
       import './639.14bc17b8.iframe.bundle.js';
 
-      import './main.6176c95a.iframe.bundle.js';</script></body></html>
+      import './main.4788be79.iframe.bundle.js';</script></body></html>

docs/index.json

@@ -1 +1 @@
-{"v":4,"entries":{"introduction--docs":{"id":"introduction--docs","title":"Introduction","name":"Docs","importPath":"./components/Introduction.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"example-footer--default":{"type":"story","id":"example-footer--default","name":"Default","title":"Example/Footer","importPath":"./components/footer/footer.stories.ts","tags":["story"]},"example-header--default":{"type":"story","id":"example-header--default","name":"Default","title":"Example/Header","importPath":"./components/header/header.stories.ts","tags":["story"]}}}
+{"v":4,"entries":{"introduction--docs":{"id":"introduction--docs","title":"Introduction","name":"Docs","importPath":"./components/Introduction.mdx","storiesImports":[],"type":"docs","tags":["unattached-mdx","docs"]},"example-button--default":{"type":"story","id":"example-button--default","name":"Default","title":"Example/Button","importPath":"./components/button/button.stories.ts","tags":["story"]},"example-footer--default":{"type":"story","id":"example-footer--default","name":"Default","title":"Example/Footer","importPath":"./components/footer/footer.stories.ts","tags":["story"]},"example-header--default":{"type":"story","id":"example-header--default","name":"Default","title":"Example/Header","importPath":"./components/header/header.stories.ts","tags":["story"]}}}

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1711705363050,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.6.3"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"8.0.5","storybookVersionSpecifier":"^8.0.5","language":"typescript","storybookPackages":{"@storybook/addon-styling":{"version":"1.3.7"},"@storybook/blocks":{"version":"8.0.5"},"@storybook/html":{"version":"8.0.5"},"@storybook/html-webpack5":{"version":"8.0.5"},"@storybook/test":{"version":"8.0.5"},"storybook":{"version":"8.0.5"}},"addons":{"@storybook/addon-webpack5-compiler-swc":{"version":"1.0.2"},"@storybook/addon-links":{"version":"8.0.5"},"@storybook/addon-essentials":{"version":"8.0.5"},"@chromatic-com/storybook":{"version":"1.2.25"},"@storybook/addon-interactions":{"version":"8.0.5"},"@storybook/addon-styling-webpack":{"version":"1.0.0"},"@storybook/addon-mdx-gfm":{"version":"8.0.5"}}}
+{"generatedAt":1711706551442,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"9.6.3"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"8.0.5","storybookVersionSpecifier":"^8.0.5","language":"typescript","storybookPackages":{"@storybook/addon-styling":{"version":"1.3.7"},"@storybook/blocks":{"version":"8.0.5"},"@storybook/html":{"version":"8.0.5"},"@storybook/html-webpack5":{"version":"8.0.5"},"@storybook/test":{"version":"8.0.5"},"storybook":{"version":"8.0.5"}},"addons":{"@storybook/addon-webpack5-compiler-swc":{"version":"1.0.2"},"@storybook/addon-links":{"version":"8.0.5"},"@storybook/addon-essentials":{"version":"8.0.5"},"@chromatic-com/storybook":{"version":"1.2.25"},"@storybook/addon-interactions":{"version":"8.0.5"},"@storybook/addon-styling-webpack":{"version":"1.0.0"},"@storybook/addon-mdx-gfm":{"version":"8.0.5"}}}