feat(dyne-inline): add ability to put el inline

.storybook/main.ts

@@ -1,7 +1,9 @@
 import { StorybookConfig } from '@storybook/html-vite';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions',
+    "@saucelabs/storybook-variants"
+  ],
   framework: '@storybook/html-vite',
   staticDirs: ['../dist'],
   async viteFinal(config, options) {

.storybook/modes.ts

@@ -0,0 +1,22 @@
+export const allModes = {
+  'dark mobile': {
+    backgrounds: 'dark',
+    theme: 'dark',
+    viewport: 'small',
+  },
+  'dark desktop': {
+    backgrounds: 'dark',
+    theme: 'dark',
+    viewport: 'large',
+  },
+  'light mobile': {
+    backgrounds: 'light',
+    theme: 'light',
+    viewport: 'small',
+  },
+  'light desktop': {
+    backgrounds: 'light',
+    theme: 'light',
+    viewport: 'large',
+  },
+};

.storybook/preview.ts

@@ -1,3 +1,4 @@
+import { withThemeByClassName } from '@storybook/addon-themes';
 import { Preview } from '@storybook/html';
 import { defineCustomElements } from '../loader';
 import dyneTheme from './dyne-theme';
@@ -9,7 +10,28 @@ const preview: Preview = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     docs: { toc: true, themes: dyneTheme },
     layout: 'centered',
+    viewport: {
+      viewports: {
+        iphone: { name: 'Small', styles: { width: '393px', height: '767px' } },
+        large: { name: 'Large', styles: { width: '1024px', height: '1000px' } },
+      },
+    },
+    backgrounds: {
+      values: [
+        { name: 'light', value: '#fff' },
+        { name: 'dark', value: '#1E293B' },
+      ],
+    },
   },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
 };
 
 export default preview;

package.json

@@ -58,6 +58,7 @@
     "@storybook/addon-essentials": "^8.0.8",
     "@storybook/addon-interactions": "^8.0.8",
     "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-themes": "^8.0.10",
     "@storybook/blocks": "^8.0.8",
     "@storybook/cli": "^8.0.8",
     "@storybook/html": "^8.0.8",

src/components.d.ts

@@ -22,6 +22,9 @@ export namespace Components {
          */
         "size"?: Size;
     }
+    interface DyneInline {
+        "gap"?: number;
+    }
 }
 declare global {
     interface HTMLDyneButtonElement extends Components.DyneButton, HTMLStencilElement {
@@ -30,8 +33,15 @@ declare global {
         prototype: HTMLDyneButtonElement;
         new (): HTMLDyneButtonElement;
     };
+    interface HTMLDyneInlineElement extends Components.DyneInline, HTMLStencilElement {
+    }
+    var HTMLDyneInlineElement: {
+        prototype: HTMLDyneInlineElement;
+        new (): HTMLDyneInlineElement;
+    };
     interface HTMLElementTagNameMap {
         "dyne-button": HTMLDyneButtonElement;
+        "dyne-inline": HTMLDyneInlineElement;
     }
 }
 declare namespace LocalJSX {
@@ -49,15 +59,20 @@ declare namespace LocalJSX {
          */
         "size"?: Size;
     }
+    interface DyneInline {
+        "gap"?: number;
+    }
     interface IntrinsicElements {
         "dyne-button": DyneButton;
+        "dyne-inline": DyneInline;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "dyne-button": LocalJSX.DyneButton & JSXBase.HTMLAttributes<HTMLDyneButtonElement>;
+            "dyne-inline": LocalJSX.DyneInline & JSXBase.HTMLAttributes<HTMLDyneInlineElement>;
         }
     }
 }

src/components/dyne-button/dyne-button.stories.ts

@@ -1,5 +1,5 @@
+import type { Components } from '@/src/components.js';
 import { Meta, StoryObj } from '@storybook/html';
-import type { Components } from '../../components.js';
 import { ColorArgTypes, EmphasisArgTypes, SizeArgTypes } from '../types.js';
 
 const meta = {
@@ -16,6 +16,12 @@ const meta = {
     color: 'primary',
     size: 'medium',
   },
+  parameters: {
+    variants: {
+      enable: true,
+      include: ['size', 'color'],
+    },
+  },
 } satisfies Meta<Components.DyneButton>;
 
 export default meta;

src/components/dyne-inline/dyne-inline.scss

@@ -0,0 +1,11 @@
+:host {
+  @apply flex flex-row;
+}
+
+$gaps: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96;
+
+@each $gap in $gaps {
+  :host([gap='#{$gap}']) {
+    @apply gap-#{$gap};
+  }
+}

