@functionalcms/svelte-components 3.5.15 → 3.5.18

package/dist/components/agnostic/Button/Button.svelte

@@ -1,86 +1,173 @@
+<script lang="ts">
+	export let mode = '';
+	export let size = '';
+	export let isBordered = false;
+	export let isCapsule = false;
+	export let isGrouped = false;
+	export let isBlock = false;
+	export let isLink = false;
+	export let isBlank = false;
+	export let isDisabled = false;
+	export let role = undefined;
+	export let isCircle = false;
+	export let isRounded = false;
+	export let isSkinned = true;
+	// The following properties can be used by consumers of Tabs which setup their own
+	// custom buttons as these aria and tabindex attributes are required for a11y
+	export let ariaSelected = undefined;
+	export let ariaControls = undefined;
+	export let tabIndex = undefined;
+
+	$: aSelected = ariaSelected || null;
+	$: tIndex = tabIndex || null;
+	/**
+	 * This prop is an escape hatch for global CSS overrides. Likely, the most useful reason to
+	 * leverage this is to add custom responsive media query code. Note that you'll likely need
+	 * to add specificity to beat out the Svelte based CSS, and, in Svelte land you'll need to
+	 * utilize globals functionality which might look like:
+	 * @media all and (min-width: 769px) {
+	 *   :global(button.btn.button-overrides) {
+	 *     font-size: 18px;
+	 *     ...etc.
+	 */
+	export let css = '';
+
+	/**
+	 * Button type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+	 * submit: submits form data to the server
+	 * reset: resets all the controls to their initial values, like <input type="reset">
+	 * button: button has no default behavior, and does nothing when pressed by default.
+	 */
+	export let type = 'button';
+
+	// ******************** HEY! ************************
+	// You will need to also add these to the buttonslot:
+	// agnostic-svelte/src/stories/ButtonSlot.svelte
+	$: klasses = [
+		isSkinned ? 'btn' : 'btn-base',
+		mode ? `btn-${mode}` : '',
+		size ? `btn-${size}` : '',
+		isBordered ? 'btn-bordered' : '',
+		isCapsule ? 'btn-capsule ' : '',
+		isGrouped ? 'btn-grouped' : '',
+		isBlock ? 'btn-block' : '',
+		isCircle ? 'btn-circle' : '',
+		isRounded ? 'btn-rounded' : '',
+		isDisabled ? 'disabled' : '',
+		isBlank ? 'btn-blank' : '',
+		isLink ? 'btn-link' : '',
+		css ? `${css}` : ''
+	]
+		.filter((c) => c)
+		.join(' ');
+</script>
+
+<!-- https://github.com/sveltejs/svelte/issues/2324 -->
+{#if type === 'faux'}
+	<div class={klasses}>
+		<slot />
+	</div>
+{:else}
+	<button
+		{type}
+		class={klasses}
+		on:keydown
+		on:click
+		on:focus
+		on:blur
+		{role}
+		aria-selected={aSelected}
+		aria-controls={ariaControls}
+		tab-index={tIndex}
+		disabled={isDisabled}
+		{...$$restProps}
+	>
+		<slot />
+	</button>
+{/if}
+
 <style>
-.btn-base {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  user-select: none;
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--functional-timing-medium);
-}
-
-.btn {
-  /* TODO test this fallback override syntax is correct */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  user-select: none;
-  appearance: none;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition-property: all;
-  transition-duration: var(--functional-timing-medium);
-}
-
-.btn-skin,
-.btn {
-  color: var(--functional-btn-font-color, var(--functional-dark));
-  background-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
-  border-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
-
-  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
-  border-style: solid;
-  border-width: var(--functional-btn-border-size, 1px);
-  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));
-  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);
-  text-decoration: none;
-  text-align: center;
-  outline: none;
-}
-
-.btn:visited {
-  color: var(--functional-btn-font-color, var(--functional-dark));
-}
-
-.btn:hover {
-  opacity: 85%;
-  text-decoration: none;
-}
-
-.btn:active {
-  text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
-  text-decoration: none;
-  transition-duration: 0s;
-  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
-}
-
-.btn: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;
-
-  /* In order for the focused element's box-shadow to appear above its siblings we need to
+	.btn-base {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		white-space: nowrap;
+		user-select: none;
+		appearance: none;
+		cursor: pointer;
+		box-sizing: border-box;
+		transition-property: all;
+		transition-duration: var(--functional-timing-medium);
+	}
+
+	.btn {
+		/* TODO test this fallback override syntax is correct */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		white-space: nowrap;
+		user-select: none;
+		appearance: none;
+		cursor: pointer;
+		box-sizing: border-box;
+		transition-property: all;
+		transition-duration: var(--functional-timing-medium);
+	}
+
+	.btn-skin,
+	.btn {
+		color: var(--functional-btn-font-color, var(--functional-dark));
+		background-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
+		border-color: var(--functional-btn-bgcolor, var(--functional-gray-light));
+
+		/* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
+		border-style: solid;
+		border-width: var(--functional-btn-border-size, 1px);
+		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));
+		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);
+		text-decoration: none;
+		text-align: center;
+		outline: none;
+	}
+
+	.btn:visited {
+		color: var(--functional-btn-font-color, var(--functional-dark));
+	}
+
+	.btn:hover {
+		opacity: 85%;
+		text-decoration: none;
+	}
+
+	.btn:active {
+		text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
+		text-decoration: none;
+		transition-duration: 0s;
+		box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
+	}
+
+	.btn: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;
+
+		/* In order for the focused element's box-shadow to appear above its siblings we need to
   establish a new stacking context: https://stackoverflow.com/a/28042700 */
-  isolation: isolate;
-}
+		isolation: isolate;
+	}
 
