@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/UIShell/HeaderSearch.svelte

@@ -0,0 +1,338 @@
+<script>
+  /**
+   * @typedef {{ href: string; text: string; description?: string; }} HeaderSearchResult
+   * @event {null} active
+   * @event {null} inactive
+   * @event {null} clear
+   * @event {{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }} select
+   * @slot {{ result: HeaderSearchResult; index: number }}
+   */
+
+  /** Specify the search input value */
+  export let value = "";
+
+  /** Set to `true` to activate and focus the search bar */
+  export let active = false;
+
+  /** Obtain a reference to the input HTML element */
+  export let ref = null;
+
+  /**
+   * Render a list of search results
+   * @type {ReadonlyArray<HeaderSearchResult>}
+   */
+  export let results = [];
+
+  /** Specify the selected result index */
+  export let selectedResultIndex = 0;
+
+  import { createEventDispatcher, tick } from "svelte";
+  import Close from "../icons/Close.svelte";
+  import IconSearch from "../icons/IconSearch.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let refSearch = null;
+
+  function reset() {
+    active = false;
+    value = "";
+    selectedResultIndex = 0;
+  }
+
+  function selectResult() {
+    dispatch("select", { value, selectedResultIndex, selectedResult });
+    reset();
+  }
+
+  $: if (active && ref) ref.focus();
+  $: if (!active && ref) ref.blur();
+  $: dispatch(active ? "active" : "inactive");
+  $: selectedResult = results[selectedResultIndex];
+  $: selectedId = selectedResult
+    ? `search-menuitem-${selectedResultIndex}`
+    : undefined;
+</script>
+
+<svelte:window
+  on:mouseup={({ target }) => {
+    if (active && !refSearch.contains(target)) active = false;
+  }}
+/>
+
+<div
+  bind:this={refSearch}
+  class:bx--header__search={true}
+  role="search"
+  class:bx--header__search--active={active}
+>
+  <label
+    class:bx--header__search-label={true}
+    for="search-input"
+    id="search-label">Search</label
+  >
+  <div
+    class:bx--header__search-menu={true}
+    aria-owns="search-menu"
+    aria-haspopup="menu"
+  >
+    <button
+      type="button"
+      aria-label="Search"
+      aria-expanded={active}
+      tabindex={active ? "-1" : "0"}
+      class:bx--header-search-button={true}
+      class:bx--header__action={true}
+      class:bx--header-search-button--disabled={active}
+      on:click={() => {
+        active = true;
+      }}
+    >
+      <IconSearch size={20} title="Search" />
+    </button>
+    <input
+      bind:this={ref}
+      type="text"
+      autocomplete="off"
+      placeholder="Search..."
+      tabindex={active ? "0" : "-1"}
+      class:bx--header__search-input={true}
+      class:bx--header__search--active={active}
+      {...$$restProps}
+      id="search-input"
+      aria-autocomplete="list"
+      aria-controls="search-menu"
+      aria-activedescendant={selectedId}
+      bind:value
+      on:change
+      on:input
+      on:focus
+      on:blur
+      on:keydown
+      on:keydown={(e) => {
+        switch (e.key) {
+          case "Enter":
+            selectResult();
+            break;
+          case "ArrowDown":
+            e.preventDefault();
+            if (selectedResultIndex === results.length - 1) {
+              selectedResultIndex = 0;
+            } else {
+              selectedResultIndex += 1;
+            }
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            if (selectedResultIndex === 0) {
+              selectedResultIndex = results.length - 1;
+            } else {
+              selectedResultIndex -= 1;
+            }
+            break;
+          case "Escape":
+            if (value === "") {
+              // If the search bar is empty, deactivate the input.
+              active = false;
+            }
+
+            // Reset the search query but keep the search bar active.
+            // Do not dispatch "clear" event as that should fire only on the "x" button.
+            value = "";
+            selectedResultIndex = 0;
+            break;
+        }
+      }}
+      on:paste
+    />
+    <button
+      type="button"
+      aria-label="Clear search"
+      tabindex={active ? "0" : "-1"}
+      class:bx--header__action={true}
+      class:bx--header-search-button={true}
+      class:bx--header-search-button--hidden={!active}
+      on:click={() => {
+        reset();
+        dispatch("clear");
+      }}
+    >
+      <Close size={20} title="Close" />
+    </button>
+  </div>
+
+  {#if active && results.length > 0}
+    <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+    <ul
+      aria-labelledby="search-label"
+      role="menu"
+      id="search-menu"
+      class:bx--header-search-menu={true}
+    >
+      {#each results as result, i}
+        <li role="none">
+          <a
+            tabindex="-1"
+            id="search-menuitem-{i}"
+            role="menuitem"
+            href={result.href}
+            class:bx--header-search-menu-item={true}
+            class:bx--header-search-menu-item--selected={selectedId ===
+              `search-menuitem-${i}`}
+            on:click|preventDefault={async () => {
+              selectedResultIndex = i;
+              await tick();
+              selectResult();
+            }}
+          >
+            <slot {result} index={i}>
+              {result.text}
+              {#if result.description}<span
+                  class:bx--header-search-menu-description={true}
+                  >– {result.description}</span
+                >{/if}
+            </slot>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  :global(.bx--header__search-label) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    visibility: inherit;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  :global(.bx--header__search) {
+    position: relative;
+    display: flex;
+    max-width: 28rem;
+    width: 100%;
+    margin-left: 0.5rem;
+    height: 3rem;
+    background-color: #393939;
+    color: #fff;
+    transition:
+      max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
+      background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+  }
+
+  :global(.bx--header__search:not(.bx--header__search--active)) {
+    max-width: 3rem;
+    background-color: #161616;
+  }
+
+  :global(.bx--header__search.bx--header__search--active) {
+    outline: 2px solid #fff;
+    outline-offset: -2px;
+  }
+
+  :global(.bx--header__search-menu) {
+    display: flex;
+    flex-grow: 1;
+    border-bottom: 1px solid #393939;
+  }
+
+  :global(.bx--header__search-input) {
+    width: 100%;
+    height: 3rem;
+    padding: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.375rem;
+    letter-spacing: 0;
+    color: #fff;
+    caret-color: #fff;
+    background-color: initial;
+    border: none;
+    outline: none;
+    transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+  }
+
+  :global(.bx--header__search-input:not(.bx--header__search--active)) {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :global(.bx--header-search-button) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 100%;
+    padding: 0;
+    flex-shrink: 0;
+    opacity: 1;
+    transition:
+      background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
+      opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
+  }
+
+  :global(.bx--header-search-button--disabled) {
+    border: none;
+    pointer-events: none;
+  }
+
+  :global(.bx--header-search-button:hover) {
+    background-color: #4c4c4c;
+  }
+
+  :global(.bx--header-search-button--hidden) {
+    opacity: 0;
+    display: none;
+  }
+
+  :global(.bx--header-search-menu) {
+    position: absolute;
+    z-index: 10000;
+    padding: 1rem 0;
+    left: 0;
+    right: 0;
+    top: 3rem;
+    background-color: #161616;
+    border: 1px solid #393939;
+    border-top: none;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+  }
+
+  :global(.bx--header-search-menu-item) {
+    padding: 6px 1rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.29;
+    letter-spacing: 0.16px;
+    transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+    display: block;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #c6c6c6;
+  }
+
+  :global(.bx--header-search-menu-item--selected),
+  :global(.bx--header-search-menu-item:hover) {
+    background-color: #353535;
+    color: #f4f4f4;
+  }
+
+  :global(.bx--header-search-menu-description) {
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1.34;
+    letter-spacing: 0.32px;
+    text-transform: lowercase;
+    color: #c6c6c6;
+  }
+</style>

package/src/UIShell/HeaderUtilities.svelte

@@ -0,0 +1,3 @@
+<div class:bx--header__global={true}>
+  <slot />
+</div>

package/src/UIShell/SideNav.svelte

@@ -0,0 +1,84 @@
+<script>
+  /**
+   * @event {null} open
+   * @event {null} close
+   * @event {null} click:overlay
+   */
+
+  /** Set to `true` to use the fixed variant */
+  export let fixed = false;
+
+  /** Set to `true` to use the rail variant */
+  export let rail = false;
+
+  /**
+   * Specify the ARIA label for the nav
+   * @type {string}
+   */
+  export let ariaLabel = undefined;
+
+  /** Set to `true` to toggle the expanded state */
+  export let isOpen = false;
+
+  /**
+   * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
+   * 1056 represents the "large" breakpoint in pixels from the Carbon Design System:
+   * - small: 320
+   * - medium: 672
+   * - large: 1056
+   * - x-large: 1312
+   * - max: 1584
+   */
+  export let expansionBreakpoint = 1056;
+
+  import { onMount, createEventDispatcher } from "svelte";
+  import {
+    shouldRenderHamburgerMenu,
+    isSideNavCollapsed,
+    isSideNavRail,
+  } from "./navStore";
+
+  const dispatch = createEventDispatcher();
+
+  let winWidth = undefined;
+
+  $: dispatch(isOpen ? "open" : "close");
+  $: $isSideNavCollapsed = !isOpen;
+  $: $isSideNavRail = rail;
+
+  onMount(() => {
+    shouldRenderHamburgerMenu.set(true);
+    return () => shouldRenderHamburgerMenu.set(false);
+  });
+</script>
+
+<svelte:window bind:innerWidth={winWidth} />
+
+{#if !fixed}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    on:click={() => {
+      dispatch("click:overlay");
+      isOpen = false;
+    }}
+    class:bx--side-nav__overlay={true}
+    class:bx--side-nav__overlay-active={isOpen}
+    style:z-index={isOpen ? 6000 : undefined}
+  ></div>
+{/if}
+<nav
+  aria-hidden={!isOpen}
+  aria-label={ariaLabel}
+  class:bx--side-nav__navigation={true}
+  class:bx--side-nav={true}
+  class:bx--side-nav--ux={true}
+  class:bx--side-nav--expanded={rail && winWidth >= expansionBreakpoint
+    ? false
+    : isOpen}
+  class:bx--side-nav--collapsed={!isOpen && !rail}
+  class:bx--side-nav--rail={rail}
+  {...$$restProps}
+>
+  <slot />
+</nav>

package/src/UIShell/SideNavDivider.svelte

@@ -0,0 +1 @@
+<li role="separator" class:bx--side-nav__divider={true} {...$$restProps}></li>

package/src/UIShell/SideNavItems.svelte

@@ -0,0 +1,3 @@
+<ul class:bx--side-nav__items={true}>
+  <slot />
+</ul>

package/src/UIShell/SideNavLink.svelte

@@ -0,0 +1,54 @@
+<script>
+  /** Set to `true` to select the current link */
+  export let isSelected = false;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the text
+   * @type {string}
+   */
+  export let text = undefined;
+
+  /**
+   * Specify the icon to render
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  /** Obtain a reference to the HTML anchor element */
+  export let ref = null;
+</script>
+
+<li class:bx--side-nav__item={true}>
+  <a
+    bind:this={ref}
+    aria-current={isSelected ? "page" : undefined}
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--side-nav__link={true}
+    class:bx--side-nav__link--current={isSelected}
+    {...$$restProps}
+    on:click
+  >
+    {#if $$slots.icon || icon}
+      <div
+        class:bx--side-nav__icon={true}
+        class:bx--side-nav__icon--small={true}
+      >
+        <slot name="icon">
+          <svelte:component this={icon} />
+        </slot>
+      </div>
+    {/if}
+    <span class:bx--side-nav__link-text={true}>
+      <slot>
+        {text}
+      </slot>
+    </span>
+  </a>
+</li>

package/src/UIShell/SideNavMenu.svelte

@@ -0,0 +1,59 @@
+<script>
+  /** Set to `true` to toggle the expanded state */
+  export let expanded = false;
+
+  /**
+   * Specify the text
+   * @type {string}
+   */
+  export let text = undefined;
+
+  /**
+   * Specify the icon to render
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  /** Obtain a reference to the HTML button element */
+  export let ref = null;
+
+  import ChevronDown from "../icons/ChevronDown.svelte";
+</script>
+
+<li class:bx--side-nav__item={true} class:bx--side-nav__item--icon={icon}>
+  <button
+    type="button"
+    bind:this={ref}
+    aria-expanded={expanded}
+    class:bx--side-nav__submenu={true}
+    {...$$restProps}
+    on:click
+    on:click={() => {
+      expanded = !expanded;
+    }}
+  >
+    {#if $$slots.icon || icon}
+      <div class:bx--side-nav__icon={true}>
+        <slot name="icon">
+          <svelte:component this={icon} />
+        </slot>
+      </div>
+    {/if}
+    <span class:bx--side-nav__submenu-title={true}>{text}</span>
+    <div
+      class:bx--side-nav__icon={true}
+      class:bx--side-nav__icon--small={true}
+      class:bx--side-nav__submenu-chevron={true}
+    >
+      <ChevronDown />
+    </div>
+  </button>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+  <ul
+    role="menu"
+    class:bx--side-nav__menu={true}
+    style:max-height={expanded ? "none" : undefined}
+  >
+    <slot />
+  </ul>
+</li>

package/src/UIShell/SideNavMenuItem.svelte

@@ -0,0 +1,32 @@
+<script>
+  /** Set to `true` to select the item */
+  export let isSelected = false;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the item text
+   * @type {string}
+   */
+  export let text = undefined;
+
+  /** Obtain a reference to the HTML anchor element */
+  export let ref = null;
+</script>
+
+<li class:bx--side-nav__menu-item={true}>
+  <a
+    bind:this={ref}
+    aria-current={isSelected ? "page" : undefined}
+    {href}
+    class:bx--side-nav__link={true}
+    {...$$restProps}
+    on:click
+  >
+    <span class:bx--side-nav__link-text={true}><slot>{text}</slot></span>
+  </a>
+</li>

package/src/UIShell/SkipToContent.svelte

@@ -0,0 +1,11 @@
+<script>
+  /** Specify the `href` attribute */
+  export let href = "#main-content";
+
+  /** Specify the tabindex */
+  export let tabindex = "0";
+</script>
+
+<a {href} {tabindex} class:bx--skip-to-content={true} {...$$restProps} on:click>
+  <slot>Skip to main content</slot>
+</a>

package/src/UIShell/index.js

@@ -0,0 +1,20 @@
+export { default as Header } from "./Header.svelte";
+export { default as HeaderAction } from "./HeaderAction.svelte";
+export { default as HeaderActionLink } from "./HeaderActionLink.svelte";
+export { default as HeaderNav } from "./HeaderNav.svelte";
+export { default as HeaderNavItem } from "./HeaderNavItem.svelte";
+export { default as HeaderNavMenu } from "./HeaderNavMenu.svelte";
+export { default as HeaderPanelDivider } from "./HeaderPanelDivider.svelte";
+export { default as HeaderPanelLink } from "./HeaderPanelLink.svelte";
+export { default as HeaderPanelLinks } from "./HeaderPanelLinks.svelte";
+export { default as HeaderUtilities } from "./HeaderUtilities.svelte";
+export { default as SideNav } from "./SideNav.svelte";
+export { default as SideNavItems } from "./SideNavItems.svelte";
+export { default as SideNavLink } from "./SideNavLink.svelte";
+export { default as SideNavMenu } from "./SideNavMenu.svelte";
+export { default as SideNavMenuItem } from "./SideNavMenuItem.svelte";
+export { default as Content } from "./Content.svelte";
+export { default as SkipToContent } from "./SkipToContent.svelte";
+export { default as HeaderGlobalAction } from "./HeaderGlobalAction.svelte";
+export { default as HeaderSearch } from "./HeaderSearch.svelte";
+export { default as SideNavDivider } from "./SideNavDivider.svelte";

package/src/UIShell/navStore.js

@@ -0,0 +1,7 @@
+import { writable } from "svelte/store";
+
+export const shouldRenderHamburgerMenu = writable(false);
+
+export const isSideNavCollapsed = writable(false);
+
+export const isSideNavRail = writable(false);

package/src/UnorderedList/UnorderedList.svelte

@@ -0,0 +1,22 @@
+<script>
+  /** Set to `true` to use the nested variant */
+  export let nested = false;
+
+  /** Set to `true` to use Carbon's expressive typesetting */
+  export let expressive = false;
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<ul
+  class:bx--list--unordered={true}
+  class:bx--list--nested={nested}
+  class:bx--list--expressive={expressive}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</ul>

package/src/UnorderedList/index.js

@@ -0,0 +1 @@
+export { default as UnorderedList } from "./UnorderedList.svelte";

package/src/icons/Add.svelte

@@ -0,0 +1,28 @@
+<script>
+  export let size = 16;
+
+  export let title = undefined;
+
+  $: labelled = $$props["aria-label"] || $$props["aria-labelledby"] || title;
+  $: attributes = {
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: Number($$props["tabindex"]) === 0 ? true : undefined,
+  };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  preserveAspectRatio="xMidYMid meet"
+  width={size}
+  height={size}
+  {...attributes}
+  {...$$restProps}
+>
+  {#if title}<title>{title}</title>{/if}
+  <path
+    d="M17 15L17 8 15 8 15 15 8 15 8 17 15 17 15 24 17 24 17 17 24 17 24 15z"
+  ></path>
+</svg>