src/components/dyne-inline/dyne-inline.stories.ts

@@ -0,0 +1,26 @@
+import type { Components } from '@/src/components';
+import { Meta, StoryObj } from '@storybook/html';
+
+const meta = {
+  title: 'Design System/Atoms/Inline',
+  component: 'dyne-inline',
+  render: args => `<dyne-inline gap="${args.gap}"><dyne-button>Click me</dyne-button><dyne-button>Trust me</dyne-button></dyne-inline>`,
+  argTypes: {
+    gap: {
+      control: {
+        type: 'number',
+      },
+      defaultValue: 4,
+    },
+  },
+} satisfies Meta<Components.DyneInline>;
+
+export default meta;
+
+type Story = StoryObj<Components.DyneInline>;
+
+export const Defaults: Story = {
+  args: {
+    gap: 4,
+  },
+};

src/components/dyne-inline/dyne-inline.tsx

@@ -0,0 +1,17 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+@Component({
+  tag: 'dyne-inline',
+  styleUrl: 'dyne-inline.scss',
+  shadow: true,
+})
+export class DyneButton {
+  @Prop({ reflect: true }) gap?: number = 4;
+  render() {
+    return (
+      <Host>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

src/components/dyne-inline/readme.md

@@ -0,0 +1,17 @@
+# dyne-inline
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default |
+| -------- | --------- | ----------- | -------- | ------- |
+| `gap`    | `gap`     |             | `number` | `4`     |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/dyne-inline/test/dyne-inline.e2e.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf8" />
+
+    <!-- Replace with the path to your entrypoint -->
+    <script src="../../../build/dyne-components.esm.js" type="module"></script>
+    <script src="../../../build/dyne-components.js" nomodule></script>
+  </head>
+  <body>
+    <dyne-inline>
+      <dyne-button>Click me</dyne-button>
+      <dyne-button>Trust me</dyne-button>
+    </dyne-mimmo>
+  </body>
+</html>

src/components/dyne-inline/test/dyne-inline.e2e.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+import { test } from '@stencil/playwright';
+
+test.describe('dyne-inline', () => {
+  test('should render', async ({ page }) => {
+    // The path here is the path to the www output relative to the dev server root directory
+    await page.goto('/components/dyne-inline/test/dyne-inline.e2e.html');
+
+    // Rest of test
+    const component = await page.locator('dyne-inline');
+    await expect(component).toHaveCSS('display', 'flex');
+    await expect(component).toHaveClass('flex flex-row hydrated');
+    await expect(component).toHaveText(`
+    Click me
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+  
+    Trust me
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+  
+  
+  
+  
+
+
+`);
+  });
+});

src/index.html

@@ -16,6 +16,12 @@
   </head>
   <body class="p-8">
     <div class="grid grid-cols-3 gap-4" id="buttons"></div>
+    <h1>inline</h1>
+
+    <dyne-inline>
+      <dyne-button>Click me</dyne-button>
+      <dyne-button>Trust me</dyne-button>
+    </dyne-inline>
     <script>
       const sizes = ['small', 'medium', 'large'];
       const colors = ['primary', 'secondary', 'tertiary'];

stencil.config.ts

@@ -30,7 +30,7 @@ export const config: Config = {
     {
       type: 'www',
       serviceWorker: null, // disable service workers
-      copy: [{ src: '**/*.html' }, { src: '**/*.css' }]
+      copy: [{ src: '**/*.html' }, { src: '**/*.css' }],
     },
     {
       type: 'docs-vscode',
@@ -40,7 +40,7 @@ export const config: Config = {
   testing: {
     browserHeadless: 'new',
     // Stencil Test Runner will no longer execute any 'e2e.ts` files
-    testRegex: '(/__tests__/.*|(\\.|/)(test|spec)|[//](e2e))\\.[jt]sx?$'
+    testRegex: '(/__tests__/.*|(\\.|/)(test|spec)|[//](e2e))\\.[jt]sx?$',
   },
   plugins: [sass(), tailwind(), tailwindHMR()],
   rollupPlugins: {

tailwind.config.ts

@@ -2,6 +2,6 @@ import type { Config } from 'tailwindcss';
 
 export default {
   content: ['./src/**/*.{ts,tsx,html}'],
-  theme: {},
+  // theme: {},
   plugins: [require('@tailwindcss/line-clamp')],
 } satisfies Config;

vscode-data.json

@@ -21,6 +21,19 @@
           "description": "button sizes could be: 'small', 'medium' or 'large'"
         }
       ]
+    },
+    {
+      "name": "dyne-inline",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "gap",
+          "description": ""
+        }
+      ]
     }
   ]
 }