@salesforcedevs/dx-components 0.54.2 → 0.54.7-alpha

package/src/modules/dx/footer/footer.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toJson } from "utils/normalizers";
-import { FooterVariant, Option } from "typings/custom";
+import { FooterVariant, OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 import {
     generalLinks,
     termsLinks,
@@ -9,7 +9,7 @@ import {
     privacyHref,
     intellectualHref
 } from "./links";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 
 const PATH = "/newsletter";
 const createNewsletterSignupHref = (email: string): string =>
@@ -31,7 +31,7 @@ export default class Footer extends LightningElement {
         this._locales = toJson(value);
     }
 
-    private _locales?: Option[] | null = null;
+    private _locales?: OptionWithLink[] | null = null;
     private termsLinks = termsLinks;
     private generalLinks = generalLinks;
     private socialLinks = socialLinks;

package/src/modules/dx/footerOption/footerOption.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 
 export default class FooterOption extends LightningElement {
     @api href: string | null = null;

package/src/modules/dx/groupText/groupText.css

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

package/src/modules/dx/groupText/groupText.ts

@@ -1,9 +1,9 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement, Link } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toJson } from "utils/normalizers";
-import { track } from "utils/analytics";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 type OptionalLink = Link | null;
 

package/src/modules/dx/header/header.css

@@ -1,4 +1,4 @@
-@import "helpers/commonHeader";
+@import "dxHelpers/commonHeader";
 
 :host {
     --dx-c-header-search-width: 316px;

package/src/modules/dx/header/header.ts

@@ -1,10 +1,10 @@
 import { api } from "lwc";
-import { HeaderBase } from "base-elements/headerBase";
-import { toJson } from "utils/normalizers";
-import type { Option } from "typings/custom";
+import type { OptionWithNested } from "typings/custom";
+import { HeaderBase } from "dxBaseElements/headerBase";
+import { toJson } from "dxUtils/normalizers";
 
 export default class Header extends HeaderBase {
-    private _breadcrumbs!: Option[];
+    private _breadcrumbs!: OptionWithNested[];
 
     @api
     get breadcrumbs() {

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --dx-c-color-background: var(--dx-g-brand-default-color-background);

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
-import { deepmapOptions } from "utils/options";
+import { OptionWithNested } from "typings/custom";
+import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;
@@ -9,7 +9,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
     @api pathname: string | null = null;
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
     get navItems() {
@@ -24,7 +24,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         // then we use deepmapper to affect the actual root options (actual links)
         return deepmapOptions(
             navItems,
-            (app: Option, index: number, level: number) => {
+            (app: OptionWithNested, index: number, level: number) => {
                 const active = app.link
                     ? app.link.href === this.pathname
                     : false;
@@ -47,7 +47,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         );
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
     private navElement: HTMLElement | null = null;
     private wasOpen: boolean = false;
     private showScrollShadow: boolean = false;

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 
 export default class HeaderMobileNavMenuOption extends LightningElement {
     @api href: string | null = null;

package/src/modules/dx/headerNav/headerNav.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 a {
     text-decoration: none;

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,18 +1,18 @@
 import { LightningElement, api } from "lwc";
-import { TabVariant, Option } from "typings/custom";
+import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
 
     get navItems() {
         const activeItem = this._navItems
-            .filter((navItem: Option) => {
+            .filter((navItem: OptionWithNested) => {
                 if (!navItem.link || navItem.link.href === "/") {
                     return false;
                 }
@@ -31,7 +31,7 @@ export default class HeaderNav extends LightningElement {
                     (b.link?.href.length || 0) - (a.link?.href.length || 0)
             )[0];
 
-        const items = this._navItems.map((navItem: Option) =>
+        const items = this._navItems.map((navItem: OptionWithNested) =>
             navItem.link
                 ? {
                       ...navItem,
@@ -45,7 +45,7 @@ export default class HeaderNav extends LightningElement {
         return items;
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

package/src/modules/dx/headerSearch/headerSearch.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 /* DESKTOP */
 

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { PopoverRequestCloseType, Option } from "typings/custom";
-import { buildSearchEngine } from "utils/coveo";
+import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
+import { buildSearchEngine } from "dxUtils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
     StandaloneSearchBoxState,
@@ -28,7 +28,7 @@ export default class HeaderSearch extends LightningElement {
         return this.mobile ? null : "desktop_search-container";
     }
 
-    private get suggestions(): Option[] {
+    private get suggestions(): OptionWithLink[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
                 ({ highlightedValue }: { highlightedValue: string }) => ({

package/src/modules/dx/helmet/helmet.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 span {
     font-family: var(--dx-g-font-sans);

package/src/modules/dx/hr/hr.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);

package/src/modules/dx/icon/icon.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

package/src/modules/dx/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const fetches = new Map<string, Promise<any>>();
 

package/src/modules/dx/iconBadge/iconBadge.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const validShapes = ["square", "circle"];
 

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/button";
 
 :host {
     --dx-c-image-and-label-text-color: var(--dx-g-text-label-color);

package/src/modules/dx/input/input.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-input-background-active: white;

package/src/modules/dx/input/input.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
-import { isMac } from "utils/devices";
+import { isMac } from "dxUtils/devices";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {

package/src/modules/dx/logo/logo.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -1,6 +1,6 @@
 import cx from "classnames";
 import { LightningElement, api } from "lwc";
-import { normalizeBoolean } from "utils/normalizers";
+import { normalizeBoolean } from "dxUtils/normalizers";
 
 export default class ModalDrawer extends LightningElement {
     private _open = false;

package/src/modules/dx/pagination/pagination.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .dx-pagination {
     display: flex;

package/src/modules/dx/pagination/pagination.ts

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { LightningElement, api } from "lwc";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 
 const ANALYTICS_INFO = {
     clickUrl: window.location.href,

package/src/modules/dx/podcastHost/podcastHost.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-host-img-width: 48px;

package/src/modules/dx/popover/popover.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --popover-border-radius: var(

package/src/modules/dx/popover/popover.ts

@@ -8,7 +8,7 @@ import {
 import { createPopper } from "@popperjs/core";
 import cx from "classnames";
 import debounce from "debounce";
-import { isPrerender } from "utils/seo";
+import { isPrerender } from "dxUtils/seo";
 
 const isEventOutsideElements = (
     e: Event,

package/src/modules/dx/radioGroup/radioGroup.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 fieldset {
     display: grid;

package/src/modules/dx/radioGroup/radioGroup.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 type Option = {
     value: string;

package/src/modules/dx/section/section.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-section-padding-vertical: var(--dx-g-spacing-5xl);

package/src/modules/dx/section/section.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 export default class Section extends LightningElement {
     @api backgroundColor: string = "transparent";

package/src/modules/dx/select/select.css

@@ -1,5 +1,3 @@
-@import "helpers/slds";
-
 :host {
     display: block;
 }
@@ -8,7 +6,7 @@
     outline: none;
 }
 
-.slds-select_container::before {
+.select_container::before {
     --icon-size: 0.5em;
 
     border-style: solid;
@@ -24,21 +22,196 @@
     width: var(--icon-size);
 }
 
-.placeholder {
+.select-element_placeholder {
     color: var(--sds-g-gray-9);
 }
 
-select.slds-select:focus:not([disabled]),
-select.slds-select:active:not([disabled]) {
+select.select-element:focus:not([disabled]),
+select.select-element:active:not([disabled]) {
     border-width: 2px;
     border-color: var(--dx-g-blue-vibrant-50);
     box-shadow: none;
     -webkit-box-shadow: none;
 }
 
-:host(.slds-has-error) select.slds-select:focus,
-:host(.slds-has-error) select.slds-select:active {
+.has-error select.select-element:focus,
+.has-error select.select-element:active {
     border-color: #ea001e;
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
     -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
 }
+
+@media (min-width: 48em) {
+    .form-element_horizontal .form-element_control {
+        padding-left: 33%;
+        clear: none;
+    }
+}
+
+abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+}
+
+abbr[title]::after {
+    content: " (" attr(title) ")";
+}
+
+abbr[title],
+fieldset,
+hr {
+    border: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+.form-element_control {
+    clear: left;
+    position: relative;
+}
+
+.form-element_label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    display: inline-block;
+    color: #3e3e3c;
+    font-size: 0.75rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    margin-bottom: 0.125rem;
+}
+
+.form-element_label:empty {
+    margin: 0;
+}
+
+.form-element_stacked .form-element_label,
+.form-element_stacked .form-element_control {
+    border-bottom: 0;
+    padding-left: 0;
+}
+
+.form-element_stacked .form-element_control {
+    width: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    clear: left;
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}
+
+.required-element {
+    color: #ea001e;
+    margin: 0 0.125rem;
+}
+
+.select-element {
+    height: calc(1.875rem + (1px * 2));
+    width: 100%;
+    border: 1px solid #dddbda;
+    border-radius: 0.25rem;
+    background-color: white;
+    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    transition: border 0.1s linear, background-color 0.1s linear;
+}
+
+.select-element:focus,
+.select-element:active {
+    outline: 0;
+    border-color: #1b96ff;
+    background-color:white;
+    -webkit-box-shadow: 0 0 3px #0176d3;
+    box-shadow: 0 0 3px #0176d3;
+}
+
+.select-element[disabled],
+.select-element.slds-is-disabled {
+    background-color: #ecebea;
+    border-color: #c9c7c5;
+    color: #3e3e3c;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    opacity: 1;
+}
+
+.select-element[disabled]:focus,
+.select-element[disabled]:active,
+.select-element.slds-is-disabled:focus,
+.select-element.slds-is-disabled:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.select-element[size] {
+    min-height: calc(1.875rem + (1px * 2));
+    height: inherit;
+}
+
+.select-element[size] option {
+    padding: 0.5rem;
+}
+
+.has-error .select-element {
+    border-color: #ea001e;
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
+    box-shadow: #ea001e 0 0 0 1px inset;
+    background-clip: padding-box;
+}
+
+.select_container {
+    position: relative;
+}
+
+.select_container .select-element {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-left: 0.5rem;
+    padding-right: 1.5rem;
+}
+
+.select_container .select-element::-ms-expand {
+    display: none;
+}
+
+.has-error .select-element:focus,
+.has-error .select-element:active {
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+}
+
+.form-element:not(.has-error) .select-element:required {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.form-element_help,
+.form-element_helper {
+    font-size: 0.75rem;
+    margin-top: 0.125rem;
+    display: block;
+}
+
+.has-error .form-element_help {
+    color: #ea001e;
+}