barbican-reset 3.24.0 → 3.26.0

package/components/BrButton.vue

@@ -1,14 +1,13 @@
 <template>
   <component
+    :type="defineType(defineComponent)"
     :class="generateClassnames"
     :aria-busy="defineAriaBusy"
     :aria-live="defineAriaLive"
     @click="emit('click')"
     :is="defineComponent"
-    :type="type"
     :to="to"
-    ref="button"
-    >
+    ref="button">
     <template v-if="state == 'default'">
       <slot name="default">default</slot>
     </template>
@@ -71,10 +70,18 @@ const defineAriaLive = computed(() => {
 
 const focusButton = () => {
   if (defineComponent.value == 'button' && button) {
-    button.value.focus();
+    button.value.focus()
   }
 }
 
+const defineType = function (component) {
+  if (props.type) return props.type
+
+  if (component == 'button') return 'button'
+
+  return null
+}
+
 const props = defineProps({
   state: {
     type: String,
@@ -109,7 +116,6 @@ const props = defineProps({
 })
 
 defineExpose({
-  focusButton
+  focusButton,
 })
-
-</script>
+</script>

package/components/BrCard.vue

@@ -94,7 +94,7 @@ const props = defineProps({
     default: false,
   },
   to: {
-    type: Object || String,
+    type: [Object, String],
   },
   disabled: {
     type: Boolean,

package/components/BrFormCheckbox.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="br-form-checkbox">
-    <BrFormLabel
+    <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
       :id="generateID">
-      <BrFormInput
+      <br-form-input
         :class="[{ success }, { error }]"
         :disabled="disabled"
         :id="generateID"
@@ -14,7 +14,7 @@
       <span class="label-text">
         <slot />
       </span>
-    </BrFormLabel>
+    </br-form-label>
   </div>
 </template>
 
@@ -29,6 +29,9 @@ defineOptions({
 })
 
 const props = defineProps({
+  id: {
+    type: String,
+  },
   disabled: {
     default: false,
     type: Boolean,

package/components/BrFormRadio.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="br-form-radio">
-    <BrFormLabel
+    <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
       :id="generateID">
-      <BrFormInput
+      <br-form-input
         :class="[{ success }, { error }]"
         :disabled="disabled"
         :id="generateID"
@@ -14,7 +14,7 @@
       <span class="label-text">
         <slot />
       </span>
-    </BrFormLabel>
+    </br-form-label>
   </div>
 </template>
 
@@ -30,6 +30,9 @@ defineOptions({
 })
 
 const props = defineProps({
+  id: {
+    type: String,
+  },
   disabled: {
     default: false,
     type: Boolean,

package/components/BrFormRadioGroup.vue

@@ -1,21 +1,24 @@
 <template>
   <div role="radiogroup">
-    <BrFormRadio
-      v-for="(option, index) in options"
-      :data-test="option['data-test']"
-      :key="'radio-option-' + index"
-      :disabled="option.disabled"
-      :value="option.value"
-      v-model="model"
-      :name="name">
-      <slot v-if="$slots.default" v-bind="option" />
-      <template v-else>{{ option.text }}</template>
-    </BrFormRadio>
+    <br-wrap cluster>
+      <br-form-radio
+        v-for="(option, index) in options"
+        :data-test="option['data-test']"
+        :key="'radio-option-' + index"
+        :disabled="option.disabled"
+        :value="option.value"
+        v-model="model"
+        :name="name">
+        <slot v-if="$slots.default" v-bind="option" />
+        <template v-else>{{ option.text }}</template>
+      </br-form-radio>
+    </br-wrap>
   </div>
 </template>
 
 <script setup>
 import BrFormRadio from '#components/BrFormRadio.vue'
+import BrWrap from '#components/BrWrap.vue'
 
 const model = defineModel()
 

package/components/BrFormRow.vue

@@ -1,12 +1,13 @@
 <template>
   <div :class="generateClasses">
-    <BrFormLabel
+    <br-form-label
       v-if="label"
       :id="generateFor"
       :required="required"
-      v-bind="$attrs">
+      v-bind="$attrs"
+      row>
       {{ label }}
-    </BrFormLabel>
+    </br-form-label>
     <div :class="[`content`, { label }, { submit }, { radios }]">
       <slot />
     </div>

package/components/BrLink.vue

@@ -16,7 +16,7 @@ const isExternal = computed(() => typeof props.to == 'string')
 
 const props = defineProps({
   to: {
-    type: Object || String,
+    type: [Object, String],
   },
 })
 </script>

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.24.0"
+  "version": "3.26.0"
 }

package/scss/_form.scss

@@ -1,8 +1,3 @@
-label {
-  font-weight: bold;
-  display: block;
-}
-
 .secondary-actions {
   margin-top: var(--margin-xl);
 

package/scss/_variables.scss

@@ -176,7 +176,7 @@
   --padding-xl: 1.5rem;
   --padding-xxl: 2rem;
   --padding-xxxl: 2.5rem;
-  --padding-card-sm: 1rem;
+  --padding-card-sm: 1.25rem;
   --padding-card-md: 1.5rem;
   --padding-card-lg: 1.75rem;
   --padding-content: 3.75rem;

package/scss/mixins/{input/_radio.scss → _br-form-radio.scss}

@@ -101,9 +101,13 @@
 }
 
 @mixin br-form-radio {
-  &:not(:last-child) {
-    margin-bottom: var(--margin-sm);
-  }
+  display: inline-flex;
+
+  /// @TODO: block variant
+
+  // &:not(:last-child) {
+  //   margin-bottom: var(--margin-sm);
+  // } 
 
   .br-form-label {
     @include br-form-radio--label;

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

@@ -14,30 +14,36 @@
 }
 
 @mixin br-form-row {
+  & {
+    row-gap: var(--gap-md);
+    display: grid;
+  }
+
   &:not(:last-of-type) {
     margin-bottom: var(--margin-md);
   }
 
   @include small-up {
     grid-template-columns: 33fr 67fr;
-    align-items: flex-start;
-    gap: var(--gap-xl);
-    display: grid;
+    column-gap: var(--gap-xl);
+    align-items: start;
+
+    >.br-form-label {
+      margin-top: var(--margin-lg);
+    }
   }
 
-  >label,
   >.br-form-label {
-    @include br-form-label;
+    font-weight: bold;
   }
 
-  .br-form-input[type=email] {
+  .br-form-input[type=text],
+  .br-form-input[type=email],
+  .br-form-input[type=tel],
+  .br-form-input[type=date] {
     width: 100%;
   }
 
-  .content.radios {
-    margin: var(--margin-wrap-xs);
-  }
-
   .content>fieldset {
     margin-top: var(--margin-lg);
   }

package/scss/mixins/_input.scss

@@ -2,5 +2,5 @@
 @forward "input/status";
 @forward "input/checkbox";
 @forward "input/select";
-@forward "input/radio";
+@forward "br-form-radio";
 @forward "input/text";

package/components/BrButton copy.vue

@@ -1,112 +0,0 @@
-<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>