Merge pull request #41 from etchteam/feat/etch-371-loading-skeleton

feat: loading skeleton components
etchteam · Apr 16, 2024 · f8f1599 · f8f1599
2 parents 055e1d2 + ac3838b
commit f8f1599
Show file tree

Hide file tree

Showing 14 changed files with 442 additions and 11 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -5,6 +5,7 @@ const config: StorybookConfig = {
     '../components/**/*.mdx',
     '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     '../docs/**/*.mdx',
+    '../docs/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',

diff --git a/components/content/Img/Img.css b/components/content/Img/Img.css
@@ -2,14 +2,16 @@ diamond-img {
   display: inline-block;
 
   &[block],
-  &[block] img {
+  &[block] img,
+  &[block] diamond-loading-img {
     display: block;
   }
 
   &[responsive] {
     width: 100%;
 
-    img {
+    img,
+    diamond-loading-img {
       height: auto;
       width: 100%;
     }
@@ -21,15 +23,18 @@ diamond-img {
   }
 
   &[aspect-ratio],
-  &[aspect-ratio] img {
+  &[aspect-ratio] img,
+  &[aspect-ratio] diamond-loading-img {
     aspect-ratio: var(--diamond-img-aspect-ratio);
   }
 
-  &[object-fit] img {
+  &[object-fit] img,
+  &[object-fit] diamond-loading-img {
     object-fit: var(--diamond-img-object-fit);
   }
 
-  &[object-position] img {
+  &[object-position] img,
+  &[object-position] diamond-loading-img {
     object-position: var(--diamond-img-object-position);
   }
 }
diff --git a/components/content/Img/Img.ts b/components/content/Img/Img.ts
@@ -14,9 +14,13 @@ export interface ImgAttributes {
 
 @customElement('diamond-img')
 export class Img extends LitElement {
+  @property({ reflect: true, attribute: 'aria-hidden' }) ariaHidden:
+    | string
+    | null = 'true';
   @property({ reflect: true }) block?: string | boolean;
   @property({ reflect: true }) responsive?: string | boolean;
-  @property({ reflect: true, attribute: 'aspect-ratio' }) aspectRatio = 'auto';
+  @property({ reflect: true, attribute: 'aspect-ratio' }) aspectRatio?: string =
+    'inherit';
   @property({ reflect: true }) radius?: string | boolean;
   @property({ reflect: true, attribute: 'object-fit' }) objectFit?:
     | 'fill'

diff --git a/components/content/LoadingButton/LoadingButton.stories.ts b/components/content/LoadingButton/LoadingButton.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './LoadingButton';
+
+export default {
+  component: 'diamond-loading-button',
+};
+
+export const LoadingButton: StoryObj = {
+  render: () => html`
+    <diamond-button width="full-width">
+      <diamond-loading-button>Button text</diamond-loading-button>
+    </diamond-button>
+  `,
+};
diff --git a/components/content/LoadingButton/LoadingButton.ts b/components/content/LoadingButton/LoadingButton.ts
@@ -0,0 +1,23 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { pulse } from '../../../lib/pulse';
+
+@customElement('diamond-loading-button')
+export class LoadingButton extends LitElement {
+  @property({ reflect: true, attribute: 'aria-hidden' }) ariaHidden:
+    | string
+    | null = 'true';
+
+  static readonly styles = [pulse];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-loading-button': LoadingButton;
+  }
+}
diff --git a/components/content/LoadingImg/LoadingImg.stories.ts b/components/content/LoadingImg/LoadingImg.stories.ts
@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './LoadingImg';
+
+export default {
+  component: 'diamond-loading-img',
+};
+
+export const LoadingImg: StoryObj = {
+  render: (args) => html`
+    <diamond-img>
+      <diamond-loading-img
+        height="${args.height}"
+        width="${args.width}"
+      ></diamond-loading-img>
+    </diamond-img>
+  `,
+};
+
+LoadingImg.args = {
+  width: 400,
+  height: 300,
+};
diff --git a/components/content/LoadingImg/LoadingImg.ts b/components/content/LoadingImg/LoadingImg.ts
@@ -0,0 +1,39 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { pulse } from '../../../lib/pulse';
+
+@customElement('diamond-loading-img')
+export class LoadingImg extends LitElement {
+  @property({ reflect: true }) width: string = '0';
+  @property({ reflect: true }) height: string = '0';
+
+  static readonly styles = [
+    pulse,
+    css`
+      :host {
+        aspect-ratio: var(--diamond-loading-img-width) /
+          var(--diamond-loading-img-height);
+        height: calc(var(--diamond-loading-img-height) * 1px);
+        width: calc(var(--diamond-loading-img-width) * 1px);
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <style>
+        :host {
+          --diamond-loading-img-width: ${this.width};
+          --diamond-loading-img-height: ${this.height};
+        }
+      </style>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-loading-img': LoadingImg;
+  }
+}
diff --git a/components/content/LoadingText/LoadingText.stories.ts b/components/content/LoadingText/LoadingText.stories.ts
@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './LoadingText';
+
+export default {
+  component: 'diamond-loading-text',
+};
+
+export const LoadingText: StoryObj = {
+  render: () => html`
+    <h1>
+      <diamond-loading-text>Loading title</diamond-loading-text>
+    </h1>
+    <p>
+      <diamond-loading-text>Loading text</diamond-loading-text>
+    </p>
+  `,
+};
diff --git a/components/content/LoadingText/LoadingText.ts b/components/content/LoadingText/LoadingText.ts
@@ -0,0 +1,22 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { pulse } from '../../../lib/pulse';
+
+@customElement('diamond-loading-text')
+export class LoadingText extends LitElement {
+  @property({ reflect: true, attribute: 'aria-hidden' }) ariaHidden:
+    | string
+    | null = 'true';
+  static readonly styles = [pulse];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-loading-text': LoadingText;
+  }
+}
diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css
@@ -14,17 +14,15 @@ diamond-button {
   --_line-height: var(--diamond-button-line-height);
   display: inline-block;
 
+  /* Structural button styles */
+  diamond-loading-button,
   button,
   a,
   input:not([type='file']),
   input[type='file']::file-selector-button {
     align-items: center;
     appearance: none;
-    background: var(--_background);
-    border: var(--diamond-border);
-    border-color: var(--_border-color);
     border-radius: var(--diamond-button-border-radius);
-    color: var(--_color);
     cursor: pointer;
     display: inline-flex;
     font: inherit;
@@ -39,7 +37,6 @@ diamond-button {
     -webkit-tap-highlight-color: transparent;
     text-align: center;
     text-decoration: none;
-    text-shadow: var(--diamond-button-text-shadow);
     touch-action: manipulation;
     -webkit-touch-callout: none;
     transition:
@@ -62,6 +59,18 @@ diamond-button {
     }
   }
 
+  /* Presentational button styles */
+  button,
+  a,
+  input:not([type='file']),
+  input[type='file']::file-selector-button {
+    background: var(--_background);
+    border: var(--diamond-border);
+    border-color: var(--_border-color);
+    color: var(--_color);
+    text-shadow: var(--diamond-button-text-shadow);
+  }
+
   svg {
     block-size: var(--diamond-icon-size);
     flex-shrink: 0;
@@ -94,6 +103,7 @@ diamond-button {
   &[width='full-width'] {
     display: block;
 
+    diamond-loading-button,
     button,
     a,
     input {
@@ -105,6 +115,7 @@ diamond-button {
     &[width='full-width-mobile'] {
       display: block;
 
+      diamond-loading-button,
       button,
       a,
       input {
@@ -117,6 +128,7 @@ diamond-button {
     --_line-height: 1;
     --_padding-inline: var(--diamond-button-padding-block);
 
+    diamond-loading-button,
     button,
     a,
     input {
@@ -165,6 +177,7 @@ diamond-button {
     /* Text button is square */
     --_padding-inline: var(--diamond-button-padding-block);
 
+    diamond-loading-button,
     button,
     a,
     input {