barbican-reset 3.22.0 → 3.24.0

package/components/BrButton copy.vue

@@ -0,0 +1,112 @@
+<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/components/BrButton.vue

@@ -1,102 +1,115 @@
-<!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
-
 <template>
-  <button
-    :class="printClassNames"
-    @click="$emit('click')"
-    :aria-busy="loading"
-    aria-live="polite"
+  <component
+    :class="generateClassnames"
+    :aria-busy="defineAriaBusy"
+    :aria-live="defineAriaLive"
+    @click="emit('click')"
+    :is="defineComponent"
     :type="type"
+    :to="to"
     ref="button"
-  >
-    <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
-      <template v-for="(index, name) in $slots" v-slot:[name]>
-        <slot :name="name" />
+    >
+    <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>
-    </remove-ticket>
+      <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>
 
-    <template v-else>
-      <template v-if="state === 'default'">
-        <template v-if="$slots.default">
-          <slot name="default" />
-        </template>
-        <template v-else>
-          {{ titleCase(state) }}
-        </template>
-      </template>
+<script setup>
+import { computed, useTemplateRef } from 'vue'
+import DotTyping from '#components/BrButton/dot_typing.vue'
+import BrLink from '#components/BrLink.vue'
 
-      <template v-else-if="state === 'loading'">
-        <template v-if="$slots.loading">
-          <slot name="loading" />
-        </template>
-        <dot-typing v-else />
-      </template>
+const emit = defineEmits(['click'])
 
-      <template v-else-if="state === 'loaded'">
-        <template v-if="$slots.loaded">
-          <slot name="loaded" />
-        </template>
-        <template v-else>
-          {{ titleCase(state) }}
-        </template>
-      </template>
+const button = useTemplateRef('button')
 
-      <template v-else-if="state === 'error'">
-        <template v-if="$slots.error">
-          <slot name="error" />
-        </template>
-        <template v-else>
-          {{ titleCase(state) }}
-        </template>
-      </template>
-    </template>
-  </button>
-</template>
+const defineComponent = computed(() => {
+  if (props.to && !props.disabled) return BrLink
+  return 'button'
+})
 
