srcdev-nuxt-components 4.0.6 → 5.0.1

package/components/display-prompt/DisplayPromptCore.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="display-prompt-core" :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]" :data-test-id="`display-prompt-core-${theme}`">
+    <div class="display-prompt-wrapper" :data-prompt-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
+      <div class="display-prompt-inner">
+        <div class="display-prompt-icon" data-test-id="prompt-icon">
+          <slot name="customDecoratorIcon">
+            <Icon :name="displayPromptIcons[theme]" class="icon" :color="iconColor" />
+          </slot>
+        </div>
+        <div class="display-prompt-content">
+          <p class="title" data-test-id="display-prompt-title">
+            <slot name="title"></slot>
+          </p>
+          <p v-if="hasContent" class="text" data-test-id="display-prompt-content">
+            <slot name="content"></slot>
+          </p>
+        </div>
+        <button v-if="dismissible" @click.prevent="dismissPrompt()" data-test-id="display-prompt-action" class="display-prompt-action">
+          <slot name="customCloseIcon">
+            <Icon name="bitcoin-icons:cross-filled" class="icon" />
+          </slot>
+          <span class="sr-only">
+            <slot name="customTitle">Close this prompt</slot>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dismissible: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String,
+    default: 'error',
+    validator(value: string) {
+      return ['error', 'info', 'success', 'warning', 'secondary'].includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  iconColor: {
+    type: String as PropType<string>,
+    default: 'dark-grey',
+    validator(value: string) {
+      return ['dark-grey', 'white'].includes(value);
+    },
+  },
+  useLocalStyleOverrides: {
+    type: Boolean,
+    default: false,
+  },
+  displayPromptIcons: {
+    type: Object as PropType<Record<string, string>>,
+    default: () => ({
+      error: 'akar-icons:circle-alert',
+      info: 'akar-icons:info',
+      success: 'akar-icons:check',
+      warning: 'akar-icons:circle-alert',
+      secondary: 'akar-icons:info',
+    }),
+  },
+});
+
+const slots = useSlots();
+const hasContent = ref(slots.content !== undefined);
+const hide = ref(false);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const dismissPrompt = () => {
+  // styleClassPassthrough.value = '';
+  hide.value = true;
+};
+</script>
+
+<style lang="css">
+.display-prompt-core {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: all 200ms ease-in-out;
+
+  &.dismissed {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .display-prompt-wrapper {
+    background-color: var(--component-theme-0);
+    border: 1px solid var(--component-theme-8);
+    border-radius: 4px;
+
+    border-inline-start: 8px solid var(--component-theme-8);
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+
+    overflow: hidden;
+
+    .display-prompt-inner {
+      align-items: center;
+      display: flex;
+      gap: 12px;
+      justify-content: space-between;
+      padding-block: 1rem;
+      padding-inline: 1.5rem;
+
+      .display-prompt-icon {
+        display: inline-flex;
+        .icon {
+          color: var(--component-theme-8);
+          display: inline-block;
+          font-size: 3rem;
+          font-style: normal;
+          font-weight: normal;
+          overflow: hidden;
+        }
+      }
+
+      .display-prompt-content {
+        display: block flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: 1rem;
+        margin: 0;
+        padding: 0.2rem;
+
+        .title {
+          font-size: var(--step-2);
+          font-weight: bold;
+          line-height: 1.3;
+          color: var(--component-theme-8);
+          margin: 0;
+          padding: 0;
+        }
+
+        .text {
+          font-size: var(--step-2);
+          font-weight: normal;
+          line-height: 1.3;
+          color: var(--component-theme-8);
+          margin: 0;
+          padding: 0;
+        }
+      }
+      .display-prompt-action {
+        background-color: transparent;
+        display: block flex;
+        align-items: center;
+        justify-content: center;
+        margin: 1rem;
+        padding: 0.5rem;
+        border: 0.1rem solid var(--component-theme-8);
+        border-radius: 50%;
+        outline: 1px solid var(--component-theme-3);
+
+        transition: border 200ms ease-in-out, outline 200ms ease-in-out;
+
+        &:hover {
+          cursor: pointer;
+          border: 0.1rem solid var(--component-theme-12);
+          outline: 2px solid var(--component-theme-6);
+        }
+
+        &:focus-visible {
+          box-shadow: var(--focus-box-shadow-colour-on);
+          border: 0.1rem solid var(--component-theme-12);
+          outline: 2px solid var(--component-theme-6);
+        }
+
+        .icon {
+          color: var(--component-theme-8);
+          display: block;
+          font-size: var(--step-2);
+          padding: 1rem;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/expanding-panel/ExpandingPanel.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="expanding-panel" :class="[elementClasses]">
+    <details class="expanding-panel-details" :name>
+      <summary class="expanding-panel-summary" :id="triggerId" :aria-controls="contentId">
+        <span class="label-wrapper">
+          <slot name="summary"></slot>
+        </span>
+        <span class="icon-wrapper">
+          <slot name="icon">
+            <Icon name="bi:caret-down-fill" class="icon mi-12" />
+          </slot>
+        </span>
+      </summary>
+    </details>
+    <div class="expanding-panel-content" :aria-labelledby="triggerId" :id="contentId" role="region">
+      <div class="inner">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  iconSize: {
+    type: String,
+    default: 'medium',
+  },
+  animationDuration: {
+    type: Number,
+    default: 400,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const name = computed(() => props.name || useId());
+
+const triggerId = computed(() => `id-${name.value}-trigger`);
+const contentId = computed(() => `id-${name.value}-content`);
+const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+
+const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+.expanding-panel {
+  .expanding-panel-details {
+    .expanding-panel-summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-direction: row;
+      gap: 0;
+      list-style: none;
+
+      padding-inline: 0.5rem;
+
+      &::-webkit-details-marker,
+      &::marker {
+        display: none;
+      }
+
+      overflow: clip;
+
+      .label-wrapper {
+      }
+      .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        aspect-ratio: 1;
+        outline: 1px solid var(--gray-3);
+        padding: 1rem;
+        overflow: hidden;
+
+        .icon {
+          display: block;
+          transform: scaleY(1);
+          transition: transform v-bind(animationDurationStr) ease-in-out;
+          font-size: 1.2rem;
+        }
+      }
+    }
+
+    &[open] {
+      .expanding-panel-summary {
+        .icon-wrapper {
+          .icon {
+            transform: scaleY(-1);
+          }
+        }
+      }
+      + .expanding-panel-content {
+        grid-template-rows: 1fr;
+        .inner {
+          /* transform: scaleY(1); */
+        }
+      }
+    }
+  }
+
+  .expanding-panel-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: all v-bind(animationDurationStr) ease-in-out;
+
+    .inner {
+      overflow: hidden;
+      padding: 0.5rem;
+
+      /* transform: scaleY(0); */
+      /* transition: transform v-bind(animationDurationStr) ease-in-out; */
+    }
+  }
+}
+</style>

package/components/{presentation/layout-row → layout-row}/LayoutRow.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="layout-row" :class="elementClasses">
-    <component :is="tag" :data-testid="dataTestid" class="layout-row-inner" :class="variant">
+  <component :is="tag" class="layout-row" :class="elementClasses" :id :tab-index="isLandmark ? 0 : null" :aria-label="isLandmark ? 'Layout Row Landmark' : undefined">
+    <div :data-testid="dataTestid" class="layout-row-inner" :class="variant">
       <div>
         <slot name="default"></slot>
       </div>
-    </component>
-  </div>
+    </div>
+  </component>
 </template>
 
 <script lang="ts">
@@ -51,10 +51,18 @@ const props = defineProps({
       return VARIANT_CLASSES.includes(value);
     },
   },
+  id: {
+    type: String,
+    default: null,
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
+  isLandmark: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);

package/components/responsive-header/NavigationItems.vue

@@ -1,43 +1,56 @@
 <template>
-  <div class="overflow-navigation-wrapper" :class="elementClasses">
+  <div class="overflow-navigation-wrapper" :class="elementClasses" role="menu" aria-label="Overflow navigation menu">
     <ul
       v-for="(navGroup, groupKey) in mainNavigationState.clonedNavLinks"
       :key="groupKey"
       class="overflow-navigation-list"
-      :class="[{visible: !mainNavigationState.navListVisibility[groupKey]}]"
+      :class="[{ visible: !mainNavigationState.navListVisibility[groupKey] }]"
       :style="{ '--_overflow-navigation-list-min-width': widestNavLinkWidthInMainNavigationState + 'px' }"
+      role="none"
     >
       <template v-for="(link, localIndex) in navGroup" :key="localIndex">
         <li
           v-if="link.path"
           class="overflow-navigation-item"
-          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :class="{ visible: !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
           :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
+          role="none"
         >
-          <NuxtLink class="overflow-navigation-link" :to="link.path"><span class="overflow-navigation-text">{{ link.name }}</span></NuxtLink>
+          <NuxtLink class="overflow-navigation-link" :to="link.path" role="menuitem">
+            <span class="overflow-navigation-text">{{ link.name }}</span>
+          </NuxtLink>
         </li>
         <li
           v-else
           class="overflow-navigation-item"
-          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :class="{ visible: !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
           :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
+          role="none"
         >
-          <DisplayDetailsCore :id="useId()" name="overflow-navigation-group" :animation-duration="detailsAanimationDuration" icon-size="medium" :style-class-passthrough="['overflow-navigation-details']">
+          <DisplayDetailsCore
+            :id="useId()"
+            name="overflow-navigation-group"
+            :animation-duration="detailsAanimationDuration"
+            icon-size="medium"
+            :style-class-passthrough="['overflow-navigation-details']"
+          >
             <template #summary>
-              <span class="overflow-navigation-text">{{ link.childLinksTitle }}</span>
+              <span class="overflow-navigation-text" :aria-label="`${link.childLinksTitle} submenu`" role="menuitem" :aria-haspopup="true">{{ link.childLinksTitle }}</span>
             </template>
             <template #summaryIcon>
-              <Icon name="mdi:chevron-down" class="icon" />
+              <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
             </template>
             <template #content>
               <div class="overflow-navigation-sub-nav-inner">
                 <ul class="overflow-navigation-sub-nav-list">
                   <li v-for="childLink in link.childLinks" :key="childLink.name" class="overflow-navigation-sub-nav-item">
-                    <NuxtLink :to="childLink.path" class="overflow-navigation-sub-nav-link"><span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span></NuxtLink>
+                    <NuxtLink :to="childLink.path" class="overflow-navigation-sub-nav-link" role="menuitem">
+                      <span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span>
+                    </NuxtLink>
                   </li>
                 </ul>
               </div>
@@ -68,10 +81,7 @@ const detailsAanimationDurationString = `${detailsAanimationDuration}ms`;
 
 const widestNavLinkWidthInMainNavigationState = computed(() => {
   return Object.values(props.mainNavigationState.clonedNavLinks || {}).reduce((maxWidth, group) => {
-    return Math.max(
-      maxWidth,
-      ...group.map(link => link.config?.width || 0)
-    );
+    return Math.max(maxWidth, ...group.map((link) => link.config?.width || 0));
   }, 0);
 });
 
@@ -86,14 +96,12 @@ watch(
 </script>
 
 <style lang="css">
-
 .overflow-navigation-wrapper {
   display: flex;
   flex-direction: column;
   gap: 12px;
 
   .overflow-navigation-list {
-
     display: none;
 
     &.visible {
@@ -104,7 +112,6 @@ watch(
     }
 
     .overflow-navigation-item {
-
       display: none;
 
       &.visible {
@@ -137,7 +144,6 @@ watch(
           .display-details-content {
             .overflow-navigation-sub-nav-inner {
               .overflow-navigation-sub-nav-list {
-
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
@@ -145,7 +151,6 @@ watch(
                 transition: margin-block-start v-bind(detailsAanimationDurationString) ease;
 
                 .overflow-navigation-sub-nav-item {
-
                   .overflow-navigation-sub-nav-link {
                     text-decoration: none;
                     color: inherit;