feat(ld-input): support for various input types

emdgroup-liquid · Jun 1, 2021 · 3ea272d · 3ea272d
1 parent d17e91d
commit 3ea272d
Show file tree

Hide file tree

Showing 17 changed files with 744 additions and 230 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -7,11 +7,16 @@ const markdownItAnchor = require('markdown-it-anchor')
 const pluginTOC = require('eleventy-plugin-toc')
 
 module.exports = function (eleventyConfig) {
+  // Navigation
   eleventyConfig.addPlugin(eleventyNavigationPlugin)
+
+  // Table of contents
   eleventyConfig.addPlugin(pluginTOC, {
     tags: ['h2', 'h3'],
     wrapperClass: 'docs-toc__nav',
   })
+
+  // Syntax highlighting
   eleventyConfig.addPlugin(syntaxHighlight, {
     alwaysWrapLineHighlights: false,
   })
@@ -22,12 +27,45 @@ module.exports = function (eleventyConfig) {
     }
     return highlighter(str, language)
   })
+
+  // Headings
+  const position = { false: 'push', true: 'unshift' }
+  const renderPermalink = (slug, opts, state, idx) => {
+    const space = () =>
+      Object.assign(new state.Token('text', '', 0), {
+        content: ' ',
+      })
+
+    const linkTokens = [
+      Object.assign(new state.Token('link_open', 'a', 1), {
+        attrs: [
+          ['class', opts.permalinkClass],
+          ['href', opts.permalinkHref(slug, state)],
+        ],
+      }),
+      Object.assign(new state.Token('html_block', '', 0), {
+        content:
+          '<span aria-label="Direct link" class="header-anchor__symbol">#</span>',
+      }),
+      new state.Token('link_close', 'a', -1),
+    ]
+    if (opts.permalinkSpace) {
+      linkTokens[position[!opts.permalinkBefore]](space())
+    }
+    state.tokens[idx + 1].children[position[opts.permalinkBefore]](
+      ...linkTokens
+    )
+  }
   eleventyConfig.setLibrary(
     'md',
-    markdownIt({ html: true }).use(markdownItAnchor)
+    markdownIt({ html: true }).use(markdownItAnchor, {
+      permalink: true,
+      renderPermalink,
+    })
   )
   eleventyConfig.addPassthroughCopy({ 'src/docs/assets': 'assets' })
 
+  // Custom short codes
   eleventyConfig.addShortcode('tokens-colors', function () {
     let output = ''
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -143,8 +143,9 @@ makes it hard to purge unused CSS; hense we depend on namespacing.
     }
   }
   ```
-  It applies the CSS class `ld-button` to its root element. Now the consuming developer can decide   on either using the WebComponent `<ld-button>Submit</ld-button>` or the CSS class directly
-  `<button class="ld-button">Submit</ld-button>`.
+  It applies the CSS class `ld-button` to its root element. Now the consuming developer can decide on either using the WebComponent `<ld-button>Submit</ld-button>` or the CSS class directly `<button class="ld-button">Submit</ld-button>`.
+- When writing CSS, we follow common best practices. We try to keep the CSS specificity to a minimum, in order to simplify component customization, but we also make sure that it's not low to an extent, where styles get overwritten by other libraries' reset or normalize styles (such as Tailwind's [Preflight](https://tailwindcss.com/docs/preflight)). In other words: If you're using the CSS `:where` trick to reduce CSS speceficity to zero, make sure the properties affected are not potential candidates for reset and normalize styles.
+- Themable components should support at least one level of [theme inception](/liquid/components/ld-theme/#theme-inception).
 - In order for camelcase props to work in React based apps, we create lowercase aliases in components, which have camelcase props, by adding the `@Element()` decorator to the component, making all camelcase props mutable and calling the utility function `applyPropAliases` in the `componentWillLoad` hook: 
   ```tsx
   import { Component, h } from '@stencil/core'
@@ -172,7 +173,7 @@ makes it hard to purge unused CSS; hense we depend on namespacing.
   ```
 - We enable type checking and intelliSense for Web Component attributes by importing the autogenerated components type definitions file (src/components.d.ts) at the top of all imports in each component: 
   ```tsx
