@functionalcms/svelte-components 2.33.2 → 2.34.2

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

@@ -0,0 +1,330 @@
+<style>
+/* TODO -- should we use these for .nav? */
+.tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs-vertical {
+  flex-direction: row;
+}
+
+.tab-list,
+.tab-list-base {
+  display: flex;
+  flex-flow: row wrap;
+  flex: 0 0 auto;
+}
+
+.tab-list,
+.tab-skinned {
+  padding-inline-start: 0;
+  margin-block-end: 0;
+  border-bottom:
+    var(--functional-tabs-border-size, 1px) solid
+    var(--functional-tabs-bgcolor, var(--functional-gray-light));
+  transition-property: all;
+  transition-duration: var(--functional-timing-medium);
+}
+
+/* In vertical orientation we want our tab buttons to stack */
+.tabs-vertical .tab-list,
+.tabs-vertical .tab-base {
+  flex-direction: column;
+  border: none;
+}
+
+/* We can ask for .tab-button which is base and skin combined, or, we can utilize .tab-button-base
+if we'd like to only blank out buttons but otherwise skin ourselves. */
+.tab-button,
+.tab-button-base {
+  /* Blank out the button */
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+
+  /* This fixes issue where upon focus, the a11y focus ring's box shadow would get tucked beneat
+  adjacent tab buttons; relative creates new stacking context https://stackoverflow.com/a/31276836 */
+  position: relative;
+
+  /* Reset margins/padding; this will get added back if it's a "skinned" tab button. However, we have
+  a use case where a tab-button is wrapping a faux button. For that, we don't want margins/padding because
+  the faux button provides that. */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+
+.tab-button,
+.tab-button-skin {
+  display: block;
+
+  /* Since this is a "skinned tab button" we add our padding here to previously "reset" .tab-button-base */
+  padding-block-start: var(--functional-vertical-pad, 0.5rem);
+  padding-block-end: var(--functional-vertical-pad, 0.5rem);
+  padding-inline-start: var(--functional-side-padding, 0.75rem);
+  padding-inline-end: var(--functional-side-padding, 0.75rem);
+  font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
+  font-weight: var(--functional-btn-font-weight, 400);
+  font-size: var(--functional-btn-font-size, 1rem);
+
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
+  color: var(--functional-tabs-primary, var(--functional-primary));
+  text-decoration: none;
+  transition:
+    color var(--functional-timing-fast) ease-in-out,
+    background-color var(--functional-timing-fast) ease-in-out,
+    border-color var(--functional-timing-fast) ease-in-out;
+}
+
+/* We pull back the 2nd subsequent tabs to remove the double border */
+.tab-button:not(:first-of-type),
+.tab-button-base:not(:first-of-type) {
+  margin-inline-start: -1px;
+}
+
+.tab-borderless {
+  border: none !important;
+}
+
+.tab-button-large {
+  padding-block-start: calc(var(--functional-input-side-padding) * 1.25);
+  padding-block-end: calc(var(--functional-input-side-padding) * 1.25);
+  padding-inline-start: calc(var(--functional-input-side-padding) * 1.75);
+  padding-inline-end: calc(var(--functional-input-side-padding) * 1.75);
+}
+
+.tab-button-xlarge {
+  padding-block-start: calc(var(--functional-input-side-padding) * 2);
+  padding-block-end: calc(var(--functional-input-side-padding) * 2);
+  padding-inline-start: calc(var(--functional-input-side-padding) * 3);
+  padding-inline-end: calc(var(--functional-input-side-padding) * 3);
+}
+
+.tab-item.tab-button {
+  margin-block-end: -1px;
+  background: 0 0;
+  border: 1px solid transparent;
+  border-top-left-radius: var(--functional-tabs-radius, 0.25rem);
+  border-top-right-radius: var(--functional-tabs-radius, 0.25rem);
+}
+
+.tab-item.tab-button.active {
+  color: var(--functional-dark);
+  background-color: var(--functional-light);
+  border-color: var(--functional-gray-light) var(--functional-gray-light) var(--functional-light);
+}
+
+.tab-item:hover,
+.tab-button:focus {
+  border-color:
+    var(--functional-focus-ring-outline-width) var(--functional-focus-ring-outline-width)
+    var(--functional-gray-light);
+  isolation: isolate;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.tabs-vertical .tab-button {
+  border: none;
+}
+
+.tab-button:disabled {
+  color: var(--functional-tabs-disabled-bg, var(--functional-gray-mid-dark));
+  background-color: transparent;
+  border-color: transparent;
+  opacity: 80%;
+}
+
+/**
+ * Elects to additively use the AgnosticUI custom focus ring alongside the border
+ * we already add above. It just makes things look more consistent across components.
+ * For example, when we tab into the panels and links within.
+ */
+.tab-button-base:focus,
+.tab-panel:focus,
+.tab-button: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) {
+  .tab-button,
+  .tab-button-base:focus,
+  .tab-button:focus,
+  .tab-panel:focus,
+  .tab-list,
+  .tab-skinned {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+</style>
+
+<script>export let size = "";
+export let tabs = [];
+export let isBorderless = false;
+export let isVerticalOrientation = false;
+export let isDisabled = false;
+export let disabledOptions = [];
+export let isSkinned = true;
+let dynamicComponentRefs = [];
+let tabButtonRefs = [];
+$: dynamicComponentRefs = [];
+$: tabButtonRefs = [];
+const baseStyles = () => `tabs ${isVerticalOrientation ? "tabs-vertical" : ""}`;
+const selectTab = (index) => {
+  tabs = tabs.map((tab, i) => {
+    tab.isActive = index === i ? true : false;
+    return tab;
+  });
+};
+let activeTabs = tabs.filter((tab) => tab.isActive);
+if (activeTabs.length === 0) {
+  selectTab(0);
+}
+$: tablistClasses = () => {
+  const tabListClass = isSkinned ? "tab-list" : "tab-list-base";
+  return [tabListClass, isBorderless ? `tab-borderless` : ""].filter((klass) => klass.length).join(" ");
+};
+$: tabButtonClasses = (tab) => {
+  const klasses = [
+    `tab-item`,
+    `tab-button`,
+    tab.isActive ? "active" : "",
+    size === "large" ? "tab-button-large" : "",
+    size === "xlarge" ? "tab-button-xlarge" : ""
+  ];
+  return klasses.filter((klass) => klass.length).join(" ");
+};
+const focusTab = (index, direction) => {
+  let i = index;
+  if (direction === "asc") {
+    i += 1;
+  } else if (direction === "desc") {
+    i -= 1;
+  }
+  if (i < 0) {
+    i = tabs.length - 1;
+  } else if (i >= tabs.length) {
+    i = 0;
+  }
+  let nextTab;
+  if (tabButtonRefs.length) {
+    nextTab = tabButtonRefs[i];
+  } else if (dynamicComponentRefs.length) {
+    nextTab = dynamicComponentRefs[i];
+  }
+  if (nextTab.isDisabled && nextTab.isDisabled() || nextTab.disabled && direction) {
+    focusTab(i, direction);
+  } else {
+    nextTab.focus();
+  }
+};
+const handleKeyDown = (ev, index) => {
+  switch (ev.key) {
+    case "Up":
+    case "ArrowUp":
+      if (isVerticalOrientation) {
+        focusTab(index, "desc");
+      }
+      break;
+    case "Down":
+    case "ArrowDown":
+      if (isVerticalOrientation) {
+        focusTab(index, "asc");
+      }
+      break;
+    case "Left":
+    case "ArrowLeft":
+      if (!isVerticalOrientation) {
+        focusTab(index, "desc");
+      }
+      break;
+    case "Right":
+    case "ArrowRight":
+      if (!isVerticalOrientation) {
+        focusTab(index, "asc");
+      }
+      break;
+    case "Home":
+    case "ArrowHome":
+      focusTab(0);
+      break;
+    case "End":
+    case "ArrowEnd":
+      focusTab(tabs.length - 1);
+      break;
+    case "Enter":
+    case "Space":
+      focusTab(index);
+      selectTab(index);
+      break;
+    default:
+      return;
+  }
+  ev.preventDefault();
+};
+</script>
+
+<div class="{baseStyles()}">
+	<div
+		class="{tablistClasses()}"
+		role="tablist"
+		aria-orientation="{isVerticalOrientation ? 'vertical' : 'horizontal'}"
+	>
+		{#each tabs as tab, i}
+			{#if tab.tabButtonComponent}
+				<svelte:component
+					this="{tab.tabButtonComponent}"
+					bind:this="{dynamicComponentRefs[i]}"
+					on:click="{() => selectTab(i)}"
+					on:keydown="{(e) => handleKeyDown(e, i)}"
+					disabled="{isDisabled ||
+						disabledOptions.includes(tab.title) ||
+						undefined}"
+					classes="{tabButtonClasses(tab)}"
+					role="tab"
+					ariaControls="{tab.ariaControls}"
+					isActive="{tab.isActive}"
+				>
+					{tab.title}
+				</svelte:component>
+			{:else}
+				<button
+					bind:this="{tabButtonRefs[i]}"
+					on:click="{() => selectTab(i)}"
+					on:keydown="{(e) => handleKeyDown(e, i)}"
+					disabled="{isDisabled ||
+						disabledOptions.includes(tab.title) ||
+						undefined}"
+					class="{tabButtonClasses(tab)}"
+					role="tab"
+					aria-controls="{tab.ariaControls}"
+					tabindex="{tab.isActive ? 0 : -1}"
+					aria-selected="{tab.isActive}"
+				>
+					{tab.title}
+				</button>
+			{/if}
+		{/each}
+	</div>
+	{#each tabs as panel}
+		{#if panel.isActive}
+			<svelte:component this="{panel.tabPanelComponent}" tabindex="0" />
+		{/if}
+	{/each}
+</div>
+<!-- <button on:click={() => console.log(tabButtonRefs)}>
+  print to console
+</button> -->

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

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+import type { Tab, TabSizes } from './api';
+declare const __propDef: {
+    props: {
+        size?: TabSizes;
+        /**
+           * This is an array of objects in shape like:
+           * {
+              title: "Tab 3",
+              tabPanelComponent: MyTabPanel,
+              // This is optional and only if you want to supply your own custom tab buttons.
+              // If not passed, we will generate an internal default tab button.
+              tabButtonComponent: TabButton3,
+            },
+           */ tabs?: Tab[];
+        isBorderless?: boolean;
+        isVerticalOrientation?: boolean;
+        isDisabled?: boolean;
+        disabledOptions?: string[];
+        isSkinned?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TabsProps = typeof __propDef.props;
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}
+export {};

package/dist/components/agnostic/Tabs/api.d.ts

@@ -0,0 +1,10 @@
+import type { SvelteComponentTyped } from 'svelte';
+export type Tab = {
+    title: string;
+    tabPanelComponent: SvelteComponentTyped;
+    tabButtonComponent?: SvelteComponentTyped;
+    isActive?: boolean;
+    ariaControls?: string;
+};
+export type TabSizes = 'small' | 'large' | 'xlarge' | '';
+export type NavigationDirection = 'asc' | 'desc';

package/dist/components/agnostic/Tabs/api.js

@@ -0,0 +1 @@
+export {};

package/dist/components/agnostic/Tag/Tag.svelte

@@ -0,0 +1,74 @@
+<style>
+.tag-base,
+.tag {
+  display: inline-flex;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.tag-skin,
+.tag {
+  background-color: var(--functional-gray-light);
+  color: var(--functional-dark);
+  font-size: var(--fluid-12);
+  line-height: var(--functional-line-height, var(--fluid-20, 1.25rem));
+  padding-block-start: var(--fluid-2);
+  padding-block-end: var(--fluid-2);
+  padding-inline-start: var(--fluid-8);
+  padding-inline-end: var(--fluid-8);
+}
+
+.tag-info {
+  background: var(--functional-primary-light);
+  color: var(--functional-primary-dark);
+}
+
+.tag-warning {
+  background: var(--functional-warning-light);
+  color: var(--functional-warning-dark);
+}
+
+.tag-error {
+  background: var(--functional-error-light);
+  color: var(--functional-error-dark);
+}
+
+.tag-success {
+  background: var(--functional-action-light);
+  color: var(--functional-action-dark);
+}
+
+.tag-upper {
+  font-size: var(--fluid-10);
+  text-transform: uppercase;
+}
+
+.tag-circle {
+  border-radius: 50%;
+}
+
+.tag-round {
+  border-radius: var(--functional-radius);
+}
+
+.tag-pill {
+  border-radius: 200px;
+}
+
+</style>
+
+<script>export let isUppercase = false;
+export let isSkinned = true;
+export let type = "";
+export let shape = "";
+const tagClasses = [
+  isSkinned ? "tag" : "tag-base",
+  type ? `tag-${type}` : "",
+  shape ? `tag-${shape}` : "",
+  isUppercase ? "tag-upper" : ""
+].filter((c) => c).join(" ");
+</script>
+
+<span class={tagClasses}>
+  <slot />
+</span>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        isUppercase?: boolean;
+        isSkinned?: boolean;
+        type?: string;
+        shape?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TagProps = typeof __propDef.props;
+export type TagEvents = typeof __propDef.events;
+export type TagSlots = typeof __propDef.slots;
+export default class Tag extends SvelteComponent<TagProps, TagEvents, TagSlots> {
+}
+export {};

package/dist/components/agnostic/Tag/TagSlots.svelte

@@ -0,0 +1,51 @@
+<style>
+  div {
+    margin-block-end: 1rem;
+  }
+</style>
+
+<script>import Tag from "./Tag.svelte";
+</script>
+
+<div>
+  <Tag>unknown</Tag>
+</div>
+<div>
+  <Tag isUppercase>unknown</Tag>
+</div>
+<div>
+  <Tag shape="round">round</Tag>
+</div>
+<div>
+  <Tag shape="pill">pill aka badge</Tag>
+</div>
+<div>
+  <Tag shape="circle">1</Tag>
+  <Tag shape="circle" type="error">2</Tag>
+  <Tag shape="circle" type="info">3</Tag>
+  <Tag shape="circle" type="warning">4</Tag>
+</div>
+<div>
+  <Tag type="success">success</Tag>
+</div>
+<div>
+  <Tag type="info">info</Tag>
+</div>
+<div>
+  <Tag type="error">error</Tag>
+</div>
+<div>
+  <Tag type="warning">warning</Tag>
+</div>
+<div>
+  <Tag type="info" shape="pill" isUppercase>saved</Tag>
+</div>
+<div>
+  <Tag type="warning" shape="pill" isUppercase>sure?</Tag>
+</div>
+<div>
+  <Tag type="success" shape="pill" isUppercase>yes</Tag>
+</div>
+<div>
+  <Tag type="error" shape="pill" isUppercase>no</Tag>
+</div>

package/dist/components/agnostic/Tag/TagSlots.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TagSlotsProps = typeof __propDef.props;
+export type TagSlotsEvents = typeof __propDef.events;
+export type TagSlotsSlots = typeof __propDef.slots;
+export default class TagSlots extends SvelteComponent<TagSlotsProps, TagSlotsEvents, TagSlotsSlots> {
+}
+export {};

package/dist/components/agnostic/Toasts/Toasts.svelte

@@ -0,0 +1,46 @@
+<style>
+.alert-toast {
+  min-width: 19rem;
+  max-width: 100%;
+  position: fixed;
+  z-index: 1100;
+  font-size: var(--functional-small);
+
+  /* Optimized to match with the height created when we have a
+  24px icon. If no icon, this preserves the toast height. */
+  line-height: var(--fluid-24);
+  padding: 0;
+
+  /* We use bottom: 0, left: 0 etc., so this
+  actually pushes the toast away from edge */
+  margin: var(--fluid-16);
+}
+
+</style>
+
+<script>import { onMount } from "svelte";
+export let portalRootSelector = "body";
+export let horizontalPosition;
+export let verticalPosition;
+const portalTarget = portalRootSelector || "body";
+$: toastClasses = [
+  "alert-toast",
+  horizontalPosition,
+  verticalPosition
+].filter((c) => c.length).join(" ");
+let mounted = false;
+onMount(() => mounted = true);
+const teleportNode = async (node) => {
+  const destination = document.querySelector(portalTarget);
+  destination.appendChild(node);
+};
+const teleport = (node) => {
+  teleportNode(node);
+};
+</script>
+
+{#if mounted}
+  <div class={toastClasses} use:teleport>
+    <slot />
+  </div>
+{/if}

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

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        portalRootSelector?: string;
+        horizontalPosition: "start" | "center" | "end";
+        verticalPosition: "top" | "bottom";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ToastsProps = typeof __propDef.props;
+export type ToastsEvents = typeof __propDef.events;
+export type ToastsSlots = typeof __propDef.slots;
+export default class Toasts extends SvelteComponent<ToastsProps, ToastsEvents, ToastsSlots> {
+}
+export {};