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,27 @@
+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',
+  'md',
+  'lg',
+  'xl',
+  'xxl',
+  'xxxl',
+] 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,90 @@
+.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: '';
+      }
+    }
+  }
+}
+
+.md {
+  @apply text-base;
+}
+
+.xs {
+  @apply text-xs;
+}
+
+.sm {
+  @apply text-sm;
+}
+
+.lg {
+  @apply text-lg;
+}
+
+.lg.mobile {
+  @apply text-base;
+}
+
+.xl {
+  @apply text-xl;
+}
+
+.xl.mobile {
+  @apply text-base;
+}
+
+.xxl {
+  @apply text-2xl;
+}
+
+.xxl.mobile {
+  @apply text-lg;
+}
+
+.xxxl {
+  @apply text-3xl;
+}
+
+.xxxl.mobile {
+  @apply text-lg;
+}
+
+/* Font weights */
+.thin {
+  @apply font-thin;
+}
+.extralight {
+  @apply font-extralight;
+}
+.light {
+  @apply font-light;
+}
+.normal {
+  @apply font-normal;
+}
+.semibold {
+  @apply font-semibold;
+}
+.bold {
+  @apply font-bold;
+}
+.extrabold {
+  @apply font-extrabold;
+}
+.black {
+  @apply font-black;
+}

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

@@ -0,0 +1,90 @@
+.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: '';
+      }
+    }
+  }
+}
+
+.md {
+  @apply text-base;
+}
+
+.xs {
+  @apply text-xs;
+}
+
+.sm {
+  @apply text-sm;
+}
+
+.lg {
+  @apply text-lg;
+}
+
+.lg.mobile {
+  @apply text-base;
+}
+
+.xl {
+  @apply text-xl;
+}
+
+.xl.mobile {
+  @apply text-base;
+}
+
+.xxl {
+  @apply text-2xl;
+}
+
+.xxl.mobile {
+  @apply text-lg;
+}
+
+.xxxl {
+  @apply text-3xl;
+}
+
+.xxxl.mobile {
+  @apply text-lg;
+}
+
+/* Font weights */
+.thin {
+  @apply font-thin;
+}
+.extralight {
+  @apply font-extralight;
+}
+.light {
+  @apply font-light;
+}
+.normal {
+  @apply font-normal;
+}
+.semibold {
+  @apply font-semibold;
+}
+.bold {
+  @apply font-bold;
+}
+.extrabold {
+  @apply font-extrabold;
+}
+.black {
+  @apply font-black;
+}