barbican-reset 3.33.0 → 3.34.0

package/components/BrDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="br-details">
-    <br-button variant="summary" @click="update">
+    <br-button variant="summary" @click="update" :data-test="'toggle-' + label">
       <div class="wrap-title">
         <slot name="title">Title goes here</slot>
       </div>
@@ -20,6 +20,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  label: {
+    type: String,
+    default: 'details',
+  },
 })
 
 const update = () => emit('update', { open: !props.open })
@@ -50,6 +54,6 @@ const update = () => emit('update', { open: !props.open })
 }
 
 .wrap-content.open {
-  margin-top: var(--margin-xl);
+  margin-top: var(--margin-xxl);
 }
 </style>

package/components/BrFormCheckbox.vue

@@ -10,8 +10,8 @@
     <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
-      :id="generateID"
-      :table="table">
+      :returns="returns"
+      :id="generateID">
       <br-form-input
         :class="[{ success }, { error }]"
         :disabled="disabled"
@@ -67,7 +67,7 @@ const props = defineProps({
   success: Boolean,
   error: Boolean,
   block: Boolean,
-  table: Boolean,
+  returns: Boolean,
 })
 
 // @description Returns a string for the "id" attribute

package/components/BrFormLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :class="['br-form-label', { disabled }, { table }]"
+    :class="['br-form-label', { disabled }, { returns }]"
     :is="!disabled ? 'label' : 'div'"
     :for="!disabled ? id : null">
     <slot />
@@ -14,7 +14,7 @@ const props = defineProps({
   disabled: Boolean,
   required: Boolean,
   optional: Boolean,
-  table: Boolean,
+  returns: Boolean,
   id: String,
 })
 </script>

package/components/BrFormRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-form-radio">
+  <div :class="generateClassnames">
     <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
@@ -11,7 +11,7 @@
         v-bind="$attrs"
         :error="error"
         type="radio" />
-      <span class="label-text">
+      <span v-if="$slots.default" class="label-text">
         <slot />
       </span>
     </br-form-label>
@@ -25,6 +25,20 @@ import formatKebabCase from '#helpers/formatKebabCase'
 import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 
+const generateClassnames = computed(() => {
+  let classnames = ['br-form-radio']
+
+  if (props.table) {
+    classnames.push('table')
+  }
+
+  if (!props.table) {
+    classnames.push('default')
+  }
+
+  return classnames
+})
+
 defineOptions({
   inheritAttrs: false,
 })
@@ -45,6 +59,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  table: {
+    default: false,
+    type: Boolean,
+  },
 })
 
 // @description Returns a string for the "id" attribute

package/components/BrTableCell.vue

@@ -22,6 +22,18 @@ const generateClassnames = computed(() => {
     classnames.push('align-center')
   }
 
+  if (props.radio) {
+    classnames.push('radio')
+  }
+
+  if (props.returns) {
+    classnames.push('returns')
+  }
+
+  if (!props.radio && !props.returns) {
+    classnames.push('default')
+  }
+
   return classnames
 })
 
@@ -30,7 +42,9 @@ const props = defineProps({
     type: String,
     default: 'stretch',
   },
+  returns: Boolean,
   right: Boolean,
   center: Boolean,
+  radio: Boolean,
 })
 </script>

package/components/BrTableRow.vue

@@ -1,19 +1,5 @@
 <template>
-  <div :class="generateClassnames">
+  <div class="br-table-row">
     <slot />
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue'
-
-const generateClassnames = computed(() => {
-  let classnames = ['br-table-row']
-  return classnames
-})
-
-const props = defineProps({
-  right: Boolean,
-  center: Boolean,
-})
-</script>

package/components/BrWrap.vue

