barbican-reset 3.7.0 → 3.8.0

package/components/BrContainer/Component.vue

@@ -0,0 +1,84 @@
+<template>
+  <div :class="styleComponent">
+    <div :class="styleOuter">
+      <div :class="styleInner">
+        <slot />
+      </div>
+    </div>
+    <div class="br-container--image">
+      <slot name="image" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    splash: {
+      type: Boolean,
+      default: false,
+    },
+    masthead: {
+      type: Boolean,
+      default: false,
+    },
+    thin: {
+      type: Boolean,
+      default: false,
+    },
+    header: {
+      type: Boolean,
+      default: false,
+    },
+    footer: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    styleComponent() {
+      let classNames = ['br-container']
+
+      if (this.masthead) {
+        classNames.push('masthead')
+      }
+
+      return classNames
+    },
+    styleOuter() {
+      let classNames = ['br-container--outer']
+
+      if (this.masthead) {
+        classNames.push('masthead')
+      }
+
+      if (this.splash) {
+        classNames.push('splash')
+      }
+
+      return classNames
+    },
+    styleInner() {
+      let classNames = ['br-container--inner']
+
+      if (this.masthead) {
+        classNames.push('masthead')
+      }
+
+      if (this.thin) {
+        classNames.push('thin')
+      }
+
+      if (this.header) {
+        classNames.push('header')
+      }
+
+      if (this.footer) {
+        classNames.push('footer')
+      }
+
+      return classNames
+    },
+  },
+}
+</script>

package/components/BrFormRow.vue

@@ -1,10 +1,17 @@
 <template>
-  <div class="br-form-row">
-    <label v-if="label" :for="id">
-      <strong>{{ label }}</strong>
-      <span v-if="label && required">&nbsp;(required)</span
-      ><span v-if="label && optional">&nbsp;(optional)</span>
-    </label>
+  <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 />
@@ -15,8 +22,8 @@
 </template>
 
 <script>
-import BrButton from "#components/BrButton.vue";
-import EditIcon from "#icons/account/edit.vue";
+import BrButton from '#components/BrButton.vue'
+import EditIcon from '#icons/account/edit.vue'
 
 export default {
   components: {
@@ -27,6 +34,13 @@ export default {
     label: {
       type: String,
     },
+    input_id: {
+      type: String,
+    },
+    input_active: {
+      type: Boolean,
+      default: true,
+    },
     required: {
       type: Boolean,
     },
@@ -42,11 +56,32 @@ export default {
     radios: {
       type: Boolean,
     },
+    class: {
+      type: String,
+    },
+  },
+  methods: {
+    createKebabCase(value = '') {
+      return value.toLowerCase().split(' ').join('-')
+    },
   },
   computed: {
-    id() {
-      return this.label.toLowerCase().split(" ").join("_");
+    generateInputID() {
+      if (!this.label) {
+        return 'undefined'
+      }
+
+      return this.input_id ? this.input_id : this.createKebabCase(this.label)
+    },
+    styleRow() {
+      let styles = ['br-form-row']
+
+      if (this.class) {
+        styles.push(this.class)
+      }
+
+      return styles.join(' ')
     },
   },
-};
+}
 </script>

package/components/BrFormUpdate.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="br-form-update">
     <div class="br-form-update--input" data-test="email"><slot /></div>
-    <br-button @click.prevent="$emit('update')" data-test="update">
+    <br-button @click="$emit('update')" data-test="update">
       update
     </br-button>
   </div>