barbican-reset 3.13.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

@@ -0,0 +1,15 @@
+<template>
+  <div class="br-checkbox">
+    <BrFormInput v-bind="$attrs" type="checkbox">
+      <slot />
+    </BrFormInput>
+  </div>
+</template>
+
+<script setup>
+import BrFormInput from '#components/BrFormInput.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>

package/components/BrFormCheckboxGroup.vue

@@ -0,0 +1,33 @@
+<template>
+  <div role="group">
+    <BrFormCheckbox
+      v-for="(option, index) in options"
+      :data-test="option['data-test']"
+      :key="'checkbox-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>
+    </BrFormCheckbox>
+  </div>
+</template>
+
+<script setup>
+import BrFormCheckbox from '#components/BrFormCheckbox.vue'
+
+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

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

package/components/BrFormEdit.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="generateClasses">
+    <slot />
+    <br-button
+      @click="$emit('edit')"
+      variant="edit-input"
+      data-test="edit"
+      v-if="active">
+      <edit-icon />
+    </br-button>
+  </div>
+</template>
+
+<script>
+import BrButton from '#components/BrButton.vue'
+import EditIcon from '#icons/account/edit.vue'
+
+export default {
+  props: {
+    active: {
+      type: Boolean,
+    },
+  },
+  components: {
+    BrButton,
+    EditIcon,
+  },
+  computed: {
+    generateClasses() {
+      let result = ['br-form-edit']
+
+      if (this.active) result.push('active')
+
+      return result
+    },
+  },
+}
+</script>

package/components/BrFormEmail.vue

@@ -0,0 +1,7 @@
+<template>
+  <BrFormInput type="email" />
+</template>
+
+<script setup>
+import BrFormInput from '#components/BrFormInput.vue'
+</script>

package/components/BrFormFieldset.vue

@@ -0,0 +1,12 @@
+<template>
+  <fieldset>
+    <legend>{{ label }}</legend>
+    <slot />
+  </fieldset>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: String,
+})
+</script>

package/components/BrFormInput.vue

@@ -0,0 +1,84 @@
+<template>
+  <input
+    :autocomplete="generateAutoComplete"
+    :data-test="generateDataTest"
+    :type="generateType"
+    :id="generateID"
+    v-model="model"
+    v-bind="$attrs" />
+  <label v-if="$slots.default" :for="generateID"><slot /></label>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
+
+const model = defineModel()
+
+const props = defineProps({
+  id: String,
+  type: String,
+  dataTest: String,
+  autocomplete: String,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+// @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

@@ -0,0 +1,20 @@
+<template>
+  <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>
+  </component>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  disabled: Boolean,
+  required: Boolean,
+  optional: Boolean,
+  id: String,
+})
+
+</script>

package/components/BrFormPassword.vue

@@ -1,67 +1,41 @@
 <template>
-  <div class="br-form-password">
-    <input
+  <BrFormVisible
+    @visible="showPassword = !showPassword"
+    :visible="showPassword">
+    <BrFormInput
+      :autocomplete="generateAutocomplete"
+      :type="generateType"
       v-bind="$attrs"
-      :autocomplete="autocomplete"
-      @input="$emit('update:modelValue', $event.target.value)"
-      :value="modelValue"
-      name="password"
-      :type="type"
-      required
-      :id="id"
-      :data-test="dataTest"
-    />
-    <br-button
-      @click="showPassword = !showPassword"
-      variant="toggle-password"
-      data-test="show-password"
-    >
-      <span class="sr-only">
-        {{ showPassword ? "Hide" : "Show" }} password
-      </span>
-      <show-password-icon v-if="showPassword" />
-      <hide-password-icon v-else />
-    </br-button>
-  </div>
+      required />
+  </BrFormVisible>
 </template>
 
-<script>
-import BrButton from "#components/BrButton.vue";
-import HidePasswordIcon from "#icons/password/hide.vue";
-import ShowPasswordIcon from "#icons/password/show.vue";
+<script setup>
+import { ref, computed } from 'vue'
+import BrFormInput from '#components/BrFormInput.vue'
+import BrFormVisible from '#components/BrFormVisible.vue'
 
-export default {
-  inheritAttrs: false, // Allow us to put attributes on the input.
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      password: "",
-      showPassword: false,
-    };
-  },
-  components: {
-    HidePasswordIcon,
-    ShowPasswordIcon,
-    BrButton,
-  },
-  props: {
-    modelValue: {},
-    id: {
-      type: String,
-      default: "password",
-    },
-    dataTest: {
-      type: String,
-      default: "password-field",
-    },
-  },
-  computed: {
-    type() {
-      return this.showPassword ? "text" : "password";
-    },
-    autocomplete() {
-      return this.showPassword ? "off" : "current-password";
-    },
-  },
-};
+const props = defineProps({
+  toggle: Boolean,
+})
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+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

