barbican-reset 2.44.0 → 2.45.0

package/components/BrFormCheckbox/Component.vue

@@ -5,12 +5,13 @@
       @change="(event) => emitInputData(event, 'checkbox')"
       :data-test="dataTest"
       :disabled="disabled"
-      :checked="checked"
       :success="success"
+      :checked="checked"
       :id="generateID"
       type="checkbox"
       :table="table"
       :value="value"
+      :name="name"
     />
     <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
   </div>
@@ -29,6 +30,7 @@ export default {
     "toggle",
     "table",
     "value",
+    "name",
     "id",
   ],
 };

package/components/BrFormCheckboxGroup/Component.vue

@@ -1,12 +1,14 @@
 <template>
   <div role="group" :id="id">
     <br-form-checkbox
-      v-for="({ value, checked, text }, index) in options"
+      v-for="({ value, checked, text, name, dataTest }, index) in options"
       @change="emitCheckboxGroupData"
+      :dataTest="dataTest"
       :checked="checked"
       :value="value"
       :name="name"
-      :key="index">
+      :key="index"
+    >
       {{ text }}
     </br-form-checkbox>
   </div>
@@ -14,18 +16,18 @@
 
 <script>
 import mixins from "../../mixins/inputs";
-import BrFormCheckbox from "../BrFormCheckbox/Component"
+import BrFormCheckbox from "../BrFormCheckbox/Component";
 
 export default {
   mixins: [mixins],
-  props: ['options', 'name', 'id', 'model'],
+  props: ["options", "name", "id", "model"],
   components: {
     BrFormCheckbox,
   },
   data() {
     return {
       store: this.model,
-    }
+    };
   },
-}
+};
 </script>

package/components/BrFormPassword.vue

@@ -2,7 +2,7 @@
   <div class="br-form-password">
     <input
       :autocomplete="autocomplete"
-      data-test="password-field"
+      :data-test="dataTest"
       @input="inputChange"
       :value="password"
       name="password"
@@ -46,6 +46,10 @@ export default {
       type: String,
       default: "password",
     },
+    dataTest: {
+      type: String,
+      default: "password-field",
+    }
   },
   methods: {
     inputChange({ target }) {

package/components/BrFormRow.vue

@@ -2,8 +2,8 @@
   <div class="br-form-row">
     <label v-if="label" :for="id">
       <strong>{{ label }}</strong>
-      <span v-if="label && required">(required)</span
-      ><span v-if="label && optional">(optional)</span>
+      <span v-if="label && required">&nbsp;(required)</span
+      ><span v-if="label && optional">&nbsp;(optional)</span>
     </label>
     <div :class="[`content`, { editable }, { label }, { submit }, { radios }]">
       <br-button v-if="editable" variant="input-edit" @click="$emit('edit')">

package/components/BrFormTextarea/Component.vue

@@ -4,20 +4,24 @@
     class="br-textarea form-control"
     :placeholder="placeholder"
     wrap="soft"
-    :id="id"></textarea>
+    :id="id"
+  ></textarea>
 </template>
 
 <script>
-import mixins from '../../mixins/inputs'
+import mixins from "../../mixins/inputs";
 
 export default {
   mixins: [mixins],
-  props: ['id', 'value', 'disabled', 'placeholder'],
-}
+  props: ["id", "value", "disabled", "placeholder"],
+};
 </script>
 
 <style lang="scss" scoped>
 .br-textarea {
+  font-family: inherit;
+  display: block;
   resize: none;
+  width: 100%;
 }
 </style>

package/mixins/inputs.js

@@ -9,20 +9,45 @@ export default {
   methods: {
     emitInputData({ target }, name) {
       let { value, checked } = target;
-     
+
       if (this.name) name = this.name;
 
       if (this.toggle) value = checked;
 
+      if (value === "true") value = true;
+
+      if (value === "false") value = false;
+
       console.log({ name, value });
 
       this.$emit("change", { name, value, checked });
     },
+    findItemInStore(store, option) {
+      let alreadyExists = false;
+
+      store.forEach(function (item) {
+        if (item.name == option.name) {
+          if (item.value == option.value) alreadyExists = true;
+        }
+      });
+
+      return alreadyExists;
+    },
+    removeItemFromStore(store, option) {
+      return store.filter(function (item) {
+        if (item.name == option.name) {
+          if (item.value == option.value) return false;
+        }
+        return true;
+      });
+    },
     emitCheckboxGroupData(option) {
+      let alreadyExists = this.findItemInStore(this.store, option);
+
       if (option.checked) {
         delete option.checked;
-        this.store.push(option);
-      } else this.store = this.store.filter((item) => item.name != option.name);
+        if (!alreadyExists) this.store.push(option);
+      } else this.store = this.removeItemFromStore(this.store, option);
 
       console.log("store: ", this.store);
 

package/package.json

@@ -100,5 +100,5 @@
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.44.0"
+  "version": "2.45.0"
 }

package/scss/helpers/mixins/input/_text.scss

@@ -26,6 +26,7 @@
   border-radius: $br-border-radius-lg;
   background-color: $c-grey-l96;
   line-height: 1.375rem;
+  font-family: inherit;
   font-size: inherit;
   color: $c-grey-l21;