barbican-reset 3.15.0 → 3.16.0

package/components/AccountTitle.vue

@@ -14,20 +14,20 @@ export default {
   },
   computed: {
     styleTitle() {
-      return this.placeholder ? this.$style.placeholder : this.$style.title;
+      return this.placeholder ? this.$style.placeholder : this.$style.title
     },
   },
-};
+}
 </script>
 
 <style lang="scss" module>
-@use "#styles/helpers" as *;
+@use '#styles/helpers' as *;
 
 @mixin title {
-  margin-bottom: 1.25rem;
+  margin-bottom: var(--margin-xl);
 
   @include medium-up {
-    font-size: $h1-font-size;
+    font-size: var(--font-size-h1);
   }
 }
 

package/components/BrCardSubTitle.vue

@@ -4,8 +4,8 @@
 
 <style lang="scss" scoped>
 .card-subtitle {
-  color: hsl(0deg, 0%, 35%);
-  font-size: 0.875rem;
+  color: var(--color-black-50-lighten);
+  font-size: var(--font-size-sm);
   font-weight: 400;
   margin: 0;
 }

package/components/BrFormBlock.vue

@@ -5,13 +5,14 @@
 </template>
 
 <style lang="scss" module>
-@use "#styles/helpers" as *;
+@use '#styles/helpers' as *;
 
 .container {
-  padding: 0.875rem 0.75rem 0.625rem 0.75rem;
-  border-left: 0.25rem solid;
-  background: $c-grey-l96;
-  margin-bottom: 1rem;
+  padding: var(--padding-lg) var(--padding-md) var(--padding-sm) var(--padding-md);
+  background: var(--color-black-5-lighten);
+  margin-bottom: var(--margin-lg);
+  border-left-width: 0.25rem;
+  border-left-style: solid;
   font-weight: bold;
 }
 </style>

package/components/BrFormCheckbox.vue

@@ -1,19 +1,15 @@
 <template>
   <div class="br-checkbox">
-    <br-form-input v-bind="$attrs" :value="data" type="checkbox">
+    <BrFormInput v-bind="$attrs" type="checkbox">
       <slot />
-    </br-form-input>
+    </BrFormInput>
   </div>
 </template>
 
-<script>
+<script setup>
 import BrFormInput from '#components/BrFormInput.vue'
 
-export default {
-  props: ['data'],
+defineOptions({
   inheritAttrs: false,
-  components: {
-    BrFormInput,
-  },
-}
+})
 </script>

package/components/BrFormCheckboxGroup.vue

@@ -1,33 +1,33 @@
 <template>
   <div role="group">
-    <br-form-checkbox
+    <BrFormCheckbox
       v-for="(option, index) in options"
       :data-test="option['data-test']"
+      :key="'checkbox-option-' + index"
       :disabled="option.disabled"
-      :key="generateKey(index)"
-      :data="option.value"
-      v-model="value"
+      :value="option.value"
+      v-model="model"
       :name="name">
       <slot v-if="$slots.default" v-bind="option" />
       <template v-else>{{ option.text }}</template>
-    </br-form-checkbox>
+    </BrFormCheckbox>
   </div>
 </template>
 
-<script>
-import inputs from '#mixins/inputs'
+<script setup>
 import BrFormCheckbox from '#components/BrFormCheckbox.vue'
 
-export default {
-  mixins: [inputs],
-  props: ['modelValue', 'options', 'name'],
-  components: {
-    BrFormCheckbox,
-  },
-  methods: {
-    generateKey(index) {
-      return 'checkbox-option-' + index
-    },
-  },
-}
+const model = defineModel()
+
+// @name props.options
+// @description {object[]} array of checkbox options data
+// @param {string} [options[]['data-test']] - optional string used in testing
+// @param {boolean} [options[].disabled] - optional boolean for disabling the input
+// @param {boolean | string | number} options[].value - the input value
+// @param {string} options[].text - string displayed inside the input
+
+const props = defineProps({
+  options: Array,
+  name: String,
+})
 </script>

