@salesforcedevs/docs-components 0.28.0 → 0.28.1

package/lwc.config.json

@@ -9,6 +9,7 @@
         "doc/content",
         "doc/header",
         "doc/heading",
+        "doc/headingAnchor",
         "doc/phase"
     ]
 }

package/package.json

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

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

@@ -16,7 +16,7 @@ h6 {
     line-height: var(--dx-g-text-4xl);
 }
 
-.display-3 doc-heading-anchor {
+.display-3 doc-heading-content {
     --doc-c-heading-anchor-button-bottom: 8px;
 }
 
@@ -27,7 +27,7 @@ h6 {
     line-height: var(--dx-g-spacing-lg);
 }
 
-.display-4 doc-heading-anchor {
+.display-4 doc-heading-content {
     --doc-c-heading-anchor-button-bottom: -3px;
 }
 
@@ -38,7 +38,7 @@ h6 {
     line-height: var(--dx-g-spacing-lg);
 }
 
-.display-5 doc-heading-anchor {
+.display-5 doc-heading-content {
     --doc-c-heading-anchor-button-bottom: -4px;
 }
 
@@ -49,6 +49,6 @@ h6 {
     line-height: var(--dx-g-spacing-mlg);
 }
 
-.display-6 doc-heading-anchor {
+.display-6 doc-heading-content {
     --doc-c-heading-anchor-button-bottom: -6px;
 }

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

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

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

@@ -1,55 +1,33 @@
 @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;
 }
 
-dx-icon {
-    --dx-c-icon-size: var(--doc-c-heading-anchor-icon-size);
+button:hover {
+    opacity: 1;
+    outline: none;
 }
 
-span:last-of-type {
-    padding-right: var(--dx-g-spacing-xs);
+button:focus {
+    opacity: 1;
+    outline: none;
 }
 
-.nowrap {
-    white-space: nowrap;
+button:focus-visible {
+    border-radius: 4px;
+    border: 2px solid rgb(11, 92, 171);
 }
 
-button:focus {
-    box-shadow: 0 0 0 2px rgb(11 92 171);
+.icon-wrapper {
+    height: 32px;
+    width: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-button:focus,
-button:hover,
-span:hover dx-tooltip button,
-span:hover ~ span dx-tooltip button {
-    opacity: 1;
-    outline: none;
+.icon-container {
+    --dx-c-icon-size: 18px;
 }

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

@@ -1,19 +1,19 @@
 <template>
-    <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>
+    <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>

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

@@ -1,42 +1,43 @@
 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 hash: string | null = null;
+    @api urlText: string = "";
 
     label: string = "Copy link to clipboard";
-    timeout: number | null = null;
 
-    private get titleToWrap() {
-        return this.title.substring(0, this.title.lastIndexOf(" "));
+    private async onIconClick() {
+        await this.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);
-        }
-
+    private async iconClickHandler() {
         this.label = "Copied";
-        this.timeout = window.setTimeout(() => {
+        setTimeout(() => {
             this.label = "Copy link to clipboard";
         }, 2000);
 
         try {
-            if (this.title && this.hash) {
+            if (this.title && this.urlText) {
                 const [hostUrl] = window.location.href.split("#");
-                const url = `${hostUrl}#${this.hash}`;
+                const url = `${hostUrl}#${this.urlText}`;
                 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:
+        }
+    }
 }

package/src/modules/doc/headingContent/headingContent.css

@@ -0,0 +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;
+}
+
+dx-icon {
+    --dx-c-icon-size: var(--doc-c-heading-anchor-icon-size);
+}
+
+span:last-of-type {
+    padding-right: var(--dx-g-spacing-xs);
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+button:focus {
+    box-shadow: 0 0 0 2px rgb(11 92 171);
+}
+
+button:focus,
+button:hover,
+span:hover dx-tooltip button,
+span:hover ~ span dx-tooltip button {
+    opacity: 1;
+    outline: none;
+}

package/src/modules/doc/headingContent/headingContent.html

@@ -0,0 +1,19 @@
+<template>
+    <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/headingContent/headingContent.ts

@@ -0,0 +1,42 @@
+import { LightningElement, api } from "lwc";
+
+export default class HeadingContent extends LightningElement {
+    @api title: string = "";
+    @api hash: string | null = null;
+
+    label: string = "Copy link to clipboard";
+    timeout: number | null = null;
+
+    private get titleToWrap(): string {
+        return this.title.substring(0, this.title.lastIndexOf(" "));
+    }
+
+    private get needsSpace(): boolean {
+        return this.titleToWrap.length > 0;
+    }
+
+    private get titleNoWrap(): string {
+        return this.title.substring(this.title.lastIndexOf(" ") + 1);
+    }
+
+    private async copy() {
+        if (this.timeout) {
+            window.clearTimeout(this.timeout);
+        }
+
+        this.label = "Copied";
+        this.timeout = window.setTimeout(() => {
+            this.label = "Copy link to clipboard";
+        }, 2000);
+
+        try {
+            if (this.title && this.hash) {
+                const [hostUrl] = window.location.href.split("#");
+                const url = `${hostUrl}#${this.hash}`;
+                await navigator.clipboard.writeText(url);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+}