barbican-reset 3.19.0 → 3.21.0

package/components/BrButton.vue

@@ -6,8 +6,7 @@
     @click="$emit('click')"
     :aria-busy="loading"
     aria-live="polite"
-    :type="type"
-  >
+    :type="type">
     <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
       <template v-for="(index, name) in $slots" v-slot:[name]>
         <slot :name="name" />
@@ -53,45 +52,45 @@
 </template>
 
 <script>
-import RemoveTicket from "#components/BrButton/remove_ticket.vue";
-import DotTyping from "#components/BrButton/dot_typing.vue";
+import RemoveTicket from '#components/BrButton/remove_ticket.vue'
+import DotTyping from '#components/BrButton/dot_typing.vue'
 
 export default {
-  emits: ["click"],
+  emits: ['click'],
   props: {
     state: {
       type: String,
-      default: "default",
+      default: 'default',
     },
     variant: {
       type: String,
-      default: "secondary",
+      default: 'secondary',
     },
     type: {
       type: String,
-      default: "button",
+      default: 'button',
     },
   },
   methods: {
     titleCase(str) {
       return str
         .toLowerCase()
-        .split(" ")
+        .split(' ')
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(" ");
+        .join(' ')
     },
   },
   computed: {
     loading() {
-      return this.state === "loading" ? "true" : "false";
+      return this.state === 'loading' ? 'true' : 'false'
     },
     printClassNames() {
-      return "btn btn-" + this.variant;
+      return 'btn btn-' + this.variant
     },
   },
   components: {
     RemoveTicket,
     DotTyping,
   },
-};
+}
 </script>

package/components/BrCard.vue

@@ -1,52 +1,109 @@
 <template>
-  <div :class="containerClasses">
-    <div v-if="$slots.header" :class="headerClasses">
+  <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="bodyRequired">
-      <br-card-body :styles="body">
+    <template v-if="$slots.default">
+      <template v-if="noBody">
+        <slot />
+      </template>
+      <br-card-body v-else :class="{ center }">
         <slot />
       </br-card-body>
     </template>
-    <template v-else>
-      <slot />
-    </template>
-  </div>
+  </component>
 </template>
 
-<script>
-import BrCardBody from "#components/BrCardBody.vue";
+<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')
 
-export default {
-  components: { BrCardBody },
-  props: ["container", "header", "body"],
-  computed: {
-    bodyRequired() {
-      if (this.body == "none") return false;
-      if (!this.$slots.default) return false;
-      return true;
-    },
-    containerClasses() {
-      let classNames = ["card"];
+  if (
+    !props.inline &&
+    !props.navcard &&
+    !props.navitem &&
+    !props.navlink &&
+    !props.ticket
+  ) {
+    classnames.push('default')
+  }
 
-      if (this.container) classNames.push(this.container);
+  return classnames
+})
 
-      return classNames.join(" ");
-    },
-    headerClasses() {
-      let classNames = ["card-header"];
+const defineComponent = computed(() => {
+  if (props.navcard || props.navitem || props.navlink) {
+    return props.to.startsWith('http') ? 'a' : 'router-link'
+  }
 
-      if (this.header) classNames.push(this.header);
+  return 'div'
+})
 
-      return classNames.join(" ");
-    },
-    bodyClasses() {
-      let classNames = ["card-body"];
+const defineTo = computed(() => {
+  if (props.navcard || props.navitem || props.navlink) {
+    if (!props.to.startsWith('http')) {
+      return { name: props.to }
+    }
+  }
 
-      if (this.body) classNames.push(this.body);
+  return null
+})
 
-      return classNames.join(" ");
-    },
+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/BrCardBody.vue

@@ -1,20 +1,5 @@
 <template>
-  <div :class="classNames">
-    <slot></slot>
+  <div class="br-card-body">
+    <slot>Card body</slot>
   </div>
 </template>
-
-<script>
-export default {
-  props: ["styles"],
-  computed: {
-    classNames() {
-      let classNames = ["card-body"];
-
-      if (this.styles) classNames.push(this.styles);
-
-      return classNames.join(" ");
-    },
-  },
-};
-</script>

package/components/BrCardSubTitle.vue

@@ -1,12 +1,3 @@
 <template>