package/components/BrFormDate.vue

@@ -1,9 +1,11 @@
 <template>
-  <br-form-input v-bind="$attrs" type="date" />
+  <BrFormInput v-bind="$attrs" type="date" />
 </template>
 
-<script>
-export default {
+<script setup>
+import BrFormInput from '#components/BrFormInput.vue'
+
+defineOptions({
   inheritAttrs: false,
-}
+})
 </script>

package/components/BrFormEmail.vue

@@ -1,13 +1,7 @@
 <template>
-  <br-form-input type="email" />
+  <BrFormInput type="email" />
 </template>
 
-<script>
+<script setup>
 import BrFormInput from '#components/BrFormInput.vue'
-
-export default {
-  components: {
-    BrFormInput,
-  },
-}
 </script>

package/components/BrFormFieldset.vue

@@ -5,10 +5,8 @@
   </fieldset>
 </template>
 
-<script>
-// Pass a form "id" as "form" to associate inputs with that form
-// Pass a "disabled" attribute to disable inputs inside the fieldset
-export default {
-  props: ['label'],
-}
+<script setup>
+const props = defineProps({
+  label: String,
+})
 </script>

package/components/BrFormInput.vue

@@ -4,17 +4,81 @@
     :data-test="generateDataTest"
     :type="generateType"
     :id="generateID"
-    v-model="value"
+    v-model="model"
     v-bind="$attrs" />
   <label v-if="$slots.default" :for="generateID"><slot /></label>
 </template>
 
-<script>
-import inputs from '#mixins/inputs'
+<script setup>
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
 
