@salesforcedevs/docs-components 0.26.3 → 0.28.0

package/lwc.config.json

@@ -8,7 +8,7 @@
         "doc/contentMedia",
         "doc/content",
         "doc/header",
-        "doc/headingAnchor",
+        "doc/heading",
         "doc/phase"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.26.3",
+    "version": "0.28.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -10,5 +10,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "9c94c66a063751c3ada92ae0dbbded0b999feb98"
+    "gitHead": "e7bf549e93170dd173ff7419b302674d0faa0b7a"
 }

package/src/modules/doc/heading/heading.css

@@ -0,0 +1,54 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+}
+
+.display-3 {
+    margin: 0 0 24px 0;
+    font-size: var(--dx-g-text-3xl);
+    letter-spacing: -0.85px;
+    line-height: var(--dx-g-text-4xl);
+}
+
+.display-3 doc-heading-anchor {
+    --doc-c-heading-anchor-button-bottom: 8px;
+}
+
+.display-4 {
+    margin: var(--dx-g-spacing-xl) 0 var(--dx-g-spacing-md) 0;
+    font-size: var(--dx-g-text-xl);
+    letter-spacing: -0.1px;
+    line-height: var(--dx-g-spacing-lg);
+}
+
+.display-4 doc-heading-anchor {
+    --doc-c-heading-anchor-button-bottom: -3px;
+}
+
+.display-5 {
+    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-md) 0;
+    font-size: var(--dx-g-text-lg);
+    letter-spacing: -0.1px;
+    line-height: var(--dx-g-spacing-lg);
+}
+
+.display-5 doc-heading-anchor {
+    --doc-c-heading-anchor-button-bottom: -4px;
+}
+
+.display-6 {
+    margin: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-sm) 0;
+    font-size: var(--dx-g-text-base);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-mlg);
+}
+
+.display-6 doc-heading-anchor {
+    --doc-c-heading-anchor-button-bottom: -6px;
+}

package/src/modules/doc/heading/heading.html

@@ -0,0 +1,14 @@
+<template>
+    <h1 class={className} if:true={isAriaLevelOne}>
+        <doc-heading-anchor title={title} hash={hash}></doc-heading-anchor>
+    </h1>
+    <h2 class={className} if:true={isAriaLevelTwo}>
+        <doc-heading-anchor title={title} hash={hash}></doc-heading-anchor>
+    </h2>
+    <h3 class={className} if:true={isAriaLevelThree}>
+        <doc-heading-anchor title={title} hash={hash}></doc-heading-anchor>
+    </h3>
+    <h4 class={className} if:true={isAriaLevelFour}>
+        <doc-heading-anchor title={title} hash={hash}></doc-heading-anchor>
+    </h4>
+</template>

package/src/modules/doc/heading/heading.ts

@@ -0,0 +1,65 @@
+import { LightningElement, api } from "lwc";
+
+export const displayLevels = ["3", "4", "5", "6"];
+
+export const ariaLevels = ["1", "2", "3", "4"];
+
+export const ariaDisplayLevels: { [key: string]: string } = {
+    "1": "3",
+    "2": "4",
+    "3": "5",
+    "4": "6"
+};
+
+export default class Heading extends LightningElement {
+    @api title: string = "";
+    @api hash: string | null = null;
+
+    @api
+    private get ariaLevel(): string {
+        return this._ariaLevel || "2";
+    }
+    private set ariaLevel(value: string | null) {
+        if (value && !ariaLevels.includes(value)) {
+            console.error(`Invalid aria-level: "${value}"`);
+            return;
+        }
+        if (value) {
+            this._ariaLevel = value;
+        }
+    }
+
+    @api
+    private get displayLevel(): string {
+        return this._displayLevel || ariaDisplayLevels[this.ariaLevel];
+    }
+    private set displayLevel(value: string | null) {
+        if (value && !displayLevels.includes(value)) {
+            console.error(`Invalid display-level: "${value}"`);
+            value = null;
+        }
+        if (value) {
+            this._displayLevel = value;
+        }
+    }
+
+    private _ariaLevel: string | null = null;
+    private _displayLevel: string | null = null;
+
+    private get isAriaLevelOne(): boolean {
+        return this.ariaLevel === "1";
+    }
+    private get isAriaLevelTwo(): boolean {
+        return this.ariaLevel === "2";
+    }
+    private get isAriaLevelThree(): boolean {
+        return this.ariaLevel === "3";
+    }
+    private get isAriaLevelFour(): boolean {
+        return this.ariaLevel === "4";
+    }
+
+    private get className(): string {
+        return `display-${this.displayLevel}`;
+    }
+}

package/src/modules/doc/headingAnchor/headingAnchor.css

@@ -1,33 +1,55 @@
 @import "helpers/reset";
 
