barbican-reset 3.19.0 → 3.20.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,23 @@
 <template>
-  <div :class="containerClasses">
-    <div v-if="$slots.header" :class="headerClasses">
+  <div :class="['br-card', { inline }]">
+    <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">
+      <br-card-body>
         <slot />
       </br-card-body>
     </template>
-    <template v-else>
-      <slot />
-    </template>
   </div>
 </template>
 
-<script>
-import BrCardBody from "#components/BrCardBody.vue";
-
-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 (this.container) classNames.push(this.container);
-
-      return classNames.join(" ");
-    },
-    headerClasses() {
-      let classNames = ["card-header"];
-
-      if (this.header) classNames.push(this.header);
-
-      return classNames.join(" ");
-    },
-    bodyClasses() {
-      let classNames = ["card-body"];
-
-      if (this.body) classNames.push(this.body);
+<script setup>
+import BrCardBody from '#components/BrCardBody.vue'
 
-      return classNames.join(" ");
-    },
+const props = defineProps({
+  inline: {
+    type: Boolean,
+    default: false,
   },
-};
+})
 </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>
+  <h6 class="br-card-subtitle"><slot>Card subtitle</slot></h6>
 </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/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>

package/index.js

@@ -14,7 +14,8 @@ import BrCollapseContent from '#components/BrCollapse/Content.vue'
 import BrConfirmDone from '#components/BrConfirmDone.vue'
 import BrConfirmEmail from '#components/BrConfirmEmail.vue'
 
-import BrContainer from '#components/BrContainer/Component.vue'
+import BrContainer from '#components/BrContainer.vue'
+import BrDetails from '#components/BrDetails.vue'
 import BrFooterLower from '#components/BrFooterLower.vue'
 import BrFooterUpper from '#components/BrFooterUpper.vue'
 
@@ -25,7 +26,6 @@ import BrFormDate from '#components/BrFormDate.vue'
 import BrFormEdit from '#components/BrFormEdit.vue'
 import BrFormEmail from '#components/BrFormEmail.vue'
 import BrFormFieldset from '#components/BrFormFieldset.vue'
-import BrFormFieldsetNew from '#components/BrFormFieldsetNew.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 import BrFormPassword from '#components/BrFormPassword.vue'
 import BrFormRadio from '#components/BrFormRadio.vue'
@@ -45,9 +45,9 @@ import BrOverlay from '#components/BrOverlay.vue'
 import BrLoader from '#components/BrLoader.vue'
 import BrSkiplink from '#components/BrSkiplink.vue'
 import BrStatusBars from '#components/BrStatusBars.vue'
+import BrTableHeader from '#components/BrTableHeader.vue'
 import BrWrap from '#components/BrWrap.vue'
 
-import AccountTitle from '#components/AccountTitle.vue'
 import EventSummary from '#components/EventSummary.vue'
 import FluidIframe from '#components/FluidIframe.vue'
 import SeeInside from '#components/SeeInside.vue'
@@ -67,6 +67,7 @@ export {
   BrConfirmDone,
   BrConfirmEmail,
   BrContainer,
+  BrDetails,
   BrFormDate,
   BrFooterLower,
   BrFooterUpper,
@@ -76,7 +77,6 @@ export {
   BrFormEdit,
   BrFormEmail,
   BrFormFieldset,
-  BrFormFieldsetNew,
   BrFormInput,
   BrFormPassword,
   BrFormRadio,
@@ -94,8 +94,8 @@ export {
   BrOverlay,
   BrSkiplink,
   BrStatusBars,
+  BrTableHeader,
   BrWrap,
-  AccountTitle,
   EventSummary,
   FluidIframe,
   SeeInside,

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.19.0"
+  "version": "3.20.0"
 }

package/scss/_br-form-checkbox.scss

@@ -1,53 +1,5 @@
-@use "mixins/breakpoints" as *;
-@use "mixins/core" as *;
 @use "mixins/input" as *;
-@use "mixins/focus" as *;
-
-/// @deprecated custom-checkbox class. br-form-checkbox is more descriptive
 
 .br-form-checkbox {
-  @include br-form-checkbox; // formerly checkbox-input
-
-  input[table][type='checkbox'] {
-    @include inset;
-    margin-top: var(--margin-xs);
-    position: relative;
-    display: block;
-    z-index: 1;
-
-    @include medium-up {
-      margin-top: 0.625rem;
-    }
-
-    ~label {
-      @include sr-only;
-    }
-
-    @include focus {
-      ~label {
-        @include hover-label-table;
-      }
-    }
-
-    @include focus-visible {
-      outline-color: var(--color-black-25-lighten);
-      outline-offset: var(--border-width-lg);
-      outline-width: var(--border-width-sm);
-      outline-style: solid;
-    }
-  }
-
-  &:not(:last-of-type) {
-    margin-bottom: var(--margin-sm);
-  }
-}
-
-$statuses: 'error', 'success';
-
-@each $status in $statuses {
-
-  [role='group'][#{$status}] input[type='checkbox'],
-  input[type='checkbox'][#{$status}] {
-    @include status-input($status);
-  }
+  @include br-form-checkbox;
 }

package/scss/_br-form-edit.scss

@@ -1,5 +1,5 @@
 @use "mixins/br-form-edit" as *;
 
-.br-form-edit.active {
+.br-form-edit {
   @include br-form-edit;
 }