barbican-reset 3.20.0 → 3.22.0

package/components/BrButton.vue

@@ -6,7 +6,9 @@
     @click="$emit('click')"
     :aria-busy="loading"
     aria-live="polite"
-    :type="type">
+    :type="type"
+    ref="button"
+  >
     <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
       <template v-for="(index, name) in $slots" v-slot:[name]>
         <slot :name="name" />
@@ -71,6 +73,7 @@ export default {
       default: 'button',
     },
   },
+  expose: ['focusButton'],
   methods: {
     titleCase(str) {
       return str
@@ -79,6 +82,9 @@ export default {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ')
     },
+    focusButton() {
+      this.$refs.button.focus();
+    }
   },
   computed: {
     loading() {

package/components/BrCard.vue

@@ -1,23 +1,109 @@
 <template>
-  <div :class="['br-card', { inline }]">
+  <component
+    :class="generateClassnames"
+    :is="defineComponent"
+    :to="defineTo"
+    :href="defineHref">
     <div v-if="$slots.header" class="br-card-header">
       <slot name="header" />
     </div>
     <template v-if="$slots.default">
-      <br-card-body>
+      <template v-if="noBody">
+        <slot />
+      </template>
+      <br-card-body v-else :class="{ center }">
         <slot />
       </br-card-body>
     </template>
-  </div>
+  </component>
 </template>
 
 <script setup>
 import BrCardBody from '#components/BrCardBody.vue'
+import { computed } from 'vue'
+
+const generateClassnames = computed(() => {
+  let classnames = ['br-card']
+
+  if (props.inline) classnames.push('inline')
+  if (props.navcard) classnames.push('navcard')
+  if (props.navitem) classnames.push('navitem')
+  if (props.navlink) classnames.push('navlink')
+  if (props.ticket) classnames.push('ticket')
+
+  if (
+    !props.inline &&
+    !props.navcard &&
+    !props.navitem &&
+    !props.navlink &&
+    !props.ticket
+  ) {
+    classnames.push('default')
+  }
+
+  return classnames
+})
+
+const defineComponent = computed(() => {
+  if (props.navcard || props.navitem || props.navlink) {
+    return props.to.startsWith('http') ? 'a' : 'router-link'
+  }
+
+  return 'div'
+})
+
+const defineTo = computed(() => {
+  if (props.navcard || props.navitem || props.navlink) {
+    if (!props.to.startsWith('http')) {
+      return { name: props.to }
+    }
+  }
+
+  return null
+})
+
+const defineHref = computed(() => {
+  if (props.navcard || props.navitem || props.navlink) {
+    if (props.to.startsWith('http')) {
+      return props.to
+    }
+  }
+
+  return null
+})
 
 const props = defineProps({
   inline: {
     type: Boolean,
     default: false,
   },
+  navcard: {
+    type: Boolean,
+    default: false,
+  },
+  navitem: {
+    type: Boolean,
+    default: false,
+  },
+  navlink: {
+    type: Boolean,
+    default: false,
+  },
+  ticket: {
+    type: Boolean,
+    default: false,
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+  noBody: {
+    type: Boolean,
+    default: false,
+  },
+  to: {
+    type: String,
+    default: '',
+  },
 })
 </script>

package/components/BrCardSubTitle.vue

@@ -1,3 +1,3 @@
 <template>
-  <h6 class="br-card-subtitle"><slot>Card subtitle</slot></h6>
+  <div class="br-card-subtitle"><slot>Card subtitle</slot></div>
 </template>

package/components/BrContainer.vue

@@ -1,84 +1,62 @@
 <template>
-  <div :class="styleComponent">
-    <div :class="styleOuter">
-      <div :class="styleInner">
+  <div :class="generateComponentClasses">
+    <div :class="generateOuterClasses">
+      <div :class="generateInnerClasses">
         <slot />
       </div>
     </div>
-    <div class="br-container--image">
+    <div v-if="$slots.image" class="br-container--image">
       <slot name="image" />
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    splash: {
-      type: Boolean,
-      default: false,
-    },
-    masthead: {
-      type: Boolean,
-      default: false,
-    },
-    thin: {
-      type: Boolean,
-      default: false,
-    },
-    header: {
-      type: Boolean,
-      default: false,
-    },
-    footer: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    styleComponent() {
-      let classNames = ['br-container']
+<script setup>
+import { computed } from 'vue'
 
-      if (this.masthead) {
-        classNames.push('masthead')
-      }
+const generateComponentClasses = computed(() => {
+  let classnames = ['br-container']
 
-      return classNames
-    },
-    styleOuter() {
-      let classNames = ['br-container--outer']
+  if (props.masthead) classnames.push('masthead')
 
-      if (this.masthead) {
-        classNames.push('masthead')
-      }
+  return classnames
+})
 
-      if (this.splash) {
-        classNames.push('splash')
-      }
+const generateOuterClasses = computed(() => {
+  let classnames = ['br-container--outer']
 
-      return classNames
-    },
-    styleInner() {
-      let classNames = ['br-container--inner']
+  if (props.masthead) classnames.push('masthead')
 
-      if (this.masthead) {
-        classNames.push('masthead')
-      }
+  return classnames
+})
 
-      if (this.thin) {
-        classNames.push('thin')
-      }
+const generateInnerClasses = computed(() => {
+  let classnames = ['br-container--inner']
 
-      if (this.header) {
-        classNames.push('header')
-      }
+  if (props.masthead) classnames.push('masthead')
+  if (props.thin) classnames.push('thin')
+  if (props.header) classnames.push('header')
+  if (props.footer) classnames.push('footer')
 
-      if (this.footer) {
-        classNames.push('footer')
-      }
+  return classnames
+})
 
-      return classNames
-    },
+const props = defineProps({
+  masthead: {
+    type: Boolean,
+    default: false,
+  },
+  thin: {
+    type: Boolean,
+    default: false,
+  },
+  header: {
+    type: Boolean,
+    default: false,
+  },
+  footer: {
+    type: Boolean,
+    default: false,
   },
-}
+})
 </script>

package/components/BrWrap.vue

@@ -1,24 +1,26 @@
 <template>
-  <div :class="['br-wrap', { title }, { videos }, { thin }]">
-    <slot></slot>
+  <div :class="generateComponentClasses">
+    <slot />
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    title: {
-      type: Boolean,
-      default: false,
-    },
-    thin: {
-      type: Boolean,
-      default: false,
-    },
-    videos: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+import { computed } from 'vue'
+
+const generateComponentClasses = computed(() => {
+  let classnames = ['br-wrap']
+
+  if (props.navcard) classnames.push('navcard')
+
+  if (!props.navcard) classnames.push('default')
+
+  return classnames
+})
+
+const props = defineProps({
+  navcard: {
+    type: Boolean,
+    default: false,
   },
-};
+})
 </script>

package/index.js

@@ -6,7 +6,7 @@ import BrCard from '#components/BrCard.vue'
 import BrCardBody from '#components/BrCardBody.vue'
 import BrCardText from '#components/BrCardText.vue'
 import BrCardTitle from '#components/BrCardTitle.vue'
-import BrCardSubTitle from '#components/BrCardSubTitle.vue'
+import BrCardSubtitle from '#components/BrCardSubtitle.vue'
 
 import BrCollapseButton from '#components/BrCollapse/Button.vue'
 import BrCollapseContent from '#components/BrCollapse/Content.vue'
@@ -37,9 +37,6 @@ import BrFormToggle from '#components/BrFormToggle.vue'
 import BrFormUpdate from '#components/BrFormUpdate.vue'
 import BrFormVisible from '#components/BrFormVisible.vue'
 
-import BrNavCard from '#components/BrNavCard.vue'
-import BrNavCardWrap from '#components/BrNavCardWrap.vue'
-import BrNavLink from '#components/BrNavLink.vue'
 import BrOverlay from '#components/BrOverlay.vue'
 
 import BrLoader from '#components/BrLoader.vue'
@@ -48,18 +45,13 @@ import BrStatusBars from '#components/BrStatusBars.vue'
 import BrTableHeader from '#components/BrTableHeader.vue'
 import BrWrap from '#components/BrWrap.vue'
 
-import EventSummary from '#components/EventSummary.vue'
-import FluidIframe from '#components/FluidIframe.vue'
-import SeeInside from '#components/SeeInside.vue'
-import VideoContent from '#components/VideoContent.vue'
-
 export {
   BrAlert,
   BrAnchor,
   BrButton,
   BrCard,
   BrCardBody,
-  BrCardSubTitle,
+  BrCardSubtitle,
   BrCardText,
   BrCardTitle,
   BrCollapseButton,
@@ -88,16 +80,9 @@ export {
   BrFormUpdate,
   BrFormVisible,
   BrLoader,
-  BrNavCard,
-  BrNavCardWrap,
-  BrNavLink,
   BrOverlay,
   BrSkiplink,
   BrStatusBars,
   BrTableHeader,
   BrWrap,
-  EventSummary,
-  FluidIframe,
-  SeeInside,
-  VideoContent,
 }

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.20.0"
+  "version": "3.22.0"
 }

package/scss/_br-button.scss

@@ -213,6 +213,10 @@
     @include btn-toggle-password;
   }
 
+  &.btn-see-tickets-info {
+    @include btn-see-tickets-info;
+  }
+
   // modifyers
 
   &.expand {

package/scss/_br-container.scss

@@ -1,56 +1,45 @@
-@use "mixins/breakpoints";
+@use "mixins/breakpoints" as *;
 
-.br-container {
-  &.masthead {
-    box-shadow: 0 0.375rem 0.375rem rgba(black, 0.1);
-  }
+.br-container.masthead {
+  box-shadow: 0 0.375rem 0.375rem rgba(black, 0.1);
 }
 
 .br-container--outer {
   padding-right: var(--padding-layout-sm);
   padding-left: var(--padding-layout-sm);
+}
 
-  &.splash {
-    padding-right: var(--padding-layout-lg);
-    padding-left: var(--padding-layout-lg);
-  }
-
-  &.masthead {
-    background-color: white;
-  }
+.br-container--outer.masthead {
+  background-color: white;
 }
 
 .br-container--inner {
   max-width: var(--width-layout-lg);
   margin: 0 auto;
+}
 
-  &:not(.footer) {
-    padding-bottom: var(--padding-xl);
-    padding-top: var(--padding-xl);
-
-    @include breakpoints.small-up {
-      padding-bottom: var(--padding-xxxl);
-      padding-top: var(--padding-xxxl);
-    }
-  }
+.br-container--inner:not(.footer) {
+  padding-bottom: var(--padding-xl);
+  padding-top: var(--padding-xl);
 
-  &.header {
-    padding-bottom: var(--padding-xl);
-    padding-top: var(--padding-xl);
+  @include small-up {
+    padding-bottom: var(--padding-xxxl);
+    padding-top: var(--padding-xxxl);
   }
+}
 
-  &.thin {
-    max-width: var(--width-layout-sm);
-  }
+.br-container--inner.header {
+  padding-bottom: var(--padding-xl);
+  padding-top: var(--padding-xl);
+}
 
-  &.masthead {
-    @include breakpoints.small-up {
-      padding-bottom: var(--padding-xxxl);
-      padding-top: var(--padding-xxxl);
-    }
+.br-container--inner.thin {
+  max-width: var(--width-layout-sm);
+}
 
-    h1 {
-      margin: 0;
-    }
+.br-container--inner.masthead {
+  @include small-up {
+    padding-bottom: var(--padding-xxxl);
+    padding-top: var(--padding-xxxl);
   }
 }

package/scss/_br-wrap.scss

@@ -1,17 +1,17 @@
-.br-wrap {
-  max-width: var(--width-layout-lg);
+@use "mixins/breakpoints" as *;
+
+.br-wrap.default {
+  max-width: var(--width-layout-sm);
   margin-right: auto;
   margin-left: auto;
 }
 
-.br-wrap.title {
-  max-width: var(--width-title);
-}
-
-.br-wrap.videos {
-  max-width: var(--width-layout-md);
-}
+.br-wrap.navcard {
+  gap: var(--gap-md);
+  display: grid;
 
-.br-wrap.thin {
-  max-width: var(--width-layout-sm);
+  @include medium-up {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--gap-lg);
+  }
 }

package/scss/_variables.scss

@@ -176,12 +176,13 @@
   --padding-xl: 1.5rem;
   --padding-xxl: 2rem;
   --padding-xxxl: 2.5rem;
-  --padding-card-sm: 1.25rem;
-  --padding-card-md: var(--padding-xl);
+  --padding-card-sm: 1rem;
+  --padding-card-md: 1.5rem;
   --padding-card-lg: 1.75rem;
   --padding-content: 3.75rem;
   --padding-layout-sm: 5%;
   --padding-layout-lg: 10%;
+  --scale-click: scale(0.98);
   --width-icon: 10rem;
   --width-title: 20rem;
   --width-layout-xs: 24rem;

package/scss/card/index.scss

@@ -5,7 +5,6 @@
 @use "login";
 @use "membership";
 @use "membership-new";
-@use "navcard";
 @use "password";
 @use "related";
 @use "slim";

package/scss/index.scss

@@ -15,8 +15,6 @@
 @use "br-form-update";
 @use "br-form-visible";
 @use "br-loader";
-@use "br-nav-card-wrap";
-@use "br-navlink";
 @use "br-overlay";
 @use "br-promo";
 @use "br-select";

package/scss/mixins/_br-card.scss

@@ -1,4 +1,10 @@
 @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/ticket" as *;
 
 @mixin br-card {
   border-color: var(--color-black-25-lighten);
@@ -8,21 +14,28 @@
   border-style: solid;
   overflow: hidden;
 
-  &:not(.inline) {
-    width: 100%;
+  &.default {
+    @include br-card--default;
   }
 
-  &:not(.inline)+.br-card:not(.inline) {
-    margin-top: var(--margin-lg);
+  &.inline {
+    @include br-card--inline;
+  }
 
-    @include large-up {
-      margin-top: var(--margin-xl);
-    }
+  &.navcard {
+    @include br-card--navcard;
   }
 
-  &.inline {
-    margin: var(--margin-sm);
-    display: inline-block;
+  &.navlink {
+    @include br-card--navlink;
+  }
+
+  &.navitem {
+    @include br-card--navitem;
+  }
+
+  &.ticket {
+    @include br-card--ticket;
   }
 
   iframe {
@@ -45,24 +58,21 @@
 
 @mixin br-card-title {
   line-height: var(--line-height-sm);
-  font-size: var(--font-size-h3);
+  font-size: var(--font-size-h4);
   font-weight: bold;
   text-align: left;
 
   @include small-up {
-    font-size: var(--font-size-h2);
+    font-size: var(--font-size-h3);
   }
 
   @include medium-up {
-    font-size: var(--font-size-h1);
+    font-size: var(--font-size-h2);
   }
 }
 
 @mixin br-card-subtitle {
-  color: var(--color-black-50-lighten);
-  font-size: var(--font-size-sm);
-  font-weight: normal;
-  margin: 0;
+  font-size: var(--font-size-h6);
 }
 
 @mixin br-card-body {

package/scss/mixins/buttons/_custom.scss

@@ -5,9 +5,18 @@
 @use "../../mixins/buttons/outline" as *;
 @use "../../mixins/buttons/setup" as *;
 @use "../../functions" as *;
+@use "custom/outline-primary" as *;
+@use "custom/outline-secondary" as *;
+@use "custom/primary" as *;
+@use "custom/secondary" as *;
 
-@forward "custom/renew-membership";
 @forward "custom/exit-overlay";
+@forward "custom/outline-primary";
+@forward "custom/outline-secondary";
+@forward "custom/primary";
+@forward "custom/renew-membership";
+@forward "custom/secondary";
+@forward "custom/see-tickets-info";
 
 @mixin link-button($color: inherit,
   $background: transparent,
@@ -28,19 +37,6 @@
   }
 }
 
-@mixin btn-primary($min-width: true) {
-  @include solid-button;
-
-  @if $min-width {
-    min-width: var(--width-icon);
-  }
-
-  &[disabled="disabled"] {
-    @include solid-button(var(--color-black-60-lighten));
-    cursor: not-allowed;
-  }
-}
-
 @mixin btn-returns {
   @include solid-button($padding: 0.75em);
   white-space: nowrap;
@@ -54,29 +50,12 @@
   @include solid-button($background: var(--color-black-60-lighten), $padding: 0.75em);
 }
 
-@mixin btn-outline-primary($border-width: var(--border-width-sm)) {
-  @include outline-button($border-width: $border-width);
-
-  @include focus {
-    @include outline-button-focus($border-width: $border-width);
-  }
-}
-
 @mixin btn-resale {
   @include outline-button($padding: 0.625em, $font-size: var(--font-size-sm));
 }
 
-@mixin btn-secondary {
-  @include solid-button(var(--color-black-60-lighten));
-}
-
-@mixin btn-outline-secondary {
-  @include outline-button(var(--color-black-60-lighten));
-}
-
 @mixin btn-outline-header {
   @include outline-button($color: white, $background: var(--color-brand-generic), $border-width: var(--border-width-lg));
-  // @include flex-button;
 }
 
 @mixin btn-edit-input {