@salesforcedevs/dx-components 0.0.0-alpha.0

package/src/modules/dx/toc/toc.css

@@ -0,0 +1,106 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-toc-width: 284px;
+}
+
+.toc {
+    display: flex;
+    flex-direction: row-reverse;
+    width: var(--dx-c-toc-width);
+    max-width: 100%;
+    word-break: break-word;
+}
+
+.toc_collapsed {
+    width: var(--dx-g-spacing-xl);
+    margin-left: var(--dx-g-spacing-xl);
+}
+
+.toc_content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    transition: var(--dx-g-transition-hue-1x);
+    padding-bottom: var(--dx-g-spacing-smd);
+}
+
+.state-hide-content {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.toc_title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.dx-text-heading-5 {
+    padding-top: var(--dx-g-spacing-sm);
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.toggle-button.collapsed {
+    --dx-c-button-opacity: 1;
+
+    transform: rotate(180deg);
+}
+
+.toggle-button {
+    width: var(--dx-g-icon-size-xl);
+    height: var(--dx-g-icon-size-xl);
+
+    --dx-c-button-opacity: 0;
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background: white;
+    --dx-c-button-custom-border: white;
+    --dx-c-button-custom-color-hover: white;
+    --dx-c-button-custom-background-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-border-hover: var(--dx-g-blue-vibrant-50);
+}
+
+.toggle-button:hover {
+    --dx-c-button-opacity: 1;
+}
+
+.content-button {
+    line-height: var(--dx-g-text-lg);
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    text-align: left;
+    padding: var(--dx-g-spacing-xs);
+    padding-left: 11px;
+    border-left: 3px solid transparent;
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.content-button.selected {
+    border-color: var(--dx-g-blue-vibrant-50);
+    color: var(--dx-g-blue-vibrant-50);
+    font-weight: var(--dx-g-font-bold);
+}
+
+.content-button::after {
+    content: attr(data-text);
+    display: block;
+    font-weight: var(--dx-g-font-bold);
+    height: 0;
+    overflow: hidden;
+    pointer-events: none;
+    user-select: none;
+    visibility: hidden;
+}
+
+.content-button:not(.selected):hover {
+    color: var(--dx-g-blue-vibrant-40);
+    border-color: var(--dx-g-blue-vibrant-40);
+}
+
+.toc:hover .toggle-button {
+    --dx-c-button-opacity: 1;
+}

package/src/modules/dx/toc/toc.html

@@ -0,0 +1,29 @@
+<template>
+    <div class={contentClassName} role="directory">
+        <dx-button
+            aria-label={toggleButtonAriaLabel}
+            class={toggleButtonClass}
+            onclick={toggleShowContent}
+            icon-symbol="open_panel"
+            variant="custom"
+        ></dx-button>
+        <div if:true={showContent} class="toc toc_content">
+            <h2 class={titleClassName}>{title}</h2>
+            <template for:each={options} for:item="option">
+                <a
+                    href={option.anchor}
+                    class={option.className}
+                    onclick={onClick}
+                    contentid={option.id}
+                    data-text={option.label}
+                    key={option.id}
+                >
+                    {option.label}
+                </a>
+            </template>
+        </div>
+    </div>
+    <div if:true={showContent}>
+        <slot name="view-pdf"></slot>
+    </div>
+</template>

package/src/modules/dx/toc/toc.ts

@@ -0,0 +1,77 @@
+import { LightningElement, api, track } from "lwc";
+import cx from "classnames";
+import { ContentElement } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+
+export default class Toc extends LightningElement {
+    @api title!: string;
+
+    @api
+    get value() {
+        return this._value!;
+    }
+    set value(value: string) {
+        this._value = value;
+    }
+
+    @api
+    get options() {
+        const actualValue =
+            this.value ||
+            (this._options && this._options.length > 0 && this._options[0].id);
+        return this._options.map((option) => {
+            return {
+                ...option,
+                className: cx(
+                    "content-button",
+                    option.id === actualValue && "selected"
+                )
+            };
+        });
+    }
+    set options(value: any) {
+        this._options = toJson(value);
+    }
+
+    private _value?: string = undefined;
+    private showContent: boolean = true;
+
+    @track _options!: Array<ContentElement>;
+
+    private get toggleButtonIconSymbol() {
+        return this.showContent ? "forward" : "back";
+    }
+
+    private get toggleButtonAriaLabel() {
+        return this.showContent
+            ? "Hide table of contents"
+            : "Show table of contents";
+    }
+
+    private get contentClassName() {
+        return cx("toc", !this.showContent && "toc_collapsed");
+    }
+    private get toggleButtonClass() {
+        return cx("toggle-button", !this.showContent && "collapsed");
+    }
+
+    private get titleClassName() {
+        return cx(
+            "dx-text-heading-5 toc_title",
+            !this.showContent && "state-hide-content"
+        );
+    }
+
+    private onClick(e: Event) {
+        const target = e.currentTarget as HTMLElement;
+        const id = target.getAttribute("contentid");
+        this.dispatchEvent(
+            new CustomEvent("selectedcontent", { detail: { name: id } })
+        );
+        this._value = id!;
+    }
+
+    private toggleShowContent() {
+        this.showContent = !this.showContent;
+    }
+}

package/src/modules/dx/tooltip/microtip.css

@@ -0,0 +1,269 @@
+/* Code generated by scripts/postinstall.js DO NOT EDIT*/
+
+
+/* -------------------------------------------------------------------
+  Microtip
+
+  Modern, lightweight css-only tooltips
+  Just 1kb minified and gzipped
+
+  @author Ghosh
+  @package Microtip
+
+----------------------------------------------------------------------
+  1. Base Styles
+  2. Direction Modifiers
+  3. Position Modifiers
+--------------------------------------------------------------------*/
+
+
+/* ------------------------------------------------
+  [1] Base Styles
+-------------------------------------------------*/
+
+[aria-label][role~="tooltip"] {
+  position: relative;
+}
+
+[aria-label][role~="tooltip"]::before,
+[aria-label][role~="tooltip"]::after {
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  pointer-events: none;
+  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
+}
+
+[aria-label][role~="tooltip"]::before {
+  background-size: 100% auto !important;
+  content: "";
+}
+
+[aria-label][role~="tooltip"]::after {
+  background: rgba(17, 17, 17, .9);
+  border-radius: 4px;
+  color: #ffffff;
+  content: attr(aria-label);
+  font-size: var(--microtip-font-size, 13px);
+  font-weight: var(--microtip-font-weight, normal);
+  text-transform: var(--microtip-text-transform, none);
+  padding: .5em 1em;
+  white-space: nowrap;
+  box-sizing: content-box;
+}
+
+[aria-label][role~="tooltip"]:hover::before,
+[aria-label][role~="tooltip"]:hover::after,
+[aria-label][role~="tooltip"]:focus::before,
+[aria-label][role~="tooltip"]:focus::after {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+
+
+/* ------------------------------------------------
+  [2] Position Modifiers
+-------------------------------------------------*/
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-bottom: 5px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  margin-bottom: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]:hover::before {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::after {
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="top"]:hover::after {
+  transform: translate3d(-50%, -5px, 0);
+}
+
+/* ------------------------------------------------
+  [2.1] Top Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-left"]::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.2] Top Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="top-right"]::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+  bottom: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), -5px, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.3] Bottom
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  margin-top: 11px;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+  transform: translate3d(-50%, -10px, 0);
+  bottom: auto;
+  left: 50%;
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
+  transform: translate3d(-50%, 0, 0);
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::after {
+  transform: translate3d(-50%, -10px, 0);
+  top: 100%;
+  left: 50%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
+  transform: translate3d(-50%, 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.4] Bottom Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-left"]::after {
+  transform: translate3d(calc(-100% + 16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.5] Bottom Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="bottom-right"]::after {
+  transform: translate3d(calc(0% + -16px), -10px, 0);
+  top: 100%;
+}
+
+[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
+  transform: translate3d(calc(0% + -16px), 0, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.6] Left
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="left"]::before,
+[role~="tooltip"][data-microtip-position="left"]::after {
+  bottom: auto;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  transform: translate3d(10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="left"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-right: 5px;
+  margin-bottom: 0;
+}
+
+[role~="tooltip"][data-microtip-position="left"]::after {
+  margin-right: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="left"]:hover::before,
+[role~="tooltip"][data-microtip-position="left"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+
+/* ------------------------------------------------
+  [2.7] Right
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-position="right"]::before,
+[role~="tooltip"][data-microtip-position="right"]::after {
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translate3d(-10px, -50%, 0);
+}
+
+[role~="tooltip"][data-microtip-position="right"]::before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]::after {
+  margin-left: 11px;
+}
+
+[role~="tooltip"][data-microtip-position="right"]:hover::before,
+[role~="tooltip"][data-microtip-position="right"]:hover::after {
+  transform: translate3d(0, -50%, 0);
+}
+
+/* ------------------------------------------------
+  [3] Size
+-------------------------------------------------*/
+[role~="tooltip"][data-microtip-size="small"]::after {
+  white-space: initial;
+  width: 80px;
+}
+
+[role~="tooltip"][data-microtip-size="medium"]::after {
+  white-space: initial;
+  width: 150px;
+}
+
+[role~="tooltip"][data-microtip-size="large"]::after {
+  white-space: initial;
+  width: 260px;
+}

package/src/modules/dx/tooltip/tooltip.css

@@ -0,0 +1,37 @@
+@import "./microtip.css";
+
+:host {
+    display: inline-block;
+}
+
+.slot-container {
+    display: inherit;
+}
+
+[role~="tooltip"][data-microtip-position|="bottom"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="top"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="left"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[role~="tooltip"][data-microtip-position|="right"]::before {
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28116,%20116,%20116,%201%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[aria-label][role~="tooltip"]::after {
+    background-color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    color: white;
+    line-height: var(--dx-g-text-xs);
+}

package/src/modules/dx/tooltip/tooltip.html

@@ -0,0 +1,5 @@
+<template>
+    <div data-microtip-position={placement} role="tooltip" aria-label={label}>
+        <slot></slot>
+    </div>
+</template>

package/src/modules/dx/tooltip/tooltip.ts

@@ -0,0 +1,6 @@
+import { LightningElement, api } from "lwc";
+
+export default class Tooltip extends LightningElement {
+    @api placement?: String = "top";
+    @api label: string = "";
+}

package/src/modules/dx/topics/topics.css

@@ -0,0 +1,26 @@
+:host {
+    display: block;
+}
+
+.container {
+    align-items: center;
+    color: var(--dx-g-blue-vibrant-20);
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    display: flex;
+    gap: var(--dx-g-spacing-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    flex-wrap: wrap;
+}
+
+.dot-separator {
+    --size: 4px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-blue-vibrant-20);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}

package/src/modules/dx/topics/topics.html

@@ -0,0 +1,12 @@
+<template>
+    <div class="container dx-text-label-1-dark">
+        <template for:each={normalizedTopics} for:item="topic">
+            <span key={topic.id}>{topic.label}</span>
+            <span
+                key={topic.id}
+                if:false={topic.isLast}
+                class="dot-separator"
+            ></span>
+        </template>
+    </div>
+</template>

package/src/modules/dx/topics/topics.ts

@@ -0,0 +1,25 @@
+import { LightningElement, api } from "lwc";
+import { normalizeToArray } from "dxUtils/normalizers";
+
+export default class Topics extends LightningElement {
+    private _topics: Array<string> = [];
+
+    @api
+    get topics() {
+        return this._topics;
+    }
+
+    set topics(value) {
+        this._topics = normalizeToArray(value);
+    }
+
+    get normalizedTopics() {
+        const { length } = this._topics;
+
+        return this._topics?.map((topic, index) => ({
+            id: topic,
+            label: topic,
+            isLast: index === length - 1
+        }));
+    }
+}

package/src/modules/dx/tree/tree.css

@@ -0,0 +1,5 @@
+@import "dxHelpers/reset";
+
+:host {
+    display: block;
+}

package/src/modules/dx/tree/tree.html

@@ -0,0 +1,11 @@
+<template>
+    <dx-tree-item
+        if:true={treeRoot}
+        is-root
+        tree-node={treeRoot}
+        selected-key={selectedKey}
+        ontileselected={onTileSelected}
+        onexpandcollapse={onExpandCollapse}
+        onregister={onRegister}
+    ></dx-tree-item>
+</template>