@functionalcms/svelte-components 2.33.2 → 2.34.2

package/dist/components/agnostic/Table/Table.svelte

@@ -0,0 +1,508 @@
+<style>
+.table {
+  --table-bg: transparent;
+  --table-accent-bg: transparent;
+  --table-striped-color: var(--functional-dark);
+  --table-striped-bg: rgb(0 0 0 / 2.5%);
+  --table-active-color: var(--functional-dark);
+  --table-active-bg: rgb(0 0 0 / 1.5%);
+  --table-hoverable-color: var(--functional-dark);
+  --table-hoverable-bg: var(--functional-table-hover-bg, #f1faff);
+
+  width: 100%;
+  margin-bottom: var(--fluid-16);
+  color: var(--functional-dark);
+  vertical-align: top;
+  border-color: var(--functional-table-border-color, var(--functional-gray-light));
+}
+
+.table > :not(caption) > * > * {
+  padding: var(--fluid-8) var(--fluid-8);
+  background-color: var(--table-bg);
+  border-bottom-width: 1px;
+
+  /* 4th is spread --table-accent-bg will gets reset for active, hover, striped */
+  box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
+}
+
+.table > tbody {
+  vertical-align: inherit;
+}
+
+.table > thead {
+  vertical-align: bottom;
+}
+
+.table thead th {
+  font-weight: 600;
+}
+
+.table-caps thead th {
+  font-size: var(--fluid-12);
+  text-transform: uppercase;
+}
+
+.table tbody td,
+.table tbody th {
+  font-weight: 400;
+}
+
+.table > :not(thead):not(caption) {
+  border-top: var(--fluid-2) solid var(--functional-gray-light);
+}
+
+.caption-top {
+  caption-side: top;
+}
+
+.caption-bottom {
+  caption-side: bottom;
+}
+
+.caption-bottom,
+.caption-top {
+  padding-block-start: var(--fluid-12);
+  padding-block-end: var(--fluid-12);
+
+  /* Takes writing mode into account -- (mdn) same as left if direction is left-to-right
+  and right if direction is right-to-left */
+  text-align: start;
+}
+
+.caption-end {
+  text-align: end;
+}
+
+.table-small > :not(caption) > * > * {
+  padding: var(--fluid-4) var(--fluid-4);
+}
+
+.table-large > :not(caption) > * > * {
+  padding: var(--fluid-12) var(--fluid-12);
+}
+
+.table-xlarge > :not(caption) > * > * {
+  padding: var(--fluid-18) var(--fluid-18);
+}
+
+.table-bordered > :not(caption) > * {
+  border-width: 1px 0;
+}
+
+.table-bordered > :not(caption) > * > * {
+  border-width: 0 1px;
+}
+
+.table-borderless > :not(caption) > * > * {
+  border-bottom-width: 0;
+}
+
+.table-borderless > :not(:first-child) {
+  border-top-width: 0;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+  --table-accent-bg: var(--table-striped-bg);
+
+  color: var(--table-striped-color);
+}
+
+.table-active {
+  --table-accent-bg: var(--table-active-bg);
+
+  color: var(--table-active-color);
+}
+
+.table-hoverable > tbody > tr:hover > * {
+  --table-accent-bg: var(--table-hoverable-bg);
+
+  color: var(--table-hoverable-color);
+}
+
+/* Stacked tables */
+.table-stacked thead {
+  display: none;
+}
+
+.table-stacked tr,
+.table-stacked tbody th,
+.table-stacked tbody td {
+  display: block;
+  width: 100%;
+}
+
+.table-stacked tbody th,
+.table-stacked tbody td {
+  border-bottom-width: 0;
+}
+
+.table-stacked td[data-label] {
+  padding-bottom: var(--fluid-12);
+}
+
+.table-stacked tr {
+  border-bottom: var(--fluid-2) solid var(--functional-gray-light);
+  border-top-width: 0;
+}
+
+.table-stacked th[data-label]::before,
+.table-stacked td[data-label]::before {
+  content: attr(data-label);
+  display: block;
+  font-weight: 600;
+  margin: -0.5rem -1rem 0;
+  padding: var(--fluid-12) var(--fluid-16) var(--fluid-6);
+}
+
+.table-stacked tr th:first-child,
+.table-stacked tr td:first-child {
+  border-top-width: 0;
+}
+
+.table-stacked tr:nth-child(odd) td,
+.table-stacked tr:nth-child(odd) th {
+  background-color: inherit;
+}
+
+.table-stacked tr:first-child th:first-child,
+.table-stacked tr:first-child td:first-child {
+  border-top: var(--fluid-2) solid var(--functional-gray-light);
+}
+
+.table-stacked th[data-label],
+.table-stacked td[data-label] {
+  padding-bottom: var(--fluid-12);
+}
+
+/* As soon as there's not enough width, it will kick in horizontal scrolling */
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Table is responsive only "up to" the breakpoint. Above it will not scroll */
+@media (max-width: 576px) {
+  .table-responsive-small {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media (max-width: 768px) {
+  .table-responsive-medium {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media (max-width: 992px) {
+  .table-responsive-large {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+@media (max-width: 1200px) {
+  .table-responsive-xlarge {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.table-header-container {
+  display: flex;
+  align-items: center;
+}
+
+.table-sort-label {
+  flex: 1;
+  padding-inline-end: 0.5rem;
+  text-align: left;
+}
+
+.table-sort {
+  flex: 0 1 var(--fluid-48);
+  background-color: transparent;
+  border-color: transparent;
+  border-width: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding-block-start: var(--fluid-2);
+  padding-block-end: var(--fluid-2);
+}
+
+.icon-sort {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.table-sort:focus {
+  box-shadow: 0 0 0 var(--functional-focus-ring-outline-width) var(--functional-focus-ring-color);
+
+  /* Needed for High Contrast mode */
+  outline:
+    var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-style)
+    var(--functional-focus-ring-outline-color);
+  transition: box-shadow var(--functional-timing-fast) ease-out;
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .table-sort:focus {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+
+<script>import { createEventDispatcher } from "svelte";
+export let headers = [];
+headers.labelByKey = function() {
+  return this.reduce(function(rv, x) {
+    if (!("key" in x))
+      throw new Error(
+        "Header must have key value with `sortByKey` set to `true`"
+      );
+    rv[x.key] = x;
+    return rv;
+  }, {});
+};
+export let rows = [];
+export let caption = "";
+export let captionPosition = "hidden";
+export let tableSize = "";
+export let responsiveSize = "";
+export let isUppercasedHeaders = false;
+export let isBordered = false;
+export let isBorderless = false;
+export let isStriped = false;
+export let isHoverable = false;
+export let isStacked = false;
+export let filterByKey = false;
+export let offset = 0;
+export let limit = 0;
+let direction = "none";
+let sortingKey = "";
+const dispatch = createEventDispatcher();
+$: dispatch("sort", {
+  direction,
+  sortingKey
+});
+const pluckColumnToSort = (rowLeft, rowRight) => {
+  const colLeft = rowLeft[sortingKey] === null || rowLeft[sortingKey] === void 0 ? -Infinity : rowLeft[sortingKey];
+  const colRight = rowRight[sortingKey] === null || rowRight[sortingKey] === void 0 ? -Infinity : rowRight[sortingKey];
+  return {
+    colLeft,
+    colRight
+  };
+};
+const internalSort = (rowLeft, rowRight) => {
+  let { colLeft, colRight } = pluckColumnToSort(rowLeft, rowRight);
+  const headerWithCustomSortFunction = headers.find(
+    (h) => h.key === sortingKey && !!h.sortFn
+  );
+  if (headerWithCustomSortFunction && headerWithCustomSortFunction.sortFn) {
+    return headerWithCustomSortFunction.sortFn(colLeft, colRight);
+  }
+  colLeft = typeof colLeft === "string" ? colLeft.toLowerCase().replace(/(^\$|,)/g, "") : colLeft;
+  colRight = typeof colRight === "string" ? colRight.toLowerCase().replace(/(^\$|,)/g, "") : colRight;
+  colLeft = !Number.isNaN(Number(colLeft)) ? Number(colLeft) : colLeft;
+  colRight = !Number.isNaN(Number(colRight)) ? Number(colRight) : colRight;
+  if (colLeft > colRight) {
+    return 1;
+  }
+  if (colLeft < colRight) {
+    return -1;
+  }
+  return 0;
+};
+const descendingSort = (row1, row2) => internalSort(row1, row2) * -1;
+$: columns = filterByKey ? headers.labelByKey() : { ...headers };
+$: sortableItems = direction === "ascending" ? rows.sort(internalSort) : direction === "descending" ? rows.sort(descendingSort) : sortableItems = [...rows];
+$: visibleItems = sortableItems.slice(
+  offset ? offset : 0,
+  limit ? offset + limit : void 0
+);
+const handleSortClicked = (headerKey) => {
+  if (sortingKey !== headerKey) {
+    direction = "none";
+    sortingKey = headerKey;
+  }
+  switch (direction) {
+    case "ascending":
+      direction = "descending";
+      break;
+    case "descending":
+      direction = "none";
+      break;
+    case "none":
+      direction = "ascending";
+      break;
+    default:
+      console.warn(
+        "Table sorting only supports directions: ascending | descending | none"
+      );
+  }
+};
+const getSortingClassesFor = (headerKey, direction2, sortingKey2) => {
+  if (sortingKey2 === headerKey) {
+    return [
+      "icon-sort",
+      direction2 && direction2 !== "none" ? `icon-sort-${direction2}` : ""
+    ].filter((klass) => klass.length).join(" ");
+  }
+  return "icon-sort";
+};
+const getSortDirectionFor = (headerKey, direction2, sortingKey2) => {
+  if (sortingKey2 !== headerKey) {
+    return "none";
+  } else {
+    return direction2;
+  }
+};
+const tableResponsiveClasses = () => {
+  return [
+    !responsiveSize ? "table-responsive" : "",
+    responsiveSize ? `table-responsive-${responsiveSize}` : ""
+  ].filter((klass) => klass.length).join(" ");
+};
+const tableClasses = () => {
+  return [
+    "table",
+    tableSize ? `table-${tableSize}` : "",
+    isUppercasedHeaders ? "table-caps" : "",
+    isBordered ? "table-bordered" : "",
+    isBorderless ? "table-borderless" : "",
+    isStriped ? "table-striped" : "",
+    isHoverable ? "table-hoverable" : "",
+    isStacked ? "table-stacked" : ""
+  ].filter((klass) => klass.length).join(" ");
+};
+const captionClasses = () => {
+  return [
+    // .screenreader-only is expected to be globally available via common.min.css
+    captionPosition === "hidden" ? "screenreader-only" : "",
+    captionPosition !== "hidden" ? `caption-${captionPosition}` : ""
+  ].filter((klass) => klass.length).join(" ");
+};
+const getKeys = (row) => {
+  const filteredKeys = filterByKey ? Object.keys(columns).map((key) => [key, key]) : Object.keys(row).map((key, index) => [key, index]);
+  return filteredKeys;
+};
+</script>
+ <div class="{tableResponsiveClasses()}">
+  <table class="{tableClasses()}">
+    <caption class="{captionClasses()}">{caption}</caption>
+    <thead>
+      <tr>
+        {#each headers as headerCol}
+          <th
+            aria-sort="{getSortDirectionFor(
+              headerCol.key,
+              direction,
+              sortingKey
+            )}"
+            scope="col"
+            style="{headerCol.width
+              ? `width: ${headerCol.width}`
+              : 'width: auto'}"
+          >
+            {#if headerCol.sortable}
+              <div class="table-header-container">
+                <span class="table-sort-label">{headerCol.label}</span>
+                <button
+                  type="button"
+                  class="table-sort"
+                  on:click={() => handleSortClicked(headerCol.key)}
+                >
+                  <span class="screenreader-only">{headerCol.label}</span>
+                  <span
+                    class="{getSortingClassesFor(
+                      headerCol.key,
+                      direction,
+                      sortingKey
+                    )}">
+                    {#if getSortDirectionFor(headerCol.key, direction, sortingKey) === 'none'}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="{getSortingClassesFor(
+                          headerCol.key,
+                          direction,
+                          sortingKey
+                        )}"
+                        fill="none"
+                        viewBox="0 0 20 20"
+                        width="20"
+                        height="20"
+                      >
+                        <path
+                          d="m15 13-5 5-5-5M5 7l5-5 5 5"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    {:else if getSortDirectionFor(headerCol.key, direction, sortingKey) === 'descending'}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="{getSortingClassesFor(
+                          headerCol.key,
+                          direction,
+                          sortingKey
+                        )}"
+                        viewBox="0 0 20 20"
+                        width="20"
+                        height="20"
+                      >
+                        <path
+                          d="m10.778 13.635 4.964-5.86c.586-.693.11-1.775-.78-1.775H5.037a1.01 1.01 0 0 0-.561.17c-.168.111-.3.27-.382.457a1.102 1.102 0 0 0 .164 1.147l4.963 5.86a1.006 1.006 0 0 0 1.559 0v.001Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    {:else}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="{getSortingClassesFor(
+                          headerCol.key,
+                          direction,
+                          sortingKey
+                        )}"
+                        viewBox="0 0 20 20"
+                        width="20"
+                        height="20"
+                      >
+                        <path
+                          d="m9.221 6.365-4.963 5.86c-.586.693-.11 1.775.78 1.775h9.926c.2 0 .394-.059.561-.17.168-.111.3-.27.383-.457a1.102 1.102 0 0 0-.165-1.147l-4.963-5.86a1.04 1.04 0 0 0-.351-.27 1.007 1.007 0 0 0-1.208.27v-.001Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    {/if}
+                  </span>
+                </button>
+              </div>
+            {:else}{headerCol.label}{/if}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each visibleItems as row}
+        <tr>
+          {#each getKeys(row) as [key, id]}
+            <td>
+              {#if columns[id].renderComponent}
+                <svelte:component
+                  this="{columns[id].renderComponent()}"
+                  cellValue="{row[key]}"
+                />
+              {:else}
+                {row[key]}
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>

package/dist/components/agnostic/Table/Table.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        headers?: any[] & {
+            labelByKey(): any[];
+        };
+        rows?: any[];
+        caption?: string;
+        captionPosition?: string;
+        tableSize?: string;
+        responsiveSize?: string;
+        isUppercasedHeaders?: boolean;
+        isBordered?: boolean;
+        isBorderless?: boolean;
+        isStriped?: boolean;
+        isHoverable?: boolean;
+        isStacked?: boolean;
+        filterByKey?: boolean;
+        offset?: number;
+        limit?: number;
+    };
+    events: {
+        sort: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponent<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/components/agnostic/Table/TableCustomRenderComponent.svelte

@@ -0,0 +1,13 @@
+<script>
+  /**
+   * This is just an example that is used within the `renderComponent` in ./Table.stories.js
+   * `headers` like: { renderComponent: () => TableCustomRenderComponent },
+   *
+   * Also, it would have been nice to be able to generate this component "inline" but it seems
+   * there's an RFC for a long time but hasn't materialized:
+   * https://github.com/sveltejs/rfcs/blob/inline-components/text/0000-inline-components.md
+   */
+  export let cellValue;
+</script>
+
+<td>{cellValue}<span class="mis6">🏆</span></td>

package/dist/components/agnostic/Table/TableCustomRenderComponent.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  TableCustomRenderComponentProps */
+/** @typedef {typeof __propDef.events}  TableCustomRenderComponentEvents */
+/** @typedef {typeof __propDef.slots}  TableCustomRenderComponentSlots */
+export default class TableCustomRenderComponent extends SvelteComponent<{
+    cellValue: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableCustomRenderComponentProps = typeof __propDef.props;
+export type TableCustomRenderComponentEvents = typeof __propDef.events;
+export type TableCustomRenderComponentSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        cellValue: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/agnostic/Tabs/TabButtonCustom.svelte

@@ -0,0 +1,65 @@
+<style>
+	.buttonWrap {
+		opacity: 1;
+		transition: opacity 0.2s;
+		margin: 0;
+	}
+	.buttonWrap:not(:first-of-type) {
+		/* So we don't get a "double border" between tab buttons */
+		margin-inline-start: -1px;
+	}
+	.buttonWrap:hover {
+		opacity: 0.7;
+	}
+	.buttonWrap:hover:focus {
+		opacity: 1;
+	}
+	.tabButton:focus {
+		box-shadow: 0 0 0 var(--functional-focus-ring-outline-width)
+			var(--functional-focus-ring-color);
+		outline: var(--functional-focus-ring-outline-width)
+			var(--functional-focus-ring-outline-style)
+			var(--functional-focus-ring-outline-color);
+		transition: box-shadow var(--functional-timing-fast) ease-out;
+	}
+	.active .tabButton {
+		outline: 1px solid var(--functional-primary-hover);
+	}
+</style>
+
+<script>import Button from "../Button/Button.svelte";
+export let isActive = false;
+export let ariaControls = "";
+export let disabled = false;
+export let role = "tab";
+let btn;
+export function focus() {
+  return btn.focus();
+}
+export function isDisabled() {
+  return btn.disabled;
+}
+</script>
+
+<div class="buttonWrap {isActive ? 'active' : ''}">
+	<!-- We're using our own button to manage aria et al and then use the Button of
+  type "faux" to get back a <div> styled like a button. We need to do this because
+  we need to bind:this={btn} so the Tabs library can call ref.focus() and
+  ref.isDisabled() from the a11y keyboard navigation code. -->
+	<button
+		style="background: transparent; border: none; padding: 0;"
+		on:click
+		on:keydown
+		bind:this="{btn}"
+		disabled="{disabled}"
+		role="{role}"
+		class="tabButton"
+		tabindex="{isActive ? 0 : -1}"
+		aria-controls="{ariaControls ? ariaControls : null}"
+		aria-selected="{isActive}"
+	>
+		<Button type="faux" isBordered mode="primary">
+			<slot />
+		</Button>
+	</button>
+</div>

package/dist/components/agnostic/Tabs/TabButtonCustom.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+             * You must expose this prop for your tab buttons to get proper
+             * aria-selected and to show an affordance of the selected tab.
+             * See the .active class -- we're using an outline but you can
+             * set that affordance up however you'd like.
+             */ isActive?: boolean;
+        ariaControls?: string;
+        disabled?: boolean;
+        role?: string;
+        focus?: () => any;
+        isDisabled?: () => any;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TabButtonCustomProps = typeof __propDef.props;
+export type TabButtonCustomEvents = typeof __propDef.events;
+export type TabButtonCustomSlots = typeof __propDef.slots;
+export default class TabButtonCustom extends SvelteComponent<TabButtonCustomProps, TabButtonCustomEvents, TabButtonCustomSlots> {
+    get focus(): () => any;
+    get isDisabled(): () => any;
+}
+export {};