-/*
+	/*
 * Disabled State
 *
 * The disabled state uses the class .disabled, is-disabled,
@@ -88,283 +175,197 @@
 * The use of !important is only added because this is a state
 * that must be applied to all buttons when in a disabled state.
 */
-.btn.disabled,
-.btn:disabled {
-  top: 0 !important;
-  background: var(--functional-btn-disabled-bg, var(--functional-gray-mid-dark)) !important;
-  text-shadow: 0 1px 1px rgb(255 255 255 / 100%) !important;
+	.btn.disabled,
+	.btn:disabled {
+		top: 0 !important;
+		background: var(--functional-btn-disabled-bg, var(--functional-gray-mid-dark)) !important;
+		text-shadow: 0 1px 1px rgb(255 255 255 / 100%) !important;
 
-  /* primary, secondary, natural, all look same when disabled; and we don't want to
+		/* primary, secondary, natural, all look same when disabled; and we don't want to
   have an inadvertant looking blue primary border when disabled so it's transparent */
-  border-color: transparent;
-  color: var(--functional-btn-disabled-color, var(--functional-gray-dark)) !important;
-  cursor: default !important;
-  appearance: none !important;
-  box-shadow: none !important;
-  opacity: 80% !important;
-}
-
-.btn-primary {
-  background-color: var(--functional-btn-primary, var(--functional-primary));
-  border-color: var(--functional-btn-primary, var(--functional-primary));
-  color: var(--functional-btn-primary-color, var(--functional-light));
-}
-
-/* Border and font is primary. When hovered, we invert with primary background and white font */
-.btn-primary.btn-bordered {
-  color: var(--functional-btn-primary, var(--functional-primary));
-}
-
-.btn-primary.btn-bordered:hover,
-.btn-primary.btn-bordered:focus {
-  background-color: var(--functional-btn-primary, var(--functional-primary));
-  color: var(--functional-btn-primary-color, var(--functional-light));
-}
-
-.btn-primary:visited {
-  color: var(--functional-btn-primary-color, var(--functional-light));
-}
-
-.btn-secondary {
-  background-color: var(--functional-btn-secondary, var(--functional-secondary));
-  border-color: var(--functional-btn-secondary, var(--functional-secondary));
-  color: var(--functional-btn-secondary-color, var(--functional-light));
-}
-
-/* Border and font is secondary. When hovered, we invert with secondary background and white font */
-.btn-secondary.btn-bordered {
-  color: var(--functional-btn-secondary, var(--functional-secondary));
-}
-
-.btn-secondary.btn-bordered:hover,
-.btn-secondary.btn-bordered:focus {
-  background-color: var(--functional-btn-secondary, var(--functional-secondary));
-  color: var(--functional-btn-secondary-color, var(--functional-light));
-}
-
-.btn-secondary:visited {
-  color: var(--functional-btn-secondary-color, var(--functional-light));
-}
-
-/*
+		border-color: transparent;
+		color: var(--functional-btn-disabled-color, var(--functional-gray-dark)) !important;
+		cursor: default !important;
+		appearance: none !important;
+		box-shadow: none !important;
+		opacity: 80% !important;
+	}
+
+	.btn-primary {
+		background-color: var(--functional-btn-primary, var(--functional-primary));
+		border-color: var(--functional-btn-primary, var(--functional-primary));
+		color: var(--functional-btn-primary-color, var(--functional-light));
+	}
+
+	/* Border and font is primary. When hovered, we invert with primary background and white font */
+	.btn-primary.btn-bordered {
+		color: var(--functional-btn-primary, var(--functional-primary));
+	}
+
+	.btn-primary.btn-bordered:hover,
+	.btn-primary.btn-bordered:focus {
+		background-color: var(--functional-btn-primary, var(--functional-primary));
+		color: var(--functional-btn-primary-color, var(--functional-light));
+	}
+
+	.btn-primary:visited {
+		color: var(--functional-btn-primary-color, var(--functional-light));
+	}
+
+	.btn-secondary {
+		background-color: var(--functional-btn-secondary, var(--functional-secondary));
+		border-color: var(--functional-btn-secondary, var(--functional-secondary));
+		color: var(--functional-btn-secondary-color, var(--functional-light));
+	}
+
+	/* Border and font is secondary. When hovered, we invert with secondary background and white font */
+	.btn-secondary.btn-bordered {
+		color: var(--functional-btn-secondary, var(--functional-secondary));
+	}
+
+	.btn-secondary.btn-bordered:hover,
+	.btn-secondary.btn-bordered:focus {
+		background-color: var(--functional-btn-secondary, var(--functional-secondary));
+		color: var(--functional-btn-secondary-color, var(--functional-light));
+	}
+
+	.btn-secondary:visited {
+		color: var(--functional-btn-secondary-color, var(--functional-light));
+	}
+
+	/*
 /**
   * Border Buttons
   */
-.btn-bordered {
-  border-width: 1px;
-  background: transparent;
-}
+	.btn-bordered {
+		border-width: 1px;
+		background: transparent;
+	}
 
-/**
+	/**
   * Sizes
   */
-.btn-large {
-  font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
-  height: 3rem;
-  line-height: 3rem;
-  padding: 0 3rem;
-}
-
-.btn-small {
-  font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
-  height: 2rem;
-  line-height: 2rem;
-  padding: 0 2rem;
-}
-
-/**
+	.btn-large {
+		font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
+		height: 3rem;
+		line-height: 3rem;
+		padding: 0 3rem;
+	}
+
+	.btn-small {
+		font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
+		height: 2rem;
+		line-height: 2rem;
+		padding: 0 2rem;
+	}
+
+	/**
   * Rounded
   */
-.btn-rounded {
-  border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
-}
+	.btn-rounded {
+		border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
+	}
 
-.btn-pill {
-  border-radius: 200px;
-}
+	.btn-pill {
+		border-radius: 200px;
+	}
 
-/*
+	/*
   * Size Adjustment for equal height & width buttons
   *
   * Remove padding
   */
-.btn-circle {
-  border-radius: 100%;
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0 !important;
-}
-
-.btn-circle-large {
-  font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
-  width: 3rem;
-  height: 3rem;
-}
-
-.btn-circle-small {
-  font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
-  width: 2rem;
-  height: 2rem;
-}
-
-/**
+	.btn-circle {
+		border-radius: 100%;
+		width: 2.5rem;
+		height: 2.5rem;
+		padding: 0 !important;
+	}
+
+	.btn-circle-large {
+		font-size: calc(var(--functional-btn-font-size, 1rem) + 0.25rem);
+		width: 3rem;
+		height: 3rem;
+	}
+
+	.btn-circle-small {
+		font-size: calc(var(--functional-btn-font-size, 1rem) - 0.25rem);
+		width: 2rem;
+		height: 2rem;
+	}
+
+	/**
  * Button Block (stacked)
  */
-.btn-block {
-  width: 100%;
-}
+	.btn-block {
+		width: 100%;
+	}
 
-/* This is a utility class used if you literally want to stack block buttons one after another.
+	/* This is a utility class used if you literally want to stack block buttons one after another.
 Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
-.btn-block-following {
-  margin-block-start: -1px;
-}
-
-.btn-grouped {
-  border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
-}
-
-.btn-grouped:not(:last-child) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  margin-inline-end: -1px;
-}
-
-.btn-grouped:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.btn-capsule {
-  --padding-side: calc(var(--functional-side-padding, 0.75rem) * 1.5);
-
-  border-radius: var(--functional-radius-capsule);
-  padding-inline-start: var(--padding-side);
-  padding-inline-end: var(--padding-side);
-}
-
-@media (prefers-reduced-motion), (update: slow) {
-  .btn,
-  .btn:focus {
-    transition-duration: 0.001ms !important;
-  }
-}
-
-/**
+	.btn-block-following {
+		margin-block-start: -1px;
+	}
+
+	.btn-grouped {
+		border-radius: var(--functional-btn-radius, var(--functional-radius, 0.25rem));
+	}
+
+	.btn-grouped:not(:last-child) {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		margin-inline-end: -1px;
+	}
+
+	.btn-grouped:not(:first-child) {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	.btn-capsule {
+		--padding-side: calc(var(--functional-side-padding, 0.75rem) * 1.5);
+
+		border-radius: var(--functional-radius-capsule);
+		padding-inline-start: var(--padding-side);
+		padding-inline-end: var(--padding-side);
+	}
+
+	@media (prefers-reduced-motion), (update: slow) {
+		.btn,
+		.btn:focus {
+			transition-duration: 0.001ms !important;
+		}
+	}
+
+	/**
  * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
  * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
  */
-:is(.btn-link, .btn-blank) {
-  font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
-  font-size: var(--functional-btn-font-size, 1rem);
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  transition: none;
-}
-
-/* Since blank buttons can be used for things like input addons we don't want to go crazy
+	:is(.btn-link, .btn-blank) {
+		font-family: var(--functional-btn-font-family, var(--functional-font-family-body));
+		font-size: var(--functional-btn-font-size, 1rem);
+		background-color: transparent;
+		border: 0;
+		border-radius: 0;
+		box-shadow: none;
+		transition: none;
+	}
+
+	/* Since blank buttons can be used for things like input addons we don't want to go crazy
 on the side padding. As such, these have a good bit less then regular buttons. */
-.btn-blank {
-  --functional-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
+	.btn-blank {
+		--functional-btn-blank-side-padding: var(--btn-blank-side-padding, 0.25rem);
 
-  padding-inline-start: var(--functional-btn-blank-side-padding);
-  padding-inline-end: var(--functional-btn-blank-side-padding);
-}
+		padding-inline-start: var(--functional-btn-blank-side-padding);
+		padding-inline-end: var(--functional-btn-blank-side-padding);
+	}
 
-/* A button blank with link color text */
-.btn-link {
-  color: var(--functional-btn-primary, var(--functional-primary));
-}
+	/* A button blank with link color text */
+	.btn-link {
+		color: var(--functional-btn-primary, var(--functional-primary));
+	}
 
-.btn-link:hover {
-  cursor: pointer;
-}
+	.btn-link:hover {
+		cursor: pointer;
+	}
 </style>
-
-<script lang="ts">
-  export let mode = "";
-  export let size = "";
-  export let isBordered = false;
-  export let isCapsule = false;
-  export let isGrouped = false;
-  export let isBlock = false;
-  export let isLink = false;
-  export let isBlank = false;
-  export let isDisabled = false;
-  export let role = undefined;
-  export let isCircle = false;
-  export let isRounded = false;
-  export let isSkinned = true;
-  // The following properties can be used by consumers of Tabs which setup their own
-  // custom buttons as these aria and tabindex attributes are required for a11y
-  export let ariaSelected = undefined;
-  export let ariaControls = undefined;
-  export let tabIndex = undefined;
-
-  $: aSelected = ariaSelected || null;
-  $: tIndex = tabIndex || null;
-  /**
-   * This prop is an escape hatch for global CSS overrides. Likely, the most useful reason to
-   * leverage this is to add custom responsive media query code. Note that you'll likely need
-   * to add specificity to beat out the Svelte based CSS, and, in Svelte land you'll need to
-   * utilize globals functionality which might look like:
-   * @media all and (min-width: 769px) {
-   *   :global(button.btn.button-overrides) {
-   *     font-size: 18px;
-   *     ...etc.
-   */
-  export let css = "";
-
-  /**
-   * Button type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
-   * submit: submits form data to the server
-   * reset: resets all the controls to their initial values, like <input type="reset">
-   * button: button has no default behavior, and does nothing when pressed by default.
-   */
-  export let type = "button";
-
-  // ******************** HEY! ************************
-  // You will need to also add these to the buttonslot:
-  // agnostic-svelte/src/stories/ButtonSlot.svelte
-  $: klasses = [
-    isSkinned ? "btn" : "btn-base",
-    mode ? `btn-${mode}` : "",
-    size ? `btn-${size}` : "",
-    isBordered ? "btn-bordered" : "",
-    isCapsule ? "btn-capsule " : "",
-    isGrouped ? "btn-grouped" : "",
-    isBlock ? "btn-block" : "",
-    isCircle ? "btn-circle" : "",
-    isRounded ? "btn-rounded" : "",
-    isDisabled ? "disabled" : "",
-    isBlank ? "btn-blank" : "",
-    isLink ? "btn-link" : "",
-    css ? `${css}` : "",
-  ].filter(c => c).join(" ");
-</script>
-
-<!-- https://github.com/sveltejs/svelte/issues/2324 -->
-{#if type === "faux"}
-  <div class={klasses}>
-    <slot />
-  </div>
-{:else}
-  <button
-    type={type}
-    class={klasses}
-    on:keydown
-    on:click
-    on:focus
-    on:blur
-    role={role}
-    aria-selected={aSelected}
-    aria-controls={ariaControls}
-    tab-index={tIndex}
-    disabled={isDisabled}
-    {...$$restProps}
-  >
-    <slot />
-  </button>
-{/if}