-  import '../../../components' // type definitions for type checks and intelliSense
+  import '../../components' // type definitions for type checks and intelliSense
   ```
 
 We also use [husky](https://typicode.github.io/husky/) for running Git hooks which in turn run lint tasks

diff --git a/src/docs/components/docs-main/docs-main.css b/src/docs/components/docs-main/docs-main.css
@@ -235,6 +235,7 @@
     > h4,
     > h5,
     > h6 {
+      position: relative;
       font-weight: 700;
 
       > code {
@@ -474,3 +475,46 @@
 #properties + table::after {
   content: '* required';
 }
+
+.header-anchor {
+  left: 0;
+  transform: translateX(-100%);
+  position: absolute;
+  text-align: right;
+
+  @media screen and (max-width: 48rem) {
+    left: unset;
+    position: relative;
+    width: auto;
+  }
+}
+
+.header-anchor__symbol {
+  visibility: hidden;
+  padding-right: var(--ld-sp-8);
+
+  h1:hover &,
+  h2:hover &,
+  h3:hover &,
+  h4:hover &,
+  h5:hover &,
+  h6:hover &,
+  .header-anchor:focus & {
+    visibility: visible;
+  }
+
+  @media screen and (max-width: 48rem) and (hover: none) {
+    visibility: inherit;
+    padding-right: 0;
+
+    h1:hover &,
+    h2:hover &,
+    h3:hover &,
+    h4:hover &,
+    h5:hover &,
+    h6:hover &,
+    .header-anchor:focus & {
+      visibility: inherit;
+    }
+  }
+}
diff --git a/src/docs/components/docs-toc/docs-toc.tsx b/src/docs/components/docs-toc/docs-toc.tsx
@@ -71,18 +71,20 @@ export class DocsToc {
     })
   }
 
-  componentWillLoad() {
+  componentDidRender() {
     // Generating a list of heading links
-    this.headings = Array.from(
-      document.querySelectorAll(
-        '#main > main > h1, #main > main > h2, #main > main > h3'
+    setTimeout(() => {
+      this.headings = Array.from(
+        document.querySelectorAll(
+          '#main > main > h1, #main > main > h2, #main > main > h3'
+        )
       )
-    )
 
-    // Adding an Intersection Observer
-    const links = Array.from(this.el.querySelectorAll('a'))
-    const observer = this.createObserver(links)
-    this.headings.map((heading) => observer.observe(heading))
+      // Adding an Intersection Observer
+      const links = Array.from(this.el.querySelectorAll('a'))
+      const observer = this.createObserver(links)
+      this.headings.map((heading) => observer.observe(heading))
+    })
   }
 
   render() {

diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
@@ -436,23 +436,6 @@ You can align the text inside the button using the `align-text` propperty.
 | `target`         | `target`          | The `target` attributed can be used in conjunction with the `href` attribute. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more information on the `target` attribute. | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                          | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-edit-on-github
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-button
-  docs-edit-on-github --> ld-button
-  docs-toggle-code --> ld-button
-  style ld-button fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-heading/readme.md b/src/liquid/components/ld-heading/readme.md
@@ -236,19 +236,6 @@ Here are some examples on how you can apply different colors on headings:
 | `visualLevel`        | `visual-level` | The heading style. Overrides the style inferred from the heading level.                                                                                                                                                                                                                                                                                                                                                                                                                                                   | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "b1" \| "b2" \| "b3" \| "b4" \| "b5" \| "b6" \| "xb1" \| "xb2" \| "xb3" \| "xh1" \| "xh2" \| "xh3" \| "xh4" \| "xh5" \| "xh6"` | `undefined` |
 
 
-## Dependencies
-
-### Used by
-
- - docs-nav
-
-### Graph
-```mermaid
-graph TD;
-  docs-nav --> ld-heading
-  style ld-heading fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-icon/readme.md b/src/liquid/components/ld-icon/readme.md
@@ -65,23 +65,6 @@ Liquid's icons use the [`currentColor`](https://developer.mozilla.org/en-US/docs
 |      | (optional) Custom SVG icon (only valid without name prop). |
 
 
-## Dependencies
-
-### Used by
-
- - docs-copy-to-cb
- - docs-edit-on-github
- - docs-toggle-code
-
-### Graph
-```mermaid
-graph TD;
-  docs-copy-to-cb --> ld-icon
-  docs-edit-on-github --> ld-icon
-  docs-toggle-code --> ld-icon
-  style ld-icon fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-input-message/assets/valid.svg b/src/liquid/components/ld-input-message/assets/valid.svg
diff --git a/src/liquid/components/ld-input-message/ld-input-message.css b/src/liquid/components/ld-input-message/ld-input-message.css
@@ -1,14 +1,21 @@
 .ld-input-message {
-  display: inline-grid;
-  grid-auto-flow: column;
+  display: inline-flex;
+  align-items: flex-start;
+  font: var(--ld-typo-body-s);
+  line-height: 1.5;
+}
+
+.ld-input-message--valid {
+  color: var(--ld-col-rg-default);
 }
 
 .ld-input-message--error {
   color: var(--ld-col-rr-default);
 }
 
 .ld-input-message__icon {
-  transform: translateY(0.075rem);
+  transform: translateY(0.1rem);
   margin-top: var(--ld-sp-2);
   margin-right: var(--ld-sp-6);
+  flex-shrink: 0;
 }
