barbican-reset 3.33.0 → 3.35.0

package/components/BrDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="br-details">
-    <br-button variant="summary" @click="update">
+    <br-button variant="summary" @click="update" :data-test="'toggle-' + label">
       <div class="wrap-title">
         <slot name="title">Title goes here</slot>
       </div>
@@ -20,6 +20,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  label: {
+    type: String,
+    default: 'details',
+  },
 })
 
 const update = () => emit('update', { open: !props.open })
@@ -50,6 +54,6 @@ const update = () => emit('update', { open: !props.open })
 }
 
 .wrap-content.open {
-  margin-top: var(--margin-xl);
+  margin-top: var(--margin-xxl);
 }
 </style>

package/components/BrFormCheckbox.vue

@@ -10,8 +10,8 @@
     <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
-      :id="generateID"
-      :table="table">
+      :returns="returns"
+      :id="generateID">
       <br-form-input
         :class="[{ success }, { error }]"
         :disabled="disabled"
@@ -67,7 +67,7 @@ const props = defineProps({
   success: Boolean,
   error: Boolean,
   block: Boolean,
-  table: Boolean,
+  returns: Boolean,
 })
 
 // @description Returns a string for the "id" attribute

package/components/BrFormLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :class="['br-form-label', { disabled }, { table }]"
+    :class="['br-form-label', { disabled }, { returns }]"
     :is="!disabled ? 'label' : 'div'"
     :for="!disabled ? id : null">
     <slot />
@@ -14,7 +14,7 @@ const props = defineProps({
   disabled: Boolean,
   required: Boolean,
   optional: Boolean,
-  table: Boolean,
+  returns: Boolean,
   id: String,
 })
 </script>

package/components/BrFormRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-form-radio">
+  <div :class="generateClassnames">
     <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
@@ -11,7 +11,7 @@
         v-bind="$attrs"
         :error="error"
         type="radio" />
-      <span class="label-text">
+      <span v-if="$slots.default" class="label-text">
         <slot />
       </span>
     </br-form-label>
@@ -25,6 +25,20 @@ import formatKebabCase from '#helpers/formatKebabCase'
 import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 
+const generateClassnames = computed(() => {
+  let classnames = ['br-form-radio']
+
+  if (props.table) {
+    classnames.push('table')
+  }
+
+  if (!props.table) {
+    classnames.push('default')
+  }
+
+  return classnames
+})
+
 defineOptions({
   inheritAttrs: false,
 })
@@ -45,6 +59,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  table: {
+    default: false,
+    type: Boolean,
+  },
 })
 
 // @description Returns a string for the "id" attribute

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/components/BrTableCell.vue

@@ -22,6 +22,18 @@ const generateClassnames = computed(() => {
     classnames.push('align-center')
   }
 
+  if (props.radio) {
+    classnames.push('radio')
+  }
+
+  if (props.returns) {
+    classnames.push('returns')
+  }
+
+  if (!props.radio && !props.returns) {
+    classnames.push('default')
+  }
+
   return classnames
 })
 
@@ -30,7 +42,9 @@ const props = defineProps({
     type: String,
     default: 'stretch',
   },
+  returns: Boolean,
   right: Boolean,
   center: Boolean,
+  radio: Boolean,
 })
 </script>

package/components/BrTableRow.vue

@@ -1,19 +1,5 @@
 <template>
-  <div :class="generateClassnames">
+  <div class="br-table-row">
     <slot />
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue'
-
-const generateClassnames = computed(() => {
-  let classnames = ['br-table-row']
-  return classnames
-})
-
-const props = defineProps({
-  right: Boolean,
-  center: Boolean,
-})
-</script>

package/components/BrWrap.vue

