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

packages/components/outline-core-heading/README.md

@@ -0,0 +1,17 @@
+# outline-core-heading
+
+## Properties
+
+| Property            | Attribute            | Type                    | Description                                      |
+|---------------------|----------------------|-------------------------|--------------------------------------------------|
+| `additionalClasses` | `additional-classes` | `string`                | Additional CSS classes to apply to the heading element. |
+| `level`             | `level`              | `string \| undefined`   | The tag to apply: h1 \| h2 \| h3 \| h4 \| h5 \| h6 |
+| `size`              | `size`               | `AllowedHeadingSizes`   | The size of the heading.                         |
+| `weight`            | `weight`             | `AllowedHeadingWeights` | The weight of the heading.                       |
+
+## Methods
+
+| Method             | Type                                             |
+|--------------------|--------------------------------------------------|
+| `fullMarkupInSlot` | `(classes: { [key: string]: string \| boolean; }): TemplateResult<ResultType>` |
+| `generateHeading`  | `(classes: { [key: string]: string \| boolean; }): TemplateResult<ResultType>` |

packages/components/outline-core-heading/index.ts

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

packages/components/outline-core-heading/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@phase2/outline-core-heading",
+  "version": "0.0.0",
+  "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-core-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/components/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/components/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/components/outline-core-heading/src/outline-core-heading.ts

@@ -0,0 +1,90 @@
+/**
+ * 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;
+
+  /**
+   * 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;
+
+  /**
+   * Additional CSS classes to apply to the heading element.
+   * @type {string}
+   */
+  @property({ type: String, reflect: true, attribute: 'additional-classes' })
+  additionalClasses: string;
+
+  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(classes: {
+    [key: string]: boolean | string;
+  }): TemplateResult {
+    return html`
+
+      <slot class=${classMap(classes)}></slot>
+
+    `;
+  }
+
+  render(): TemplateResult {
+    const classes = {
+      [`outline-text--${this.size}`]: true,
+      [`outline-font--${this.weight}`]: true,
+      [`${this.additionalClasses}`]: this.additionalClasses,
+    };
+
+    if (this.level) {
+      return this.generateHeading(classes);
+    } else {
+      return this.fullMarkupInSlot(classes);
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'outline-core-heading': OutlineCoreHeading;
+  }
+}

packages/components/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/components/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" }]
+}