@getflip/swirl-components 0.64.6 → 0.65.0

package/dist/collection/components/swirl-file-uploader/swirl-file-uploader.spec.js

@@ -0,0 +1,72 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlFileUploader } from "./swirl-file-uploader";
+describe("swirl-file-uploader", () => {
+  it("renders with dropzone", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileUploader],
+      html: `<swirl-file-uploader
+              accept="image/*"
+              description="Only image files are allowed."
+              input-id="file-upload"
+              input-name="file-upload"
+              label="Label"
+              cta-label="CTA Label"
+              drag-drop-label="DragDropLabel"
+              multiple="true"
+            ></swirl-file-uploader>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-uploader accept="image/*" cta-label="CTA Label" description="Only image files are allowed." drag-drop-label="DragDropLabel" input-id="file-upload" input-name="file-upload" label="Label" multiple="true">
+        <div class="file-uploader file-uploader--show-dropzone">
+          <label class="file-uploader__label" htmlfor="file-upload" id="undefined-label">
+            Label
+          </label>
+          <span class="file-uploader__description" id="file-upload-description">
+            Only image files are allowed.
+          </span>
+          <div class="file-uploader__dropzone">
+            <swirl-icon-cloud-upload class="file-uploader__dropzone-icon"></swirl-icon-cloud-upload>
+            <div class="file-uploader__dropzone-label" id="file-upload-additional-label">
+              <span class="file-uploader__dropzone-cta">
+                CTA Label
+              </span>
+              <span class="file-uploader__drag-drop-label">
+                DragDropLabel
+              </span>
+            </div>
+            <input accept="image/*" aria-describedby="file-upload-description file-upload-additional-label" autocomplete="off" class="file-uploader__input" id="file-upload" multiple="" name="file-upload" tabindex="0" type="file">
+          </div>
+        </div>
+      </swirl-file-uploader>
+    `);
+  });
+  it("renders with upload button", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileUploader],
+      html: `<swirl-file-uploader
+              input-id="file-upload"
+              input-name="file-upload"
+              label="Label"
+              show-dropzone="false"
+              upload-button-label="Add file"
+            ></swirl-file-uploader>`,
+    });
+    expect(page.root.querySelector('.file-uploader__dropzone swirl-button[label="Add file"]')).not.toBeNull();
+  });
+  it("fires valueChange event", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileUploader],
+      html: `<swirl-file-uploader
+              input-id="file-upload"
+              input-name="file-upload"
+              label="Label"
+            ></swirl-file-uploader>`,
+    });
+    const spy = jest.fn();
+    page.root.addEventListener("valueChange", spy);
+    page.root
+      .querySelector('input[type="file"]')
+      .dispatchEvent(new Event("change"));
+    expect(spy).toHaveBeenCalled();
+  });
+});

package/dist/collection/components/swirl-file-viewer/swirl-file-viewer.spec.js

