@mozaic-ds/web-components 1.0.0-alpha.0 → 1.0.0-alpha.1

package/public/components/sidebar/sidebar-feature.nested.svelte

@@ -1,249 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import {
-    isSidebarOpen,
-    selectedFeature,
-  } from '../../utilities/sidebar-service';
-  import type { A11yLabels, Feature, Selection } from './sidebar.types';
-
-  export let feature: Feature;
-  export let a11yLabels: A11yLabels;
-
-  $: updateSelection(feature, $selectedFeature);
-  $: updatA11yLabel(a11yLabels, feature);
-
-  let isSelected = false;
-  let ariaSuffix: string;
-
-  let label: HTMLElement;
-  let showTooltip: boolean;
-  $: updateTooltip($isSidebarOpen);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function updateTooltip(_: boolean) {
-    setTimeout(() => {
-      showTooltip = label?.offsetHeight < label?.scrollHeight;
-    }, 500);
-  }
-
-  function updateSelection(feature: Feature, selection?: Selection) {
-    isSelected =
-      ((selection?.lv1 && feature.code === selection?.lv1?.code) ||
-        (selection?.lv2 && feature.code === selection?.lv2?.code)) ??
-      false;
-  }
-
-  function updatA11yLabel(label: A11yLabels, feature: Feature) {
-    if (feature.embedded) {
-      ariaSuffix = label?.['external-link-suffix']
-        ? ` (${label['external-link-suffix']})`
-        : ' (link to a new window)';
-    } else {
-      ariaSuffix = '';
-    }
-  }
-</script>
-
-{#if !feature.disabled}
-  <a
-    aria-label="{feature.label}{ariaSuffix}"
-    href={feature.href ?? 'javascript:void(null)'}
-    target={feature.embedded}
-    class="mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen
-      ? 'is-open'
-      : 'is-close'}"
-    id={feature.code}
-  >
-    <div class="mc-sidebar-feature__container">
-      <span class="mc-sidebar-feature__label" bind:this={label}
-        >{feature.label}</span
-      >
-      {#if showTooltip}
-        <div aria-hidden="true" class="mc-sidebar-feature__label__tooltip">
-          <div class="mc-sidebar-feature__label__tooltip__pointer"><div /></div>
-          <span>{feature.label}</span>
-        </div>
-      {/if}
-      {#if feature.embedded === '_blank'}
-        <svg
-          class="mc-sidebar-feature__icon"
-          width="16px"
-          height="16px"
-          viewBox="0 0 16 16"
-          ><path
-            fill-rule="evenodd"
-            d="M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z"
-          /></svg
-        >
-      {/if}
-    </div>
-  </a>
-{:else}
-  <span
-    aria-label={feature.label}
-    aria-disabled="true"
-    class="mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen
-      ? 'is-open'
-      : 'is-close'} is-disabled"
-    id={feature.code}
-  >
-    <div class="mc-sidebar-feature__container">
-      <svg
-        class="mc-sidebar-feature__icon-disabled"
-        width="16px"
-        height="16px"
-        viewBox="0 0 16 16"
-        ><g clip-path="url(#a)"
-          ><path
-            fill-rule="evenodd"
-            d="M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z"
-          /></g
-        ><defs><clipPath id="a"><path d="M0 0h16v16H0z" /></clipPath></defs
-        ></svg
-      >
-      <span>{feature.label}</span>
-    </div>
-  </span>
-{/if}
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-sidebar-feature {
-    font-size: 16px;
-    min-width: 200px;
-    cursor: pointer;
-    flex: 1;
-    display: flex;
-    text-decoration: none;
-    color: $color-sidebar-text-color;
-    line-height: 22px;
-    overflow: hidden;
-
-    &__container {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding-top: 8px;
-      padding-bottom: 8px;
-
-      span {
-        max-width: 200px;
-        min-width: 200px;
-      }
-    }
-
-    &__icon {
-      fill: $color-sidebar-icon;
-    }
-
-    &__icon-disabled {
-      fill: $color-sidebar-feature-disabled-background;
-    }
-
-    &__label {
-      flex: 1;
-      margin-right: 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      -webkit-box-orient: vertical;
-
-      &__tooltip {
-        opacity: 0;
-        transition: 0s opacity;
-        background-color: $color-sidebar-divider-background;
-        border: 1px solid $color-sidebar-text-color;
-        border-radius: 4px;
-        position: absolute;
-        pointer-events: none;
-        left: calc(100% - 16px);
-        padding: 8px 16px;
-        width: 188px;
-
-        &__pointer {
-          position: absolute;
-          top: 50%;
-          left: -8px;
-          top: calc(50% - 6px);
-          width: 0;
-          height: 0;
-          border-top: 6px solid transparent;
-          border-bottom: 6px solid transparent;
-          border-right: 8px solid $color-sidebar-text-color;
-
-          & div {
-            position: relative;
-            top: -6px;
-            left: 2px;
-            width: 0;
-            height: 0;
-            border-top: 6px solid transparent;
-            border-bottom: 6px solid transparent;
-            border-right: 8px solid $color-sidebar-divider-background;
-          }
-        }
-      }
-
-      &:hover + .mc-sidebar-feature__label__tooltip {
-        opacity: 1;
-        transition-delay: 1s;
-      }
-    }
-
-    &__icon {
-      margin-right: 8px;
-    }
-
-    &.is-selected {
-      background: $color-sidebar-feature-selected-background;
-    }
-
-    &.is-close {
-      @include transition(padding 300ms ease-in-out);
-      padding: 0px 0px;
-
-      .mc-sidebar-feature__container {
-        @include transition(padding-left 300ms ease-in-out);
-        padding-left: 20px;
-        width: 24px;
-      }
-    }
-
-    &.is-open {
-      @include transition(padding 300ms ease-in-out);
-      padding: 0px 32px;
-
-      .mc-sidebar-feature__container {
-        @include transition(padding-left 300ms ease-in-out);
-        padding-left: 32px;
-      }
-    }
-
-    &.is-disabled {
-      color: $color-sidebar-feature-disabled-background;
-      fill: $color-sidebar-feature-disabled-background;
-    }
-
-    &:hover {
-      background: $color-sidebar-feature-hover-background;
-    }
-
-    &:focus-visible {
-      box-shadow: none;
-      border: none;
-      outline: none;
-
-      .mc-sidebar-feature__container {
-        box-shadow: none;
-        border: none;
-        border-radius: 6px;
-        outline: 1px solid #0b96cc;
-      }
-    }
-  }
-</style>

package/public/components/sidebar/sidebar-section.nested.svelte

@@ -1,138 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import type { A11yLabels, Feature, FeatureGroup } from './sidebar.types';
-  import FeatureGroupComponent from './sidebar-feature-group.nested.svelte';
-  import SubFeaturesComponent from './sidebar-sub-features.nested.svelte';
-  import {
-    isSidebarOpen,
-    toggleSidebar,
-  } from '../../utilities/sidebar-service';
-
-  export let data: FeatureGroup[] = [];
-  export let a11yLabels: A11yLabels;
-
-  let expandedGroup: string | undefined;
-  let expandedSubGroup: Feature | undefined;
-
-  function handleGroupClick(code: string) {
-    // opens the menu if at the time of the click on a FeatureGroup this one was closed
-    const open = $isSidebarOpen;
-    if (!open) {
-      toggleSidebar();
-    }
-
-    if (open && expandedGroup === code) {
-      expandedGroup = undefined;
-    } else {
-      expandedGroup = code;
-    }
-  }
-
-  function handleFeatureClick(event?: CustomEvent<Feature>) {
-    if (event?.detail) {
-      if (expandedSubGroup && expandedSubGroup.code === event.detail.code) {
-        expandedSubGroup = undefined;
-      } else {
-        expandedSubGroup = event.detail;
-      }
-    } else {
-      expandedSubGroup = undefined;
-    }
-  }
-</script>
-
-{#if data?.length}
-  <div class="mc-sidebar-section">
-    <ul
-      class={expandedSubGroup && $isSidebarOpen ? 'is-hidden' : 'is-visible'}
-      aria-hidden={expandedSubGroup && $isSidebarOpen}
-    >
-      {#each data as featureGroup}
-        <li on:click={() => handleGroupClick(featureGroup.code)}>
-          <FeatureGroupComponent
-            {featureGroup}
-            expand={expandedGroup === featureGroup.code}
-            {a11yLabels}
-            on:feature-click={(event) => handleFeatureClick(event)}
-          />
-        </li>
-      {/each}
-    </ul>
-    {#if expandedSubGroup && $isSidebarOpen}
-      <SubFeaturesComponent
-        data={expandedSubGroup}
-        {a11yLabels}
-        on:back-click={() => handleFeatureClick()}
-      />
-    {/if}
-  </div>
-{/if}
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-sidebar-section {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    align-items: flex-start;
-    min-height: 38px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overflow-y: overlay;
-    padding: 1px 0px;
-    scrollbar-color: $color-primary-02-400 $color-sidebar-divider-background;
-    scrollbar-width: thin;
-
-    ul,
-    li {
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      width: 100%;
-    }
-
-    ul {
-      align-items: start;
-      flex-direction: column;
-      justify-content: center;
-
-      li {
-        flex-direction: column;
-        box-sizing: border-box;
-        margin: 4px 0px;
-
-        &:first-child {
-          margin-top: 0;
-        }
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      &.is-hidden {
-        @include transition(margin-left 300ms ease-in-out);
-        margin-left: -320px;
-        opacity: 0;
-      }
-
-      &.is-visible {
-        @include transition(margin-left 300ms ease-in-out);
-        margin-left: 0;
-      }
-    }
-
-    &::-webkit-scrollbar {
-      width: 5px;
-      height: 10px;
-      background: $color-sidebar-scroll-background;
-
-      &-thumb {
-        background: $color-sidebar-scroll-color;
-      }
-    }
-  }
-</style>

package/public/components/sidebar/sidebar-segment.nested.svelte

@@ -1,136 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import type { Segment } from './sidebar.types';
-  import {
-    isSidebarOpen,
-    selectedFeature,
-    selectFeature,
-  } from '../../utilities/sidebar-service';
-
-  export let data: Segment;
-
-  function generateIcon(iconname: string): string {
-    return `${iconname} size="1.5rem"`;
-  }
-
-  function handleClick() {
-    selectFeature(data.code);
-  }
-</script>
-
-{#if data}
-  <a
-    id={data.code}
-    aria-label={data.label}
-    class="mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code
-      ? 'is-selected'
-      : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}"
-    href={data.href ?? 'javascript:void(null)'}
-    target={data.embedded}
-    on:click={handleClick}
-  >
-    <div class="mc-sidebar-segment__container">
-      {#if data.icon}
-        <span class="mc-sidebar-segment__icon">
-          {@html `<${generateIcon(data.icon)} />`}
-        </span>
-      {/if}
-      {#if $$slots.icon}
-        <span class="mc-sidebar-segment__icon">
-          <slot name="icon" />
-        </span>
-      {/if}
-      <span aria-hidden={!$isSidebarOpen} class="mc-sidebar-segment__text">
-        {data.label}
-      </span>
-    </div>
-  </a>
-{/if}
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-sidebar-segment {
-    cursor: pointer;
-    flex: 0;
-    text-decoration: none;
-    color: $color-sidebar-text-color;
-    line-height: 22px;
-    display: flex;
-    overflow: hidden;
-    min-height: 40px;
-
-    &__icon {
-      fill: $color-sidebar-icon;
-      height: 1.5rem;
-      width: 1.5rem;
-    }
-
-    &__container {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: 8px 0px;
-    }
-
-    svg {
-      fill: $color-sidebar-icon;
-    }
-
-    &__text {
-      margin-left: 10px;
-      width: 200px;
-      min-width: 200px;
-    }
-
-    &.is-selected {
-      background: $color-sidebar-feature-selected-background;
-    }
-
-    :last-child {
-      margin-left: 10px;
-    }
-
-    &:focus-visible {
-      box-shadow: none;
-      border: none;
-      outline: none;
-
-      .mc-sidebar-segment__container {
-        box-shadow: none;
-        border: none;
-        border-radius: 6px;
-        outline: 1px solid #0b96cc;
-      }
-    }
-
-    &:hover {
-      background: $color-sidebar-feature-hover-background;
-    }
-
-    &.is-close {
-      .mc-sidebar-segment__container {
-        @include transition(margin 300ms ease-in-out);
-        margin: 0 20px;
-        width: 24px;
-      }
-
-      .mc-sidebar-segment__text {
-        opacity: 0;
-      }
-    }
-
-    &.is-open {
-      .mc-sidebar-segment__container {
-        @include transition(margin 300ms ease-in-out);
-        margin: 0 32px;
-      }
-
-      .mc-sidebar-segment__text {
-        opacity: 1;
-      }
-    }
-  }
-</style>

package/public/components/sidebar/sidebar-separator.nested.svelte

@@ -1,30 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import { isSidebarOpen } from '../../utilities/sidebar-service';
-</script>
-
-<span
-  role="separator"
-  class="mc-sidebar-separator {$isSidebarOpen ? 'is-open' : 'is-close'}"
-/>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-sidebar-separator {
-    border-bottom: 1px solid $color-sidebar-divider-background;
-    display: flex;
-
-    &.is-close {
-      @include transition(margin 300ms ease-in-out);
-      margin: 24px 0;
-    }
-
-    &.is-open {
-      @include transition(margin 300ms ease-in-out);
-      margin: 24px 32px;
-    }
-  }
-</style>

package/public/components/sidebar/sidebar-service.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="svelte" />
-import type { Sidebar } from './sidebar.types';
-export interface Selection {
-    lv0?: FeatureLike;
-    lv1?: FeatureLike;
-    lv2?: FeatureLike;
-}
-interface FeatureLike {
-    code: string;
-    label: string;
-    items?: FeatureLike[];
-}
-export declare const sidebar: import("svelte/store").Writable<Sidebar>;
-export declare function updateSidebarData(data: string | Sidebar): void;
-export declare const isSidebarOpen: import("svelte/store").Writable<boolean>;
-export declare function toggleSidebar(state?: boolean): void;
-export declare const selectedFeature: import("svelte/store").Writable<Selection | undefined>;
-export declare function selectFeature(code?: string): void;
-export {};
-//# sourceMappingURL=sidebar-service.d.ts.map

package/public/components/sidebar/sidebar-service.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-service.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar-service.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB,GAAG,CAAC,EAAE,WAAW,CAAC;CACnB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,eAAO,MAAM,OAAO,0CAAsB,CAAC;AAG3C,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAM9D;AAED,eAAO,MAAM,aAAa,0CAA2B,CAAC;AAEtD,wBAAgB,aAAa,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAMnD;AAED,eAAO,MAAM,eAAe,wDAAoC,CAAC;AAEjE,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAmCjD"}

package/public/components/sidebar/sidebar-sub-features.nested.svelte

@@ -1,118 +0,0 @@
-<svelte:options />
-
-<script lang="ts">
-  import { selectFeature } from '../../utilities/sidebar-service';
-  import type { A11yLabels, Feature } from './sidebar.types';
-  import FeatureComponent from './sidebar-feature.nested.svelte';
-  import { EventHandler } from '../../utilities/EventHandler';
-  import { createEventDispatcher } from 'svelte';
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
-
-  export let data: Feature;
-  export let a11yLabels: A11yLabels;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-
-  function handleBackClick(): void {
-    eventHandler.dispatch('back-click', data);
-  }
-
-  function handleFeatureClick(feature: Feature): void {
-    if (!feature.disabled) {
-      selectFeature(feature.code);
-    }
-  }
-</script>
-
-<div class="mc-sidebar-sub-feature" aria-label={data?.label}>
-  <button class="mc-sidebar-sub-feature__trigger" on:click={handleBackClick}>
-    <span class="mc-sidebar-sub-feature__container">
-      <svg
-        class="mc-sidebar-sub-feature__icon"
-        width="24px"
-        height="24px"
-        viewBox="0 0 24 24"
-        ><path
-          d="M9 19a1 1 0 01-.71-.29l-6-6a1 1 0 010-1.42l6-6a1 1 0 111.42 1.42L4.41 12l5.3 5.29a1 1 0 010 1.42A1 1 0 019 19z"
-        /><path d="M21 13H3.24a1 1 0 010-2H21a1 1 0 010 2z" /></svg
-      >
-      <span class="mc-sidebar-sub-feature__trigger__label">{data?.label}</span>
-    </span>
-  </button>
-  {#if data?.items?.length}
-    <ul>
-      {#each data?.items as feature}
-        <li
-          class="mc-sidebar-sub-feature__item"
-          on:click|stopPropagation={() => handleFeatureClick(feature)}
-        >
-          <FeatureComponent {feature} {a11yLabels} />
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.sidebar';
-
-  .mc-sidebar-sub-feature {
-    width: 320px;
-
-    &__trigger {
-      background: none;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      padding: 0;
-      margin: 0;
-      font-size: inherit;
-      font-family: inherit;
-      width: 100%;
-      padding: 0px 32px;
-
-      &__label {
-        font-size: 16px;
-        font-weight: 700;
-        margin-left: 8px;
-        color: $color-sidebar-text-color;
-      }
-
-      &:focus-visible {
-        box-shadow: none;
-        border: none;
-        outline: none;
-
-        .mc-sidebar-sub-feature__container {
-          box-shadow: none;
-          border: none;
-          border-radius: 6px;
-          outline: 1px solid #0b96cc;
-        }
-      }
-    }
-
-    &__icon {
-      fill: $color-sidebar-icon;
-    }
-
-    &__container {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      height: 24px;
-      padding: 8px 0px;
-    }
-
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-  }
-</style>