diff --git a/src/liquid/components/ld-input-message/ld-input-message.tsx b/src/liquid/components/ld-input-message/ld-input-message.tsx
@@ -9,7 +9,7 @@ import { Component, h, Prop, getAssetPath } from '@stencil/core'
 })
 export class LdInputMessage {
   /** Input message mode. */
-  @Prop() mode: 'error' | 'info' = 'error'
+  @Prop() mode: 'error' | 'info' | 'valid' = 'error'
 
   /**
    * This property does **not** change the visual appearance of the input message.

diff --git a/src/liquid/components/ld-input-message/readme.md b/src/liquid/components/ld-input-message/readme.md
@@ -24,6 +24,7 @@ This component is meant to be used in conjunction with the [`ld-input`](/liquid/
 
 <span class="ld-input-message ld-input-message--error">
   <svg class="ld-input-message__icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Error</title>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="#E61E50"/>
     <path d="M4.66675 4.66699L9.33341 9.33366" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     <path d="M4.66675 9.33301L9.33341 4.66634" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -41,6 +42,7 @@ This component is meant to be used in conjunction with the [`ld-input`](/liquid/
 
 <span class="ld-input-message ld-input-message--info">
   <svg class="ld-input-message__icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Info</title>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z" fill="#FFC832"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M7.18234 11.0254C6.79228 11.0254 6.48657 10.9147 6.26518 10.6933C6.0438 10.472 5.93311 10.1662 5.93311 9.77618V6.12335C5.93311 5.99685 6.0069 5.93359 6.15449 5.93359H6.89771C7.28776 5.93359 7.59348 6.04428 7.81487 6.26567C8.03625 6.48705 8.14694 6.79277 8.14694 7.18283V10.8357C8.14694 10.9622 8.07315 11.0254 7.92556 11.0254H7.18234Z" fill="#091734"/>
     <ellipse cx="6.99977" cy="3.80007" rx="1.06667" ry="1.06667" fill="#091734"/>
@@ -49,16 +51,33 @@ This component is meant to be used in conjunction with the [`ld-input`](/liquid/
 </span>
 {% endexample %}
 
+### As success message
+
+{% example %}
+<ld-input-message mode="valid">That's correct!</ld-input-message>
+
+<!-- CSS component -->
+
+<span class="ld-input-message ld-input-message--info">
+  <svg class="ld-input-message__icon" width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Valid</title>
+    <rect x="1" y="1" width="14" height="14" rx="7" fill="#01884C"/>
+    <path d="M11.1111 6.13333L7.00937 9.86666L4.88887 7.77577" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  That's correct!
+</span>
+{% endexample %}
+
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property | Attribute | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Type                | Default   |
-| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | --------- |
-| `covert` | `covert`  | This property does **not** change the visual appearance of the input message. Set this property to `true` if the message is hidden initially and change it to `false` as soon as you make the message visible again. It changes the `aria-hidden` attribute on the slot which is wrapped by an element that has an `aria-live` attribute with the value `assertive`. This means that the slot is wrapped by a so called “live region”, which is conveyed to screen readers and other assistive technology. The value “assertive” emphasizes the importance of the message and causes screen readers to interrupt their current tasks to read aloud this message. Thus the message is read aloud before the next element that received the focus is announced to the user. | `boolean`           | `false`   |
-| `mode`   | `mode`    | Input message mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `"error" \| "info"` | `'error'` |
+| Property | Attribute | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Type                           | Default   |
+| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | --------- |
+| `covert` | `covert`  | This property does **not** change the visual appearance of the input message. Set this property to `true` if the message is hidden initially and change it to `false` as soon as you make the message visible again. It changes the `aria-hidden` attribute on the slot which is wrapped by an element that has an `aria-live` attribute with the value `assertive`. This means that the slot is wrapped by a so called “live region”, which is conveyed to screen readers and other assistive technology. The value “assertive” emphasizes the importance of the message and causes screen readers to interrupt their current tasks to read aloud this message. Thus the message is read aloud before the next element that received the focus is announced to the user. | `boolean`                      | `false`   |
+| `mode`   | `mode`    | Input message mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `"error" \| "info" \| "valid"` | `'error'` |
 
 
 ----------------------------------------------