@@ -17,11 +17,13 @@ const generateComponentClasses = computed(() => {
   if (props.cluster) {
     classnames.push('cluster')
     classnames.push('align-' + props.align)
+    classnames.push('size-' + props.size)
   }
 
   if (props.orders) {
     classnames.push('orders')
     classnames.push('align-' + props.align)
+    classnames.push('size-' + props.size)
   }
 
   if (props.preferences) {
@@ -44,5 +46,9 @@ const props = defineProps({
     type: String,
     default: 'middle',
   },
+  size: {
+    type: String,
+    default: 'xs',
+  },
 })
 </script>

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.33.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-label.scss

@@ -0,0 +1,3 @@
+.br-form-label {
+  font-weight: bold;
+}

package/scss/_br-form-radio.scss

@@ -1,5 +1,21 @@
 @use "mixins/input" as *;
+@use "mixins/breakpoints" as *;
 
-.br-form-radio {
+.br-form-radio.default {
   @include br-form-radio;
+}
+
+.br-form-radio.table {
+  @include br-form-radio;
+
+  @include medium-up {
+    .br-form-label {
+      padding: var(--padding-sm);
+      border-radius: 50%;
+    }
+
+    .label-text {
+      display: none;
+    }
+  }
 }

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/_br-table-cell.scss

@@ -1,58 +1,75 @@
 @use "mixins/breakpoints" as *;
 @use "mixins/br-wrap" as *;
 
-@include medium-up {
-  .br-table-cell:not(.activeReturn) {
+@mixin br-table-cell--default {
+  @include medium-up {
     padding: var(--padding-md);
-  }
-
-  .br-table-cell:not(.width-stretch) {
-    flex-shrink: 0;
-  }
 
-  .br-table-cell:not(:first-child) {
-    border-left-color: var(--color-black-25-lighten);
-    border-left-width: var(--border-width-sm);
-    border-left-style: solid;
-  }
+    &:not(:first-child) {
+      border-left-color: var(--color-black-25-lighten);
+      border-left-width: var(--border-width-sm);
+      border-left-style: solid;
+    }
 
-  .br-table-cell.align-right {
-    text-align: right;
-  }
+    &.align-right {
+      text-align: right;
+    }
 
-  .br-table-cell.align-center {
-    text-align: center;
-  }
+    &.align-center {
+      text-align: center;
+    }
 
-  .br-table-cell label {
-    display: none;
-  }
+    &:not(.width-stretch) {
+      flex-shrink: 0;
+    }
 
-  .br-table-cell.cluster {
-    @include br-wrap--cluster;
+    >label {
+      display: none;
+    }
   }
 
-  .br-table-cell.cluster>* {
-    vertical-align: middle;
-    display: inline-block;
+  @include medium-down {
+    margin: var(--margin-sm);
   }
 }
 
-@include medium-down {
-  .br-table-cell:not(.activeReturn) {
-    @include br-wrap--cluster;
+@mixin br-table-cell--radio {
+  @include br-table-cell--default;
 
-    & {
+  @include medium-down {
+    &:not(.width-stretch) {
+      display: inline-block;
       width: initial;
     }
   }
+}
 
-  .br-table-cell:not(.activeReturn):not(:last-child) {
-    margin-bottom: var(--margin-sm);
+@mixin br-table-cell--returns {
+  @include br-table-cell--default;
+
+  @include medium-up {
+    padding: 0;
   }
 
-  .br-table-cell:not(.activeReturn)>* {
-    vertical-align: middle;
-    display: inline-block;
+  @include medium-down {
+    border-bottom-color: var(--color-black-25-lighten);
+    border-bottom-width: var(--border-width-sm);
+    border-bottom-style: dashed;
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+    margin-bottom: 1rem;
+    margin-top: -0.5rem;
   }
+}
+
+.br-table-cell.default {
+  @include br-table-cell--default;
+}
+
+.br-table-cell.radio {
+  @include br-table-cell--radio;
+}
+
+.br-table-cell.returns {
+  @include br-table-cell--returns;
 }

package/scss/_br-table-row.scss

@@ -1,24 +1,24 @@
 @use "mixins/breakpoints" as *;
 
-.br-table-row {
+@mixin br-table-row--default {
   border-color: var(--color-black-25-lighten);
   border-width: var(--border-width-sm);
   border-style: solid;
-}
 
-.br-table-row:not(:last-child) {
-  margin-bottom: var(--margin-md);
-}
+  &:not(:last-child) {
+    margin-bottom: var(--margin-md);
+  }
 
-@include medium-up {
-  .br-table-row {
+  @include medium-up {
     display: flex;
   }
-}
 
-@include medium-down {
-  .br-table-row {
+  @include medium-down {
     border-radius: var(--border-radius-lg);
-    padding: var(--padding-md);
+    padding: var(--padding-sm);
   }
+}
+
+.br-table-row {
+  @include br-table-row--default;
 }

package/scss/_variables.scss

@@ -344,6 +344,7 @@
   --line-height-xs: 1;
   --line-height-sm: 1.15;
   --line-height-md: 1.35;
+  --line-height-lg: 1.5;
 
   // Fixed line height for button/menu items (`38px`).
   --line-height-button-menu: 2.375rem;
@@ -383,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

@@ -8,8 +8,10 @@
 @use "br-form-checkbox";
 @use "br-form-edit";
 @use "br-form-fieldset";
+@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/_br-form-radio.scss

@@ -15,14 +15,14 @@
 @mixin br-form-radio--input {
   cursor: pointer;
 
-  &:focus {
+  &:focus-visible {
     outline-color: var(--color-black-25-lighten);
     outline-offset: var(--outline-offset-lg);
     outline-width: var(--border-width-sm);
     outline-style: dashed;
   }
 
-  &:checked:focus {
+  &:checked:focus-visible {
     @include br-form-radio--input-colors;
   }
 }
@@ -84,7 +84,7 @@
     cursor: pointer;
 
     &:hover,
-    &:has(input:focus) {
+    &:has(input:focus-visible) {
       @include br-form-radio-label--disabled;
       @include br-form-radio-label--hover;
     }

package/scss/mixins/_br-wrap.scss

@@ -1,5 +1,7 @@
 @use "../mixins/breakpoints" as *;
 
+$sizes: xs, sm, md, lg;
+
 @mixin br-wrap--default {
   max-width: var(--width-layout-sm);
   margin-right: auto;
@@ -17,10 +19,14 @@
 }
 
 @mixin br-wrap--cluster {
-  margin: var(--margin-wrap-xs);
+  @each $size in $sizes {
+    &.size-#{$size} {
+      margin: var(--margin-wrap-#{$size});
 
-  >* {
-    margin: var(--margin-xs);
+      >* {
+        margin: var(--margin-#{$size});
+      }
+    }
   }
 
   &.align-middle>* {
@@ -45,21 +51,19 @@
 @mixin br-wrap--orders {
   @include br-wrap--cluster;
 
-  $margin: calc(var(--margin-xs) * 2);
+  @each $size in $sizes {
+    $margin: calc(var(--margin-#{$size}) * 2);
 
-  @include medium-down {
-    >* {
-      width: calc(100% - $margin);
-    }
-  }
-
-  @include medium-up {
-    >* {
-      width: calc(50% - $margin);
-    }
+    &.size-#{$size} {
+      >* {
+        @include medium-down {
+          width: calc(100% - $margin);
+        }
 
-    >*.open {
-      width: calc(100% - $margin);
+        @include medium-up {
+          width: calc(50% - $margin);
+        }
+      }
     }
   }
 }

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;
+  }
+}

package/scss/mixins/input/_checkbox.scss

@@ -15,14 +15,14 @@
 }
 
 @mixin br-form-checkbox--input {
-  &:focus {
+  &:focus-visible {
     outline-color: var(--color-black-50-lighten);
     outline-offset: var(--outline-offset-lg);
     outline-width: var(--border-width-sm);
     outline-style: dashed;
   }
 
-  &:checked:focus {
+  &:checked:focus-visible {
     @include br-form-checkbox--input-colors;
   }
 }
@@ -81,7 +81,7 @@
     }
   }
 
-  &.table {
+  &.returns {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     border-width: 0;
@@ -90,13 +90,17 @@
       border-top-right-radius: 0;
       border-top-left-radius: 0;
     }
+
+    @include medium-down {
+      padding: var(--padding-lg);
+    }
   }
 
   &:not(.disabled) {
     cursor: pointer;
 
     &:hover,
-    &:has(input:focus) {
+    &:has(input:focus-visible) {
       @include br-form-checkbox-label--disabled;
       @include br-form-checkbox-label--hover;
     }