feat(ld-loading): implement loading indicator

screenshot/builds/master.json

@@ -12614,6 +12614,32 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "affe4442",
+      "image": "a5ea91a51621c1fe0793d1522829bc72.png",
+      "userAgent": "default",
+      "desc": "ld-loading renders",
+      "testPath": "./src/liquid/components/ld-loading/test/ld-loading.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "677b9485",
+      "image": "00011daea4810569dc6604b6bbbac533.png",
+      "userAgent": "default",
+      "desc": "ld-loading renders as css component",
+      "testPath": "./src/liquid/components/ld-loading/test/ld-loading.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "2d63ca44",
       "image": "586246f2bee5007f622f893a74d39f2e.png",

src/liquid/components/index.md

@@ -25,6 +25,7 @@ If you have a suggestion for a new component not listed here, create an [issue o
 | [ld-input](components/ld-input/)                    | done              | done               |
 | [ld-input-message](components/ld-input-message/)    | done              | done               |
 | [ld-label](components/ld-label/)                    | done              | done               |
+| [ld-loading](components/ld-loading/)                | done              | done               |
 | [ld-notification](components/ld-notification)       | done              | done               |
 | [ld-sr-only](components/ld-sr-only/)                | not needed        | done               |
 | [ld-sr-live](components/ld-sr-live/)                | not needed        | done               |

src/liquid/components/ld-loading/ld-loading.css

@@ -0,0 +1,23 @@
+/**
+ * @prop --ld-loading-size: Size of the loading indicator (1.5rem by default).
+ */
+.ld-loading {
+  --ld-loading-size: 1.5rem;
+  height: var(--ld-loading-size);
+  width: var(--ld-loading-size);
+  display: inline-flex;
+  flex-shrink: 0;
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMyAyMyI+PGRlZnMvPjxjaXJjbGUgY3g9IjExLjUiIGN5PSIxMS41IiByPSI5LjUiIHN0cm9rZT0iI0JGQkZCRiIgc3Ryb2tlLWRhc2hhcnJheT0iMi41NSA1IiBzdHJva2Utd2lkdGg9IjQiLz48L3N2Zz4=');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  animation: ld-loading-animation 1.5s linear infinite;
+}
+
+@keyframes ld-loading-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/liquid/components/ld-loading/ld-loading.tsx

@@ -0,0 +1,17 @@
+import '../../components' // type definitions for type checks and intelliSense
+import { Component, h, Host } from '@stencil/core'
+
+/**
+ * @virtualProp ref - reference to component
+ * @virtualProp {string | number} key - for tracking the node's identity when working with lists
+ */
+@Component({
+  tag: 'ld-loading',
+  styleUrl: 'ld-loading.css',
+  shadow: false,
+})
+export class LdLoading {
+  render() {
+    return <Host class="ld-loading"></Host>
+  }
+}

src/liquid/components/ld-loading/readme.md

@@ -0,0 +1,41 @@
+---
+eleventyNavigation:
+  key: Loading Indicator
+  parent: Components
+layout: layout.njk
+title: Loading Indicator
+permalink: components/ld-loading/
+---
+
+# ld-loading
+
+Use the `ld-loading` component to indicate that the user should wait for a process to complete. Combine it with textual information on what is going on for a better user experience. 
+
+{% example %}
+<ld-loading></ld-loading>
+
+<!-- CSS component -->
+
+<span class="ld-loading"></span>
+{% endexample %}
+
+## CSS Variables
+
+| Variable             | Description                   | Default  |
+| -------------------- | ----------------------------- | -------- |
+| `--ld-loading-size`  | Size of the loading indicator | `1.5rem` |
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                              | Type               | Default     |
+| -------- | --------- | -------------------------------------------------------- | ------------------ | ----------- |
+| `key`    | `key`     | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
+| `ref`    | `ref`     | reference to component                                   | `any`              | `undefined` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/liquid/components/ld-loading/test/ld-loading.e2e.ts

@@ -0,0 +1,29 @@
+import { newE2EPage } from '@stencil/core/testing'
+
+jest.useRealTimers()
+
+async function getPageWithContent(content, theme = 'none') {
+  const page = await newE2EPage()
+  await page.setContent(
+    `<div class="ld-theme-${theme}" style="height: 100vh; display: grid; place-items: center">${content}</div>`
+  )
+  await page.addStyleTag({ path: './dist/css/liquid.global.css' })
+  await page.addStyleTag({ path: './dist/css/ld-loading.css' })
+  return page
+}
+
+const allowableMismatchedRatio = 0.02
+
+describe('ld-loading', () => {
+  it('renders', async () => {
+    const page = await getPageWithContent(`<ld-loading></ld-loading>`)
+    const results = await page.compareScreenshot()
+    expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+  })
+
+  it('renders as css component', async () => {
+    const page = await getPageWithContent(`<span class="ld-loading"></span>`)
+    const results = await page.compareScreenshot()
+    expect(results).toMatchScreenshot({ allowableMismatchedRatio })
+  })
+})

src/liquid/components/ld-loading/test/ld-loading.spec.ts

@@ -0,0 +1,14 @@
+import { newSpecPage } from '@stencil/core/testing'
+import { LdLoading } from '../ld-loading'
+
+describe('ld-loading', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [LdLoading],
+      html: `<ld-loading></ld-loading>`,
+    })
+    expect(page.root).toEqualHtml(`
+      <ld-loading class="ld-loading"></ld-loading>
+    `)
+  })
+})