-  <h6 class="card-subtitle"><slot></slot></h6>
+  <div class="br-card-subtitle"><slot>Card subtitle</slot></div>
 </template>
-
-<style lang="scss" scoped>
-.card-subtitle {
-  color: var(--color-black-50-lighten);
-  font-size: var(--font-size-sm);
-  font-weight: 400;
-  margin: 0;
-}
-</style>

package/components/BrCardText.vue

@@ -1,3 +1,3 @@
 <template>
-  <p class="card-text"><slot></slot></p>
+  <p class="br-card-text"><slot>Card text</slot></p>
 </template>

package/components/BrCardTitle.vue

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

package/components/BrContainer.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="generateComponentClasses">
+    <div :class="generateOuterClasses">
+      <div :class="generateInnerClasses">
+        <slot />
+      </div>
+    </div>
+    <div v-if="$slots.image" class="br-container--image">
+      <slot name="image" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const generateComponentClasses = computed(() => {
+  let classnames = ['br-container']
+
+  if (props.masthead) classnames.push('masthead')
+
+  return classnames
+})
+
+const generateOuterClasses = computed(() => {
+  let classnames = ['br-container--outer']
+
+  if (props.masthead) classnames.push('masthead')
+
+  return classnames
+})
+
+const generateInnerClasses = computed(() => {
+  let classnames = ['br-container--inner']
+
+  if (props.masthead) classnames.push('masthead')
+  if (props.thin) classnames.push('thin')
+  if (props.header) classnames.push('header')
+  if (props.footer) classnames.push('footer')
+
+  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/BrDetails.vue

@@ -0,0 +1,75 @@
+<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>
+      </div>
+      <span class="br-summary-icon">
+        {{ open ? '–' : '+' }}
+      </span>
+    </br-button>
+    <div :class="['br-details-content', { open }]">
+      <slot name="content">Content goes here</slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['update'])
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const update = () => emit('update', !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 {
+  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;
+}
+
+.br-details-content:not(.open) {
+  visibility: hidden;
+  overflow: hidden;
+  height: 0;
+}
+
+.br-details-content.open {
+  margin-top: var(--margin-xxl);
+}
+</style>

package/components/BrFormCheckbox.vue

@@ -1,15 +1,60 @@
 <template>
   <div class="br-form-checkbox">
-    <BrFormInput v-bind="$attrs" type="checkbox">
-      <slot />
-    </BrFormInput>
+    <BrFormLabel
+      :class="[{ success }, { error }]"
+      :disabled="disabled"
+      :id="generateID">
+      <BrFormInput
+        :class="[{ success }, { error }]"
+        :disabled="disabled"
+        :id="generateID"
+        v-bind="$attrs"
+        type="checkbox"
+        :error="error" />
+      <span class="label-text">
+        <slot />
+      </span>
+    </BrFormLabel>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
+import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 
 defineOptions({
   inheritAttrs: false,
 })
+
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  success: {
+    default: false,
+    type: Boolean,
+  },
+  error: {
+    default: false,
+    type: Boolean,
+  },
+})
+
+// @description Returns a string for the "id" attribute
+// @returns {string} result - string based on preceeding conditions
+
+const generateID = computed(() => {
+  let result
+
+  if (props.id) {
+    result = props.id
+  } else {
+    result = 'random-' + Math.ceil(Math.random() * 1000000)
+  }
+
+  return formatKebabCase(result)
+})
 </script>

package/components/BrFormCheckboxGroup.vue

@@ -6,7 +6,9 @@
       :key="'checkbox-option-' + index"
       :disabled="option.disabled"
       :value="option.value"
+      :success="success"
       v-model="model"
+      :error="error"
       :name="name">
       <slot v-if="$slots.default" v-bind="option" />
       <template v-else>{{ option.text }}</template>
@@ -29,5 +31,13 @@ const model = defineModel()
 const props = defineProps({
   options: Array,
   name: String,
+  success: {
+    default: false,
+    type: Boolean,
+  },
+  error: {
+    default: false,
+    type: Boolean,
+  },
 })
 </script>

package/components/BrFormFieldset.vue

@@ -1,12 +1,19 @@
 <template>
-  <fieldset>
-    <legend>{{ label }}</legend>
+  <div role="group" :aria-labelledby="id" :class="['fieldset', { table }]">
+    <div class="wrap-legend">
+      <div :id="id" class="legend">{{ label }}</div>
+    </div>
     <slot />