+:host {
+    --doc-c-heading-anchor-button-bottom: 0;
+    --doc-c-heading-anchor-icon-size: 18px;
+    --button-size: var(--dx-g-spacing-xl);
+}
+
+dx-tooltip {
+    line-height: var(--button-size);
+}
+
+.button-container {
+    height: 100%;
+    margin-right: calc(var(--dx-g-spacing-xl) - 4px);
+    position: relative;
+}
+
 button {
+    position: absolute;
+    bottom: var(--doc-c-heading-anchor-button-bottom);
+    left: 0;
     opacity: 0;
     color: rgb(11, 92, 171);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--button-size);
+    width: var(--button-size);
+    border-radius: 4px;
 }
 
-button:hover {
-    opacity: 1;
-    outline: none;
+dx-icon {
+    --dx-c-icon-size: var(--doc-c-heading-anchor-icon-size);
 }
 
-button:focus {
-    opacity: 1;
-    outline: none;
+span:last-of-type {
+    padding-right: var(--dx-g-spacing-xs);
 }
 
-button:focus-visible {
-    border-radius: 4px;
-    border: 2px solid rgb(11, 92, 171);
+.nowrap {
+    white-space: nowrap;
 }
 
-.icon-wrapper {
-    height: 32px;
-    width: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+button:focus {
+    box-shadow: 0 0 0 2px rgb(11 92 171);
 }
 
-.icon-container {
-    --dx-c-icon-size: 18px;
+button:focus,
+button:hover,
+span:hover dx-tooltip button,
+span:hover ~ span dx-tooltip button {
+    opacity: 1;
+    outline: none;
 }

package/src/modules/doc/headingAnchor/headingAnchor.html

@@ -1,19 +1,19 @@
 <template>
-    <dx-tooltip placement="top" label={label}>
-        <button
-            onclick={onIconClick}
-            aria-label={ariaLabel}
-            onkeydown={onKeyDown}
-            part="headingAnchorIcon"
-        >
-            <div class="icon-wrapper">
-                <dx-icon
-                    sprite={iconSprite}
-                    size={iconSize}
-                    symbol={iconSymbol}
-                    class="icon-container"
-                ></dx-icon>
-            </div>
-        </button>
-    </dx-tooltip>
+    <template if:false={hash}>{title}</template>
+    <template if:true={hash}>
+        <template if:true={needsSpace}>
+            <span>{titleToWrap}</span>
+            <span>&#32;</span>
+        </template>
+        <span class="nowrap">
+            {titleNoWrap}&nbsp;
+            <dx-tooltip placement="top" label={label}>
+                <span class="button-container">
+                    <button onclick={copy} aria-label="copy">
+                        <dx-icon size="override" symbol="link"></dx-icon>
+                    </button>
+                </span>
+            </dx-tooltip>
+        </span>
+    </template>
 </template>

package/src/modules/doc/headingAnchor/headingAnchor.ts

@@ -1,43 +1,42 @@
 import { LightningElement, api } from "lwc";
-import { IconSprite, IconSize, IconSymbol } from "typings/custom";
 
 export default class HeadingAnchor extends LightningElement {
-    @api ariaLabel: string = "copy";
-    @api iconSize?: IconSize = "override";
-    @api iconSprite?: IconSprite = "utility";
-    @api iconSymbol?: IconSymbol;
     @api title: string = "";
-    @api urlText: string = "";
+    @api hash: string | null = null;
 
     label: string = "Copy link to clipboard";
+    timeout: number | null = null;
 
-    private async onIconClick() {
-        await this.iconClickHandler();
+    private get titleToWrap() {
+        return this.title.substring(0, this.title.lastIndexOf(" "));
     }
 
-    private async iconClickHandler() {
+    private get needsSpace() {
+        return this.titleToWrap.length > 0;
+    }
+
+    private get titleNoWrap() {
+        return this.title.substring(this.title.lastIndexOf(" ") + 1);
+    }
+
+    private async copy() {
+        if (this.timeout) {
+            window.clearTimeout(this.timeout);
+        }
+
         this.label = "Copied";
-        setTimeout(() => {
+        this.timeout = window.setTimeout(() => {
             this.label = "Copy link to clipboard";
         }, 2000);
 
         try {
-            if (this.title && this.urlText) {
+            if (this.title && this.hash) {
                 const [hostUrl] = window.location.href.split("#");
-                const url = `${hostUrl}#${this.urlText}`;
+                const url = `${hostUrl}#${this.hash}`;
                 await navigator.clipboard.writeText(url);
             }
         } catch (error) {
             console.error(error);
         }
     }
-
-    private async onKeyDown(e: KeyboardEvent) {
-        switch (e.key) {
-            case "Enter":
-                await this.iconClickHandler();
-                break;
-            default:
-        }
-    }
 }