-<script>
-import RemoveTicket from '#components/BrButton/remove_ticket.vue'
-import DotTyping from '#components/BrButton/dot_typing.vue'
+const generateClassnames = computed(() => {
+  let classnames = ['btn', 'btn-' + props.variant]
+
+  if (props.inline) {
+    classnames.push('btn-inline')
+  }
 
-export default {
-  emits: ['click'],
-  props: {
-    state: {
-      type: String,
-      default: 'default',
-    },
-    variant: {
-      type: String,
-      default: 'secondary',
-    },
-    type: {
-      type: String,
-      default: 'button',
-    },
+  if (props.slim) {
+    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 props = defineProps({
+  state: {
+    type: String,
+    default: 'default',
   },
-  expose: ['focusButton'],
-  methods: {
-    titleCase(str) {
-      return str
-        .toLowerCase()
-        .split(' ')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ')
-    },
-    focusButton() {
-      this.$refs.button.focus();
-    }
+  variant: {
+    type: String,
+    default: 'secondary',
   },
-  computed: {
-    loading() {
-      return this.state === 'loading' ? 'true' : 'false'
-    },
-    printClassNames() {
-      return 'btn btn-' + this.variant
-    },
+  type: {
+    type: String,
   },
-  components: {
-    RemoveTicket,
-    DotTyping,
+  to: {
+    type: [Object, String],
   },
-}
-</script>
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  slim: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+defineExpose({
+  focusButton
+})
+
+</script>

package/components/BrCard.vue

@@ -1,9 +1,5 @@
 <template>
-  <component
-    :class="generateClassnames"
-    :is="defineComponent"
-    :to="defineTo"
-    :href="defineHref">
+  <component :class="generateClassnames" :is="defineComponent" :to="defineTo">
     <div v-if="$slots.header" class="br-card-header">
       <slot name="header" />
     </div>
@@ -19,24 +15,44 @@
 </template>
 
 <script setup>
-import BrCardBody from '#components/BrCardBody.vue'
 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.navitem) classnames.push('navitem')
   if (props.navlink) classnames.push('navlink')
-  if (props.ticket) classnames.push('ticket')
+  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.ticket
+    !props.membership &&
+    !props.qrcode
   ) {
     classnames.push('default')
   }
@@ -44,34 +60,6 @@ const generateClassnames = computed(() => {
   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,
@@ -89,7 +77,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  ticket: {
+  membership: {
+    type: Boolean,
+    default: false,
+  },
+  qrcode: {
     type: Boolean,
     default: false,
   },
@@ -102,8 +94,11 @@ const props = defineProps({
     default: false,
   },
   to: {
-    type: String,
-    default: '',
+    type: Object || String,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
 })
 </script>

package/components/BrCardTearoff.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="br-card-tearoff">
+    <br-card-body>
+      <slot>Card tearoff</slot>
+    </br-card-body>
+  </div>
+</template>
+
+<script setup>
+import BrCardBody from '#components/BrCardBody.vue'
+</script>

package/components/BrDetails.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="br-details">
-    <br-button variant="br-summary" @click="update">
-      <div class="br-summary-content">
-        <slot name="title">
-          <br-card-title>Title goes here</br-card-title>
-        </slot>
+    <br-button variant="summary" @click="update">
+      <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>
@@ -26,50 +22,34 @@ const props = defineProps({
   },
 })
 
-const update = () => emit('update', !props.open)
+const update = () => emit('update', { open: !props.open })
 </script>
 
 <style lang="scss" scoped>
 @use '#styles/helpers' as *;
 
-.btn-br-summary {
-  @include btn-invisible;
-
-  & {
-    justify-content: space-between;
-    align-items: center;
-    color: inherit;
-    width: 100%;
-  }
-}
-
-.btn-br-summary {
-  &:focus,
-  &:hover {
-    .br-summary-icon {
-      outline-style: dashed;
-    }
-  }
-}
-
-.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/BrLink.vue

@@ -0,0 +1,22 @@
+<template>
+  <a v-if="isExternal" :href="to">
+    <slot />
+  </a>
+  <router-link v-else :to="to">
+    <slot />
+  </router-link>
+</template>
+
+<script setup>
+// https://vueschool.io/lessons/extending-router-link-for-external-urls
+
+import { computed } from 'vue'
+
+const isExternal = computed(() => typeof props.to == 'string')
+
+const props = defineProps({
+  to: {
+    type: Object || String,
+  },
+})
+</script>

package/components/BrWrap.vue

@@ -10,9 +10,21 @@ import { computed } from 'vue'
 const generateComponentClasses = computed(() => {
   let classnames = ['br-wrap']
 
-  if (props.navcard) classnames.push('navcard')
+  if (props.navcard) {
+    classnames.push('navcard')
+  }
 
-  if (!props.navcard) classnames.push('default')
+  if (props.cluster) {
+    classnames.push('cluster')
+  }
+
+  if (props.orders) {
+    classnames.push('orders')
+  }
+
+  if (!props.navcard && !props.cluster && !props.orders) {
+    classnames.push('default')
+  }
 
   return classnames
 })
@@ -22,5 +34,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  cluster: {
+    type: Boolean,
+    default: false,
+  },
+  orders: {
+    type: Boolean,
+    default: false,
+  },
 })
 </script>

package/icons/back_arrow.vue

@@ -1,3 +1,11 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path d="M16,7H3.83L9.42,1.41l-1.42-1.41L0,8l8,8,1.41-1.41-5.58-5.59h12.17v-2Z" fill="currentColor" /></svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16">
+    <path
+      d="M16,7H3.83L9.42,1.41l-1.42-1.41L0,8l8,8,1.41-1.41-5.58-5.59h12.17v-2Z"
+      fill="currentColor" />
+  </svg>
 </template>

package/index.js

@@ -7,6 +7,7 @@ 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 BrCardTearoff from '#components/BrCardTearoff.vue'
 
 import BrCollapseButton from '#components/BrCollapse/Button.vue'
 import BrCollapseContent from '#components/BrCollapse/Content.vue'
@@ -54,6 +55,7 @@ export {
   BrCardSubtitle,
   BrCardText,
   BrCardTitle,
+  BrCardTearoff,
   BrCollapseButton,
   BrCollapseContent,
   BrConfirmDone,

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.22.0"
+  "version": "3.24.0"
 }

package/scripts/helpers/formatKebabCase.js

@@ -7,5 +7,5 @@
 
 export default function (value = '') {
   value = String(value)
-  return value.toLowerCase().split(' ').join('-')
+  return value.replace("'", '').toLowerCase().split(' ').join('-')
 }

package/scss/_atomic.scss

@@ -1,8 +1,10 @@
+@use "mixins/breakpoints" as *;
 @use "mixins/core" as *;
 @use "atomic/colors";
 @use "atomic/font-sizes";
 @use "atomic/font-weights";
 @use "atomic/margins";
+@use "atomic/max-widths";
 @use "atomic/min-heights";
 @use "atomic/min-widths";
 @use "atomic/paddings";
@@ -26,7 +28,20 @@
   width: 100%;
 }
 
-/// Class for visually hiding markup, while still allowing screen readers to parse the content
 .sr-only {
   @include sr-only;
+}
+
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.vertical-align-middle {
+  vertical-align: middle;
+}
+
+.medium-down {
+  @include large-up {
+    display: none;
+  }
 }