barbican-reset 3.34.0 → 3.35.0

package/components/BrFormSelect.vue

@@ -0,0 +1,168 @@
+<template>
+  <form class="br-select-form" @submit.prevent>
+    <button
+      class="br-select-form-button btn btn-select-form"
+      data-placeholder="placeholder"
+      @click="formButtonClick"
+      aria-controls="listbox"
+      aria-haspopup="listbox"
+      aria-expanded="false"
+      data-title="title"
+      role="combobox">
+      <span class="br-select-form-button--title">{{ placeholder }}</span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="br-select-form-icon"
+        width="12"
+        height="6"
+        version="1.1"
+        viewBox="0 0 12 6">
+        <path d="M6,5.48L1.04.52h9.92l-4.96,4.96Z" />
+      </svg>
+    </button>
+    <ul class="br-select-form-list" role="listbox">
+      <slot />
+    </ul>
+  </form>
+</template>
+
+<script setup>
+import constrainTabbing from '#scripts/helpers/constrainTabbing'
+
+let listenConstrainTabbing = null
+
+function formSelectors($form) {
+  let $formButton = $form.querySelector('.br-select-form-button')
+  let $formList = $form.querySelector('.br-select-form-list')
+  let $formItems = $formList.querySelectorAll('.br-select-form-item')
+  let ariaExpanded = $formButton.getAttribute('aria-expanded')
+
+  return {
+    $formButton,
+    $formList,
+    $formItems,
+    isOpen: ariaExpanded == 'true',
+  }
+}
+
+function closeForm($form) {
+  let { $formButton } = formSelectors($form)
+
+  $formButton.setAttribute('aria-expanded', 'false')
+
+  document.removeEventListener('click', listenForClose)
+
+  document.removeEventListener('keydown', listenForClose)
+
+  if (listenConstrainTabbing) {
+    listenConstrainTabbing.stop()
+    listenConstrainTabbing = null
+  }
+}
+
+function closeForms(match) {
+  let $forms = document.querySelectorAll('.br-select-form')
+
+  $forms.forEach(function ($form) {
+    if ($form !== match) {
+      closeForm($form)
+    }
+  })
+}
+
+function listenForClose(event) {
+  let { target, key } = event
+
+  let $form = target.closest('.br-select-form')
+
+  let clickedOutsideForm = !key && !$form
+
+  let pressedEscape = ['Escape'].includes(key)
+
+  let pressedTab = ['Tab'].includes(key)
+
+  if (clickedOutsideForm || pressedEscape) {
+    closeForms()
+  }
+
+  if (!clickedOutsideForm) {
+    if (pressedTab && !listenConstrainTabbing) {
+      listenConstrainTabbing = constrainTabbing($form)
+    }
+  }
+}
+
+function formButtonClick(event) {
+  let { currentTarget } = event
+
+  let $form = currentTarget.closest('.br-select-form')
+
+  let { isOpen } = formSelectors($form)
+
+  currentTarget.setAttribute('aria-expanded', isOpen ? 'false' : 'true')
+
+  closeForms($form)
+
+  document.addEventListener('click', listenForClose)
+
+  document.addEventListener('keydown', listenForClose)
+}
+
+defineProps({
+  title: {
+    type: String,
+    default: 'title',
+  },
+  placeholder: {
+    type: String,
+    default: 'Add to wallet',
+  },
+  // options: {
+  //   type: Array,
+  //   default: [
+  //     {
+  //       link: {
+  //         href: 'https://apple.com',
+  //         target: '_blank',
+  //         title: 'apple',
+  //       },
+  //     },
+  //     {
+  //       link: {
+  //         href: 'https://google.com',
+  //         target: '_blank',
+  //         title: 'google',
+  //       },
+  //     },
+  //   ],
+  // },
+})
+</script>
+
+<style scoped>
+.br-select-form {
+  position: relative;
+  width: 200px;
+}
+
+.br-select-form-button[aria-expanded='false'] + .br-select-form-list {
+  visibility: hidden;
+}
+
+.br-select-form-list {
+  border-bottom: 1px solid currentColor;
+  border-right: 1px solid currentColor;
+  border-left: 1px solid currentColor;
+  border-bottom-right-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  background-color: white;
+  position: absolute;
+  margin-bottom: 0;
+  list-style: none;
+  overflow: hidden;
+  padding-left: 0;
+  margin-top: 0;
+  width: 100%;
+  z-index: 2;
+}
+</style>

package/components/BrFormSelectItem.vue

@@ -0,0 +1,11 @@
+<template>
+  <li class="br-select-form-item">
+    <slot />
+  </li>
+</template>
+
+<style scoped>
+.br-select-form-item {
+  border-bottom: 1px solid currentColor;
+}
+</style>

package/index.js

@@ -33,6 +33,8 @@ import BrFormPassword from '#components/BrFormPassword.vue'
 import BrFormRadio from '#components/BrFormRadio.vue'
 import BrFormRadioGroup from '#components/BrFormRadioGroup.vue'
 import BrFormRow from '#components/BrFormRow.vue'