@@ -0,0 +1,245 @@
+const saveAsMock = jest.fn();
+jest.mock("file-saver", () => ({
+  saveAs: saveAsMock,
+}));
+import { mockFetch, MockHeaders, MockResponse, newSpecPage, } from "@stencil/core/testing";
+import { SwirlFileViewer } from "./swirl-file-viewer";
+import { SwirlFileViewerAudio } from "./viewers/swirl-file-viewer-audio/swirl-file-viewer-audio";
+import { SwirlFileViewerCsv } from "./viewers/swirl-file-viewer-csv/swirl-file-viewer-csv";
+import { SwirlFileViewerImage } from "./viewers/swirl-file-viewer-image/swirl-file-viewer-image";
+import { SwirlFileViewerText } from "./viewers/swirl-file-viewer-text/swirl-file-viewer-text";
+import { SwirlFileViewerVideo } from "./viewers/swirl-file-viewer-video/swirl-file-viewer-video";
+describe("swirl-file-viewer", () => {
+  it("renders images", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerImage],
+      html: `
+        <swirl-file-viewer
+          description="Description"
+          file="https://picsum.photos/id/1025/1000/1000"
+          type="image/jpeg"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer description="Description" file="https://picsum.photos/id/1025/1000/1000" type="image/jpeg">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-image class="file-viewer-image">
+                <mock:shadow-root>
+                  <img alt="Description" class="file-viewer-image__image" src="https://picsum.photos/id/1025/1000/1000">
+                  <div class="file-viewer-image__spinner">
+                    <swirl-spinner></swirl-spinner>
+                  </div>
+                </mock:shadow-root>
+              </swirl-file-viewer-image>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders video player", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerVideo],
+      html: `
+        <swirl-file-viewer
+          file="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          type="video/mp4"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-video class="file-viewer-video">
+                <mock:shadow-root>
+                  <video class="file-viewer-video__video" controls="">
+                    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
+                  </video>
+                </mock:shadow-root>
+              </swirl-file-viewer-video>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders audio player", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerAudio],
+      html: `
+        <swirl-file-viewer
+          file="https://raw.githubusercontent.com/exaile/exaile-test-files/master/art.mp3"
+          type="audio/mp3"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="https://raw.githubusercontent.com/exaile/exaile-test-files/master/art.mp3" type="audio/mp3">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-audio class="file-viewer-audio">
+                <mock:shadow-root>
+                  <audio class="file-viewer-audio__audio" controls="">
+                    <source src="https://raw.githubusercontent.com/exaile/exaile-test-files/master/art.mp3" type="audio/mp3">
+                  </audio>
+                </mock:shadow-root>
+              </swirl-file-viewer-audio>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders plain text", async () => {
+    mockFetch.text("TEXT");
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerText],
+      html: `
+        <swirl-file-viewer
+          file="https://www.w3.org/TR/2003/REC-PNG-20031110/iso_8859-1.txt"
+          type="text/plain"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="https://www.w3.org/TR/2003/REC-PNG-20031110/iso_8859-1.txt" type="text/plain">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-text class="file-viewer-text" exportparts="file-viewer-text__text">
+                <mock:shadow-root><pre class="file-viewer-text__text" part="file-viewer-text__text" tabindex="0">TEXT</pre>
+                </mock:shadow-root>
+              </swirl-file-viewer-text>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders csv", async () => {
+    mockFetch.text("Col1,Col2,Col3\nCell1,Cell2,Cell3");
+    const page = await newSpecPage({
+      components: [SwirlFileViewer, SwirlFileViewerCsv],
+      html: `
+        <swirl-file-viewer
+          file="/sample.csv"
+          type="text/csv"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="/sample.csv" type="text/csv">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-csv class="file-viewer-csv" exportparts="file-viewer-csv__table">
+                <mock:shadow-root>
+                  <div class="file-viewer-csv__csv" tabindex="0">
+                    <table class="file-viewer-csv__table" part="file-viewer-csv__table">
+                      <tbody>
+                        <tr class="file-viewer-csv__row">
+                          <td class="file-viewer-csv__cell">
+                            Col1
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Col2
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Col3
+                          </td>
+                        </tr>
+                        <tr class="file-viewer-csv__row">
+                          <td class="file-viewer-csv__cell">
+                            Cell1
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Cell2
+                          </td>
+                          <td class="file-viewer-csv__cell">
+                            Cell3
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </mock:shadow-root>
+              </swirl-file-viewer-csv>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("renders pdf", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer],
+      html: `
+        <swirl-file-viewer
+          file="/sample.pdf"
+          type="application/pdf"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="/sample.pdf" type="application/pdf">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-file-viewer-pdf errormessage="File could not be loaded." file="/sample.pdf" viewmode="single" zoom="1"></swirl-file-viewer-pdf>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("shows error for unsupported type", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFileViewer],
+      html: `
+        <swirl-file-viewer
+          file="/sample.html"
+          type="text/html"
+        ></swirl-file-viewer>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-file-viewer file="/sample.html" type="text/html">
+        <mock:shadow-root>
+          <div class="file-viewer">
+            <div class="file-viewer__file">
+              <swirl-inline-error message="File type is not supported."></swirl-inline-error>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </swirl-file-viewer>
+    `);
+  });
+  it("allows to download files", async () => {
+    const res = new MockResponse("", {
+      url: "/sample.pdf",
+      headers: new MockHeaders([
+        ["Content-Type", "application/pdf"],
+        ["Access-Control-Allow-Origin", "*"],
+      ]),
+    });
+    mockFetch.response(Object.assign(res, { blob: () => "Blob" }));
+    const page = await newSpecPage({
+      components: [SwirlFileViewer],
+      html: `
+        <swirl-file-viewer
+          file="/sample.pdf"
+          type="application/pdf"
+        ></swirl-file-viewer>
+      `,
+    });
+    await page.root.download();
+    await page.waitForChanges();
+    expect(saveAsMock).toHaveBeenCalledWith("Blob", "sample.pdf");
+  });
+});

package/dist/collection/components/swirl-form-control/swirl-form-control.spec.js

