Merge pull request #4 from etchteam/feature/grid

Grid

.storybook/preview.ts

@@ -11,6 +11,73 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        smallMobile: {
+          name: 'Small mobile',
+          styles: {
+            width: '320px',
+            height: '568px',
+          },
+        },
+        mobile: {
+          name: 'Average mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+        largeMobile: {
+          name: 'Large mobile',
+          styles: {
+            width: '480px',
+            height: '896px',
+          },
+        },
+        smallTablet: {
+          name: 'Small tablet',
+          styles: {
+            width: '600px',
+            height: '960px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        largeTablet: {
+          name: 'Large tablet',
+          styles: {
+            width: '1024px',
+            height: '1366px',
+          },
+        },
+        smallDesktop: {
+          name: 'Small desktop',
+          styles: {
+            width: '1280px',
+            height: '800px',
+          },
+        },
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1440px',
+            height: '900px',
+          },
+        },
+        largeDesktop: {
+          name: 'Large desktop',
+          styles: {
+            width: '1920px',
+            height: '1080px',
+          },
+        },
+      }
+    },
   },
 };
 

components/composition/Grid/Grid.stories.ts

@@ -0,0 +1,89 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './Grid';
+import './GridItem';
+
+export default {
+  component: 'diamond-grid',
+  argTypes: {
+    wrap: {
+      control: {
+        type: 'select',
+      },
+      options: ['wrap', 'nowrap', 'wrap-reverse'],
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: ['row', 'column', 'row-reverse', 'column-reverse'],
+    },
+    justifyContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+    },
+    alignItems: {
+      control: {
+        type: 'select',
+      },
+      options: ['flex-start', 'flex-end', 'center'],
+    },
+    gap: {
+      control: {
+        type: 'select',
+      },
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+};
+
+export const Grid: StoryObj = {
+  render: ({
+    wrap,
+    direction,
+    justifyContent,
+    alignItems,
+    gap,
+    inline,
+  }) => html`
+    <diamond-grid
+      wrap="${wrap}"
+      direction="${direction}"
+      justify-content="${justifyContent}"
+      align-items="${alignItems}"
+      gap="${gap}"
+      ?inline=${inline}
+    >
+      ${[...Array(12).keys()].map(
+        (i) => html`
+          <diamond-grid-item grow shrink>
+            <div
+              style="height: 100px; background-color: #eee; display: flex; align-items: center; justify-content: center;"
+            >
+              ${i + 1}
+            </div>
+          </diamond-grid-item>
+        `,
+      )}
+    </diamond-grid>
+  `,
+};
+
+Grid.args = {
+  wrap: 'wrap',
+  direction: 'row',
+  justifyContent: 'flex-start',
+  alignItems: 'flex-start',
+  gap: 'md',
+  inline: false,
+};

components/composition/Grid/Grid.ts

@@ -0,0 +1,91 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { cssMap } from '../../../lib/css-map';
+
+const directions = ['column', 'row-reverse', 'column-reverse'];
+
+const justifys = [
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+];
+
+const aligns = ['flex-end', 'center'];
+
+const gaps = ['xs', 'sm', 'lg', 'xl'];
+
+@customElement('diamond-grid')
+export class Grid extends LitElement {
+  @property() readonly wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+  @property({ type: Boolean }) readonly inline?: boolean;
+  @property() readonly direction?:
+    | 'row'
+    | 'column'
+    | 'row-reverse'
+    | 'column-reverse' = 'row';
+  @property() readonly justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly' = 'flex-start';
+  @property() readonly alignItems?: 'flex-start' | 'flex-end' | 'center' =
+    'flex-start';
+
+  static styles = css`
+    :host {
+      --diamond-grid-gap: var(--diamond-spacing);
+      display: flex;
+      margin: calc(var(--diamond-grid-gap) * -0.5);
+    }
+
+    :host([inline]) {
+      display: inline-flex;
+    }
+
+    :host([wrap='wrap']) {
+      flex-wrap: wrap;
+    }
+
+    :host([wrap='wrap-reverse']) {
+      flex-wrap: wrap-reverse;
+    }
+
+    ${cssMap(
+      directions,
+      (direction) =>
+        `:host([direction="${direction}"]) { flex-direction: ${direction}; }`,
+    )}
+
+    ${cssMap(
+      justifys,
+      (justify) =>
+        `:host([justify-content="${justify}"]) { justify-content: ${justify}; }`,
+    )}
+
+    ${cssMap(
+      aligns,
+      (align) => `:host([align-items="${align}"]) { align-items: ${align}; }`,
+    )}
+
+    ${cssMap(
+      gaps,
+      (gap) =>
+        `:host([gap="${gap}"]) { --diamond-grid-gap: var(--diamond-spacing-${gap}); }`,
+    )}
+  `;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-grid': Grid;
+  }
+}

components/composition/Grid/GridItem.stories.ts

@@ -0,0 +1,81 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './Grid';
+import './GridItem';
+
+const col = {
+  control: { type: 'select' },
+  options: ['auto', ...[...Array(12).keys()].map((i) => `${i + 1}`)],
+};
+
+export default {
+  component: 'diamond-grid-item',
+  argTypes: {
+    smallMobile: col,
+    mobile: col,
+    largeMobile: col,
+    smallTablet: col,
+    tablet: col,
+    largeTablet: col,
+    smallDesktop: col,
+    desktop: col,
+    largeDesktop: col,
+  },
+};
+
+export const GridItem: StoryObj = {
+  render: ({
+    grow,
+    shrink,
+    smallMobile,
+    mobile,
+    largeMobile,
+    smallTablet,
+    tablet,
+    largeTablet,
+    smallDesktop,
+    desktop,
+    largeDesktop,
+  }) => html`
+    <diamond-grid wrap="wrap">
+      ${[...Array(24).keys()].map(
+        (i) => html`
+          <diamond-grid-item
+            ?grow=${grow}
+            ?shrink=${shrink}
+            small-mobile="${smallMobile}"
+            mobile="${mobile}"
+            large-mobile="${largeMobile}"
+            small-tablet="${smallTablet}"
+            tablet="${tablet}"
+            large-tablet="${largeTablet}"
+            small-desktop="${smallDesktop}"
+            desktop="${desktop}"
+            large-desktop="${largeDesktop}"
+          >
+            <div
+              style="height: 100px; background-color: #eee; display: flex; align-items: center; justify-content: center;"
+            >
+              ${i + 1}
+            </div>
+          </diamond-grid-item>
+        `,
+      )}
+    </diamond-grid>
+  `,
+};
+
+GridItem.args = {
+  grow: false,
+  shrink: false,
+  smallMobile: '12',
+  mobile: '12',
+  largeMobile: '6',
+  smallTablet: '6',
+  tablet: '4',
+  largeTablet: '3',
+  smallDesktop: '2',
+  desktop: '1',
+  largeDesktop: '1',
+};