@mozaic-ds/web-components 0.1.0

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

@@ -0,0 +1,128 @@
+<svelte:options />
+
+<script lang="ts">
+  import type { Segment } from './sidebar.types';
+  import {
+    isSidebarOpen,
+    selectedFeature,
+    selectFeature,
+  } from './sidebar-service';
+
+  export let data: Segment;
+
+  const mediumIconStyle = 'width: 24px; height: 24px; fill: white;';
+
+  function generateIcon(iconname: string): string {
+    return `${iconname} size="2rem"`;
+  }
+
+  function handleClick() {
+    selectFeature(data.code);
+  }
+</script>
+
+{#if data}
+  <a
+    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)'}
+    id={data.code}
+    on:click={handleClick}
+  >
+    <div class="mc-sidebar-segment__container">
+      {#if data.icon}
+        {@html `<${generateIcon(
+          data.icon,
+        )} class="mc-sidebar-segment__icon" style="${mediumIconStyle}" />`}
+      {/if}
+      <span aria-hidden={!$isSidebarOpen} class="mc-sidebar-segment__text">
+        {data.label}
+      </span>
+    </div>
+  </a>
+{/if}
+
+<style lang="scss">
+  @import './sidebar-variables';
+
+  .mc-sidebar-segment {
+    cursor: pointer;
+    flex: 0;
+    text-decoration: none;
+    color: white;
+    line-height: 22px;
+    display: flex;
+    overflow: hidden;
+    min-height: 40px;
+
+    span {
+      width: 200px;
+      min-width: 200px;
+    }
+
+    &__container {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 8px 0px;
+    }
+
+    &__icon {
+      fill: white;
+    }
+
+    &__text {
+      margin-left: 10px;
+    }
+
+    &.is-selected {
+      background: $selected-Link;
+    }
+
+    :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: #405d68;
+    }
+
+    &.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/adeo/components/sidebar-separator/sidebar-separator.nested.svelte

@@ -0,0 +1,29 @@
+<svelte:options />
+
+<script lang="ts">
+  import { isSidebarOpen } from './sidebar-service';
+</script>
+
+<span
+  role="separator"
+  class="mc-sidebar-separator {$isSidebarOpen ? 'is-open' : 'is-close'}"
+/>
+
+<style lang="scss">
+  @import './sidebar-variables';
+
+  .mc-sidebar-separator {
+    border-bottom: 1px solid $color-grey;
+    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/adeo/components/sidebar-sub-features/sidebar-sub-features.nested.svelte

@@ -0,0 +1,103 @@
+<svelte:options />
+
+<script lang="ts">
+  import { selectFeature } from './sidebar-service';
+  import type { A11yLabels, Feature } from './sidebar.types';
+  import FeatureComponent from './sidebar-feature.nested.svelte';
+  import { EventHandler } from '../../utilities/EventHandler';
+
+  export let data: Feature;
+  export let a11yLabels: A11yLabels;
+
+  let eventHandler = new EventHandler();
+
+  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 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 './sidebar-variables';
+
+  .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: white;
+      }
+
+      &: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;
+        }
+      }
+    }
+
+    &__container {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 24px;
+      padding: 8px 0px;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
+</style>

package/public/adeo/components/sidebar-user/sidebar-user.nested.svelte

@@ -0,0 +1,272 @@
+<svelte:options />
+
+<script lang="ts">
+  import {
+    isSidebarOpen,
+    selectFeature,
+    toggleSidebar,
+  } from './sidebar-service';
+  import type { User, Feature, A11yLabels } from './sidebar.types';
+  import FeatureComponent from './sidebar-feature.nested.svelte';
+
+  export let user: User;
+  export let data: Feature[];
+  export let a11yLabels: A11yLabels;
+
+  let content: HTMLElement;
+  let isExpanded = false;
+
+  $: updateContentCSS(isExpanded, $isSidebarOpen);
+
+  // Update the CSS programatically to have a nice animation on height between 0px and 'auto'
+  function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {
+    if (content) {
+      content.style.height = '';
+      content.style.transition = 'none';
+      const startHeight = window.getComputedStyle(content).height;
+
+      content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');
+      content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');
+
+      const height = window.getComputedStyle(content).height;
+      content.style.height = startHeight;
+
+      // wait until the next frame so that everything has time to update before starting the transition
+      requestAnimationFrame(() => {
+        content.style.transition = '';
+        requestAnimationFrame(() => {
+          content.style.height = height;
+        });
+      });
+
+      // Clear the saved height values after the transition
+      const handler = () => {
+        content.style.height = '';
+        content.removeEventListener('transitionend', handler);
+      };
+
+      content.addEventListener('transitionend', handler);
+    }
+  }
+
+  function toggle(): void {
+    if (!$isSidebarOpen) {
+      toggleSidebar(true);
+      isExpanded = true;
+    } else {
+      isExpanded = !isExpanded;
+    }
+  }
+
+  function capitalizeTheFirstLetterOfEachWord(words: string): string {
+    let separateWord: string[] = words.toLowerCase().split(' ');
+    for (let i = 0; i < separateWord.length; i++) {
+      separateWord[i] =
+        separateWord[i].charAt(0).toUpperCase() + separateWord[i].substring(1);
+    }
+    return separateWord.join(' ');
+  }
+
+  function handleClick(feature: Feature) {
+    if (!feature.disabled) {
+      selectFeature(feature.code);
+    }
+  }
+</script>
+
+{#if user}
+  <div
+    class="mc-sidebar-user {$isSidebarOpen ? 'is-open' : 'is-close'}"
+    on:click={toggle}
+  >
+    <button
+      aria-expanded={$isSidebarOpen && isExpanded}
+      class="mc-sidebar-user__header"
+      aria-label={$isSidebarOpen && isExpanded
+        ? a11yLabels?.['close-user'] || 'Close the user sub menu'
+        : a11yLabels?.['open-user'] || 'Open the user sub menu'}
+      aria-controls="user-content"
+    >
+      <span class="mc-sidebar-user__header__picture">
+        {#if user.imageBase64}
+          <img
+            class="base64"
+            style="display:block; width:auto; height:48px; max-width:48px;"
+            aria-hidden
+            alt="User Picture"
+            src="data:image/png;base64, {user.imageBase64}"
+          />
+        {:else}
+          <svg width="24px" height="24px" fill="white" viewBox="0 0 24 24"
+            ><path
+              d="M12 12.76a5.38 5.38 0 115.38-5.38A5.39 5.39 0 0112 12.76zM12 4a3.38 3.38 0 103.38 3.38A3.39 3.39 0 0012 4zM16.48 13.58a1 1 0 00-.81.11 7.3 7.3 0 01-7.34 0 1 1 0 00-.81-.11l-2.81.87a1 1 0 00-.71 1V21a1 1 0 001 1h14a1 1 0 001-1v-5.59a1 1 0 00-.71-1zM18 20H6v-3.86l1.75-.53a9.36 9.36 0 008.5 0l1.75.53z"
+            /></svg
+          >
+        {/if}
+      </span>
+      {#if $isSidebarOpen}
+        <p class="mc-sidebar-user__header__information">
+          <span class="mc-sidebar-user__header__information__identity">
+            {user?.firstName || ''}
+            {user?.lastName || ''}
+          </span>
+          {#if user?.title}
+            <span class="mc-sidebar-user__header__information__title">
+              {capitalizeTheFirstLetterOfEachWord(user.title)}
+            </span>
+          {/if}
+        </p>
+        {#if data?.length}
+          <span class="mc-sidebar-user__header__information__icon">
+            {#if $isSidebarOpen && !isExpanded}
+              <svg width="16px" height="16px" fill="white" viewBox="0 0 16 16"
+                ><path
+                  d="M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z"
+                /></svg
+              >
+            {:else}
+              <svg width="16px" height="16px" fill="white" viewBox="0 0 16 16"
+                ><path d="M12 9H4a1 1 0 010-2h8a1 1 0 010 2z" /></svg
+              >
+            {/if}
+          </span>
+        {/if}
+      {/if}
+    </button>
+    {#if data?.length}
+      <ul
+        aria-hidden={!$isSidebarOpen || !isExpanded}
+        class="mc-sidebar-user__content is-close"
+        id="user-content"
+        bind:this={content}
+      >
+        {#each data as feature}
+          <li on:click|stopPropagation={() => handleClick(feature)}>
+            <FeatureComponent {feature} {a11yLabels} />
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  @import './sidebar-variables';
+
+  .mc-sidebar-user {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    background: #264653;
+
+    &__header {
+      display: flex;
+      align-items: center;
+      background: none;
+      border: none;
+      color: white;
+      font-size: inherit;
+      font-family: inherit;
+      text-align: initial;
+      margin: 0;
+      width: 100%;
+      overflow: hidden;
+
+      &:focus-visible {
+        box-shadow: none;
+        border: none;
+        border-radius: 12px;
+        outline: 1px solid #0b96cc;
+        outline-offset: -5px;
+      }
+
+      &:hover {
+        cursor: pointer;
+
+        .mc-sidebar-user__header__information__icon {
+          background: #082435;
+        }
+      }
+
+      &__picture {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: $color-grey;
+        border-radius: 24px;
+        width: 48px;
+        min-width: 48px;
+        height: 48px;
+        overflow: hidden;
+        img {
+          display: block;
+        }
+      }
+
+      &__information {
+        justify-content: space-around;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        margin: 0;
+        margin-left: 8px;
+        height: 40px;
+        &__icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 4px;
+        }
+
+        &__identity {
+          font-size: 16px;
+          font-weight: bold;
+        }
+
+        &__title,
+        &__identity {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 176px;
+        }
+      }
+    }
+
+    &__content {
+      list-style-type: none;
+      padding: 0;
+      overflow: hidden;
+      margin: -8px 0px 24px 0px;
+      @include transition(all 300ms ease-in-out);
+
+      &.is-close {
+        height: 0;
+        margin: 0;
+      }
+
+      .is-open {
+        height: auto;
+      }
+    }
+
+    &.is-close {
+      .mc-sidebar-user__header {
+        @include transition(padding 300ms ease-in-out);
+        padding: 12px 8px;
+        margin: 8px 0;
+      }
+    }
+
+    &.is-open {
+      .mc-sidebar-user__header {
+        @include transition(padding 300ms ease-in-out);
+        padding: 12px 24px 12px 32px;
+        margin: 8px 0;
+      }
+    }
+  }
+</style>