From 42c219c1850d4f33d6f2797343c3e48451f6ffb8 Mon Sep 17 00:00:00 2001 From: Carl Mensah Date: Mon, 15 Apr 2024 15:49:46 +0100 Subject: [PATCH] chore: loading page example and loadingImg --- components/content/Img/Img.css | 15 ++++-- components/content/Img/Img.ts | 3 +- .../content/LoadingButton/LoadingButton.css | 24 --------- .../LoadingButton/LoadingButton.stories.ts | 22 ++------ .../content/LoadingImage/LoadingImage.css | 35 ------------ .../content/LoadingImage/LoadingImage.ts | 35 ------------ .../LoadingImg.stories.ts} | 2 +- components/content/LoadingImg/LoadingImg.ts | 50 +++++++++++++++++ components/control/Button/Button.css | 21 ++++++-- docs/recipes/LoadingPage.ts | 53 ++++++------------- docs/recipes/LoadingSkeleton.stories.ts | 1 + 11 files changed, 99 insertions(+), 162 deletions(-) delete mode 100644 components/content/LoadingButton/LoadingButton.css delete mode 100644 components/content/LoadingImage/LoadingImage.css delete mode 100644 components/content/LoadingImage/LoadingImage.ts rename components/content/{LoadingImage/LoadingImage.stories.ts => LoadingImg/LoadingImg.stories.ts} (95%) create mode 100644 components/content/LoadingImg/LoadingImg.ts diff --git a/components/content/Img/Img.css b/components/content/Img/Img.css index cf50536..1cafe20 100644 --- 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 index 87cb082..e9c005b 100644 --- a/components/content/Img/Img.ts +++ b/components/content/Img/Img.ts @@ -16,7 +16,8 @@ export interface ImgAttributes { export class Img extends LitElement { @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.css b/components/content/LoadingButton/LoadingButton.css deleted file mode 100644 index 339b9ec..0000000 --- a/components/content/LoadingButton/LoadingButton.css +++ /dev/null @@ -1,24 +0,0 @@ -@import url('../../../styles/tokens/pulse.css'); -@import '../../../styles/mixins/button.css'; - -diamond-loading-button { - button, - a, - input:not([type='file']), - input[type='file']::file-selector-button { - align-items: center; - animation: pulse var(--diamond-pulse-duration) infinite linear; - appearance: none; - background: linear-gradient( - 90deg, - var(--diamond-color-grey-100) 25%, - var(--diamond-color-grey-300) 50%, - var(--diamond-color-grey-100) 75% - ); - background-size: 200% 100%; - border: transparent; - color: transparent; - display: inline-block; - touch-action: none; - } -} diff --git a/components/content/LoadingButton/LoadingButton.stories.ts b/components/content/LoadingButton/LoadingButton.stories.ts index 845095a..e63bf7c 100644 --- a/components/content/LoadingButton/LoadingButton.stories.ts +++ b/components/content/LoadingButton/LoadingButton.stories.ts @@ -5,26 +5,12 @@ import './LoadingButton'; export default { component: 'diamond-loading-button', - argTypes: { - width: { - control: { - type: 'select', - }, - options: ['full-width', 'full-width-mobile', 'square'], - }, - size: { - control: { - type: 'select', - }, - options: ['sm', 'md', 'lg'], - }, - }, }; export const Button: StoryObj = { - render: (args) => html` - - - + render: () => html` + + Button + `, }; diff --git a/components/content/LoadingImage/LoadingImage.css b/components/content/LoadingImage/LoadingImage.css deleted file mode 100644 index db7c51e..0000000 --- a/components/content/LoadingImage/LoadingImage.css +++ /dev/null @@ -1,35 +0,0 @@ -@import url('../../../styles/tokens/pulse.css'); - -diamond-loading-img { - img { - visibility: hidden; - } - animation: pulse var(--diamond-pulse-duration) infinite linear; - background: linear-gradient( - 90deg, - var(--diamond-color-grey-100) 25%, - var(--diamond-color-grey-300) 50%, - var(--diamond-color-grey-100) 75% - ); - background-size: 200% 100%; - display: inline-block; - - &[block], - &[block] img { - display: block; - } - - &[responsive] { - width: 100%; - - img { - height: auto; - width: 100%; - } - } - - &[radius] { - border-radius: var(--diamond-radius); - overflow: hidden; - } -} diff --git a/components/content/LoadingImage/LoadingImage.ts b/components/content/LoadingImage/LoadingImage.ts deleted file mode 100644 index fa0914e..0000000 --- a/components/content/LoadingImage/LoadingImage.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { LitElement, html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import { JSXCustomElement } from '../../../types/jsx-custom-element'; - -export interface ImgAttributes { - block?: string | boolean; - responsive?: string | boolean; - radius?: string | boolean; -} - -@customElement('diamond-loading-img') -export class Img extends LitElement { - @property({ reflect: true }) block?: string | boolean; - @property({ reflect: true }) responsive?: string | boolean; - @property({ reflect: true }) radius?: string | boolean; - - render() { - return html` `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'diamond-loading-img': ImgAttributes; - } -} - -declare module 'react' { - namespace JSX { - interface IntrinsicElements { - 'diamond-loading-img': ImgAttributes & JSXCustomElement; - } - } -} diff --git a/components/content/LoadingImage/LoadingImage.stories.ts b/components/content/LoadingImg/LoadingImg.stories.ts similarity index 95% rename from components/content/LoadingImage/LoadingImage.stories.ts rename to components/content/LoadingImg/LoadingImg.stories.ts index e5aeed3..4af51f2 100644 --- a/components/content/LoadingImage/LoadingImage.stories.ts +++ b/components/content/LoadingImg/LoadingImg.stories.ts @@ -1,7 +1,7 @@ import { StoryObj } from '@storybook/web-components'; import { html } from 'lit'; -import './LoadingImage'; +import './LoadingImg'; export default { component: 'diamond-loading-img', diff --git a/components/content/LoadingImg/LoadingImg.ts b/components/content/LoadingImg/LoadingImg.ts new file mode 100644 index 0000000..7e83acf --- /dev/null +++ b/components/content/LoadingImg/LoadingImg.ts @@ -0,0 +1,50 @@ +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() width: string = '0'; + @property() height: string = '0'; + + static readonly styles = [ + css` + :host { + aspect-ratio: var(--diamond-loading-img-width) / + var(--diamond-loading-img-height); + display: inline-block; + animation: pulse var(--diamond-pulse-duration) infinite linear; + width: var(--diamond-loading-img-width, 100px); + height: var(--diamond-loading-img-height, 100px); + background: linear-gradient( + 90deg, + var(--diamond-color-grey-100) 25%, + var(--diamond-color-grey-300) 50%, + var(--diamond-color-grey-100) 75% + ); + background-size: 200% 100%; + color: transparent; + user-select: none; + } + `, + pulse, + ]; + + render() { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'diamond-loading-img': LoadingImg; + } +} diff --git a/components/control/Button/Button.css b/components/control/Button/Button.css index 78137df..e1747d5 100644 --- a/components/control/Button/Button.css +++ b/components/control/Button/Button.css @@ -14,17 +14,14 @@ diamond-button { --_line-height: var(--diamond-button-line-height); display: inline-block; + 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 +36,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 +58,17 @@ diamond-button { } } + 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 +101,7 @@ diamond-button { &[width='full-width'] { display: block; + diamond-loading-button, button, a, input { @@ -105,6 +113,7 @@ diamond-button { &[width='full-width-mobile'] { display: block; + diamond-loading-button, button, a, input { @@ -117,6 +126,7 @@ diamond-button { --_line-height: 1; --_padding-inline: var(--diamond-button-padding-block); + diamond-loading-button, button, a, input { @@ -165,6 +175,7 @@ diamond-button { /* Text button is square */ --_padding-inline: var(--diamond-button-padding-block); + diamond-loading-button, button, a, input { diff --git a/docs/recipes/LoadingPage.ts b/docs/recipes/LoadingPage.ts index c3a7e6f..56550b8 100644 --- a/docs/recipes/LoadingPage.ts +++ b/docs/recipes/LoadingPage.ts @@ -76,14 +76,11 @@ export class DocsLoadingPage extends LitElement { } render() { - const { page, cards } = this; - // const page = null; - // const cards = null; + // const { page, cards } = this; + const page = null; + const cards = null; return html` - +