OUTLINE-167: outline-core-heading: Heading Component

packages/outline-core-heading/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @phase2/outline-heading
+
+## 0.1.2
+
+### Patch Changes
+
+- Update to @phase2/outline-core packages.
+
+## 0.1.1
+
+### Patch Changes
+
+- Bumped versions with updated package contents.

packages/outline-core-heading/README.md

@@ -0,0 +1,17 @@
+# outline-heading
+
+The Heading component.
+
+## Properties
+
+| Property     | Attribute     | Type                                             | Default | Description                                      |
+|--------------|---------------|--------------------------------------------------|---------|--------------------------------------------------|
+| `level`      | `level`       | `string \| undefined`                            | "h2"    | The tag to apply: h1 \| h2 \| h3 \| h4 \| h5 \| h6 |
+| `levelSize`  | `level-size`  | `"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl"` |         | The heading level size to apply. Optional override to default styles for a given level |
+| `levelStyle` | `level-style` | `"medium" \| "black" \| "thin" \| "extralight" \| "light" \| "normal" \| "semibold" \| "bold" \| "extrabold"` | "bold"  | The heading level style to apply. Optional override to default styles for a given level |
+
+## Slots
+
+| Name          |
+|---------------|
+| `defaultSlot` |

packages/outline-core-heading/index.ts

@@ -0,0 +1,6 @@
+export { OutlineCoreHeading } from './src/outline-core-heading';
+export type {
+  AllowedHeadingLevels,
+  AllowedHeadingSizes,
+} from './src/config';
+export { HeadingLevels, HeadingSizes, HeadingStyles } from './src/config';

packages/outline-core-heading/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@phase2/outline-core-heading",
+  "version": "0.1.2",
+  "description": "The Outline Components for the web heading component",
+  "keywords": [
+    "outline components",
+    "outline design",
+    "heading"
+  ],
+  "main": "index.ts",
+  "types": "index.ts",
+  "typings": "index.d.ts",
+  "files": [
+    "/dist/",
+    "/src/",
+    "!/dist/tsconfig.build.tsbuildinfo"
+  ],
+  "author": "Phase2 Technology",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phase2/outline.git",
+    "directory": "packages/outline-heading"
+  },
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "package": "yarn publish"
+  },
+  "dependencies": {
+    "@phase2/outline-core": "^0.1.9",
+    "lit": "^2.3.1",
+    "tslib": "^2.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./index.ts"
+  }
+}

packages/outline-core-heading/src/config.ts

@@ -0,0 +1,33 @@
+export const HeadingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', undefined];
+export type AllowedHeadingLevels = typeof HeadingLevels[number];
+
+// Updated to limit the allowed values to the set we want to be selectable in Storybook.
+export const HeadingSizes = [
+  'xs',
+  'sm',
+  'base',
+  'lg',
+  'xl',
+  '2xl',
+  '3xl',
+  '4xl',
+  '5xl',
+  '6xl',
+  '7xl',
+  '8xl',
+  '9xl',
+] as const;
+export type AllowedHeadingSizes = typeof HeadingSizes[number];
+
+export const HeadingWeights = [
+  'thin',
+  'extralight',
+  'light',
+  'normal',
+  'medium',
+  'semibold',
+  'bold',
+  'extrabold',
+  'black',
+] as const;
+export type AllowedHeadingWeights = typeof HeadingWeights[number];

packages/outline-core-heading/src/outline-core-heading.css

@@ -0,0 +1,147 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  all: unset;
+}
+
+.clickable-card {
+  /* Required to allow the functionallity of full card being clickable  */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    a {
+      &:hover {
+        text-decoration: none;
+      }
+      &:after {
+        position: absolute;
+        inset: 0;
+        content: '';
+      }
+    }
+  }
+}
+
+.outline-text--base {
+  @apply text-base;
+}
+
+.outline-text--xs {
+  @apply text-xs ;
+}
+
+.outline-text--sm {
+  @apply text-sm ;
+}
+
+.outline-text--lg {
+  @apply text-lg ;
+}
+
+.outline-text--lg.mobile {
+  @apply text-base ;
+}
+
+.outline-text--xl {
+  @apply text-xl ;
+}
+
+.outline-text--xl.mobile {
+  @apply text-base ;
+}
+
+.outline-text--2xl {
+  @apply text-2xl ;
+}
+
+.outline-text--2xl.mobile {
+  @apply text-lg ;
+}
+
+.outline-text--3xl {
+  @apply text-3xl ;
+}
+
+.outline-text--3xl.mobile {
+  @apply text-lg ;
+}
+
+.outline-text--4xl {
+  @apply text-4xl ;
+}
+
+.outline-text--4xl.mobile {
+  @apply text-xl ;
+}
+
+.outline-text--5xl {
+  @apply text-5xl ;
+}
+
+.outline-text--5xl.mobile {
+  @apply text-2xl ;
+}
+
+.outline-text--6xl {
+  @apply text-6xl ;
+}
+
+.outline-text--6xl.mobile {
+  @apply text-3xl ;
+}
+
+.outline-text--7xl {
+  @apply text-7xl ;
+}
+
+.outline-text--7xl.mobile {
+  @apply text-4xl ;
+}
+
+.outline-text--8xl {
+  @apply text-8xl ;
+}
+
+.outline-text--8xl.mobile {
+  @apply text-5xl ;
+}
+
+.outline-text--9xl {
+  @apply text-9xl ;
+}
+
+.outline-text--9xl.mobile {
+  @apply text-6xl ;
+}
+
+/* Font weights */
+.outline-font--thin {
+  @apply font-thin;
+}
+.outline-font--extralight {
+  @apply font-extralight;
+}
+.outline-font--light {
+  @apply font-light;
+}
+.outline-font--normal {
+  @apply font-normal;
+}
+.outline-font--semibold {
+  @apply font-semibold;
+}
+.outline-font--bold {
+  @apply font-bold;
+}
+.outline-font--extrabold {
+  @apply font-extrabold;
+}
+.outline-font--black {
+  @apply font-black;
+}