@@ -0,0 +1,71 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlFormControl } from "./swirl-form-control";
+describe("swirl-form-control", () => {
+  it("renders its input with label", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control label="Label">
+          <swirl-text-input></swirl-text-input>
+        </swirl-form-control>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-form-control label="Label">
+        <div class="form-control form-control--label-position-inside" role="group">
+          <label class="form-control__label">
+            <span class="form-control__label-text">
+              Label
+            </span>
+            <span class="form-control__input">
+              <swirl-text-input label="Label"></swirl-text-input>
+            </span>
+          </label>
+        </div>
+      </swirl-form-control>
+    `);
+  });
+  it("renders its description associated with the input element", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control description="Description" label="Label">
+          <swirl-text-input label="Label"></swirl-text-input>
+        </swirl-form-control>
+      `,
+    });
+    const descriptionEl = page.root.querySelector(".form-control__description");
+    const descriptionElId = descriptionEl.id;
+    expect(descriptionEl).not.toBeNull();
+    expect(descriptionEl.innerHTML).toBe("Description");
+    expect(page.root
+      .querySelector(".form-control__input > *")
+      .getAttribute("swirl-aria-describedby")).toBe(descriptionElId);
+  });
+  it("can be disabled", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control disabled="true" label="Label">
+          <swirl-text-input></swirl-text-input>
+        </swirl-form-control>
+      `,
+    });
+    expect(page.root
+      .querySelector(".form-control__input > *")
+      .getAttribute("disabled")).toBe("true");
+  });
+  it("renders its error message", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormControl],
+      html: `
+        <swirl-form-control error-message="Error" label="Label">
+          <swirl-text-input></swirl-text-input>
+        </swirl-form-control>
+      `,
+    });
+    expect(page.root
+      .querySelector(".form-control__error-message > *")
+      .getAttribute("message")).toBe("Error");
+  });
+});

package/dist/collection/components/swirl-form-group/swirl-form-group.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlFormGroup } from "./swirl-form-group";
+describe("swirl-form-group", () => {
+  it("renders its controls", async () => {
+    const page = await newSpecPage({
+      components: [SwirlFormGroup],
+      html: `
+        <swirl-form-group orientation="horizontal">
+          <swirl-form-control label="First name">
+            <swirl-text-input type="text" value="John"></swirl-text-input>
+          </swirl-form-control>
+          <swirl-form-control label="Last name">
+            <swirl-text-input type="text" value="Doe"></swirl-text-input>
+          </swirl-form-control>
+        </swirl-form-group>
+      `,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-form-group orientation="horizontal">
+        <div class="form-group form-group--orientation-horizontal">
+          <swirl-form-control label="First name">
+            <swirl-text-input type="text" value="John"></swirl-text-input>
+          </swirl-form-control>
+          <swirl-form-control label="Last name">
+            <swirl-text-input type="text" value="Doe"></swirl-text-input>
+          </swirl-form-control>
+        </div>
+      </swirl-form-group>
+    `);
+  });
+});

package/dist/collection/components/swirl-heading/swirl-heading.spec.js

@@ -0,0 +1,28 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlHeading } from "./swirl-heading";
+describe("swirl-heading", () => {
+  it("renders its level and text", async () => {
+    const page = await newSpecPage({
+      components: [SwirlHeading],
+      html: `<swirl-heading heading-id="id" level="3">Heading</swirl-heading>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-heading heading-id="id" level="3">
+        Heading
+        <h3 class="heading heading--align-start heading--level-3" id="id"></h3>
+      </swirl-heading>
+    `);
+  });
+  it("allows to render deviating visual level", async () => {
+    const page = await newSpecPage({
+      components: [SwirlHeading],
+      html: `<swirl-heading as="h6" heading-id="id" level="3">Heading</swirl-heading>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-heading as="h6" heading-id="id" level="3">
+        Heading
+        <h6 class="heading heading--align-start heading--level-3" id="id"></h6>
+      </swirl-heading>
+    `);
+  });
+});

package/dist/collection/components/swirl-icon/swirl-icon.spec.js

@@ -0,0 +1,19 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlIconClose } from "./icons/swirl-icon-close";
+describe("swirl-icon", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [SwirlIconClose],
+      html: `<swirl-icon-close></swirl-icon-close>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-icon-close>
+        <mock:shadow-root>
+          <svg class="swirl-icon swirl-icon--size-24" fill="none" height="24" width="24" part="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 13.6L7.19999 18.4C6.98333 18.6167 6.71666 18.725 6.39999 18.725C6.08333 18.725 5.81666 18.6167 5.59999 18.4C5.38333 18.1834 5.27499 17.9167 5.27499 17.6C5.27499 17.2834 5.38333 17.0167 5.59999 16.8L10.4 12L5.59999 7.20002C5.38333 6.98336 5.27499 6.71669 5.27499 6.40002C5.27499 6.08336 5.38333 5.81669 5.59999 5.60002C5.81666 5.38336 6.08333 5.27502 6.39999 5.27502C6.71666 5.27502 6.98333 5.38336 7.19999 5.60002L12 10.4L16.8 5.60002C17.0167 5.38336 17.2833 5.27502 17.6 5.27502C17.9167 5.27502 18.1833 5.38336 18.4 5.60002C18.6167 5.81669 18.725 6.08336 18.725 6.40002C18.725 6.71669 18.6167 6.98336 18.4 7.20002L13.6 12L18.4 16.8C18.6167 17.0167 18.725 17.2834 18.725 17.6C18.725 17.9167 18.6167 18.1834 18.4 18.4C18.1833 18.6167 17.9167 18.725 17.6 18.725C17.2833 18.725 17.0167 18.6167 16.8 18.4L12 13.6Z" fill="currentColor"></path>
+          </svg>
+        </mock:shadow-root>
+      </swirl-icon-close>
+    `);
+  });
+});