-export default {
-  props: ['modelValue', 'id', 'type', 'data-test', 'autocomplete'],
+const model = defineModel()
+
+const props = defineProps({
+  id: String,
+  type: String,
+  dataTest: String,
+  autocomplete: String,
+})
+
+defineOptions({
   inheritAttrs: false,
-  mixins: [inputs],
-}
+})
+
+// @description Returns either a string or undefined for the "autocomplete" attribute
+// @returns {string | undefined} result - string or undefined based on preceeding conditions
+
+const generateAutoComplete = computed(() => {
+  let result = undefined
+
+  if (props.id == 'first-name') result = 'given-name'
+
+  if (props.id == 'last-name') result = 'family-name'
+
+  if (props.type == 'email') result = 'email'
+
+  if (props.autocomplete) result = props.autocomplete
+
+  return result && formatKebabCase(result)
+})
+
+// @description Returns either a string or undefined for the "data-test" attribute
+// @returns {string | undefined} result - string or undefined based on preceeding conditions
+
+const generateDataTest = computed(() => {
+  let result = undefined
+
+  if (props.id) result = props.id
+
+  if (props.dataTest) result = props.dataTest
+
+  return result && formatKebabCase(result)
+})
+
+// @description Returns a string for the "type" attribute
+// @returns {string} result - string based on preceeding conditions
+
+const generateType = computed(() => {
+  let result = 'text'
+
+  if (props.type) result = props.type
+
+  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,27 +1,20 @@
 <template>
-  <label v-if="!disabled" :for="id">
+  <component :is="!disabled ? 'label' : 'div'" :for="!disabled ? id : null" class="br-form-label">
     <strong>
       <slot />
     </strong>
     <span v-if="required"> (required)</span>
     <span v-if="optional"> (optional)</span>
-  </label>
-  <div v-else class="br-label">
-    <strong>
-      <slot />
-    </strong>
-    <span v-if="required"> (required)</span>
-    <span v-if="optional"> (optional)</span>
-  </div>
+  </component>
 </template>
 
-<script>
-export default {
-  props: {
-    disabled: { type: Boolean },
-    required: { type: Boolean },
-    optional: { type: Boolean },
-    id: { type: String },
-  },
-}
+<script setup>
+
+const props = defineProps({
+  disabled: Boolean,
+  required: Boolean,
+  optional: Boolean,
+  id: String,
+})
+
 </script>

package/components/BrFormPassword.vue

@@ -1,49 +1,41 @@
 <template>
-  <br-form-visible
+  <BrFormVisible
     @visible="showPassword = !showPassword"
-    :visible="showPassword"
-    v-if="toggle">
-    <br-form-input
+    :visible="showPassword">
+    <BrFormInput
       :autocomplete="generateAutocomplete"
       :type="generateType"
       v-bind="$attrs"
       required />
-  </br-form-visible>
-  <br-form-input
-    :autocomplete="generateAutocomplete"
-    :type="generateType"
-    v-bind="$attrs"
-    required
-    v-else />
+  </BrFormVisible>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from 'vue'
 import BrFormInput from '#components/BrFormInput.vue'
 import BrFormVisible from '#components/BrFormVisible.vue'
 
-export default {
+const props = defineProps({
+  toggle: Boolean,
+})
+
+defineOptions({
   inheritAttrs: false,
-  props: {
-    toggle: {
-      type: Boolean,
-    },
-  },
-  components: {
-    BrFormInput,
-    BrFormVisible,
-  },
-  data() {
-    return {
-      showPassword: false,
-    }
-  },
-  computed: {
-    generateType() {
-      return this.showPassword ? 'text' : 'password'
-    },
-    generateAutocomplete() {
-      return this.showPassword ? 'off' : 'current-password'
-    },
-  },
-}
+})
+
+let showPassword = ref(false)
+
+// @description Returns a string for the "type" attribute based on the showPassword boolean
+// @returns {string} conditional string
+
+const generateType = computed(() => {
+  return showPassword.value ? 'text' : 'password'
+})
+
+// @description Returns a string for the "autocomplete" attribute based on the showPassword boolean
+// @returns {string} conditional string
+
+const generateAutocomplete = computed(() => {
+  return showPassword.value ? 'off' : 'current-password'
+})
 </script>

package/components/BrFormRadio.vue

@@ -1,19 +1,15 @@
 <template>
   <div class="br-radio">
-    <br-form-input v-bind="$attrs" :value="data" type="radio">
+    <BrFormInput v-bind="$attrs" type="radio">
       <slot />
-    </br-form-input>
+    </BrFormInput>
   </div>
 </template>
 
-<script>
+<script setup>
 import BrFormInput from '#components/BrFormInput.vue'
 
-export default {
-  props: ['data'],
+defineOptions({
   inheritAttrs: false,
-  components: {
-    BrFormInput,
-  },
-}
+})
 </script>

package/components/BrFormRadioGroup.vue

@@ -1,33 +1,26 @@
 <template>
   <div role="radiogroup">
-    <br-form-radio
+    <BrFormRadio
       v-for="(option, index) in options"
       :data-test="option['data-test']"
+      :key="'radio-option-' + index"
       :disabled="option.disabled"
-      :key="generateKey(index)"
-      :data="option.value"
-      v-model="value"
+      :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>
+    </BrFormRadio>
   </div>
 </template>
 
-<script>
-import inputs from '#mixins/inputs'
+<script setup>
 import BrFormRadio from '#components/BrFormRadio.vue'
 
-export default {
-  mixins: [inputs],
-  props: ['modelValue', 'options', 'name'],
-  components: {
-    BrFormRadio,
-  },
-  methods: {
-    generateKey(index) {
-      return 'radio-option-' + index
-    },
-  },
-}
+const model = defineModel()
+
+const props = defineProps({
+  options: Array,
+  name: String,
+})
 </script>

package/components/BrFormRow.vue

@@ -1,49 +1,63 @@
 <template>
   <div :class="generateClasses">
-    <br-form-label :id="generateFor" v-bind="$attrs" v-if="label">
+    <BrFormLabel
+      v-if="label"
+      :id="generateFor"
+      :required="required"
+      v-bind="$attrs">
       {{ label }}
-    </br-form-label>
+    </BrFormLabel>
     <div :class="[`content`, { label }, { submit }, { radios }]">
       <slot />
     </div>
   </div>
 </template>
 
-<script>
-import inputs from '#mixins/inputs'
+<script setup>
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
 import BrFormLabel from '#components/BrFormLabel.vue'
 
-export default {
+const props = defineProps({
+  label: String,
+  id: String,
+  required: Boolean,
+  submit: Boolean,
+  class: String,
+  radios: Boolean,
+})
+
+defineOptions({
   inheritAttrs: false,
-  mixins: [inputs],
-  components: {
-    BrFormLabel,
-  },
-  props: {
-    label: {
-      type: String,
-    },
-    id: {
-      type: String,
-    },
-    submit: {
-      type: Boolean,
-    },
-    class: {
-      type: String,
-    },
-    radios: {
-      type: Boolean,
-    },
-  },
-  computed: {
-    generateClasses() {
-      let result = ['br-form-row']
-
-      if (this.class) result.push(this.class)
-
-      return result
-    },
-  },
-}
+})
+
+// @description Returns a string array of classnames
+// @returns {string[]} result - contains default classname and optional prop-based classnames
+
+const generateClasses = computed(() => {
+  let result = ['br-form-row']
+
+  if (props.class) result.push(props.class)
+
+  return result
+})
+
+// @description Returns either a string or null for the "for" attribute
+// @returns {string | null} result - string or null based on preceeding conditions
+
+const generateFor = computed(() => {
+  let result = null
+
+  // return null if there is no label value to click on
+
+  if (!props.label) return result
+
+  if (props.label) result = props.label
+
+  // override label value if a custom id is also set
+
+  if (props.id) result = props.id
+
+  return result && formatKebabCase(result)
+})
 </script>

package/components/BrFormTel.vue

@@ -1,13 +1,7 @@
 <template>
-  <br-form-input autocomplete="tel" inputmode="tel" type="tel" />
+  <BrFormInput autocomplete="tel" inputmode="tel" type="tel" />
 </template>
 
-<script>
+<script setup>
 import BrFormInput from '#components/BrFormInput.vue'
-
-export default {
-  components: {
-    BrFormInput,
-  },
-}
 </script>

package/components/BrFormTextarea.vue

@@ -6,11 +6,28 @@
     wrap="soft" />
 </template>
 
-<script>
-import inputs from '#mixins/inputs'
+<script setup>
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
 
-export default {
-  mixins: [inputs],
-  props: ['modelValue', 'id'],
-}
+const value = defineModel()
+
+// @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)
+})
+
+const props = defineProps({
+  id: String,
+})
 </script>

package/components/BrFormUpdate.vue

@@ -1,32 +1,30 @@
 <template>
   <div :class="generateClasses">
     <slot />
-    <br-button v-if="active" @click="$emit('update')" data-test="update">
+    <BrButton v-if="active" @click="emit('update')" data-test="update">
       update
-    </br-button>
+    </BrButton>
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue'
 import BrButton from '#components/BrButton.vue'
 
-export default {
-  props: {
-    active: {
-      type: Boolean,
-    },
-  },
-  components: {
-    BrButton,
-  },
-  computed: {
-    generateClasses() {
-      let result = ['br-form-update']
+const props = defineProps({
+  active: Boolean,
+})
 
-      if (this.active) result.push('active')
+const emit = defineEmits(['update'])
 
-      return result
-    },
-  },
-}
+// @description Returns a string array of classnames
+// @returns {string[]} result - contains default classname and optional active classname
+
+const generateClasses = computed(() => {
+  let result = ['br-form-update']
+
+  if (props.active) result.push('active')
+
+  return result
+})
 </script>