barbican-reset 3.26.0 → 3.27.0

package/components/BrButton.vue

@@ -1,12 +1,10 @@
 <template>
-  <component
-    :type="defineType(defineComponent)"
+  <button
+    :aria-busy="props.state == 'loading' ? 'true' : 'false'"
     :class="generateClassnames"
-    :aria-busy="defineAriaBusy"
-    :aria-live="defineAriaLive"
-    @click="emit('click')"
-    :is="defineComponent"
-    :to="to"
+    @click="emits('click')"
+    :type="props.type"
+    aria-live="polite"
     ref="button">
     <template v-if="state == 'default'">
       <slot name="default">default</slot>
@@ -23,23 +21,17 @@
     <template v-else-if="state == 'error'">
       <slot name="error">error</slot>
     </template>
-  </component>
+  </button>
 </template>
 
 <script setup>
 import { computed, useTemplateRef } from 'vue'
 import DotTyping from '#components/BrButton/dot_typing.vue'
-import BrLink from '#components/BrLink.vue'
 
-const emit = defineEmits(['click'])
+const emits = defineEmits(['click'])
 
 const button = useTemplateRef('button')
 
-const defineComponent = computed(() => {
-  if (props.to && !props.disabled) return BrLink
-  return 'button'
-})
-
 const generateClassnames = computed(() => {
   let classnames = ['btn', 'btn-' + props.variant]
 
@@ -51,36 +43,10 @@ const generateClassnames = computed(() => {
     classnames.push('btn-slim')
   }
 
-  if (props.active) {
-    classnames.push('btn-active')
-  }
-
   return classnames
 })
 
-const defineAriaBusy = computed(() => {
-  if (props.to) return
-  return props.state == 'loading' ? 'true' : 'false'
-})
-
-const defineAriaLive = computed(() => {
-  if (props.to) return
-  return 'polite'
-})
-
-const focusButton = () => {
-  if (defineComponent.value == 'button' && button) {
-    button.value.focus()
-  }
-}
-
-const defineType = function (component) {
-  if (props.type) return props.type
-
-  if (component == 'button') return 'button'
-
-  return null
-}
+const focusButton = () => button.value.focus()
 
 const props = defineProps({
   state: {
@@ -93,13 +59,7 @@ const props = defineProps({
   },
   type: {
     type: String,
-  },
-  to: {
-    type: [Object, String],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
+    default: 'button',
   },
   inline: {
     type: Boolean,
@@ -109,10 +69,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  active: {
-    type: Boolean,
-    default: false,
-  },
 })
 
 defineExpose({

package/components/BrCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :class="generateClassnames" :is="defineComponent" :to="defineTo">
+  <div :class="generateClassnames">
     <div v-if="$slots.header" class="br-card-header">
       <slot name="header" />
     </div>
@@ -11,49 +11,21 @@
         <slot />
       </br-card-body>
     </template>
-  </component>
+  </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
 import BrCardBody from '#components/BrCardBody.vue'
-import BrLink from '#components/BrLink.vue'
-
-const defineComponent = computed(() => {
-  if (props.to && !props.disabled) return BrLink
-  return 'div'
-})
-
-const defineTo = computed(() => {
-  if (props.disabled) return
-  return props.to
-})
 
 const generateClassnames = computed(() => {
   let classnames = ['br-card']
 
   if (props.inline) classnames.push('inline')
-  if (props.navcard) classnames.push('navcard')
-  if (props.navlink) classnames.push('navlink')
   if (props.membership) classnames.push('membership')
   if (props.qrcode) classnames.push('qrcode')
 
-  if (props.navitem) {
-    classnames.push('navitem')
-
-    if (props.disabled) {
-      classnames.push('disabled')
-    }
-  }
-
-  if (
-    !props.inline &&
-    !props.navcard &&
-    !props.navitem &&
-    !props.navlink &&
-    !props.membership &&
-    !props.qrcode
-  ) {
+  if (!props.inline && !props.membership && !props.qrcode) {
     classnames.push('default')
   }
 
@@ -61,44 +33,10 @@ const generateClassnames = computed(() => {
 })
 
 const props = defineProps({
-  inline: {
-    type: Boolean,
-    default: false,
-  },
-  navcard: {
-    type: Boolean,
-    default: false,
-  },
-  navitem: {
-    type: Boolean,
-    default: false,
-  },
-  navlink: {
-    type: Boolean,
-    default: false,
-  },
-  membership: {
-    type: Boolean,
-    default: false,
-  },
-  qrcode: {
-    type: Boolean,
-    default: false,
-  },
-  center: {
-    type: Boolean,
-    default: false,
-  },
-  noBody: {
-    type: Boolean,
-    default: false,
-  },
-  to: {
-    type: [Object, String],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
+  inline: Boolean,
+  membership: Boolean,
+  qrcode: Boolean,
+  center: Boolean,
+  noBody: Boolean,
 })
 </script>

package/components/BrLink.vue

@@ -1,8 +1,8 @@
 <template>
-  <a v-if="isExternal" :href="to">
+  <a v-if="isExternal" :href="to" :class="generateClassnames">
     <slot />
   </a>
-  <router-link v-else :to="to">
+  <router-link v-else :to="to" :class="generateClassnames">
     <slot />
   </router-link>
 </template>
@@ -14,9 +14,35 @@ import { computed } from 'vue'
 
 const isExternal = computed(() => typeof props.to == 'string')
 
+const generateClassnames = computed(() => {
+  let classnames = ['br-link']
+
+  if (props.navcard) classnames.push('navcard')
+
+  if (props.external) classnames.push('external')
+
+  if (props.slim) classnames.push('slim')
+
+  if (props.active) classnames.push('active')
+
+  return classnames
+})
+
 const props = defineProps({
   to: {
     type: [Object, String],
   },
+  navcard: {
+    type: Boolean,
+  },
+  external: {
+    type: Boolean,
+  },
+  slim: {
+    type: Boolean,
+  },
+  active: {
+    type: Boolean,
+  },
 })
 </script>

package/components/BrWrap.vue

@@ -16,13 +16,19 @@ const generateComponentClasses = computed(() => {
 
   if (props.cluster) {
     classnames.push('cluster')
+    classnames.push('align-' + props.align)
   }
 
   if (props.orders) {
     classnames.push('orders')
+    classnames.push('align-' + props.align)
   }
 
-  if (!props.navcard && !props.cluster && !props.orders) {
+  if (props.preferences) {
+    classnames.push('preferences')
+  }
+
+  if (!props.navcard && !props.cluster && !props.orders && !props.preferences) {
     classnames.push('default')
   }
 
@@ -30,17 +36,13 @@ const generateComponentClasses = computed(() => {
 })
 
 const props = defineProps({
-  navcard: {
-    type: Boolean,
-    default: false,
-  },
-  cluster: {
-    type: Boolean,
-    default: false,
-  },
-  orders: {
-    type: Boolean,
-    default: false,
+  navcard: Boolean,
+  cluster: Boolean,
+  orders: Boolean,
+  preferences: Boolean,
+  align: {
+    type: String,
+    default: 'middle',
   },
 })
 </script>

package/index.js

@@ -37,6 +37,7 @@ import BrFormTextarea from '#components/BrFormTextarea.vue'
 import BrFormToggle from '#components/BrFormToggle.vue'
 import BrFormUpdate from '#components/BrFormUpdate.vue'
 import BrFormVisible from '#components/BrFormVisible.vue'
+import BrLink from '#components/BrLink.vue'
 
 import BrOverlay from '#components/BrOverlay.vue'
 
@@ -81,6 +82,7 @@ export {
   BrFormToggle,
   BrFormUpdate,
   BrFormVisible,
+  BrLink,
   BrLoader,
   BrOverlay,
   BrSkiplink,

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.26.0"
+  "version": "3.27.0"
 }

package/scss/_atomic.scss

@@ -44,4 +44,8 @@
   @include large-up {
     display: none;
   }
+}
+
+.display-inline-block {
+  display: inline-block;
 }

package/scss/_br-button.scss

@@ -229,10 +229,6 @@ button.btn:active {
     @include btn-outline-alert-neutral;
   }
 
-  &.btn-navcard {
-    @include btn-navcard;
-  }
-
   &.btn-summary {
     @include btn-summary;
   }

package/scss/_br-card.scss

@@ -21,7 +21,7 @@
 }
 
 .br-card-body {
-  @include br-card-body;
+  @include br-card--body;
 }
 
 .br-card-img {

package/scss/_br-form-fieldset.scss

@@ -23,7 +23,7 @@ fieldset,
 
 @include small-up {
   .fieldset.table {
-    grid-template-columns: auto repeat(2, 5rem);
+    grid-template-columns: auto calc(var(--width-column) * 2);
     margin-top: var(--margin-sm);
     border-radius: 0;
     display: grid;

package/scss/_br-link.scss

@@ -0,0 +1,2 @@
+@forward "br-link/navcard";
+@forward "br-link/navlink";

package/scss/_br-wrap.scss

@@ -15,4 +15,8 @@
 
 .br-wrap.orders {
   @include br-wrap--orders;
+}
+
+.br-wrap.preferences {
+  @include br-wrap--preferences;
 }

package/scss/_variables.scss

@@ -3,6 +3,7 @@
   --border-radius-lg: 0.375rem;
   --border-width-sm: 0.0625rem;
   --border-width-lg: 0.125rem;
+  --border-width-xl: 0.25rem;
   --box-shadow-card: 0 0 var(--padding-sm) rgba(0, 0, 0, 0.125);
   --color-black-80-lighten: color-mix(in oklab, black 80%, white);
   --color-black-60-lighten: color-mix(in oklab, black 60%, white);
@@ -140,7 +141,7 @@
   --font-size-h1: 2.25rem;
   --font-size-h2: 2rem;
   --font-size-h3: 1.75rem;
-  --font-size-h4: 1.375rem;
+  --font-size-h4: 1.5rem;
   --font-size-h5: 1.25rem;
   --font-size-h6: 1rem;
   --font-size-sm: 0.875rem;
@@ -166,6 +167,7 @@
   --min-height-button: 2.5rem;
   --min-height-iframe-sm: 27.5rem;
   --min-height-iframe-lg: 36.875rem;
+  --offset-navlink: calc(var(--border-width-sm) * -1);
   --outline-offset-sm: 0.0625rem;
   --outline-offset-md: 0.125rem;
   --outline-offset-lg: 0.1875rem;
@@ -183,6 +185,7 @@
   --padding-layout-sm: 5%;
   --padding-layout-lg: 10%;
   --scale-click: scale(0.98);
+  --width-column: 5rem;
   --width-icon: 10rem;
   --width-title: 20rem;
   --width-layout-xs: 24rem;

package/scss/br-link/_navcard.scss

@@ -0,0 +1,61 @@
+@use "../mixins/br-card" as *;
+@use "../mixins/br-link/navlink" as *;
+@use "../mixins/breakpoints" as *;
+@use "../mixins/buttons/slim" as *;
+@use "../mixins/br-link/navlink" as *;
+
+.br-link.navcard {
+  @include br-card--setup;
+  @include br-card--body;
+}
+
+.br-link.navcard.slim {
+  @include btn-slim;
+}
+
+.br-link.navcard.active {
+  @include navlink--focus;
+  @include navlink--outline;
+
+  & {
+    outline-color: var(--color-brand-generic);
+  }
+}
+
+.br-link.navcard.active:hover,
+.br-link.navcard.active:focus {
+  @include navlink--disabled;
+
+  & {
+    outline-color: var(--color-brand-generic);
+  }
+}
+
+.br-link.navcard:hover,
+.br-link.navcard:focus {
+  @include navlink--focus;
+  @include navlink--outline;
+
+  & {
+    outline-color: currentColor;
+  }
+}
+
+@include small-down {
+  .br-link.navcard.external {
+    background-color: transparent;
+    justify-self: start;
+    border-width: 0;
+    padding: 0;
+  }
+
+  .br-link.navcard.external:hover,
+  .br-link.navcard.external:focus {
+    background-color: var(--color-black-80-lighten);
+    outline-color: var(--color-black-80-lighten);
+    outline-width: var(--border-width-xl);
+    outline-offset: 0;
+    border-radius: 0;
+    color: white;
+  }
+}

package/scss/br-link/_navlink.scss

@@ -0,0 +1,61 @@
+@use "../mixins/br-card" as *;
+@use "../mixins/br-link/navlink" as *;
+
+.navlink {
+  @include br-card--setup;
+
+  & {
+    padding-bottom: var(--padding-md);
+    padding-right: var(--padding-lg);
+    padding-left: var(--padding-lg);
+    padding-top: var(--padding-md);
+    text-decoration: underline;
+    font-weight: bold;
+    display: block;
+  }
+}
+
+.navlink:not(.first) {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top-width: 0;
+}
+
+.navlink:not(.last) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+div.navlink {
+  @include navlink--disabled;
+  @include navlink--outline;
+
+  & {
+    outline-color: var(--color-brand-generic);
+    cursor: default;
+  }
+}
+
+a.navlink:hover,
+a.navlink:focus {
+  @include navlink--focus;
+  @include navlink--outline;
+
+  & {
+    outline-color: currentColor;
+  }
+}
+
+a.navlink.router-link-active {
+  @include navlink--focus;
+  @include navlink--outline;
+
+  & {
+    outline-color: var(--color-brand-generic);
+  }
+}
+
+a.navlink.router-link-active:hover,
+a.navlink.router-link-active:focus {
+  @include navlink--disabled;
+}

package/scss/index.scss

@@ -15,6 +15,7 @@
 @use "br-form-toggle";
 @use "br-form-update";
 @use "br-form-visible";
+@use "br-link";
 @use "br-loader";
 @use "br-overlay";
 @use "br-promo";

package/scss/mixins/_br-card.scss

@@ -1,19 +1,20 @@
 @use "../mixins/breakpoints" as *;
 @use "card/default" as *;
 @use "card/inline" as *;
-@use "card/navcard" as *;
-@use "card/navlink" as *;
-@use "card/navitem" as *;
 @use "card/membership" as *;
 @use "card/qrcode" as *;
 
-@mixin br-card {
+@mixin br-card--setup {
   border-color: var(--color-black-25-lighten);
   border-radius: var(--border-radius-lg);
   border-width: var(--border-width-sm);
   background-color: white;
   border-style: solid;
   overflow: hidden;
+}
+
+@mixin br-card {
+  @include br-card--setup;
 
   &.default {
     @include br-card--default;
@@ -23,18 +24,6 @@
     @include br-card--inline;
   }
 
-  &.navcard {
-    @include br-card--navcard;
-  }
-
-  &.navlink {
-    @include br-card--navlink;
-  }
-
-  &.navitem {
-    @include br-card--navitem;
-  }
-
   &.membership {
     @include br-card--membership;
   }
@@ -68,10 +57,6 @@
   text-align: left;
 
   @include small-up {
-    font-size: var(--font-size-h3);
-  }
-
-  @include medium-up {
     font-size: var(--font-size-h2);
   }
 }
@@ -84,7 +69,7 @@
   }
 }
 
-@mixin br-card-body {
+@mixin br-card--body {
   padding: var(--padding-card-sm);
 
   @include large-up {
@@ -117,7 +102,7 @@
   }
 
   .br-card-body {
-    @include br-card-body;
+    @include br-card--body;
   }
 }
 

package/scss/mixins/_br-wrap.scss

@@ -21,8 +21,26 @@
 
   >* {
     margin: var(--margin-xs);
+  }
+
+  &.align-middle>* {
     vertical-align: middle;
   }
+
+  &.align-top>* {
+    vertical-align: top;
+  }
+}
+
+@mixin br-wrap--preferences {
+  @include small-up {
+    grid-template-columns: var(--width-column) var(--width-column);
+    display: grid;
+  }
+
+  @include small-down {
+    @include br-wrap--cluster
+  }
 }
 
 @mixin br-wrap--orders {

package/scss/mixins/br-link/_navlink.scss

@@ -0,0 +1,17 @@
+@mixin navlink--focus {
+  background-color: var(--color-brand-generic-15-lighten);
+  color: var(--color-brand-generic-90-darken);
+  border-color: currentColor;
+}
+
+@mixin navlink--disabled {
+  background-color: var(--color-brand-generic);
+  border-color: var(--color-brand-generic);
+  color: white;
+}
+
+@mixin navlink--outline {
+  outline-offset: var(--offset-navlink);
+  outline-width: var(--border-width-lg);
+  outline-style: solid;
+}

package/scss/mixins/buttons/_custom.scss

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

package/scss/mixins/buttons/custom/_exit-overlay.scss

@@ -1,26 +1,27 @@
 @use "../../../mixins/core" as *;
 @use "../../../mixins/focus" as *;
+@use "../../../mixins/buttons/custom/invisible" as *;
 
 @mixin btn-exit-overlay {
-  // @include invisible-button; causing a module loop
+  @include btn-invisible;
   @include inset;
 
   & {
-    background-color: transparent;
-    border: none;
-    padding: 0;
-
-    border-radius: 0;
     position: fixed;
-    height: 100%;
-    width: 100%;
-    z-index: 1;    
+    z-index: 1;
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+
+  &:active .close-icon {
+    transform: var(--scale-click);
   }
 
-  &:hover, &:focus {
-    .close-icon {
-      @include close-icon-focus;
-    }
+  &:hover .close-icon,
+  &:focus .close-icon {
+    @include close-icon-focus;
   }
 
   .close-icon {

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

@@ -13,7 +13,7 @@
 
   &:hover,
   &:focus {
-    .br-summary-icon {
+    .wrap-icon {
       outline-style: dashed;
     }
   }

package/scss/mixins/buttons/custom/_navcard.scss

@@ -1,32 +0,0 @@
-@use "../slim" as *;
-
-@mixin btn-tint {
-  background-color: var(--color-brand-generic-15-lighten);
-  color: var(--color-brand-generic-90-darken);
-  border-color: currentColor;
-}
-
-@mixin btn-navcard {
-  @include btn-slim;
-
-  & {
-    border-width: var(--border-width-sm);
-    background-color: white;
-  }
-
-  &.btn-active {
-    @include btn-tint;
-  }
-
-  &.btn-active:hover,
-  &.btn-active:focus {
-    background-color: var(--color-brand-generic);
-    border-color: var(--color-brand-generic);
-    color: white;
-  }
-
-  &:not(.btn-active):hover,
-  &:not(.btn-active):focus {
-    @include btn-tint;
-  }
-}

package/scss/mixins/card/_navcard.scss

@@ -1,66 +0,0 @@
-@use "../../mixins/breakpoints" as *;
-
-@mixin br-card--navcard {
-  cursor: pointer;
-  display: block;
-
-  &:hover,
-  &:focus {
-    background-color: var(--color-brand-generic-15-lighten);
-    outline-color: var(--color-brand-generic-90-darken);
-    outline-offset: calc(var(--border-width-sm) * -1);
-    color: var(--color-brand-generic-90-darken);
-    outline-width: var(--border-width-lg);
-    outline-style: solid;
-  }
-
-  &:active {
-    transform: var(--scale-click);
-  }
-
-  &:not(.ticket) {
-    text-decoration: underline;
-
-    .br-card-body {
-      gap: var(--gap-md);
-      display: flex;
-    }
-
-    .br-card-title+.br-card-text {
-      margin-top: var(--margin-sm);
-    }
-  }
-
-  svg {
-    flex: none;
-  }
-
-  @include small-up {
-    .br-card-body.center {
-      align-items: center;
-    }
-
-    .br-card-body:not(.center) svg {
-      margin-top: var(--margin-xs);
-    }
-  }
-
-  @include small-down {
-    .br-card-body {
-      align-items: center;
-    }
-
-    .br-card-text {
-      display: none;
-    }
-  }
-
-  @include medium-up {
-    &:not(.ticket) {
-      .br-card-title+.br-card-text {
-        margin-top: var(--margin-md);
-      }
-    }
-
-  }
-}

package/scss/mixins/card/_navitem.scss

@@ -1,59 +0,0 @@
-@use "../../mixins/breakpoints" as *;
-@use "navcard" as *;
-
-@mixin br-card--navitem {
-  @include br-card--navcard;
-
-  & {
-    text-decoration: none;
-    font-weight: bold;
-  }
-
-  &:active {
-    transform: scale(1);
-  }
-
-  &.disabled {
-    outline-offset: calc(var(--border-width-sm) * -1);
-    background-color: var(--color-brand-generic);
-    outline-color: var(--color-brand-generic);
-    border-color: var(--color-brand-generic);
-    outline-width: var(--border-width-lg);
-    outline-style: solid;
-    cursor: default;
-    color: white;
-  }
-
-  &.router-link-active:not(.router-link-exact-active) {
-    background-color: var(--color-brand-generic-15-lighten);
-    color: var(--color-brand-generic-90-darken);
-    outline-color: var(--color-brand-generic);
-    text-decoration: underline;
-    border-color: currentColor;
-  }
-
-  &:not(.disabled):hover {
-    color: var(--color-brand-generic-90-darken);
-    outline-color: var(--color-brand-generic);
-    text-decoration: underline;
-    border-color: currentColor;
-  }
-
-  &:not(:last-child) {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &:not(:first-child) {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-    border-top-width: 0;
-  }
-
-  .br-card-body {
-    padding-bottom: var(--padding-md);
-    padding-right: var(--padding-lg);
-    padding-left: var(--padding-lg);
-    padding-top: var(--padding-md);
-  }
-}

package/scss/mixins/card/_navlink.scss

@@ -1,30 +0,0 @@
-@use "../../mixins/breakpoints" as *;
-@use "navcard" as *;
-
-@mixin br-card--navlink {
-  @include br-card--navcard;
-
-  @include small-down {
-    background-color: transparent;
-    justify-self: start;
-    border-radius: 0;
-    border-width: 0;
-
-    &:hover,
-    &:focus {
-      background-color: var(--color-black-80-lighten);
-      outline-color: var(--color-black-80-lighten);
-      outline-width: 0.25rem;
-      outline-style: solid;
-      color: white;
-    }
-
-    .br-card-body {
-      padding: 0;
-    }
-
-    svg {
-      display: none;
-    }
-  }
-}