@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,12 +0,0 @@
-export const options = [
-    { value: "english", label: "English" },
-    { value: "japanese", label: "Japanese" },
-    { value: "spanish", label: "Spanish" },
-    { value: "german", label: "German", disabled: true }
-];
-
-export default {
-    defaultValue: "japanese",
-    legend: "languages",
-    options
-};

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

@@ -1,42 +0,0 @@
-import RadioGroup from "dx/radioGroup";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-radio-group";
-const render = createRenderComponent(TAG, RadioGroup);
-
-describe(TAG, () => {
-    it("callback payload value is correct", async () => {
-        const mockChange = jest.fn();
-
-        const element = render(mockProps);
-
-        element.addEventListener("change", mockChange);
-
-        const checkbox = element.shadowRoot.querySelector("dx-checkbox");
-
-        checkbox.dispatchEvent(
-            new CustomEvent("change", { detail: { value: checkbox.value } })
-        );
-
-        await Promise.resolve();
-
-        expect(mockChange.mock.calls[0][0].detail.value).toEqual(
-            checkbox.value
-        );
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("accepts a value", () => {
-        const element = render({
-            options: mockProps.options,
-            legend: mockProps.legend,
-            value: mockProps.defaultValue
-        });
-
-        expect(element.value).toEqual(mockProps.defaultValue);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,25 +0,0 @@
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-radio-group",
-    component: "dx-radio-group"
-};
-
-export const Base = (args: any) => `
-  <dx-radio-group legend='${args.legend}' options='${args.options}' default-value='${args.defaultValue}'>
-  </dx-radio-group>
-`;
-
-export const Controlled = (args: any) => `
-  <dx-radio-group legend='${args.legend}' options='${args.options}' value='${args.defaultValue}'>
-  </dx-radio-group>
-`;
-
-const args = {
-    ...mockProps,
-    options: JSON.stringify(mockProps.options)
-};
-
-Base.args = args;
-
-Controlled.args = args;

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

@@ -1,55 +0,0 @@
-const oneHour = new Date(Date.now() - 1000 * 60 * 60).toISOString();
-const fourHours = new Date(Date.now() - 4 * 1000 * 60 * 60).toISOString();
-const oneDay = new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString();
-const fourDays = new Date(Date.now() - 4 * 1000 * 60 * 60 * 24).toISOString();
-const oneWeek = new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
-const fourWeeks = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 7
-).toISOString();
-const oneMonth = new Date(Date.now() - 1000 * 60 * 60 * 24 * 30).toISOString();
-const fourMonths = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 30
-).toISOString();
-const oneYear = new Date(
-    Date.now() - 1000 * 60 * 60 * 24 * 30 * 12
-).toISOString();
-const fourYears = new Date(
-    Date.now() - 4 * 1000 * 60 * 60 * 24 * 30 * 12
-).toISOString();
-
-export default {
-    fourHoursCustomMessage: {
-        value: fourHours,
-        messageWhenHoursPast: "hours since"
-    },
-    oneHour: {
-        value: oneHour
-    },
-    fourHours: {
-        value: fourHours
-    },
-    oneDay: {
-        value: oneDay
-    },
-    fourDays: {
-        value: fourDays
-    },
-    oneWeek: {
-        value: oneWeek
-    },
-    fourWeeks: {
-        value: fourWeeks
-    },
-    oneMonth: {
-        value: oneMonth
-    },
-    fourMonths: {
-        value: fourMonths
-    },
-    oneYear: {
-        value: oneYear
-    },
-    fourYears: {
-        value: fourYears
-    }
-};

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

@@ -1,52 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import RelativeDateTime from "dx/relativeDateTime";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-relative-date-time";
-const render = createRenderComponent(TAG, RelativeDateTime);
-
-describe(TAG, () => {
-    it("renders component with hours and custom message", () => {
-        const component = render(mockProps.fourHoursCustomMessage);
-
-        const dateEl = component.shadowRoot.querySelector("time");
-        expect(dateEl).not.toBeNull();
-        expect(dateEl.textContent).toEqual("4 hours since");
-        return expect(component).toBeAccessible();
-    });
-
-    [
-        { time: "oneHour", expected: "1 hour ago" },
-        { time: "fourHours", expected: "4 hours ago" },
-        { time: "oneDay", expected: "1 day ago" },
-        { time: "fourDays", expected: "4 days ago" },
-        { time: "oneWeek", expected: "1 week ago" },
-        { time: "fourWeeks", expected: "4 weeks ago" },
-        { time: "oneMonth", expected: "1 month ago" },
-        { time: "fourMonths", expected: "4 months ago" },
-        { time: "oneYear", expected: "1 year ago" },
-        { time: "fourYears", expected: "4 years ago" }
-    ].forEach((testCase) => {
-        it(`displays the correct label and title for ${testCase.expected}`, () => {
-            const component = render(mockProps[testCase.time]);
-
-            const dateEl = component.shadowRoot.querySelector("time");
-
-            expect(dateEl).not.toBeNull();
-            expect(dateEl.getAttribute("title")).toEqual(
-                new Date(mockProps[testCase.time].value).toString()
-            );
-            expect(dateEl.textContent).toEqual(testCase.expected);
-            return expect(component).toBeAccessible();
-        });
-    });
-
-    it("logs an error if value provided is an error", () => {
-        console.error = jest.fn();
-        const component = render({ value: undefined });
-
-        expect(component).not.toBeNull();
-        expect(console.error).toHaveBeenCalled();
-    });
-});

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

@@ -1,83 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-relative-date-time",
-    component: "dx-relative-date-time"
-};
-
-// prettier-ignore
-const createStyles = () => html `
-    <style>
-        span.date-label {
-            color: grey;
-        }
-
-        dx-relative-date-time {
-            display: block;
-            margin-bottom: 12px;
-        }
-    </style>
-`;
-
-const twoWeeks = new Date(Date.now() - 1.21e9).toISOString();
-const fourDays = new Date(Date.now() - 3.456e8).toISOString();
-const threeMonths = new Date(Date.now() - 7.884e9).toISOString();
-const twoYears = new Date(Date.now() - 6.307e10).toISOString();
-const fourHours = new Date(Date.now() - 1.44e7).toISOString();
-const oneHour = new Date(Date.now() - 3600000).toISOString();
-
-// prettier-ignore
-export const DefaultMessage = () => html ` ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time value="${fourHours}"></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time value="${fourDays}"></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time value="${twoWeeks}"></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time value="${threeMonths}"></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time value="${twoYears}"></dx-relative-date-time>
-
-    <span class="date-label">1 Hour</span>
-    <dx-relative-date-time value="${oneHour}"></dx-relative-date-time>
-`;
-
-export const CustomMessage = () => html`
-    ${createStyles()}
-
-    <span class="date-label">4 hours</span>
-    <dx-relative-date-time
-        value="${fourHours}"
-        message-when-hours-past="hours since upload"
-    ></dx-relative-date-time>
-
-    <span class="date-label">4 days</span>
-    <dx-relative-date-time
-        value="${fourDays}"
-        message-when-days-past="days since broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 weeks</span>
-    <dx-relative-date-time
-        value="${twoWeeks}"
-        message-when-weeks-past="weeks since last broadcast"
-    ></dx-relative-date-time>
-
-    <span class="date-label">3 Months</span>
-    <dx-relative-date-time
-        value="${threeMonths}"
-        message-when-months-past="months since the event"
-    ></dx-relative-date-time>
-
-    <span class="date-label">2 Years</span>
-    <dx-relative-date-time
-        value="${twoYears}"
-        message-when-years-past="years ago"
-    ></dx-relative-date-time>
-`;

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

@@ -1,38 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-search-results",
-    component: "dx-search-results",
-    argTypes: {
-        searchQuery: {
-            defaultValue: "trail",
-            control: {
-                type: "text"
-            }
-        }
-    }
-};
-
-// prettier-ignore
-const createStyles = () => html ``;
-
-// prettier-ignore
-export const WithQuery = (args: any) => html ` ${createStyles()}
-    
-    <dx-search-results
-        search-query="${args.searchQuery}"
-        coveo-organization-id="coveosalesforcetestakshatha"
-        coveo-public-access-token="xxfc27df69-a4dd-452d-bf04-2945004acfae"
-        coveo-search-pipeline="salesforcedevdoc">
-    </dx-search-results>
-`;
-
-// prettier-ignore
-export const WithoutQuery = () => html ` ${createStyles()}
-    
-    <dx-search-results
-        coveo-organization-id="coveosalesforcetestakshatha"
-        coveo-public-access-token="xxfc27df69-a4dd-452d-bf04-2945004acfae"
-        coveo-search-pipeline="salesforcedevdoc">
-    </dx-search-results>
-`;

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

@@ -1,17 +0,0 @@
-import Section from "dx/section";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-section";
-const render = createRenderComponent(TAG, Section);
-
-describe(TAG, () => {
-    it("renders the container", () => {
-        const element = render();
-        const el = element.shadowRoot.querySelector(".section");
-        expect(el).not.toBeNull();
-
-        const textDiv = element.shadowRoot.querySelector("div.text");
-        expect(textDiv).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-});