@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

package/src/modules/dx/typeBadge/typeBadge.stories.ts

@@ -1,79 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-type-badge",
-    component: "dx-type-badge",
-    argTypes: {
-        value: {
-            control: {
-                type: "text"
-            }
-        },
-        brand: {
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-export const Base = (args: any) => html`
-    <dx-type-badge
-        value="${args.value || "Developer Experience"}"
-        brand="${args.brand}"
-    ></dx-type-badge>
-`;
-
-export const Branded = () => html`
-    <dx-type-badge value="industries brand" brand="industries"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="sales brand" brand="sales"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="partners brand" brand="partners"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="invalid brand" brand="invalid"></dx-type-badge>
-`;
-
-export const Small = (args: any) => html`
-    <dx-type-badge
-        size="small"
-        value="${args.value || "Analytics"}"
-    ></dx-type-badge>
-`;
-
-export const XsWithCustomColorAndFixedWidth = (args: any) => html`
-    <dx-type-badge size="xs" value="${args.value || "POST"}"></dx-type-badge>
-`;
-
-export const CSSHooked = () => html`
-    <style>
-        .hooks {
-            --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
-            --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
-        }
-        .hookinfo {
-            color: gray;
-            font-size: 12px;
-        }
-    </style>
-
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-color:</b> <i>var(--dx-g-green-vibrant-40);</i>
-    </p>
-    <p class="hookinfo">
-        <b>--dx-c-type-badge-background:</b>
-        <i>var(--dx-g-green-vibrant-90);</i>
-    </p>
-    <br />
-
-    <dx-type-badge
-        class="hooks"
-        value="Hey I am a very loooong text"
-    ></dx-type-badge>
-`;

package/src/modules/dx/typeBadgeGroup/__tests__/mockProps.ts

@@ -1,11 +0,0 @@
-export const badges = [
-    "Developer Experience",
-    "Search Optimization",
-    "Analytics",
-    "Testing",
-    "Traffic Monitoring"
-];
-
-export default {
-    badges: JSON.stringify(badges)
-};

package/src/modules/dx/typeBadgeGroup/__tests__/typeBadgeGroup.test.ts

@@ -1,76 +0,0 @@
-import TypeBadge from "dx/typeBadge";
-import TypeBadgeGroup from "dx/typeBadgeGroup";
-import { TypeBadgeSize } from "typings/custom";
-import { createRenderComponent } from "utils/tests";
-import mockProps, { badges } from "./mockProps";
-
-const TAG = "dx-type-badge-group";
-const render = createRenderComponent(TAG, TypeBadgeGroup);
-
-describe(TAG, () => {
-    it("renders correct number of badges", () => {
-        const expectedSize: TypeBadgeSize = "medium";
-        const element = render(mockProps);
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(badges.length);
-        els.forEach((el, index) => {
-            expect(el.value).toBe(badges[index]);
-            expect(el.size).toBe(expectedSize);
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a comma delimited string", () => {
-        const expectedSize: TypeBadgeSize = "small";
-        const element = render({
-            badges: "test1,test2,test3",
-            size: expectedSize
-        });
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(3);
-        els.forEach((el) => expect(el.size).toBe(expectedSize));
-        expect(els[0].value).toBe("test1");
-        expect(els[1].value).toBe("test2");
-        expect(els[2].value).toBe("test3");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render single string value", () => {
-        const expectedBadge = "testsinglebadge";
-        const element = render({ badges: expectedBadge });
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(1);
-        expect(els[0].value).toBe(expectedBadge);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("can render a regular array of string", () => {
-        const element = render({ badges });
-
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
-        expect(els).toHaveLength(badges.length);
-        els.forEach((el, index) => expect(el.value).toBe(badges[index]));
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("throws an error if badges value is not compatible", () => {
-        expect(() => render({ badges: { test: "badges" } })).toThrow(
-            /Key must be a string or number/
-        );
-    });
-});

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.css

@@ -1,12 +0,0 @@
-.badges-group {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.badges-group > dx-type-badge {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.badges-group > dx-type-badge:not(:last-child) {
-    margin-right: var(--dx-g-spacing-sm);
-}

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.html

@@ -1,11 +0,0 @@
-<template>
-    <div class="badges-group">
-        <template for:each={badges} for:item="badge">
-            <dx-type-badge
-                key={badge}
-                size={size}
-                value={badge}
-            ></dx-type-badge>
-        </template>
-    </div>
-</template>

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.stories.ts

@@ -1,19 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-type-badge-group",
-    component: "dx-type-badge-group"
-};
-
-export const Base = () => html`
-    <dx-type-badge-group
-        badges="Developer Experience, Search Optimization, Analytics"
-    ></dx-type-badge-group>
-`;
-
-export const Small = () => html`
-    <dx-type-badge-group
-        badges='["Testing", "Traffic Monitoring"]'
-        size="small"
-    ></dx-type-badge-group>
-`;

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.ts

@@ -1,18 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "utils/normalizers";
-import { TypeBadgeSize } from "typings/custom";
-
-export default class TypeBadgeGroup extends LightningElement {
-    @api size: TypeBadgeSize = "medium";
-
-    @api
-    get badges() {
-        return this._badges;
-    }
-    set badges(value: string[] | string | null) {
-        this._badges = normalizeToArray(value);
-    }
-
-    // can be an array of strings or a comma delimited string
-    private _badges!: string | string[] | null;
-}

package/src/modules/helpers/button/button.css

@@ -1,4 +0,0 @@
-:host {
-    --dx-g-button-heading-color-hover: var(--dx-g-blue-vibrant-40);
-    --dx-g-button-image-filter-hover: brightness(90%);
-}

package/src/modules/helpers/slds/slds.css

@@ -1,191 +0,0 @@
-:host(.slds-form-element_stacked) .slds-form-element__label,
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    border-bottom: 0;
-    padding-left: 0;
-}
-
-:host(.slds-form-element_stacked) .slds-form-element__control {
-    width: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    clear: left;
-}
-
-@media (min-width: 48em) {
-    :host(.slds-form-element_horizontal) .slds-form-element__control {
-        padding-left: 33%;
-        clear: none;
-    }
-}
-
-:host(.slds-has-error) .slds-select {
-    border-color: #ea001e;
-    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
-    box-shadow: #ea001e 0 0 0 1px inset;
-    background-clip: padding-box;
-}
-
-:host(.slds-has-error) .slds-select:focus,
-:host(.slds-has-error) .slds-select: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;
-}
-
-:host(.slds-has-error) .slds-form-element__help {
-    color: #ea001e;
-}
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-abbr[title] {
-    text-decoration: none;
-}
-
-abbr[title],
-fieldset,
-hr {
-    border: 0;
-}
-
-abbr[title] {
-    cursor: help;
-}
-
-abbr[title]:after {
-    content: " (" attr(title) ")";
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-.slds-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;
-}
-
-.slds-form-element__label:empty {
-    margin: 0;
-}
-
-.slds-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;
-}
-
-.slds-required {
-    color: #ea001e;
-    margin: 0 0.125rem;
-}
-
-.slds-form-element__control {
-    clear: left;
-    position: relative;
-}
-
-.slds-select {
-    height: calc(1.875rem + (1px * 2));
-    width: 100%;
-    border: 1px solid var(--sds-c-select-color-border, #dddbda);
-    border-radius: var(--sds-c-select-radius-border, 0.25rem);
-    background-color: var(--sds-c-select-color-background, white);
-    color: var(--sds-c-select-text-color);
-    -webkit-box-shadow: var(--sds-c-select-shadow);
-    box-shadow: var(--sds-c-select-shadow);
-    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
-    transition: border 0.1s linear, background-color 0.1s linear;
-}
-
-.slds-select:required {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select:focus,
-.slds-select:active {
-    outline: 0;
-    border-color: var(--sds-c-select-color-border-focus, #1b96ff);
-    background-color: var(--sds-c-select-color-background-focus, white);
-    color: var(--sds-c-select-text-color-focus);
-    -webkit-box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-    box-shadow: var(--sds-c-select-shadow-focus, 0 0 3px #0176d3);
-}
-
-.slds-select[disabled],
-.slds-select.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;
-}
-
-.slds-select[disabled]:focus,
-.slds-select[disabled]:active,
-.slds-select.slds-is-disabled:focus,
-.slds-select.slds-is-disabled:active {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.slds-select[size],
-.slds-select[multiple] {
-    min-height: calc(1.875rem + (1px * 2));
-    height: inherit;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-select_container {
-    position: relative;
-    color: var(--sds-c-select-text-color);
-}
-
-.slds-select_container .slds-select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    padding-left: 0.5rem;
-    padding-right: 1.5rem;
-}
-.slds-select_container .slds-select::-ms-expand {
-    display: none;
-}
-
-.slds-select[size] option,
-.slds-select[multiple] option {
-    padding: 0.5rem;
-}
-
-.slds-form-element__help,
-.slds-form-element__helper {
-    font-size: 0.75rem;
-    margin-top: 0.125rem;
-    display: block;
-}

package/src/modules/tests/buttonTest/buttonTest.html

@@ -1,3 +0,0 @@
-<template>
-    <dx-button>test</dx-button>
-</template>

package/src/modules/tests/buttonTest/buttonTest.ts

@@ -1,3 +0,0 @@
-import { LightningElement } from "lwc";
-
-export default class ButtonTest extends LightningElement {}

package/src/modules/tests/codeBlockTest/codeBlockTest.js

@@ -1,4 +0,0 @@
-import { LightningElement } from "lwc";
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class CodeBlockTest extends LightningElement {}

package/src/modules/tests/featureGridTest/featureGridTest.html

@@ -1,7 +0,0 @@
-<template>
-    <dx-feature-grid>
-        <dx-feature button-label="Feature 1" title="Feature 1"></dx-feature>
-        <dx-feature button-label="Feature 2" title="Feature 2"></dx-feature>
-        <dx-feature button-label="Feature 3" title="Feature 3"></dx-feature>
-    </dx-feature-grid>
-</template>

package/src/modules/tests/featureGridTest/featureGridTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement } from "lwc";
-
-// Wrapper component required to test dx/featureGrid.
-// This component is not exposed in the build.
-export default class FeatureGridTest extends LightningElement {}

package/src/modules/tests/instrumentationTest/instrumentationTest.html

@@ -1,4 +0,0 @@
-<template>
-    <button onclick={handleButtonClick}>Click me!</button>
-    <dx-instrumentation use-google-tag-manager></dx-instrumentation>
-</template>

package/src/modules/tests/instrumentationTest/instrumentationTest.ts

@@ -1,8 +0,0 @@
-import { LightningElement } from "lwc";
-import { track } from "dx/instrumentation";
-
-export default class InstrumentationTest extends LightningElement {
-    handleButtonClick(e: MouseEvent) {
-        track(e.currentTarget, "buttonClick", { buttonName: "default" });
-    }
-}

package/src/modules/tests/popoverTest/popoverTest.html

@@ -1,6 +0,0 @@
-<template>
-    <dx-popover open-on-hover={openOnHover}>
-        <dx-button slot="control">test control</dx-button>
-        <div slot="content">test content</div>
-    </dx-popover>
-</template>

package/src/modules/tests/popoverTest/popoverTest.ts

@@ -1,5 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class PopoverTest extends LightningElement {
-    @api openOnHover: boolean = false;
-}

package/src/modules/utils/css/css.ts

@@ -1,2 +0,0 @@
-export const toDxColor = (color: string) =>
-    ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;

package/src/modules/utils/jest/jest.ts

@@ -1,23 +0,0 @@
-const mockMediaMatch = (matches: boolean) => (query: string) => ({
-    matches,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-});
-
-export const createMediaMock = (
-    defaultMatch = false,
-    matchesList: Array<boolean> = []
-) => {
-    const mediaMock = jest.fn(mockMediaMatch(defaultMatch));
-    matchesList.forEach((value) =>
-        mediaMock.mockImplementationOnce(mockMediaMatch(value))
-    );
-    return mediaMock;
-};
-
-export const matchMediaMock = createMediaMock();

package/src/modules/utils/normalizers/normalizers.ts

@@ -1,91 +0,0 @@
-import get from "lodash.get";
-
-export const toJson = (value: string | object | null) =>
-    typeof value === "string" ? JSON.parse(value) : value;
-
-export const normalizeToArray = (
-    value: string[] | string | null,
-    splitKey: string = ","
-) => {
-    if (!value) {
-        return [];
-    }
-
-    if (typeof value === "string") {
-        try {
-            value = JSON.parse(value);
-        } catch (e) {
-            value = (value as string).split(splitKey);
-        }
-    }
-
-    return Array.isArray(value) ? value : [value];
-};
-
-type WordpressPodcastEpisode = {
-    date: string;
-    description: string;
-    id: string;
-    originalUrl: string;
-    podcastDuration: string;
-    title: string;
-    url: string;
-};
-
-const getLength = (duration: string) => {
-    if (!duration || !duration.includes(":")) {
-        return undefined;
-    }
-    return `${get(duration.split(":"), "[1]")} min`;
-};
-
-export const normalizeEpisode = ({
-    url,
-    id,
-    title,
-    description,
-    date,
-    podcastDuration
-}: WordpressPodcastEpisode) => ({
-    body: description,
-    datetime: date,
-    href: url,
-    id,
-    length: getLength(podcastDuration),
-    title
-});
-
-type WordpressBlogPost = {
-    date: string;
-    description: string;
-    id: string;
-    originalUrl: string;
-    title: string;
-    url: string;
-    authors: any[];
-    featuredImage: string;
-};
-
-export const normalizePost = ({
-    authors = [],
-    date,
-    description,
-    featuredImage,
-    id,
-    title,
-    url
-}: WordpressBlogPost) => ({
-    body: description,
-    datetime: date,
-    href: url,
-    authorHref: get(authors, "[0].link"),
-    authorImgSrc: get(authors, "[0].avatar_urls.48"),
-    authorName: get(authors, "[0].name"),
-    imgAlt: "Blogpost image",
-    imgSrc: featuredImage,
-    id,
-    title
-});
-
-export const normalizeBoolean = (value: string | boolean | number): boolean =>
-    typeof value === "string" ? value === "true" : !!value;