feat: add ld-typo component

emdgroup-liquid · Nov 2, 2021 · 275a908 · 275a908
1 parent 7e6d98f
commit 275a908
Show file tree

Hide file tree

Showing 8 changed files with 729 additions and 0 deletions.
diff --git a/src/liquid/components/ld-typo/ld-typo.css b/src/liquid/components/ld-typo/ld-typo.css
@@ -0,0 +1,115 @@
+:host {
+  display: block;
+
+  /* Reset within the shadow DOM. */
+  .ld-typo {
+    margin: 0;
+  }
+}
+
+.ld-typo--body-m {
+  font: var(--ld-typo-body-m);
+}
+.ld-typo--body-l {
+  font: var(--ld-typo-body-l);
+}
+.ld-typo--body-s {
+  font: var(--ld-typo-body-s);
+}
+.ld-typo--body-xl {
+  font: var(--ld-typo-body-xl);
+}
+.ld-typo--body-xs {
+  font: var(--ld-typo-body-xs);
+}
+
+.ld-typo--h1 {
+  font: var(--ld-typo-h1);
+  font-weight: 700;
+}
+.ld-typo--h2 {
+  font: var(--ld-typo-h2);
+  font-weight: 700;
+}
+.ld-typo--h3 {
+  font: var(--ld-typo-h3);
+  font-weight: 700;
+}
+.ld-typo--h4 {
+  font: var(--ld-typo-h4);
+  font-weight: 700;
+}
+.ld-typo--h5 {
+  font: var(--ld-typo-h5);
+  font-weight: 700;
+}
+.ld-typo--h6 {
+  font: var(--ld-typo-h6);
+  font-weight: 700;
+}
+
+.ld-typo--b1 {
+  font: var(--ld-typo-b1);
+  text-transform: uppercase;
+}
+.ld-typo--b2 {
+  font: var(--ld-typo-b2);
+  text-transform: uppercase;
+}
+.ld-typo--b3 {
+  font: var(--ld-typo-b3);
+  text-transform: uppercase;
+}
+.ld-typo--b4 {
+  font: var(--ld-typo-b4);
+  text-transform: uppercase;
+}
+.ld-typo--b5 {
+  font: var(--ld-typo-b5);
+  text-transform: uppercase;
+}
+.ld-typo--b6 {
+  font: var(--ld-typo-b6);
+  text-transform: uppercase;
+}
+
+.ld-typo--xb1 {
+  font: var(--ld-typo-xb1);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.ld-typo--xb2 {
+  font: var(--ld-typo-xb2);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.ld-typo--xb3 {
+  font: var(--ld-typo-xb3);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.ld-typo--xh1 {
+  font: var(--ld-typo-xh1);
+  font-weight: 700;
+}
+.ld-typo--xh2 {
+  font: var(--ld-typo-xh2);
+  font-weight: 700;
+}
+.ld-typo--xh3 {
+  font: var(--ld-typo-xh3);
+  font-weight: 700;
+}
+.ld-typo--xh4 {
+  font: var(--ld-typo-xh4);
+  font-weight: 700;
+}
+.ld-typo--xh5 {
+  font: var(--ld-typo-xh5);
+  font-weight: 700;
+}
+.ld-typo--xh6 {
+  font: var(--ld-typo-xh6);
+  font-weight: 700;
+}
diff --git a/src/liquid/components/ld-typo/ld-typo.global.css b/src/liquid/components/ld-typo/ld-typo.global.css
@@ -0,0 +1,29 @@
+ld-typo[variant*='b']:not([variant*='body']),
+.ld-typo--b1,
+.ld-typo--b2,
+.ld-typo--b3,
+.ld-typo--b4,
+.ld-typo--b5,
+.ld-typo--b6,
+.ld-typo--xb1,
+.ld-typo--xb2,
+.ld-typo--xb3 {
+  :where(.ld-theme-ocean &),
+  :where([class*='ld-theme'] .ld-theme-ocean &) {
+    color: var(--ld-col-rb-default);
+  }
+
+  :where(.ld-theme-solvent &),
+  :where([class*='ld-theme'] .ld-theme-solvent &),
+  :where(.ld-theme-bubblegum &),
+  :where([class*='ld-theme'] .ld-theme-bubblegum &),
+  :where(.ld-theme-shake &),
+  :where([class*='ld-theme'] .ld-theme-shake &) {
+    color: var(--ld-col-rp-default);
+  }
+
+  :where(.ld-theme-tea &),
+  :where([class*='ld-theme'] .ld-theme-tea &) {
+    color: var(--ld-col-rg-default);
+  }
+}
diff --git a/src/liquid/components/ld-typo/ld-typo.tsx b/src/liquid/components/ld-typo/ld-typo.tsx
@@ -0,0 +1,120 @@
+import { Component, Element, h, Prop } from '@stencil/core'
+import { cloneAttributes } from '../../utils/cloneAttributes'
+
+/**
+ * @virtualProp ref - reference to component
+ * @virtualProp {string | number} key - for tracking the node's identity when working with lists
+ * @part tag - Actual tag
+ */
+@Component({
+  tag: 'ld-typo',
+  styleUrl: 'ld-typo.css',
+  shadow: true,
+})
+export class LdTypo {
+  @Element() el: HTMLElement
+
+  private root: HTMLElement
+
+  /** The rendered HTML tag. Overrides tag inferred from the variant. */
+  @Prop() tag: string
+
+  /** The font style. Every variant has a default tag that it renders with. */
+  @Prop({ mutable: true }) variant!:
+    | 'body-xs'
+    | 'body-s'
+    | 'body-m'
+    | 'body-l'
+    | 'body-xl'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'b1'
+    | 'b2'
+    | 'b3'
+    | 'b4'
+    | 'b5'
+    | 'b6'
+    | 'xb1'
+    | 'xb2'
+    | 'xb3'
+    | 'xh1'
+    | 'xh2'
+    | 'xh3'
+    | 'xh4'
+    | 'xh5'
+    | 'xh6'
+
+  /**
+   * Since b* and xb* variants are uppercase, screen readers need to be served a
+   * (non-uppercase) aria-label (otherwise they will read out the heading letter by letter).
+   * If you're using a b* or xb* variant, an aria-label will be
+   * set automatically on the element. The component will use the inner HTML for the
+   * label implicitly. If you want to set an aria-label explicitly (such as when you have
+   * inner HTML that should not be part of the label), you can use this property.
+   */
+  @Prop() ariaLabel: string
+
+  private applyAriaLabel() {
+    const isBrandHeading =
+      this.variant.includes('b') && !this.variant.includes('body')
+    if (isBrandHeading) {
+      this.root.setAttribute(
+        'aria-label',
+        this.ariaLabel || this.el.innerHTML.trim()
+      )
+    }
+  }
+
+  private getDefaultTag = () =>
+    ({
+      'body-xs': 'p',
+      'body-s': 'p',
+      'body-m': 'p',
+      'body-l': 'p',
+      'body-xl': 'p',
+      h1: 'h1',
+      h2: 'h2',
+      h3: 'h3',
+      h4: 'h4',
+      h5: 'h5',
+      h6: 'h6',
+      b1: 'h1',
+      b2: 'h2',
+      b3: 'h3',
+      b4: 'h4',
+      b5: 'h5',
+      b6: 'h6',
+      xb1: 'h1',
+      xb2: 'h2',
+      xb3: 'h3',
+      xh1: 'h1',
+      xh2: 'h2',
+      xh3: 'h3',
+      xh4: 'h4',
+      xh5: 'h5',
+      xh6: 'h6',
+    }[this.variant] ?? 'p')
+
+  componentDidRender() {
+    this.applyAriaLabel()
+  }
+
+  render() {
+    const HTag = this.tag || this.getDefaultTag()
+
+    return (
+      <HTag
+        class={`ld-typo ld-typo--${this.variant}`}
+        part="tag"
+        ref={(ref: HTMLElement) => (this.root = ref)}
+        {...cloneAttributes(this.el)}
+      >
+        <slot></slot>
+      </HTag>
+    )
+  }
+}