barbican-reset 3.35.0 → 3.39.0

package/components/BrButton.vue

@@ -7,13 +7,13 @@
     aria-live="polite"
     ref="button">
     <template v-if="state == 'default'">
-      <slot name="default">default</slot>
+      <slot name="default" />
     </template>
     <template v-else-if="state == 'loading'">
       <template v-if="$slots.loading">
         <slot name="loading">loading</slot>
       </template>
-      <dot-typing v-else />
+      <dots-animation v-else />
     </template>
     <template v-else-if="state == 'loaded'">
       <slot name="loaded">loaded</slot>
@@ -26,7 +26,7 @@
 
 <script setup>
 import { computed, useTemplateRef } from 'vue'
-import DotTyping from '#components/BrButton/dot_typing.vue'
+import DotsAnimation from '#icons/Dots.vue'
 
 const emits = defineEmits(['click'])
 
@@ -43,6 +43,10 @@ const generateClassnames = computed(() => {
     classnames.push('btn-slim')
   }
 
+  if (!props.noReact) {
+    classnames.push('btn-react')
+  }
+
   return classnames
 })
 
@@ -69,6 +73,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  noReact: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 defineExpose({

package/components/BrConfirmDone.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-done">
-    <done-icon />
+    <br-done-icon />
     <br-card-title class="title">Done</br-card-title>
     <br-card-text v-if="$slots.default" class="margin-top-1">
       <slot />
@@ -10,12 +10,12 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { animateDone } from '#scripts/animations/confirm'
+import { animateDone } from '#animations/confirm'
 
 import BrCard from '#components/BrCard.vue'
 import BrCardTitle from '#components/BrCardTitle.vue'
 import BrCardText from '#components/BrCardText.vue'
-import DoneIcon from '#icons/confirm/done.vue'
+import BrDoneIcon from '#icons/Confirm/Done.vue'
 
 onMounted(() => animateDone())
 </script>

package/components/BrConfirmEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-email">
-    <email-icon />
+    <br-email-icon />
     <br-card-title v-if="$slots.title" class="title">
       <slot name="title" />
     </br-card-title>
@@ -12,12 +12,12 @@
 
 <script setup>
 import { onMounted } from 'vue'
-import { animateEmail } from '#scripts/animations/confirm'
+import { animateEmail } from '#animations/confirm'
 
 import BrCard from '#components/BrCard.vue'
 import BrCardTitle from '#components/BrCardTitle.vue'
 import BrCardText from '#components/BrCardText.vue'
-import EmailIcon from '#icons/confirm/email.vue'
+import BrEmailIcon from '#icons/Confirm/Email.vue'
 
 onMounted(() => animateEmail())
 </script>

package/components/BrDetails.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="br-details">
-    <br-button variant="summary" @click="update" :data-test="'toggle-' + label">
+    <br-button
+      :data-test="'toggle-' + label"
+      variant="summary"
+      @click="update"
+      no-react>
       <div class="wrap-title">
         <slot name="title">Title goes here</slot>
       </div>

package/components/BrFormCheckbox.vue

@@ -28,7 +28,7 @@
 
 <script setup>
 import { computed, useAttrs } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '#utils/formatKebabCase'
 import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 

package/components/BrFormEdit.vue

@@ -13,7 +13,7 @@
 
 <script>
 import BrButton from '#components/BrButton.vue'
-import EditIcon from '#icons/account/edit.vue'
+import EditIcon from '#icons/AccountEdit.vue'
 
 export default {
   props: {

package/components/BrFormInput.vue

@@ -6,12 +6,13 @@
     :type="generateType"
     v-model="model"
     v-bind="$attrs"
+    :style="generateStyles"
     :id="id" />
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '#utils/formatKebabCase'
 
 const model = defineModel()
 
@@ -20,6 +21,7 @@ const props = defineProps({
   type: String,
   dataTest: String,
   autocomplete: String,
+  inputCustomColors: Object,
 })
 
 defineOptions({
@@ -56,6 +58,21 @@ const generateDataTest = computed(() => {
   return result && formatKebabCase(result)
 })
 
+const generateStyles = computed(function () {
+  const colors = props.inputCustomColors
+
+  if (!colors) return
+
+  return Object.fromEntries(
+    [
+      ['--background-color-toggle-unchecked', colors.default],
+      ['--background-color-toggle-checked', colors.checked],
+      ['--background-color-toggle-before-unchecked', colors.defaultCircle],
+      ['--background-color-toggle-before-checked', colors.checkedCircle],
+    ].filter(([, value]) => value),
+  )
+})
+
 // @description Returns a string for the "type" attribute
 // @returns {string} result - string based on preceeding conditions
 

package/components/BrFormRadio.vue

@@ -20,7 +20,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '#utils/formatKebabCase'
 
 import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'

package/components/BrFormRow.vue

@@ -16,7 +16,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '#utils/formatKebabCase'
 import BrFormLabel from '#components/BrFormLabel.vue'
 
 const props = defineProps({

package/components/BrFormSelect.vue

@@ -9,16 +9,8 @@
       aria-expanded="false"
       data-title="title"
       role="combobox">
+      <br-dropdown-icon />
       <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 />
@@ -27,7 +19,8 @@
 </template>
 
 <script setup>
-import constrainTabbing from '#scripts/helpers/constrainTabbing'
+import BrDropdownIcon from '#icons/Dropdown.vue'
+import constrainTabbing from '#utils/constrainTabbing'
 
 let listenConstrainTabbing = null
 
@@ -117,52 +110,5 @@ defineProps({
     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

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

package/components/BrFormTextarea.vue

@@ -8,7 +8,7 @@
 
 <script setup>
 import { computed } from 'vue'
-import formatKebabCase from '#helpers/formatKebabCase'
+import formatKebabCase from '#utils/formatKebabCase'
 
 const value = defineModel()
 

package/components/BrFormToggle.vue

@@ -1,17 +1,11 @@
 <template>
   <div :class="generateClasses">
-    <BrFormLabel>
-      <span>
-        <slot />
-      </span>
-      <BrFormInput v-bind="$attrs" type="checkbox" />
-    </BrFormLabel>
+    <BrFormInput v-bind="$attrs" type="checkbox" />
   </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
-import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 
 defineOptions({
@@ -19,13 +13,18 @@ defineOptions({
 })
 
 const props = defineProps({
-  class: String,
+  drawer: Boolean,
+  inputCustomClass: String,
 })
 
 const generateClasses = computed(() => {
   let result = ['br-form-toggle']
 
-  if (props.class) result.push(props.class)
+  if (props.drawer) result.push('drawer')
+
+  if (props.inputCustomClass) result.push(props.inputCustomClass)
+
+  if (!props.drawer && !props.inputCustomClass) result.push('default')
 
   return result
 })

package/components/BrFormVisible.vue

@@ -14,8 +14,8 @@
 
 <script setup>
 import BrButton from '#components/BrButton.vue'
-import HidePasswordIcon from '#icons/password/hide.vue'
-import ShowPasswordIcon from '#icons/password/show.vue'
+import HidePasswordIcon from '#icons/Password/hide.vue'
+import ShowPasswordIcon from '#icons/Password/show.vue'
 
 const props = defineProps({
   visible: Boolean,

package/components/BrLink.vue

@@ -1,16 +1,28 @@
 <template>
-  <a v-if="isExternal" :href="to" :class="generateClassnames">
-    <slot />
+  <a
+    v-if="isExternal"
+    :href="to"
+    :class="generateClassnames"
+    @click="animateDots">
+    <slot v-if="!showDots" />
+    <dots-animation v-else />
   </a>
-  <router-link v-else :to="to" :class="generateClassnames">
-    <slot />
+  <router-link v-else :to="to" :class="generateClassnames" @click="animateDots">
+    <slot v-if="!showDots" />
+    <dots-animation v-else />
   </router-link>
 </template>
 
 <script setup>
 // https://vueschool.io/lessons/extending-router-link-for-external-urls
 
-import { computed } from 'vue'
+import DotsAnimation from '#icons/Dots.vue'
+
+import { computed, ref } from 'vue'
+
+const showDots = ref(false)
+
+const animateDots = () => (showDots.value = props.animate)
 
 const isExternal = computed(() => typeof props.to == 'string')
 
@@ -44,5 +56,8 @@ const props = defineProps({
   active: {
     type: Boolean,
   },
+  animate: {
+    type: Boolean,
+  },
 })
 </script>

package/components/BrOverlay.vue

@@ -1,40 +1,74 @@
 <template>
-  <div class="br-overlay-wrap">
-    <div class="br-overlay-content">
-      <slot />
+  <Transition name="fade">
+    <div v-if="show" class="br-overlay-wrap">
+      <div class="br-overlay-content">
+        <slot />
+      </div>
+      <div class="br-overlay-background">
+        <div class="wrap-overlay-exit-button">
+          <br-button variant="exit-overlay" @click="emit('closeOverlay')">
+            <close-icon class="close-icon" />
+          </br-button>
+        </div>
+        <br-button variant="exit-overlay-bg" @click="emit('closeOverlay')" />
+      </div>
     </div>
-    <br-button variant="exit-overlay" @click="emit('closeOverlay')">
-      <close-icon class="close-icon" />
-    </br-button>
-  </div>
+  </Transition>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue'
-import { constrainTabbing } from '#scripts/helpers'
+/**
+ * @component BrOverlay
+ * @description Modal overlay with a fade transition, focus trap, and Escape-to-close.
+ *
+ * @prop {Boolean} show - Controls overlay visibility via v-if.
+ * @emits closeOverlay - Fired when the user clicks the close button, the background, or presses Escape.
+ *
+ * @example
+ * <BrOverlay :show="isOpen" @closeOverlay="isOpen = false">
+ *   <p>Content here</p>
+ * </BrOverlay>
+ */
+
+import { onUnmounted, watch, nextTick, Transition } from 'vue'
+
+const props = defineProps({
+  /** Controls overlay visibility. */
+  show: Boolean
+})
+import constrainTabbing from '#utils/constrainTabbing'
 import BrButton from '#components/BrButton.vue'
 import CloseIcon from '#icons/close.vue'
 
 const emit = defineEmits(['closeOverlay'])
 
-function constrainOverlayPadding() {
-  let $overlay = document.querySelector('.br-overlay-wrap')
-  constrainTabbing($overlay)
-}
+/** @type {{ stop: () => void } | null} */
+let tabTrap = null
 
-function listenForKeys({ key }) {
-  if (key == 'Escape') {
-    emit('closeOverlay')
+// Set up / tear down the focus trap whenever the overlay opens or closes.
+// nextTick ensures the v-if element is in the DOM before querying it.
+watch(() => props.show, async (val) => {
+  if (val) {
+    await nextTick()
+    const $overlay = document.querySelector('.br-overlay-wrap')
+    if ($overlay) tabTrap = constrainTabbing($overlay)
+  } else {
+    tabTrap?.stop()
+    tabTrap = null
   }
+})
+
+/**
+ * @param {KeyboardEvent} event
+ */
+function listenForKeys({ key }) {
+  if (key == 'Escape') emit('closeOverlay')
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', listenForKeys)
-  document.addEventListener('keydown', constrainOverlayPadding)
-})
+document.addEventListener('keydown', listenForKeys)
 
 onUnmounted(() => {
   document.removeEventListener('keydown', listenForKeys)
-  document.removeEventListener('keydown', constrainOverlayPadding)
+  tabTrap?.stop()
 })
 </script>

package/components/BrQrCode.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="br-qr-code" v-html="qrCode" />
+</template>
+
+<script setup>
+import { ref, watchEffect } from 'vue'
+import qrcode from 'qrcode'
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+})
+
+const qrCode = ref('')
+
+watchEffect(async () => {
+  qrCode.value = await qrcode.toString(props.code, { type: 'svg', margin: 0 })
+})
+</script>

package/icons/{city_of_london_lockup.vue → CityOfLondonLockup.vue}

@@ -1,10 +1,9 @@
 <template>
   <a
-    class="city-of-london-lockup"
     href="//www.cityoflondon.gov.uk"
-    target="_blank"
-  >
-    <city-of-london-logo />
+    class="city-of-london-lockup"
+    target="_blank">
+    <city-of-london />
     <small>
       The City of London<br />Corporation is the founder<br />and principal
       funder of<br />the Barbican Centre
@@ -12,12 +11,6 @@
   </a>
 </template>
 
-<script>
-import CityOfLondonLogo from "#icons/city_of_london.vue";
-
-export default {
-  components: {
-    CityOfLondonLogo,
-  },
-};
+<script setup>
+import CityOfLondon from '#icons/CityOfLondon.vue'
 </script>

package/icons/Dropdown.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 0C4.032 0 0 4.032 0 9C0 13.968 4.032 18 9 18C13.968 18 18 13.968 18 9C18 4.032 13.968 0 9 0ZM9 16.8C4.704 16.8 1.2 13.296 1.2 9C1.2 4.704 4.704 1.2 9 1.2C13.296 1.2 16.8 4.704 16.8 9C16.8 13.296 13.296 16.8 9 16.8Z" />
+    <path d="M12.012 6.696L8.99999 10.2L5.98799 6.696C5.71199 6.372 5.21999 6.336 4.88399 6.612C4.55999 6.88801 4.52399 7.38 4.79999 7.716L8.39999 11.916C8.54399 12.084 8.75999 12.192 8.98799 12.192C9.21599 12.192 9.43199 12.096 9.57599 11.916L13.176 7.716C13.452 7.392 13.416 6.90001 13.092 6.612C12.768 6.336 12.276 6.372 11.988 6.696H12.012Z" />
+  </svg>
+</template>

package/icons/Renew.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.000563321 5.32832V1.76813C0.000563321 1.27861 0.40054 0.878085 0.8894 0.878085C1.37826 0.878085 1.77824 1.27861 1.77824 1.76813V2.9252C3.04927 1.40321 4.85361 0.352956 6.86238 0.0770416C9.00448 -0.216674 11.1288 0.335155 12.8531 1.63463C14.5775 2.943 15.6885 4.8388 15.9907 6.98381C16.0618 7.47334 15.7152 7.91836 15.2352 7.98957C15.1908 7.98957 15.1552 7.98957 15.1108 7.98957C14.6753 7.98957 14.2931 7.66915 14.2308 7.22413C13.9997 5.55084 13.1287 4.07336 11.7865 3.0498C10.4444 2.03515 8.78227 1.59902 7.11126 1.83044C5.38692 2.07075 3.84923 3.032 2.85373 4.42938H4.44475C4.93361 4.42938 5.33358 4.8299 5.33358 5.31942C5.33358 5.80895 4.93361 6.20947 4.44475 6.20947H0.8894C0.40054 6.20947 0.000563321 5.80895 0.000563321 5.31942V5.32832ZM15.1108 9.77856H11.5554C11.0666 9.77856 10.6666 10.1791 10.6666 10.6686C10.6666 11.1581 11.0666 11.5587 11.5554 11.5587H13.1465C12.151 12.956 10.6133 13.9173 8.88893 14.1576C5.44913 14.6382 2.24932 12.2173 1.76935 8.76391C1.69824 8.27438 1.25382 7.93617 0.764963 8.00737C0.276103 8.07857 -0.0616553 8.5236 0.00945168 9.01312C0.569419 13.0628 4.04477 16 8.01787 16C8.39118 16 8.75561 15.9733 9.13781 15.9199C11.1466 15.644 12.9509 14.5937 14.222 13.0717V14.2288C14.222 14.7183 14.6219 15.1189 15.1108 15.1189C15.5997 15.1189 15.9996 14.7183 15.9996 14.2288V10.6686C15.9996 10.1791 15.5997 9.77856 15.1108 9.77856Z" />
+  </svg>
+</template>

package/icons/dots.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="dots">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      height="14"
+      width="14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      height="14"
+      width="14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      height="14"
+      width="14">
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { gsap } from 'gsap'
+import { onMounted, useTemplateRef } from 'vue'
+
+const dots = useTemplateRef('dots')
+
+onMounted(() => {
+  const tl = gsap.timeline({ repeat: 9 })
+
+  const duration = 0.3
+
+  const keyframes = [
+    { y: -8, duration },
+    { y: 0, duration },
+  ]
+
+  tl.to(dots.value.children, {
+    stagger: duration,
+    keyframes,
+  })
+})
+</script>

package/icons/index.js

@@ -1,19 +1,19 @@
-import BackArrow from "#icons/back_arrow.vue";
-import BarbicanLogo from "#icons/barbican.vue";
-import CartIcon from "#icons/cart.vue";
-import CityOfLondonLogo from "#icons/city_of_london.vue";
-import CityOfLondonLockup from "#icons/city_of_london_lockup.vue";
-import CloseIcon from "#icons/close.vue";
-import InformationIcon from "#icons/information.vue";
-import QrCode from "#icons/qr_code.vue";
+import BrBackArrow from '#icons/BackArrow.vue'
+import BrBarbicanLogo from '#icons/Barbican.vue'
+import BrCartIcon from '#icons/Cart.vue'
+import BrCityOfLondonLockup from '#icons/CityOfLondonLockup.vue'
+import BrCloseIcon from '#icons/Close.vue'
+import BrInfoIcon from '#icons/Info.vue'
+import BrRenewIcon from '#icons/Renew.vue'
+import BrDropdownIcon from '#icons/Dropdown.vue'
 
-export {
-  BackArrow,
-  BarbicanLogo,
-  CartIcon,
-  CityOfLondonLogo,
-  CityOfLondonLockup,
-  CloseIcon,
-  InformationIcon,
-  QrCode,
-};
+import BrAccountContactIcon from '#icons/AccountContact.vue'
+import BrAccountDetailsIcon from '#icons/AccountPerson.vue'
+import BrAccountEditIcon from '#icons/AccountEdit.vue'
+import BrAccountMembershipIcon from '#icons/AccountMembership.vue'
+import BrAccountOrdersIcon from '#icons/AccountOrders.vue'
+import BrAccountPaymentIcon from '#icons/AccountPayment.vue'
+import BrAccountTicketIcon from '#icons/AccountTicket.vue'
+import BrAccountPersonalIcon from '#icons/AccountPersonal.vue'
+
+export { BrAccountContactIcon, BrAccountDetailsIcon, BrAccountEditIcon, BrAccountMembershipIcon, BrAccountOrdersIcon, BrAccountPaymentIcon, BrAccountTicketIcon, BrAccountPersonalIcon, BrBackArrow, BrBarbicanLogo, BrCartIcon, BrCityOfLondonLockup, BrCloseIcon, BrDropdownIcon, BrInfoIcon, BrRenewIcon }