-  </fieldset>
+  </div>
 </template>
 
 <script setup>
 const props = defineProps({
+  table: {
+    type: Boolean,
+    default: false,
+  },
   label: String,
+  id: String,
 })
 </script>

package/components/BrFormInput.vue

@@ -1,20 +1,12 @@
 <template>
-  <label :for="generateID">
-
-    <input
-      :autocomplete="generateAutoComplete"
-      :data-test="generateDataTest"
-      :type="generateType"
-      :id="generateID"
-      v-model="model"
-      v-bind="$attrs" />
-
-    <span class="label-text">
-      <slot />
-    </span>
-
-  </label>
-
+  <input
+    :autocomplete="generateAutoComplete"
+    :data-test="generateDataTest"
+    class="br-form-input"
+    :type="generateType"
+    v-model="model"
+    v-bind="$attrs"
+    :id="id" />
 </template>
 
 <script setup>
@@ -74,19 +66,4 @@ const generateType = computed(() => {
 
   return formatKebabCase(result)
 })
-
-// @description Returns a string for the "id" attribute
-// @returns {string} result - string based on preceeding conditions
-
-const generateID = computed(() => {
-  let result
-
-  if (props.id) {
-    result = props.id
-  } else {
-    result = 'random-' + Math.ceil(Math.random() * 1000000)
-  }
-
-  return formatKebabCase(result)
-})
 </script>

package/components/BrFormLabel.vue

@@ -1,5 +1,8 @@
 <template>
-  <component :is="!disabled ? 'label' : 'div'" :for="!disabled ? id : null" class="br-form-label">
+  <component
+    :class="['br-form-label', { disabled }]"
+    :is="!disabled ? 'label' : 'div'"
+    :for="!disabled ? id : null">
     <slot />
     <span v-if="required"> (required)</span>
     <span v-if="optional"> (optional)</span>
@@ -7,12 +10,10 @@
 </template>
 
 <script setup>
-
 const props = defineProps({
   disabled: Boolean,
   required: Boolean,
   optional: Boolean,
   id: String,
 })
-
 </script>

package/components/BrFormRadio.vue

@@ -1,18 +1,61 @@
 <template>
-  <div :class="['br-radio', slots.default ? 'has-label-text' : 'no-label-text']">
-    <BrFormInput v-bind="$attrs" type="radio">
-      <slot />
-    </BrFormInput>
+  <div class="br-form-radio">
+    <BrFormLabel
+      :class="[{ success }, { error }]"
+      :disabled="disabled"
+      :id="generateID">
+      <BrFormInput
+        :class="[{ success }, { error }]"
+        :disabled="disabled"
+        :id="generateID"
+        v-bind="$attrs"
+        :error="error"
+        type="radio" />
+      <span class="label-text">
+        <slot />
+      </span>
+    </BrFormLabel>
   </div>
 </template>
 
 <script setup>
-import BrFormInput from '#components/BrFormInput.vue'
-import { useSlots } from 'vue';
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
 
-const slots = useSlots()
+import BrFormLabel from '#components/BrFormLabel.vue'
+import BrFormInput from '#components/BrFormInput.vue'
 
 defineOptions({
   inheritAttrs: false,
 })
+
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  success: {
+    default: false,
+    type: Boolean,
+  },
+  error: {
+    default: false,
+    type: Boolean,
+  },
+})
+
+// @description Returns a string for the "id" attribute
+// @returns {string} result - string based on preceeding conditions
+
+const generateID = computed(() => {
+  let result
+
+  if (props.id) {
+    result = props.id
+  } else {
+    result = 'random-' + Math.ceil(Math.random() * 1000000)
+  }
+
+  return formatKebabCase(result)
+})
 </script>

package/components/BrFormToggle.vue

@@ -19,7 +19,7 @@ defineOptions({
 })
 
 const props = defineProps({
-  class: String
+  class: String,
 })
 
 const generateClasses = computed(() => {

package/components/BrTableHeader.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="br-table-header">
+    <div class="br-table-header-title">
+      <slot />
+    </div>
+    <div class="br-table-header-title yes">Yes</div>
+    <div class="br-table-header-title no">No</div>
+  </div>
+</template>