@@ -0,0 +1,15 @@
+<template>
+  <div class="br-radio">
+    <BrFormInput v-bind="$attrs" type="radio">
+      <slot />
+    </BrFormInput>
+  </div>
+</template>
+
+<script setup>
+import BrFormInput from '#components/BrFormInput.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+</script>

package/components/BrFormRadioGroup.vue

@@ -0,0 +1,26 @@
+<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>
+  </div>
+</template>
+
+<script setup>
+import BrFormRadio from '#components/BrFormRadio.vue'
+
+const model = defineModel()
+
+const props = defineProps({
+  options: Array,
+  name: String,
+})
+</script>

package/components/BrFormRow.vue

@@ -1,77 +1,63 @@
 <template>
-  <div :class="styleRow">
-    <template v-if="label">
-      <label v-if="input_active" :for="generateInputID">
-        <strong>{{ label }}</strong>
-        <span v-if="required"> (required)</span>
-        <span v-if="optional"> (optional)</span>
-      </label>
-      <div class="fake-label" v-else>
-        <strong>
-          {{ label }}
-        </strong>
-      </div>
-    </template>
-    <div :class="[`content`, { editable }, { label }, { submit }, { radios }]">
-      <br-button v-if="editable" variant="input-edit" @click="$emit('edit')">
-        <edit-icon />
-      </br-button>
+  <div :class="generateClasses">
+    <BrFormLabel
+      v-if="label"
+      :id="generateFor"
+      :required="required"
+      v-bind="$attrs">
+      {{ label }}
+    </BrFormLabel>
+    <div :class="[`content`, { label }, { submit }, { radios }]">
       <slot />
     </div>
   </div>
 </template>
 
-<script>
-import BrButton from '#components/BrButton.vue'
-import EditIcon from '#icons/account/edit.vue'
-import mixins from '#mixins/inputs'
+<script setup>
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
+import BrFormLabel from '#components/BrFormLabel.vue'
 
-export default {
-  mixins: [mixins],
-  components: {
-    BrButton,
-    EditIcon,
-  },
-  props: {
-    label: {
-      type: String,
-    },
-    input_id: {
-      type: String,
-    },
-    input_active: {
-      type: Boolean,
-      default: true,
-    },
-    required: {
-      type: Boolean,
-    },
-    optional: {
-      type: Boolean,
-    },
-    submit: {
-      type: Boolean,
-    },
-    editable: {
-      type: Boolean,
-    },
-    radios: {
-      type: Boolean,
-    },
-    class: {
-      type: String,
-    },
-  },
-  computed: {
-    styleRow() {
-      let styles = ['br-form-row']
+const props = defineProps({
+  label: String,
+  id: String,
+  required: Boolean,
+  submit: Boolean,
+  class: String,
+  radios: Boolean,
+})
 
-      if (this.class) {
-        styles.push(this.class)
-      }
+defineOptions({
+  inheritAttrs: false,
+})
 
-      return styles.join(' ')
-    },
-  },
-}
+// @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

@@ -0,0 +1,7 @@
+<template>
+  <BrFormInput autocomplete="tel" inputmode="tel" type="tel" />
+</template>
+
+<script setup>
+import BrFormInput from '#components/BrFormInput.vue'
+</script>

package/components/BrFormTextarea.vue

@@ -0,0 +1,33 @@
+<template>
+  <textarea
+    class="br-form-textarea"
+    :id="generateID"
+    v-model="value"
+    wrap="soft" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import formatKebabCase from '#helpers/formatKebabCase'
+
+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,18 +1,30 @@
 <template>
-  <div class="br-form-update">
-    <div class="br-form-update--input" data-test="email"><slot /></div>
-    <br-button @click="$emit('update')" data-test="update">
+  <div :class="generateClasses">
+    <slot />
+    <BrButton v-if="active" @click="emit('update')" data-test="update">
       update
-    </br-button>
+    </BrButton>
   </div>
 </template>
 
-<script>
-import BrButton from "#components/BrButton.vue";
+<script setup>
+import { computed } from 'vue'
+import BrButton from '#components/BrButton.vue'
 
-export default {
-  components: {
-    BrButton,
-  },
-};
+const props = defineProps({
+  active: Boolean,
+})
+
+const emit = defineEmits(['update'])
+
+// @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>

package/components/BrFormVisible.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="br-form-visible">
+    <slot />
+    <BrButton
+      @click="$emit('visible')"
+      data-test="show-password"
+      variant="toggle-password">
+      <span class="sr-only">{{ visible ? 'Hide' : 'Show' }} password</span>
+      <ShowPasswordIcon v-if="visible" />
+      <HidePasswordIcon v-else />
+    </BrButton>
+  </div>
+</template>
+
+<script setup>
+import BrButton from '#components/BrButton.vue'
+import HidePasswordIcon from '#icons/password/hide.vue'
+import ShowPasswordIcon from '#icons/password/show.vue'
+
+const props = defineProps({
+  visible: Boolean,
+})
+</script>