@@ -17,11 +17,13 @@ const generateComponentClasses = computed(() => {
   if (props.cluster) {
     classnames.push('cluster')
     classnames.push('align-' + props.align)
+    classnames.push('size-' + props.size)
   }
 
   if (props.orders) {
     classnames.push('orders')
     classnames.push('align-' + props.align)
+    classnames.push('size-' + props.size)
   }
 
   if (props.preferences) {
@@ -44,5 +46,9 @@ const props = defineProps({
     type: String,
     default: 'middle',
   },
+  size: {
+    type: String,
+    default: 'xs',
+  },
 })
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "3.33.0",
+  "version": "3.34.0",
   "description": "Shared design system for Barbican projects, providing SCSS utilities, animations, icons, Vue components, and JS helpers for consistent styling and behaviour.",
   "main": "index.js",
   "exports": {

package/scss/_br-form-label.scss

@@ -0,0 +1,3 @@
+.br-form-label {
+  font-weight: bold;
+}

package/scss/_br-form-radio.scss

@@ -1,5 +1,21 @@
 @use "mixins/input" as *;
+@use "mixins/breakpoints" as *;
 
-.br-form-radio {
+.br-form-radio.default {
   @include br-form-radio;
+}
+
+.br-form-radio.table {
+  @include br-form-radio;
+
+  @include medium-up {
+    .br-form-label {
+      padding: var(--padding-sm);
+      border-radius: 50%;
+    }
+
+    .label-text {
+      display: none;
+    }
+  }
 }

package/scss/_br-table-cell.scss

@@ -1,58 +1,75 @@
 @use "mixins/breakpoints" as *;
 @use "mixins/br-wrap" as *;
 
-@include medium-up {
-  .br-table-cell:not(.activeReturn) {
+@mixin br-table-cell--default {
+  @include medium-up {
     padding: var(--padding-md);
-  }
-
-  .br-table-cell:not(.width-stretch) {
-    flex-shrink: 0;
-  }
 
-  .br-table-cell:not(:first-child) {
-    border-left-color: var(--color-black-25-lighten);
-    border-left-width: var(--border-width-sm);
-    border-left-style: solid;
-  }
+    &:not(:first-child) {
+      border-left-color: var(--color-black-25-lighten);
+      border-left-width: var(--border-width-sm);
+      border-left-style: solid;
+    }
 
-  .br-table-cell.align-right {
-    text-align: right;
-  }
+    &.align-right {
+      text-align: right;
+    }
 
-  .br-table-cell.align-center {
-    text-align: center;
-  }
+    &.align-center {
+      text-align: center;
+    }
 
-  .br-table-cell label {
-    display: none;
-  }
+    &:not(.width-stretch) {
+      flex-shrink: 0;
+    }
 
-  .br-table-cell.cluster {
-    @include br-wrap--cluster;
+    >label {
+      display: none;
+    }
   }
 
-  .br-table-cell.cluster>* {
-    vertical-align: middle;
-    display: inline-block;
+  @include medium-down {
+    margin: var(--margin-sm);
   }
 }
 
-@include medium-down {
-  .br-table-cell:not(.activeReturn) {
-    @include br-wrap--cluster;
+@mixin br-table-cell--radio {
+  @include br-table-cell--default;
 
-    & {
+  @include medium-down {
+    &:not(.width-stretch) {
+      display: inline-block;
       width: initial;
     }
   }
+}
 
-  .br-table-cell:not(.activeReturn):not(:last-child) {
-    margin-bottom: var(--margin-sm);
+@mixin br-table-cell--returns {
+  @include br-table-cell--default;
+
+  @include medium-up {
+    padding: 0;
   }
 
-  .br-table-cell:not(.activeReturn)>* {
-    vertical-align: middle;
-    display: inline-block;
+  @include medium-down {
+    border-bottom-color: var(--color-black-25-lighten);
+    border-bottom-width: var(--border-width-sm);
+    border-bottom-style: dashed;
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+    margin-bottom: 1rem;
+    margin-top: -0.5rem;
   }
+}
+
+.br-table-cell.default {
+  @include br-table-cell--default;
+}
+
+.br-table-cell.radio {
+  @include br-table-cell--radio;
+}
+
+.br-table-cell.returns {
+  @include br-table-cell--returns;
 }

package/scss/_br-table-row.scss

@@ -1,24 +1,24 @@
 @use "mixins/breakpoints" as *;
 
-.br-table-row {
+@mixin br-table-row--default {
   border-color: var(--color-black-25-lighten);
   border-width: var(--border-width-sm);
   border-style: solid;
-}
 
-.br-table-row:not(:last-child) {
-  margin-bottom: var(--margin-md);
-}
+  &:not(:last-child) {
+    margin-bottom: var(--margin-md);
+  }
 
-@include medium-up {
-  .br-table-row {
+  @include medium-up {
     display: flex;
   }
-}
 
-@include medium-down {
-  .br-table-row {
+  @include medium-down {
     border-radius: var(--border-radius-lg);
-    padding: var(--padding-md);
+    padding: var(--padding-sm);
   }
+}
+
+.br-table-row {
+  @include br-table-row--default;
 }

package/scss/_variables.scss

@@ -344,6 +344,7 @@
   --line-height-xs: 1;
   --line-height-sm: 1.15;
   --line-height-md: 1.35;
+  --line-height-lg: 1.5;
 
   // Fixed line height for button/menu items (`38px`).
   --line-height-button-menu: 2.375rem;

package/scss/index.scss

@@ -8,6 +8,7 @@
 @use "br-form-checkbox";
 @use "br-form-edit";
 @use "br-form-fieldset";
+@use "br-form-label";
 @use "br-form-radio";
 @use "br-form-row";
 @use "br-form-textarea";

package/scss/mixins/_br-form-radio.scss

@@ -15,14 +15,14 @@
 @mixin br-form-radio--input {
   cursor: pointer;
 
-  &:focus {
+  &:focus-visible {
     outline-color: var(--color-black-25-lighten);
     outline-offset: var(--outline-offset-lg);
     outline-width: var(--border-width-sm);
     outline-style: dashed;
   }
 
-  &:checked:focus {
+  &:checked:focus-visible {
     @include br-form-radio--input-colors;
   }
 }
@@ -84,7 +84,7 @@
     cursor: pointer;
 
     &:hover,
-    &:has(input:focus) {
+    &:has(input:focus-visible) {
       @include br-form-radio-label--disabled;
       @include br-form-radio-label--hover;
     }

package/scss/mixins/_br-wrap.scss

@@ -1,5 +1,7 @@
 @use "../mixins/breakpoints" as *;
 
+$sizes: xs, sm, md, lg;
+
 @mixin br-wrap--default {
   max-width: var(--width-layout-sm);
   margin-right: auto;
@@ -17,10 +19,14 @@
 }
 
 @mixin br-wrap--cluster {
-  margin: var(--margin-wrap-xs);
+  @each $size in $sizes {
+    &.size-#{$size} {
+      margin: var(--margin-wrap-#{$size});
 
-  >* {
-    margin: var(--margin-xs);
+      >* {
+        margin: var(--margin-#{$size});
+      }
+    }
   }
 
   &.align-middle>* {
@@ -45,21 +51,19 @@
 @mixin br-wrap--orders {
   @include br-wrap--cluster;
 
-  $margin: calc(var(--margin-xs) * 2);
+  @each $size in $sizes {
+    $margin: calc(var(--margin-#{$size}) * 2);
 
-  @include medium-down {
-    >* {
-      width: calc(100% - $margin);
-    }
-  }
-
-  @include medium-up {
-    >* {
-      width: calc(50% - $margin);
-    }
+    &.size-#{$size} {
+      >* {
+        @include medium-down {
+          width: calc(100% - $margin);
+        }
 
-    >*.open {
-      width: calc(100% - $margin);
+        @include medium-up {
+          width: calc(50% - $margin);
+        }
+      }
     }
   }
 }

package/scss/mixins/input/_checkbox.scss

@@ -15,14 +15,14 @@
 }
 
 @mixin br-form-checkbox--input {
-  &:focus {
+  &:focus-visible {
     outline-color: var(--color-black-50-lighten);
     outline-offset: var(--outline-offset-lg);
     outline-width: var(--border-width-sm);
     outline-style: dashed;
   }
 
-  &:checked:focus {
+  &:checked:focus-visible {
     @include br-form-checkbox--input-colors;
   }
 }
@@ -81,7 +81,7 @@
     }
   }
 
-  &.table {
+  &.returns {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     border-width: 0;
@@ -90,13 +90,17 @@
       border-top-right-radius: 0;
       border-top-left-radius: 0;
     }
+
+    @include medium-down {
+      padding: var(--padding-lg);
+    }
   }
 
   &:not(.disabled) {
     cursor: pointer;
 
     &:hover,
-    &:has(input:focus) {
+    &:has(input:focus-visible) {
       @include br-form-checkbox-label--disabled;
       @include br-form-checkbox-label--hover;
     }