barbican-reset 2.53.0 → 2.55.0

package/components/BrCard.vue

@@ -1,8 +1,52 @@
 <template>
-  <div class="card">
-    <div v-if="$slots.header" class="card-header">
-      <slot name="header"></slot>
+  <div :class="containerClasses">
+    <div v-if="$slots.header" :class="headerClasses">
+      <slot name="header" />
     </div>
-    <div v-if="$slots.default" class="card-body"><slot></slot></div>
+    <template v-if="bodyRequired">
+      <br-card-body :styles="body">
+        <slot />
+      </br-card-body>
+    </template>
+    <template v-else>
+      <slot />
+    </template>
   </div>
 </template>
+
+<script>
+import BrCardBody from "./BrCardBody";
+
+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);
+
+      return classNames.join(" ");
+    },
+  },
+};
+</script>

package/components/BrCardBody.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :class="classNames">
+    <slot></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/BrCardTitle.vue

@@ -1,3 +1,3 @@
 <template>
-  <h4 class="card-title"><slot></slot></h4>
+  <h4 class="card-title"><slot /></h4>
 </template>

package/components/BrFormBlock.vue

@@ -6,10 +6,10 @@
 
 <style lang="scss" module>
 .container {
-  @include fontfamily-black;
   padding: 0.875rem 0.75rem 0.625rem 0.75rem;
   border-left: 0.25rem solid;
   background: $c-grey-l96;
   margin-bottom: 1rem;
+  font-weight: bold;
 }
 </style>

package/components/BrFormCheckbox/Component.vue

@@ -2,16 +2,16 @@
   <div class="br-checkbox">
     <!-- @TODO: remove success prop and style scss from br-checkbox inheritence? -->
     <input
-      @change="(event) => emitInputData(event, 'checkbox')"
-      :data-test="dataTest"
+      v-bind="$attrs"
       :disabled="disabled"
       :success="success"
       :checked="checked"
       :id="generateID"
       type="checkbox"
       :table="table"
-      :value="value"
       :name="name"
+      v-model="model"
+      :value="value"
     />
     <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
   </div>
@@ -21,17 +21,34 @@
 import mixins from "../../mixins/inputs";
 
 export default {
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
   mixins: [mixins],
+  emits: ["update:modelValue", "change"],
   props: [
-    "dataTest",
+    "modelValue",
     "disabled",
     "success",
     "checked",
     "toggle",
     "table",
-    "value",
     "name",
     "id",
+    "value",
   ],
+  computed: {
+    // You cannot use a prop with v-model, it results in the below error. The suggested option is to have a local
+    // property that wraps around the modelValue prop.
+    // Error: VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable.
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+        this.$emit("change", { value }); // Support @change.
+      },
+    },
+  },
 };
 </script>

package/components/BrFormCheckboxGroup/Component.vue

@@ -3,10 +3,10 @@
     <template v-if="options">
       <br-form-checkbox
         v-for="({ value, checked, text, dataTest }, index) in options"
-        @change="emitCheckboxGroupData"
+        v-model="model"
+        :value="value"
         :dataTest="dataTest"
         :checked="checked"
-        :value="value"
         :name="name"
         :key="index"
       >
@@ -18,19 +18,23 @@
 </template>
 
 <script>
