@ifloppy/maxcraftmc-ui-svelte 0.1.0

package/src/UIShell/HamburgerMenu.svelte

@@ -0,0 +1,45 @@
+<script>
+  /**
+   * Specify the ARIA label for the button
+   * @type {string}
+   */
+  export let ariaLabel = undefined;
+
+  /** Set to `true` to toggle the open state */
+  export let isOpen = false;
+
+  /**
+   * Specify the icon to render for the closed state.
+   * Defaults to `<Menu size={20} />`
+   * @type {any}
+   */
+  export let iconMenu = Menu;
+
+  /**
+   * Specify the icon to render for the opened state.
+   * Defaults to `<Close size={20} />`
+   * @type {any}
+   */
+  export let iconClose = Close;
+
+  /** Obtain a reference to the HTML button element */
+  export let ref = null;
+
+  import Close from "../icons/Close.svelte";
+  import Menu from "../icons/Menu.svelte";
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  title={ariaLabel}
+  aria-label={ariaLabel}
+  class:bx--header__action={true}
+  class:bx--header__menu-trigger={true}
+  class:bx--header__menu-toggle={true}
+  {...$$restProps}
+  on:click
+  on:click={() => (isOpen = !isOpen)}
+>
+  <svelte:component this={isOpen ? iconClose : iconMenu} size={20} />
+</button>

package/src/UIShell/Header.svelte