package/dist/collection/components/swirl-inline-error/swirl-inline-error.spec.js

@@ -0,0 +1,24 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlInlineError } from "./swirl-inline-error";
+describe("swirl-inline-error", () => {
+  it("displays the error message and icon", async () => {
+    const page = await newSpecPage({
+      components: [SwirlInlineError],
+      html: `<swirl-inline-error message="The error message." size="m"></swirl-inline-error>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-inline-error message="The error message." size="m">
+        <mock:shadow-root>
+          <span class="inline-error inline-error--size-m" part="inline-error">
+            <span class="inline-error__icon">
+              <swirl-icon-error size="24"></swirl-icon-error>
+            </span>
+            <span class="inline-error__message">
+              The error message.
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-inline-error>
+    `);
+  });
+});

package/dist/collection/components/swirl-inline-notification/swirl-inline-notification.spec.js

@@ -0,0 +1,48 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlInlineNotification } from "./swirl-inline-notification";
+describe("swirl-inline-notification", () => {
+  it("renders with heading and content", async () => {
+    const page = await newSpecPage({
+      components: [SwirlInlineNotification],
+      html: `<swirl-inline-notification heading="Heading">Content</swirl-inline-notification>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-inline-notification heading="Heading">
+        <mock:shadow-root>
+          <div aria-describedby="content" class="inline-notification inline-notification--intent-info" role="status" tabindex="0">
+            <span aria-hidden="true" class="inline-notification__icon">
+              <swirl-icon-info size="20"></swirl-icon-info>
+            </span>
+            <span class="inline-notification__content" id="content">
+              <swirl-text class="inline-notification__heading" size="sm" weight="semibold">Heading</swirl-text>
+              <slot></slot>
+            </span>
+          </div>
+        </mock:shadow-root>
+        Content
+      </swirl-inline-notification>
+    `);
+  });
+  it("renders with intent", async () => {
+    const page = await newSpecPage({
+      components: [SwirlInlineNotification],
+      html: `<swirl-inline-notification heading="Heading" intent="critical">Content</swirl-inline-notification>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-inline-notification heading="Heading" intent="critical">
+        <mock:shadow-root>
+          <div aria-describedby="content" class="inline-notification inline-notification--intent-critical" role="status" tabindex="0">
+            <span aria-hidden="true" class="inline-notification__icon">
+              <swirl-icon-error size="20"></swirl-icon-error>
+            </span>
+            <span class="inline-notification__content" id="content">
+              <swirl-text class="inline-notification__heading" size="sm" weight="semibold">Heading</swirl-text>
+              <slot></slot>
+            </span>
+          </div>
+        </mock:shadow-root>
+        Content
+      </swirl-inline-notification>
+    `);
+  });
+});

package/dist/collection/components/swirl-inline-status/swirl-inline-status.spec.js

@@ -0,0 +1,24 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlInlineStatus } from "./swirl-inline-status";
+describe("swirl-inline-error", () => {
+  it("displays the status message and icon", async () => {
+    const page = await newSpecPage({
+      components: [SwirlInlineStatus],
+      html: `<swirl-inline-status icon="<swirl-icon-info></swirl-icon-info>" intent="info" message="The status message." size="m"></swirl-inline-status>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <swirl-inline-status icon="<swirl-icon-info></swirl-icon-info>" intent="info" message="The status message." size="m">
+        <mock:shadow-root>
+          <span class="inline-status inline-status--intent-info inline-status--size-m" part="inline-status">
+            <span class="inline-status__icon">
+              <swirl-icon-info size="24"></swirl-icon-info>
+            </span>
+            <span class="inline-status__message">
+              The status message.
+            </span>
+          </span>
+        </mock:shadow-root>
+      </swirl-inline-status>
+    `);
+  });
+});