-import mixins from "../../mixins/inputs";
 import BrFormCheckbox from "../BrFormCheckbox/Component";
 
 export default {
-  mixins: [mixins],
-  props: ["options", "name", "id", "model"],
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  props: ["modelValue", "options", "name", "id"],
   components: {
     BrFormCheckbox,
   },
-  data() {
-    return {
-      store: this.model,
-    };
+  computed: {
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
   },
 };
 </script>

package/components/BrFormInput/Component.vue

@@ -1,12 +1,12 @@
 <template>
   <input
-    @input="(event) => emitInputData(event, 'input')"
+    @input="$emit('update:modelValue', $event.target.value)"
+    v-bind="$attrs"
     :autocomplete="autocomplete"
-    :data-test="dataTest"
     :required="required"
     :disabled="disabled"
     :id="generateID"
-    :value="value"
+    :value="modelValue"
     :type="type"
     :name="name"
     :min="min"
@@ -19,10 +19,13 @@
 import mixins from "../../mixins/inputs";
 
 export default {
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
   mixins: [mixins],
+  emits: ["update:modelValue"],
   props: [
+    "modelValue",
     "autocomplete",
-    "dataTest",
     "required",
     "disabled",
     "value",

package/components/BrFormPassword.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="br-form-password">
     <input
+      v-bind="$attrs"
       :autocomplete="autocomplete"
-      :data-test="dataTest"
-      @input="inputChange"
-      :value="password"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :value="modelValue"
       name="password"
       :type="type"
       required
       :id="id"
+      :data-test="dataTest"
     />
     <br-button
       @click="showPassword = !showPassword"
@@ -30,6 +31,9 @@ import HidePasswordIcon from "../icons/password/hide";
 import ShowPasswordIcon from "../icons/password/show";
 
 export default {
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
+  emits: ["update:modelValue"],
   data() {
     return {
       password: "",
@@ -42,6 +46,7 @@ export default {
     BrButton,
   },
   props: {
+    modelValue: {},
     id: {
       type: String,
       default: "password",
@@ -49,15 +54,6 @@ export default {
     dataTest: {
       type: String,
       default: "password-field",
-    }
-  },
-  methods: {
-    inputChange({ target }) {
-      let { value } = target;
-
-      this.password = value;
-
-      this.$emit("change", value);
     },
   },
   computed: {

package/components/BrFormRadio/Component.vue

@@ -1,23 +1,42 @@
 <template>
   <div class="custom-radio">
     <input
-      @input="(event) => emitInputData(event, 'radio')"
-      :data-test="dataTest"
+      v-bind="$attrs"
+      v-model="model"
       :disabled="disabled"
-      :checked="checked"
-      :id="generateID"
+      :id="randomId"
       :value="value"
       type="radio"
-      :name="name" />
-    <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
+      :name="name"
+    />
+    <label v-if="$slots.default" :for="randomId" ref="label"><slot /></label>
   </div>
 </template>
 
 <script>
-import mixins from '../../mixins/inputs'
-
 export default {
-  mixins: [mixins],
-  props: ['id', 'name', 'value', 'disabled', 'dataTest', 'checked'],
-}
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
+  // @TODO:
+  // We may be able to get rid of name, value & disabled if we are using v-bind="$attrs"
+  props: ["id", "name", "value", "disabled", "modelValue"],
+  emits: ["update:modelValue", "change"],
+  computed: {
+    // You cannot use a prop with v-model, it results in the below error. The suggested option is to have a local
+    // property that wraps around the modelValue prop.
+    // Error: VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable.
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+        this.$emit("change", { value }); // Support @change.
+      },
+    },
+    randomId() {
+      return (Math.random() + 1).toString(36).substring(7);
+    },
+  },
+};
 </script>

package/components/BrFormRadioGroup/Component.vue

@@ -2,13 +2,13 @@
   <div role="radiogroup" :id="id">
     <template v-if="options">
       <br-form-radio
-        v-for="({ value, checked, text }, index) in options"
-        @change="(event) => $emit('change', event)"
-        :checked="checked"
-        :value="value"
+        v-for="(option, index) in options"
+        v-model="model"
+        :value="option.value"
         :key="index"
-        :name="name">
-        {{ text }}
+        :name="name"
+      >
+        {{ option.text }}
       </br-form-radio>
     </template>
     <slot v-else></slot>
@@ -17,6 +17,23 @@
 
 <script>
 export default {
-  props: ['options', 'name', 'id'],
-}
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  props: {
+    modelValue: { type: [Array, Boolean] },
+    options: { type: Object },
+    name: { type: String },
+    id: { type: String },
+  },
+  computed: {
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  emits: ["update:modelValue"],
+};
 </script>

package/components/BrFormTextarea/Component.vue

@@ -1,19 +1,19 @@
 <template>
   <textarea
-    @input="(event) => emitInputData(event, 'textarea')"
+    @input="$emit('update:modelValue', $event.target.value)"
     class="br-textarea form-control"
     :placeholder="placeholder"
     wrap="soft"
     :id="id"
+    :value="modelValue"
   ></textarea>
 </template>
 
 <script>
-import mixins from "../../mixins/inputs";
-
 export default {
-  mixins: [mixins],
-  props: ["id", "value", "disabled", "placeholder"],
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  emits: ["update:modelValue"],
+  props: ["modelValue", "id", "value", "disabled", "placeholder"],
 };
 </script>
 

package/components/EventSummary.vue

@@ -62,16 +62,19 @@ export default {
 
 <style lang="scss" module>
 @mixin title {
-  @include fontfamily-black;
   letter-spacing: $headings-letter-spacing;
   line-height: $line-height-sm;
+  font-weight: bold;
 }
 
 @mixin subtitle {
   @include title;
-  font-size: $h5-font-size;
-  color: $c-grey-l44;
-  font-weight: 400;
+
+  & {
+    font-size: $h5-font-size;
+    color: $c-grey-l44;
+    font-weight: 400;
+  }
 
   @include medium-up {
     font-size: $h4-font-size;