barbican-reset 2.43.0 → 2.45.0

package/components/BrFormCheckbox/Component.vue

@@ -5,12 +5,13 @@
       @change="(event) => emitInputData(event, 'checkbox')"
       :data-test="dataTest"
       :disabled="disabled"
-      :checked="isDefault"
       :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>
@@ -25,10 +26,11 @@ export default {
     "dataTest",
     "disabled",
     "success",
-    "default",
+    "checked",
     "toggle",
     "table",
     "value",
+    "name",
     "id",
   ],
 };

package/components/BrFormCheckboxGroup/Component.vue

@@ -1,11 +1,14 @@
 <template>
   <div role="group" :id="id">
     <br-form-checkbox
-      v-for="({ value, 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"
-      :name="name">
+    >
       {{ text }}
     </br-form-checkbox>
   </div>
@@ -13,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/BrFormCheckboxGroup/Demo.vue

@@ -1,13 +1,15 @@
 <template>
-  <div>
+  <div style="padding: 100px">
     <br-form-checkbox
       @change="({ value }) => (boolean = value)"
       data-test="checkbox-test-data"
       id="checkbox-id"
       :disabled="false"
+      :toggle="true"
       :table="false"
       :value="true"
-      success>
+      success
+    >
       Lorem ipsum dolor sit amet.
     </br-form-checkbox>
     <br-form-checkbox-group
@@ -17,9 +19,10 @@
       name="checkbox-name"
       id="checkbox-id"
       :options="options"
-      :model="model" />
-    {{ boolean ? 'true' : 'false' }}
-    {{ model.length ? model : 'nothing' }}
+      :model="model"
+    />
+    {{ boolean }}
+    {{ model.length ? model : "nothing" }}
   </div>
 </template>
 
@@ -30,10 +33,10 @@ export default {
       boolean: false,
       model: [],
       options: [
-        { text: 'Orange text', value: 'orange' },
-        { text: 'Apple text', value: 'apple' },
+        { text: "Orange text", value: "orange", checked: true },
+        { text: "Apple text", value: "apple", checked: false },
       ],
-    }
+    };
   },
-}
+};
 </script>

package/components/BrFormInput/Component.vue

@@ -1,7 +1,7 @@
 <template>
   <input
+    @input="(event) => emitInputData(event, 'input')"
     :autocomplete="autocomplete"
-    @input="emitInputData"
     :data-test="dataTest"
     :required="required"
     :disabled="disabled"
@@ -10,26 +10,27 @@
     :type="type"
     :name="name"
     :min="min"
-    :max="max" />
+    :max="max"
+  />
   <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
 </template>
 
 <script>
-import mixins from '../../mixins/inputs'
+import mixins from "../../mixins/inputs";
 
 export default {
   mixins: [mixins],
   props: [
-    'autocomplete',
-    'dataTest',
-    'required',
-    'disabled',
-    'value',
-    'name',
-    'type',
-    'min',
-    'max',
-    'id',
+    "autocomplete",
+    "dataTest",
+    "required",
+    "disabled",
+    "value",
+    "name",
+    "type",
+    "min",
+    "max",
+    "id",
   ],
-}
+};
 </script>

package/components/BrFormPassword.vue

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

package/components/BrFormRadio/Component.vue

@@ -4,7 +4,7 @@
       @input="(event) => emitInputData(event, 'radio')"
       :data-test="dataTest"
       :disabled="disabled"
-      :checked="isDefault"
+      :checked="checked"
       :id="generateID"
       :value="value"
       type="radio"
@@ -18,6 +18,6 @@ import mixins from '../../mixins/inputs'
 
 export default {
   mixins: [mixins],
-  props: ['id', 'name', 'value', 'disabled', 'default', 'dataTest'],
+  props: ['id', 'name', 'value', 'disabled', 'dataTest', 'checked'],
 }
 </script>

package/components/BrFormRadioGroup/Component.vue

@@ -1,8 +1,9 @@
 <template>
   <div role="radiogroup" :id="id">
     <br-form-radio
-      v-for="({ value, text }, index) in options"
+      v-for="({ value, checked, text }, index) in options"
       @change="(event) => $emit('change', event)"
+      :checked="checked"
       :value="value"
       :key="index"
       :name="name">

package/components/BrFormRadioGroup/Demo.vue

@@ -13,8 +13,8 @@ export default {
     return {
       contactMeSelection: true,
       yesNoOptions: [
-        { text: 'Yes', value: true },
-        { text: 'No', value: false },
+        { text: 'Yes', value: true, checked: true },
+        { text: 'No', value: false, checked: false },
       ],
     }
   },

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

@@ -5,26 +5,51 @@ export default {
 
       return this.id ? this.id : random;
     },
-    isDefault() {
-      return this.default == this.value;
-    },
   },
   methods: {
-    emitInputData({ target }, name = "input") {
+    emitInputData({ target }, name) {
       let { value, checked } = target;
 
-      value = this.toggle ? checked : value;
+      if (this.name) name = this.name;
+
+      if (this.toggle) value = checked;
+
+      if (value === "true") value = true;
 
-      let content = this.name ? this.name : name;
+      if (value === "false") value = false;
 
-      console.log({ content, value });
+      console.log({ name, value });
 
-      this.$emit("change", { content, value });
+      this.$emit("change", { name, value, checked });
     },
-    emitCheckboxGroupData({ value }) {
-      this.store.includes(value)
-        ? (this.store = this.store.filter((item) => item !== value))
-        : this.store.push(value);
+    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;
+        if (!alreadyExists) this.store.push(option);
+      } else this.store = this.removeItemFromStore(this.store, option);
+
+      console.log("store: ", this.store);
 
       this.$emit("change", 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.43.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;