packages/outline-core-heading/src/outline-core-heading.ts

@@ -0,0 +1,93 @@
+/**
+ * The Heading component.
+ * @element outline-core-heading
+ * @slot defaultSlot
+ */
+import { TemplateResult } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property } from 'lit/decorators.js';
+
+import { OutlineElement } from '@phase2/outline-core';
+
+import componentStyles from './outline-core-heading.css.lit';
+import {
+  AllowedHeadingLevels,
+  AllowedHeadingSizes,
+  AllowedHeadingWeights,
+} from './config';
+
+@customElement('outline-core-heading')
+export class OutlineCoreHeading extends OutlineElement {
+
+  static styles = [componentStyles];
+
+  /**
+   * The tag to apply: h1 | h2 | h3 | h4 | h5 | h6
+   */
+  @property({ type: String, reflect: true, attribute: 'level' })
+  level: AllowedHeadingLevels = 'h2';
+
+  /**
+   * The size of the heading.
+   * @type {AllowedHeadingSizes}
+   */
+  @property({ type: String, reflect: true, attribute: 'size' })
+  size: AllowedHeadingSizes;
+
+  /**
+   * The weight of the heading.
+   * @type {AllowedHeadingWeights}
+   */
+  @property({ type: String, reflect: true, attribute: 'weight' })
+  weight: AllowedHeadingWeights = 'bold';
+
+  /**
+   * Additional CSS classes to apply to the heading element.
+   * @type {string}
+   */
+  @property({ type: String, reflect: true, attribute: 'additional-classes' })
+  additionalClasses: string;
+
+  /**
+   * Whether the heading should be displayed as a clickable card.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'clickable-card' })
+  clickableCard = false;
+
+  generateHeading(classes: { [key: string]: boolean | string }): TemplateResult {
+    return html`
+      <${unsafeStatic(this.level as string)} class=${classMap(classes)}>
+        <slot></slot>
+      </${unsafeStatic(this.level as string)}>
+    `;
+  }
+
+  fullMarkupInSlot(): TemplateResult {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  render(): TemplateResult {
+    const classes = {
+      [`outline-text--${this.size}`]: this.size,
+      [`outline-font--${this.weight}`]: true,
+      [`${this.additionalClasses}`]: this.additionalClasses,
+      'clickable-card': !!this.clickableCard,
+    };
+
+    if (this.level) {
+      return this.generateHeading(classes);
+    } else {
+      return this.fullMarkupInSlot();
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'outline-core-heading': OutlineCoreHeading;
+  }
+}

packages/outline-core-heading/src/test/outline-core-heading.test.ts

@@ -0,0 +1,26 @@
+import { OutlineCoreHeading } from '../outline-core-heading';
+import { fixture, html, assert } from '@open-wc/testing';
+
+describe('outline-heading', () => {
+  it('is defined', () => {
+    const el = document.createElement('outline-heading');
+    assert.instanceOf(el, OutlineCoreHeading);
+  });
+
+  it('renders with default values', async () => {
+    const el = await fixture(html`<outline-heading></outline-heading>`);
+    assert.shadowDom.equal(
+      el,
+      `
+      <h2 class="outline-font--bold outline-text">
+        <slot></slot>
+      </h2>
+    `
+    );
+  });
+
+  it('renders with slotted content', async () => {
+    const el = await fixture(html`<outline-heading>Test</outline-heading>`);
+    assert.lightDom.equal(el, `Test`);
+  });
+});

packages/outline-core-heading/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./dist"
+  },
+  "include": ["index.ts", "src/**/*", "tests/**/*"],
+  "references": [{ "path": "../outline-core/tsconfig.build.json" }]
+}