+import BrFormSelect from '#components/BrFormSelect.vue'
+import BrFormSelectItem from '#components/BrFormSelectItem.vue'
 import BrFormTel from '#components/BrFormTel.vue'
 import BrFormTextarea from '#components/BrFormTextarea.vue'
 import BrFormToggle from '#components/BrFormToggle.vue'
@@ -81,6 +83,8 @@ export {
   BrFormRadio,
   BrFormRadioGroup,
   BrFormRow,
+  BrFormSelect,
+  BrFormSelectItem,
   BrFormTel,
   BrFormTextarea,
   BrFormToggle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "3.34.0",
+  "version": "3.35.0",
   "description": "Shared design system for Barbican projects, providing SCSS utilities, animations, icons, Vue components, and JS helpers for consistent styling and behaviour.",
   "main": "index.js",
   "exports": {

package/scripts/helpers/constrainTabbing.js

@@ -7,21 +7,21 @@
  * rest of the page while the element is active.
  *
  * @param {HTMLElement} element - The container element to trap focus within.
- * @returns {void}
+ * @returns {{ stop: () => void }}
  *
  * @example
- * constrainTabbing(document.getElementById('modal'))
+ * const trap = constrainTabbing(document.getElementById('modal'))
+ * trap.stop()
  */
 export default function (element) {
   let focusableEls = element.querySelectorAll('a[href]:not([disabled], [rel=noopener]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])')
   let firstFocusableEl = focusableEls[0]
   let lastFocusableEl = focusableEls[focusableEls.length - 1]
-  let KEYCODE_TAB = 9
 
-  element.addEventListener('keydown', function (event) {
-    let { key, keyCode, shiftKey } = event
+  function handler(/** @type {KeyboardEvent} */ event) {
+    let { key, shiftKey } = event
 
-    var isTabPressed = key === 'Tab' || keyCode === KEYCODE_TAB
+    var isTabPressed = key === 'Tab'
 
     if (!isTabPressed) return
 
@@ -36,5 +36,13 @@ export default function (element) {
         event.preventDefault()
       }
     }
-  })
+  }
+
+  element.addEventListener('keydown', handler)
+
+  return {
+    stop() {
+      element.removeEventListener('keydown', handler)
+    },
+  }
 }

package/scss/_br-button.scss

@@ -221,6 +221,10 @@ button.btn:active {
     @include btn-manage-order;
   }
 
+  &.btn-select-form {
+    @include btn-select-form;
+  }
+
   &.btn-add-to-wallet {
     @include btn-add-to-wallet;
   }

package/scss/_br-form-select-link.scss

@@ -0,0 +1,15 @@
+.br-form-select-link {
+  padding: var(--padding-md);
+  display: block;
+}
+
+.br-form-select-link:focus-visible,
+.br-form-select-link:hover {
+  background-color: var(--color-black-5-lighten);
+}
+
+.br-form-select-link:focus-visible {
+  outline-offset: var(--outline-inset-lg);
+  outline-color: inherit;
+  outline-style: dashed;
+}

package/scss/_variables.scss

@@ -384,6 +384,8 @@
 
   // Navlink offset. Negative `--border-width-sm` to align active indicator flush with edge.
   --offset-navlink: calc(var(--border-width-sm) * -1);
+  // Large outline inset (`-4px`).
+  --outline-inset-lg: calc(0.25rem * -1);
   // Small outline offset (`1px`).
   --outline-offset-sm: 0.0625rem;
   // Medium outline offset (`2px`).

package/scss/index.scss

@@ -11,6 +11,7 @@
 @use "br-form-label";
 @use "br-form-radio";
 @use "br-form-row";
+@use "br-form-select-link";
 @use "br-form-textarea";
 @use "br-form-toggle";
 @use "br-form-update";

package/scss/mixins/_br-card.scss

@@ -11,7 +11,6 @@
   border-width: var(--border-width-sm);
   background-color: white;
   border-style: solid;
-  overflow: hidden;
 }
 
 @mixin br-card {

package/scss/mixins/buttons/_custom.scss

@@ -17,6 +17,7 @@
 @forward "custom/exit-overlay";
 @forward "custom/invisible";
 @forward "custom/manage-order";
+@forward "custom/select-form";
 @forward "custom/outline-alert-neutral";
 @forward "custom/outline-primary";
 @forward "custom/outline-secondary";

package/scss/mixins/buttons/custom/_manage-order.scss

@@ -9,7 +9,7 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     background-color: var(--color-brand-generic-15-lighten);
     border-color: var(--color-brand-generic-90-darken);
     color: var(--color-brand-generic-90-darken);

package/scss/mixins/buttons/custom/_select-form.scss

@@ -0,0 +1,24 @@
+@use "./manage-order" as *;
+
+@mixin btn-select-form {
+  @include btn-manage-order;
+
+  & {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &[aria-expanded='true'] {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+
+  &:hover,
+  &:focus-visible {
+    fill: currentColor;
+  }
+}