@@ -0,0 +1,103 @@
+<script>
+  /** Set to `false` to hide the side nav by default */
+  export let expandedByDefault = true;
+
+  /** Set to `true` to open the side nav */
+  export let isSideNavOpen = false;
+
+  /**
+   * Specify the ARIA label for the header
+   * @type {string}
+   */
+  export let uiShellAriaLabel = undefined;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the company name.
+   *
+   * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
+   * @type {string}
+   */
+  export let company = undefined;
+
+  /**
+   * Specify the platform name.
+   * Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`)
+   */
+  export let platformName = "";
+
+  /** Set to `true` to persist the hamburger menu */
+  export let persistentHamburgerMenu = 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;
+
+  /** Obtain a reference to the HTML anchor element */
+  export let ref = null;
+
+  /**
+   * Specify the icon to render for the closed state.
+   * Defaults to `<Menu size={20} />`
+   * @type {any}
+   */
+  export let iconMenu = Menu;
+
+  /**
+   * Specify the icon to render for the opened state.
+   * Defaults to `<Close size={20} />`
+   * @type {any}
+   */
+  export let iconClose = Close;
+
+  import Close from "../icons/Close.svelte";
+  import Menu from "../icons/Menu.svelte";
+  import { shouldRenderHamburgerMenu } from "./navStore";
+  import HamburgerMenu from "./HamburgerMenu.svelte";
+
+  let winWidth = undefined;
+
+  $: isSideNavOpen =
+    expandedByDefault &&
+    winWidth >= expansionBreakpoint &&
+    !persistentHamburgerMenu;
+  $: ariaLabel = company
+    ? `${company} `
+    : "" + (uiShellAriaLabel || $$props["aria-label"] || platformName);
+</script>
+
+<svelte:window bind:innerWidth={winWidth} />
+
+<header aria-label={ariaLabel} class:bx--header={true}>
+  <slot name="skip-to-content" />
+  {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
+    <HamburgerMenu bind:isOpen={isSideNavOpen} {iconClose} {iconMenu} />
+  {/if}
+  <a
+    {href}
+    class:bx--header__name={true}
+    bind:this={ref}
+    {...$$restProps}
+    on:click
+  >
+    {#if company || $$slots.company}
+      <span class:bx--header__name--prefix={true}
+        ><slot name="company">{company}&nbsp;</slot></span
+      >
+    {/if}
+    <slot name="platform">{platformName}</slot>
+  </a>
+  <slot />
+</header>

package/src/UIShell/HeaderAction.svelte

@@ -0,0 +1,160 @@
+<script>
+  /**
+   * @event {null} open
+   * @event {null} close
+   */
+
+  /** Set to `true` to open the panel */
+  export let isOpen = false;
+
+  /**
+   * Specify the icon to render when the action panel is closed.
+   * Defaults to `<Switcher size={20} />`
+   * @type {any}
+   */
+  export let icon = Switcher;
+
+  /**
+   * Specify the icon to render when the action panel is open.
+   * Defaults to `<Close size={20} />`
+   * @type {any}
+   */
+  export let closeIcon = Close;
+
+  /**
+   * Specify the text displayed next to the icon.
+   * Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`)
+   * @type {string}
+   */
+  export let text = undefined;
+
+  /**
+   * Specify an icon tooltip. The tooltip will not be displayed
+   * if either the `text` prop or a named slot="text" is used
+   * @type {string}
+   */
+  export let iconDescription = undefined;
+
+  /**
+   * Set the alignment of the tooltip relative to the icon.
+   * Only applies when `iconDescription` is provided
+   * @type {"start" | "center" | "end"}
+   */
+  export let tooltipAlignment = "center";
+
+  /** Obtain a reference to the button HTML element */
+  export let ref = null;
+
+  /**
+   * Customize the panel transition (i.e., `transition:slide`).
+   * Set to `false` to disable the transition
+   * @type {false | import("svelte/transition").SlideParams}
+   */
+  export let transition = { duration: 200 };
+
+  /** Set to `true` to prevent the panel from closing when clicking outside */
+  export let preventCloseOnClickOutside = false;
+
+  import { createEventDispatcher } from "svelte";
+  import { slide } from "svelte/transition";
+  import Close from "../icons/Close.svelte";
+  import Switcher from "../icons/Switcher.svelte";
+
+  const dispatch = createEventDispatcher();
+
+  let refPanel = null;
+
+  $: hasIconOnly = iconDescription && !(text || $$slots.text);
+  $: buttonClass = [
+    hasIconOnly && "bx--btn bx--btn--primary",
+    hasIconOnly && "bx--tooltip__trigger bx--tooltip--a11y",
+    hasIconOnly && "bx--btn--icon-only bx--btn--icon-only--bottom",
+    hasIconOnly && `bx--tooltip--align-${tooltipAlignment}`,
+    $$restProps.class,
+  ]
+    .filter(Boolean)
+    .join(" ");
+</script>
+
+<svelte:window
+  on:click={({ target }) => {
+    if (
+      isOpen &&
+      !ref.contains(target) &&
+      !refPanel.contains(target) &&
+      !preventCloseOnClickOutside
+    ) {
+      isOpen = false;
+      dispatch("close");
+    }
+  }}
+/>
+
+<button
+  bind:this={ref}
+  type="button"
+  class:bx--header__action={true}
+  class:bx--header__action--active={isOpen}
+  class:bx--header__action--text={text}
+  {...$$restProps}
+  class={buttonClass}
+  on:click
+  on:click|stopPropagation={() => {
+    isOpen = !isOpen;
+    dispatch(isOpen ? "open" : "close");
+  }}
+>
+  {#if hasIconOnly}
+    <span class:bx--assistive-text={true}>{iconDescription}</span>
+  {/if}
+  {#if isOpen}
+    <slot name="closeIcon">
+      <svelte:component this={closeIcon} size={20} />
+    </slot>
+  {:else}
+    <slot name="icon">
+      <svelte:component this={icon} size={20} />
+    </slot>
+  {/if}
+  <slot name="text">
+    {#if text}<span class:bx--header__action-text={true}>{text}</span>{/if}
+  </slot>
+</button>
+{#if isOpen}
+  <div
+    bind:this={refPanel}
+    class:bx--header-panel={true}
+    class:bx--header-panel--expanded={true}
+    style:overflow-y="auto"
+    style:color-scheme="dark"
+    transition:slide|local={{
+      ...transition,
+      duration: transition === false ? 0 : transition.duration,
+    }}
+  >
+    <slot />
+  </div>
+{/if}
+
+<style>
+  :global(.bx--header__action--text) {
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+
+    /** 2px bottom padding aligns icon with `HeaderAction` */
+    padding: 0 1rem 2px 1rem;
+
+    /** `body-short-01` styles */
+    font-size: 0.875rem;
+    line-height: 1.28572;
+    letter-spacing: 0.16px;
+
+    /** Same color as `Header` platformName */
+    color: #f4f4f4;
+  }
+
+  :global(.bx--header__action-text) {
+    margin-left: 0.75rem;
+  }
+</style>

package/src/UIShell/HeaderActionLink.svelte

@@ -0,0 +1,43 @@
+<script>
+  /** Set to `true` to use the active state */
+  export let linkIsActive = false;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string}
+   */
+  export let href = 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>
+
+<a
+  bind:this={ref}
+  class:bx--header__action={true}
+  class:bx--header__action--active={linkIsActive}
+  {href}
+  rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+  {...$$restProps}
+  on:click
+>
+  <slot name="icon">
+    <svelte:component this={icon} size={20} />
+  </slot>
+</a>
+
+<style>
+  :global(.bx--header__action) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /** Hot fix to align icon with `HeaderAction` */
+    padding-bottom: 2px;
+  }
+</style>

package/src/UIShell/HeaderGlobalAction.svelte

@@ -0,0 +1,33 @@
+<script>
+  /**
+   * @extends {"../Button/Button.svelte"} ButtonProps
+   */
+
+  /** Set to `true` to use the active variant */
+  export let isActive = false;
+
+  /**
+   * Specify the icon to render
+   * @type {any}
+   */
+  export let icon = undefined;
+
+  /** Obtain a reference to the HTML button element
+   * @type {HTMLButtonElement}
+   */
+  export let ref = null;
+
+  import Button from "../Button/Button.svelte";
+
+  $: buttonClass = [
+    "bx--header__action",
+    isActive && " bx--header__action--active",
+    $$restProps.class,
+  ]
+    .filter(Boolean)
+    .join(" ");
+</script>
+
+<Button bind:ref {...$$restProps} class={buttonClass} on:click>
+  <svelte:component this={icon} slot="icon" size={20} />
+</Button>

package/src/UIShell/HeaderNav.svelte

@@ -0,0 +1,13 @@
+<script>
+  $: props = {
+    "aria-label": $$props["aria-label"],
+    "aria-labelledby": $$props["aria-labelledby"],
+  };
+</script>
+
+<nav {...props} class:bx--header__nav={true} {...$$restProps}>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+  <ul {...props} role="menubar" class:bx--header__menu-bar={true}>
+    <slot />
+  </ul>
+</nav>

package/src/UIShell/HeaderNavItem.svelte

@@ -0,0 +1,66 @@
+<script>
+  /**
+   * Specify the `href` attribute
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /**
+   * Specify the text
+   * @type {string}
+   */
+  export let text = undefined;
+
+  /** Set to `true` to select the item */
+  export let isSelected = false;
+
+  /** Obtain a reference to the HTML anchor element */
+  export let ref = null;
+
+  import { getContext, onMount } from "svelte";
+
+  const id = "ccs-" + Math.random().toString(36);
+  const ctx = getContext("HeaderNavMenu");
+
+  let selectedItemIds = [];
+
+  const unsubSelectedItems = ctx?.selectedItems.subscribe((_selectedItems) => {
+    selectedItemIds = Object.keys(_selectedItems);
+  });
+
+  $: ctx?.updateSelectedItems({ id, isSelected });
+
+  onMount(() => {
+    return () => {
+      if (unsubSelectedItems) unsubSelectedItems();
+    };
+  });
+</script>
+
+<li role="none">
+  <a
+    bind:this={ref}
+    role="menuitem"
+    tabindex="0"
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--header__menu-item={true}
+    aria-current={isSelected ? "page" : undefined}
+    {...$$restProps}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keyup
+    on:keydown
+    on:focus
+    on:blur
+    on:blur={() => {
+      if (selectedItemIds.indexOf(id) === selectedItemIds.length - 1) {
+        ctx?.closeMenu();
+      }
+    }}
+  >
+    <span class:bx--text-truncate--end={true}><slot>{text}</slot></span>
+  </a>
+</li>

package/src/UIShell/HeaderNavMenu.svelte

@@ -0,0 +1,106 @@
+<script>
+  /** Set to `true` to toggle the expanded state */
+  export let expanded = false;
+
+  /** Specify the `href` attribute */
+  export let href = "/";
+
+  /**
+   * Specify the text
+   * @type {string}
+   */
+  export let text = undefined;
+
+  /** Obtain a reference to the HTML anchor element */
+  export let ref = null;
+
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import ChevronDown from "../icons/ChevronDown.svelte";
+
+  const selectedItems = writable({});
+
+  let menuRef = null;
+
+  setContext("HeaderNavMenu", {
+    selectedItems,
+    updateSelectedItems(item) {
+      selectedItems.update((_items) => ({
+        ..._items,
+        [item.id]: item.isSelected,
+      }));
+    },
+    closeMenu() {
+      expanded = false;
+    },
+  });
+
+  $: isCurrentSubmenu =
+    Object.values($selectedItems).filter(Boolean).length > 0;
+</script>
+
+<svelte:window
+  on:click={({ target }) => {
+    if (!ref.contains(target)) {
+      expanded = false;
+    }
+  }}
+/>
+
+<li
+  role="none"
+  class:bx--header__submenu={true}
+  class:bx--header__submenu--current={isCurrentSubmenu}
+  on:click={(e) => {
+    if (!menuRef.contains(e.target)) {
+      e.preventDefault();
+    }
+    expanded = !expanded;
+  }}
+  on:keydown={(e) => {
+    if (e.key === "Enter") {
+      e.stopPropagation();
+      expanded = !expanded;
+    }
+  }}
+>
+  <a
+    bind:this={ref}
+    role="menuitem"
+    tabindex="0"
+    aria-haspopup="menu"
+    aria-expanded={expanded}
+    aria-label={text}
+    {href}
+    class:bx--header__menu-item={true}
+    class:bx--header__menu-title={true}
+    style:z-index={1}
+    {...$$restProps}
+    on:keydown
+    on:keydown={(e) => {
+      if (e.key === " ") e.preventDefault();
+      if (e.key === "Enter" || e.key === " ") {
+        expanded = !expanded;
+      }
+    }}
+    on:click|preventDefault
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keyup
+    on:focus
+    on:blur
+  >
+    {text}
+    <ChevronDown class="bx--header__menu-arrow" />
+  </a>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+  <ul
+    bind:this={menuRef}
+    role="menu"
+    aria-label={text}
+    class:bx--header__menu={true}
+  >
+    <slot />
+  </ul>
+</li>

package/src/UIShell/HeaderPanelDivider.svelte

@@ -0,0 +1,22 @@
+{#if $$slots.default}
+  <li class:bx--header-panel-divider={true}>
+    <slot />
+  </li>
+{/if}
+<hr class:bx--switcher__item--divider={true} />
+
+<style>
+  /**
+    * Carbon does not support a divider with a subject.
+    * We apply custom styles using the switcher subject divider
+    * from https://carbondesignsystem.com/ as a reference.
+    */
+
+  :global(.bx--header-panel-divider) {
+    margin: 2rem 1rem 0;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    letter-spacing: 0.02rem;
+    color: #c6c6c6;
+  }
+</style>

package/src/UIShell/HeaderPanelLink.svelte

@@ -0,0 +1,23 @@
+<script>
+  /**
+   * Specify the `href` attribute
+   * @type {string}
+   */
+  export let href = undefined;
+
+  /** Obtain a reference to the HTML anchor element */
+  export let ref = null;
+</script>
+
+<li class:bx--switcher__item={true}>
+  <a
+    bind:this={ref}
+    {href}
+    rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
+    class:bx--switcher__item-link={true}
+    {...$$restProps}
+    on:click
+  >
+    <slot />
+  </a>
+</li>

package/src/UIShell/HeaderPanelLinks.svelte

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