barbican-reset 3.23.0 → 3.25.0

package/components/BrButton.vue

@@ -1,14 +1,13 @@
 <template>
   <component
+    :type="defineType(defineComponent)"
     :class="generateClassnames"
     :aria-busy="defineAriaBusy"
     :aria-live="defineAriaLive"
     @click="emit('click')"
     :is="defineComponent"
-    :type="type"
     :to="to"
-    ref="button"
-    >
+    ref="button">
     <template v-if="state == 'default'">
       <slot name="default">default</slot>
     </template>
@@ -71,10 +70,18 @@ const defineAriaLive = computed(() => {
 
 const focusButton = () => {
   if (defineComponent.value == 'button' && button) {
-    button.value.focus();
+    button.value.focus()
   }
 }
 
+const defineType = function (component) {
+  if (props.type) return props.type
+
+  if (component == 'button') return 'button'
+
+  return null
+}
+
 const props = defineProps({
   state: {
     type: String,
@@ -109,7 +116,6 @@ const props = defineProps({
 })
 
 defineExpose({
-  focusButton
+  focusButton,
 })
-
-</script>
+</script>

package/components/BrCard.vue

@@ -35,7 +35,6 @@ const generateClassnames = computed(() => {
   if (props.inline) classnames.push('inline')
   if (props.navcard) classnames.push('navcard')
   if (props.navlink) classnames.push('navlink')
-  if (props.ticket) classnames.push('ticket')
   if (props.membership) classnames.push('membership')
   if (props.qrcode) classnames.push('qrcode')
 
@@ -52,7 +51,6 @@ const generateClassnames = computed(() => {
     !props.navcard &&
     !props.navitem &&
     !props.navlink &&
-    !props.ticket &&
     !props.membership &&
     !props.qrcode
   ) {
@@ -79,10 +77,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  ticket: {
-    type: Boolean,
-    default: false,
-  },
   membership: {
     type: Boolean,
     default: false,
@@ -100,7 +94,7 @@ const props = defineProps({
     default: false,
   },
   to: {
-    type: [Object, String],
+    type: Object || String,
   },
   disabled: {
     type: Boolean,

package/components/BrDetails.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="br-details">
     <br-button variant="summary" @click="update">
-      <div class="br-summary-content">
-        <slot name="title">
-          <br-card-title>Title goes here</br-card-title>
-        </slot>
+      <div class="wrap-title">
+        <slot name="title">Title goes here</slot>
       </div>
-      <span class="br-summary-icon">
-        {{ open ? '–' : '+' }}
-      </span>
+      <span class="wrap-icon">{{ open ? '–' : '+' }}</span>
     </br-button>
-    <div :class="['br-details-content', { open }]">
+    <div :class="['wrap-content', { open }]">
       <slot name="content">Content goes here</slot>
     </div>
   </div>
@@ -32,28 +28,28 @@ const update = () => emit('update', { open: !props.open })
 <style lang="scss" scoped>
 @use '#styles/helpers' as *;
 
-.br-summary-content {
-  text-align: left;
-}
-
-.br-summary-icon {
+.wrap-icon {
   font-size: var(--font-size-h1);
   line-height: 0.6875rem;
   font-weight: normal;
   position: relative;
   padding: 0.375rem;
-  width: 2.25rem;
   top: 0.125rem;
   height: 2rem;
+  width: 2rem;
+}
+
+.wrap-title {
+  align-self: center;
 }
 
-.br-details-content:not(.open) {
+.wrap-content:not(.open) {
   visibility: hidden;
   overflow: hidden;
   height: 0;
 }
 
-.br-details-content.open {
-  margin-top: var(--margin-xxl);
+.wrap-content.open {
+  margin-top: var(--margin-md);
 }
 </style>

package/components/BrFormCheckbox.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="br-form-checkbox">
-    <BrFormLabel
+    <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
       :id="generateID">
-      <BrFormInput
+      <br-form-input
         :class="[{ success }, { error }]"
         :disabled="disabled"
         :id="generateID"
@@ -14,7 +14,7 @@
       <span class="label-text">
         <slot />
       </span>
-    </BrFormLabel>
+    </br-form-label>
   </div>
 </template>
 
@@ -29,6 +29,9 @@ defineOptions({
 })
 
 const props = defineProps({
+  id: {
+    type: String,
+  },
   disabled: {
     default: false,
     type: Boolean,

package/components/BrFormRadio.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="br-form-radio">
-    <BrFormLabel
+    <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
       :id="generateID">
-      <BrFormInput
+      <br-form-input
         :class="[{ success }, { error }]"
         :disabled="disabled"
         :id="generateID"
@@ -14,7 +14,7 @@
       <span class="label-text">
         <slot />
       </span>
-    </BrFormLabel>
+    </br-form-label>
   </div>
 </template>
 
@@ -30,6 +30,9 @@ defineOptions({
 })
 
 const props = defineProps({
+  id: {
+    type: String,
+  },
   disabled: {
     default: false,
     type: Boolean,

package/components/BrFormRadioGroup.vue

@@ -1,21 +1,24 @@
 <template>
   <div role="radiogroup">
-    <BrFormRadio
-      v-for="(option, index) in options"
-      :data-test="option['data-test']"
-      :key="'radio-option-' + index"
-      :disabled="option.disabled"
-      :value="option.value"
-      v-model="model"
-      :name="name">
-      <slot v-if="$slots.default" v-bind="option" />
-      <template v-else>{{ option.text }}</template>
-    </BrFormRadio>
+    <br-wrap cluster>
+      <br-form-radio
+        v-for="(option, index) in options"
+        :data-test="option['data-test']"
+        :key="'radio-option-' + index"
+        :disabled="option.disabled"
+        :value="option.value"
+        v-model="model"
+        :name="name">
+        <slot v-if="$slots.default" v-bind="option" />
+        <template v-else>{{ option.text }}</template>
+      </br-form-radio>
+    </br-wrap>
   </div>
 </template>
 
 <script setup>
 import BrFormRadio from '#components/BrFormRadio.vue'
+import BrWrap from '#components/BrWrap.vue'
 
 const model = defineModel()
 

package/components/BrFormRow.vue

@@ -1,12 +1,13 @@
 <template>
   <div :class="generateClasses">
-    <BrFormLabel
+    <br-form-label
       v-if="label"
       :id="generateFor"
       :required="required"
-      v-bind="$attrs">
+      v-bind="$attrs"
+      row>
       {{ label }}
-    </BrFormLabel>
+    </br-form-label>
     <div :class="[`content`, { label }, { submit }, { radios }]">
       <slot />
     </div>

package/components/BrWrap.vue

@@ -18,7 +18,11 @@ const generateComponentClasses = computed(() => {
     classnames.push('cluster')
   }
 
-  if (!props.navcard && !props.cluster) {
+  if (props.orders) {
+    classnames.push('orders')
+  }
+
+  if (!props.navcard && !props.cluster && !props.orders) {
     classnames.push('default')
   }
 
@@ -34,5 +38,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  orders: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>

package/package.json

@@ -137,5 +137,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "3.23.0"
+  "version": "3.25.0"
 }

package/scss/_br-wrap.scss

@@ -1,26 +1,18 @@
 @use "mixins/breakpoints" as *;
+@use "mixins/br-wrap" as *;
 
 .br-wrap.default {
-  max-width: var(--width-layout-sm);
-  margin-right: auto;
-  margin-left: auto;
+  @include br-wrap--default;
 }
 
 .br-wrap.navcard {
-  gap: var(--gap-md);
-  display: grid;
-
-  @include medium-up {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--gap-lg);
-  }
+  @include br-wrap--navcard;
 }
 
 .br-wrap.cluster {
-  margin: var(--margin-wrap-xs);
+  @include br-wrap--cluster;
 }
 
-.br-wrap.cluster>* {
-  margin: var(--margin-xs);
-  vertical-align: middle;
+.br-wrap.orders {
+  @include br-wrap--orders;
 }

package/scss/_form.scss

@@ -1,8 +1,3 @@
-label {
-  font-weight: bold;
-  display: block;
-}
-
 .secondary-actions {
   margin-top: var(--margin-xl);
 

package/scss/_variables.scss

@@ -176,7 +176,7 @@
   --padding-xl: 1.5rem;
   --padding-xxl: 2rem;
   --padding-xxxl: 2.5rem;
-  --padding-card-sm: 1rem;
+  --padding-card-sm: 1.25rem;
   --padding-card-md: 1.5rem;
   --padding-card-lg: 1.75rem;
   --padding-content: 3.75rem;

package/scss/mixins/_br-card.scss

@@ -4,7 +4,6 @@
 @use "card/navcard" as *;
 @use "card/navlink" as *;
 @use "card/navitem" as *;
-@use "card/ticket" as *;
 @use "card/membership" as *;
 @use "card/qrcode" as *;
 
@@ -36,10 +35,6 @@
     @include br-card--navitem;
   }
 
-  &.ticket {
-    @include br-card--ticket;
-  }
-
   &.membership {
     @include br-card--membership;
   }
@@ -133,6 +128,7 @@
 }
 
 @mixin br-card-text {
-  text-overflow: ellipsis;
-  overflow: hidden;
+  +.br-card-text {
+    margin-top: var(--margin-md);
+  }
 }

package/scss/mixins/{input/_radio.scss → _br-form-radio.scss}

@@ -101,9 +101,13 @@
 }
 
 @mixin br-form-radio {
-  &:not(:last-child) {
-    margin-bottom: var(--margin-sm);
-  }
+  display: inline-flex;
+
+  /// @TODO: block variant
+
+  // &:not(:last-child) {
+  //   margin-bottom: var(--margin-sm);
+  // } 
 
   .br-form-label {
     @include br-form-radio--label;

package/scss/mixins/_br-form-row.scss

@@ -14,30 +14,36 @@
 }
 
 @mixin br-form-row {
+  & {
+    row-gap: var(--gap-md);
+    display: grid;
+  }
+
   &:not(:last-of-type) {
     margin-bottom: var(--margin-md);
   }
 
   @include small-up {
     grid-template-columns: 33fr 67fr;
-    align-items: flex-start;
-    gap: var(--gap-xl);
-    display: grid;
+    column-gap: var(--gap-xl);
+    align-items: start;
+
+    >.br-form-label {
+      margin-top: var(--margin-lg);
+    }
   }
 
-  >label,
   >.br-form-label {
-    @include br-form-label;
+    font-weight: bold;
   }
 
-  .br-form-input[type=email] {
+  .br-form-input[type=text],
+  .br-form-input[type=email],
+  .br-form-input[type=tel],
+  .br-form-input[type=date] {
     width: 100%;
   }
 
-  .content.radios {
-    margin: var(--margin-wrap-xs);
-  }
-
   .content>fieldset {
     margin-top: var(--margin-lg);
   }

package/scss/mixins/_br-wrap.scss

@@ -0,0 +1,48 @@
+@use "../mixins/breakpoints" as *;
+
+@mixin br-wrap--default {
+  max-width: var(--width-layout-sm);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@mixin br-wrap--navcard {
+  gap: var(--gap-md);
+  display: grid;
+
+  @include medium-up {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--gap-lg);
+  }
+}
+
+@mixin br-wrap--cluster {
+  margin: var(--margin-wrap-xs);
+
+  >* {
+    margin: var(--margin-xs);
+    vertical-align: middle;
+  }
+}
+
+@mixin br-wrap--orders {
+  @include br-wrap--cluster;
+
+  $margin: calc(var(--margin-xs) * 2);
+
+  @include medium-down {
+    >* {
+      width: calc(100% - $margin);
+    }
+  }
+
+  @include medium-up {
+    >* {
+      width: calc(50% - $margin);
+    }
+
+    >*.open {
+      width: calc(100% - $margin);
+    }
+  }
+}

package/scss/mixins/_input.scss

@@ -2,5 +2,5 @@
 @forward "input/status";
 @forward "input/checkbox";
 @forward "input/select";
-@forward "input/radio";
+@forward "br-form-radio";
 @forward "input/text";

package/scss/mixins/buttons/custom/_summary.scss

@@ -6,7 +6,8 @@
   & {
     justify-content: space-between;
     font-weight: inherit;
-    align-items: center;
+    align-items: start;
+    text-align: left;
     width: 100%;
   }
 
@@ -16,4 +17,12 @@
       outline-style: dashed;
     }
   }
+
+  &:active {
+    transform: scale(1);
+  }
+
+  &:active .br-summary-icon {
+    transform: var(--scale-click);
+  }
 }

package/scss/mixins/index.scss

@@ -10,6 +10,7 @@
 @forward "br-form-row";
 @forward "br-gap";
 @forward "br-skiplink";
+@forward "br-wrap";
 @forward "breakpoints";
 @forward "buttons";
 @forward "city-of-london";

package/scss/mixins/table/_details.scss

@@ -14,7 +14,9 @@
   }
 
   thead tr {
-    border: var(--border-width-sm) solid var(--color-black-10-lighten);
+    border-color: var(--color-black-25-lighten);
+    border-width: var(--border-width-sm);
+    border-style: solid;
   }
 
   tr {
@@ -30,7 +32,9 @@
   }
 
   tbody tr {
-    border: var(--border-width-sm) solid var(--color-black-10-lighten);
+    border-color: var(--color-black-25-lighten);
+    border-width: var(--border-width-sm);
+    border-style: solid;
 
     &:not(:last-of-type) {
       margin-bottom: var(--margin-lg);
@@ -49,7 +53,9 @@
 
     @include medium-up {
       &:not(:last-of-type) {
-        border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
+        border-right-color: var(--color-black-25-lighten);
+        border-right-width: var(--border-width-sm);
+        border-right-style: solid;
       }
 
       &:last-of-type {

package/scss/mixins/table/_etickets.scss

@@ -17,7 +17,9 @@
 
   thead tr,
   tbody tr.active {
-    border: var(--border-width-sm) solid var(--color-black-10-lighten);
+    border-color: var(--color-black-25-lighten);
+    border-width: var(--border-width-sm);
+    border-style: solid;
     display: grid;
 
     &:not(:last-of-type) {
@@ -39,7 +41,9 @@
 
     @include medium-up {
       &:not(:last-of-type) {
-        border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
+        border-right-color: var(--color-black-25-lighten);
+        border-right-width: var(--border-width-sm);
+        border-right-style: solid;
       }
 
       &:last-of-type {

package/scss/mixins/table/_generic.scss

@@ -3,7 +3,9 @@
 @use "../../mixins/focus" as *;
 
 @mixin table-row($gap: var(--gap-sm)) {
-  border-bottom: var(--border-width-sm) solid var(--color-black-10-lighten);
+  border-bottom-color: var(--color-black-25-lighten);
+  border-bottom-width: var(--border-width-sm);
+  border-bottom-style: solid;
   padding-bottom: $gap;
   padding-top: $gap;
 }
@@ -27,7 +29,9 @@
   td {
     @include medium-up {
       &:not(:last-of-type) {
-        border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
+        border-right-color: var(--color-black-25-lighten);
+        border-right-width: var(--border-width-sm);
+        border-right-style: solid;
       }
 
       &:last-of-type {

package/scss/mixins/table/_gifts.scss

@@ -26,10 +26,13 @@
     }
 
     @include x-large-down {
+      border-color: var(--color-black-25-lighten);
       border-radius: var(--border-radius-lg);
-      border: var(--border-width-sm) solid var(--color-black-10-lighten);
-      display: block;
+      border-width: var(--border-width-sm);
       padding: var(--padding-lg);
+      border-style: solid;
+      display: block;
+
 
       &:not(:last-of-type) {
         margin-bottom: var(--margin-xl);
@@ -44,8 +47,10 @@
         }
 
         &:not(:first-of-type):not(:last-of-type) {
-          border-top: var(--border-width-sm) solid var(--color-black-10-lighten);
+          border-top-color: var(--color-black-25-lighten);
+          border-top-width: var(--border-width-sm);
           padding-top: var(--padding-sm);
+          border-top-style: solid;
         }
 
         &:last-of-type {

package/scss/mixins/table/_orders.scss

@@ -16,7 +16,9 @@
 
   thead tr,
   tbody tr {
-    border: var(--border-width-sm) solid var(--color-black-10-lighten);
+    border-color: var(--color-black-25-lighten);
+    border-width: var(--border-width-sm);
+    border-style: solid;
     display: grid;
 
     &:not(:last-of-type) {

package/scss/mixins/table/_preferences.scss

@@ -16,7 +16,9 @@
   }
 
   tr {
-    border: var(--border-width-sm) solid var(--color-black-10-lighten);
+    border-color: var(--color-black-25-lighten);
+    border-width: var(--border-width-sm);
+    border-style: solid;
     display: grid;
 
     &:not(:last-of-type) {
@@ -40,7 +42,9 @@
       text-align: center;
 
       &:not(:last-of-type) {
-        border-right: var(--border-width-sm) solid var(--color-black-10-lighten);
+        border-right-color: var(--color-black-25-lighten);
+        border-right-width: var(--border-width-sm);
+        border-right-style: solid;
       }
 
       &:first-of-type {

package/scss/mixins/table/_resale.scss

@@ -7,7 +7,9 @@
   margin-left: auto;
 
   tbody tr {
-    border: var(--border-width-sm) solid var(--color-black-10-lighten);
+    border-color: var(--color-black-25-lighten);
+    border-width: var(--border-width-sm);
+    border-style: solid;
   }
 
   td {

package/scss/mixins/table/_tickets.scss

@@ -20,10 +20,12 @@
     }
 
     @include small-down {
+      border-color: var(--color-black-25-lighten);
       border-radius: var(--border-radius-lg);
-      border: var(--border-width-sm) solid var(--color-black-10-lighten);
-      display: block;
+      border-width: var(--border-width-sm);
       padding: var(--padding-lg);
+      border-style: solid;
+      display: block;
 
       &:first-of-type {
         display: none;
@@ -43,7 +45,9 @@
         }
 
         &:not(:first-of-type):not(:last-of-type) {
-          border-top: var(--border-width-sm) solid var(--color-black-10-lighten);
+          border-top-color: var(--color-black-25-lighten);
+          border-top-width: var(--border-width-sm);
+          border-top-style: solid;
         }
 
         &:last-of-type {

package/components/BrButton copy.vue

@@ -1,112 +0,0 @@
-<template>
-  <component
-    :class="generateComponentClasses"
-    :aria-busy="defineAriaBusy"
-    :aria-live="defineAriaLive"
-    @click="emit('click')"
-    :is="defineComponent"
-    :type="type"
-    :href="href"
-    :to="to">
-    <template v-if="state == 'default'">
-      <slot name="default">default</slot>
-    </template>
-    <template v-else-if="state == 'loading'">
-      <template v-if="$slots.loading">
-        <slot name="loading">loading</slot>
-      </template>
-      <dot-typing v-else />
-    </template>
-    <template v-else-if="state == 'loaded'">
-      <slot name="loaded">loaded</slot>
-    </template>
-    <template v-else-if="state == 'error'">
-      <slot name="error">error</slot>
-    </template>
-  </component>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import DotTyping from '#components/BrButton/dot_typing.vue'
-
-const emit = defineEmits(['click'])
-
-const props = defineProps({
-  state: {
-    type: String,
-    default: 'default',
-  },
-  variant: {
-    type: String,
-    default: 'secondary',
-  },
-  type: {
-    type: [String, null],
-  },
-  to: {
-    type: [Object, null],
-  },
-  href: {
-    type: [String, null],
-  },
-  inline: {
-    type: Boolean,
-    default: false,
-  },
-  slim: {
-    type: Boolean,
-    default: false,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const generateComponentClasses = computed(() => {
-  let classnames = ['btn', 'btn-' + props.variant]
-
-  if (props.inline) {
-    classnames.push('btn-inline')
-  }
-
-  if (props.slim) {
-    classnames.push('btn-slim')
-  }
-
-  if (props.active) {
-    classnames.push('btn-active')
-  }
-
-  return classnames
-})
-
-const defineComponent = computed(() => {
-  if (props.href) {
-    return 'a'
-  }
-
-  if (props.to) {
-    return 'router-link'
-  }
-
-  return 'button'
-})
-
-const defineAriaBusy = computed(() => {
-  if (props.to || props.href) {
-    return
-  }
-
-  return props.state == 'loading' ? 'true' : 'false'
-})
-
-const defineAriaLive = computed(() => {
-  if (props.to || props.href) {
-    return
-  }
-
-  return 'polite'
-})
-</script>

package/scss/mixins/card/_ticket.scss

@@ -1,11 +0,0 @@
-@use "../../mixins/breakpoints" as *;
-
-@mixin br-card--ticket {
-  .br-card-title {
-    font-size: var(--font-size-h4);
-  }
-
-  .br-card-text {
-    margin-top: var(--margin-xs);
-  }
-}