barbican-reset 2.42.0 → 2.43.0

package/components/BrCollapse/Button.vue

@@ -0,0 +1,36 @@
+<template>
+  <br-button
+    :variant="variant"
+    :aria-controls="controls"
+    :aria-expanded="expanded"
+    @click="toggleCollapse">
+    <slot></slot>
+  </br-button>
+</template>
+
+<script>
+import BrButton from '../BrButton'
+
+export default {
+  components: {
+    BrButton
+  },
+  props: ['controls', 'variant'],
+  data() {
+    return {
+      expanded: 'false',
+    }
+  },
+  methods: {
+    toggleCollapse() {
+      let isExpanded = this.expanded == 'true'
+
+      this.expanded = isExpanded ? 'false' : 'true'
+
+      let content = document.getElementById(this.controls)
+
+      content.classList.toggle('expanded')
+    },
+  },
+}
+</script>

package/components/BrCollapse/Content.vue

@@ -0,0 +1,17 @@
+<template>
+  <div data-collapsible :id="id">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['id'],
+}
+</script>
+
+<style lang="scss" scoped>
+[data-collapsible]:not(.expanded) {
+  display: none;
+}
+</style>

package/components/BrCollapse/Demo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <br-collapse-button variant="link" :controls="collapse">
+      test
+    </br-collapse-button>
+    <br-collapse-content :id="collapse">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nostrum
+      sit alias. Distinctio, corporis. Dolore soluta ut hic a libero officiis,
+      quaerat minima itaque quas distinctio exercitationem vero nostrum magni.
+    </br-collapse-content>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      collapse: 'test',
+    }
+  },
+}
+</script>

package/components/BrFormCheckbox/Component.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="br-checkbox">
+    <!-- @TODO: remove success prop and style scss from br-checkbox inheritence? -->
+    <input
+      @change="(event) => emitInputData(event, 'checkbox')"
+      :data-test="dataTest"
+      :disabled="disabled"
+      :checked="isDefault"
+      :success="success"
+      :id="generateID"
+      type="checkbox"
+      :table="table"
+      :value="value"
+    />
+    <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
+  </div>
+</template>
+
+<script>
+import mixins from "../../mixins/inputs";
+
+export default {
+  mixins: [mixins],
+  props: [
+    "dataTest",
+    "disabled",
+    "success",
+    "default",
+    "toggle",
+    "table",
+    "value",
+    "id",
+  ],
+};
+</script>

package/components/BrFormCheckbox/Demo.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <br-form-checkbox
+      @change="({ value }) => (newsletterOptIn = value)"
+      data-test="requires-companion-option"
+      :default="newsletterOptIn"
+      id="newsletter-signup"
+      :disabled="false"
+      :toggle="true"
+      :table="false"
+      :value="true"
+      success>
+      Keep me up to date with news, events and offers from the Barbican
+    </br-form-checkbox>
+    {{ newsletterOptIn }}
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      newsletterOptIn: false,
+    }
+  },
+}
+</script>

package/components/BrFormCheckboxGroup/Component.vue

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

package/components/BrFormCheckboxGroup/Demo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <br-form-checkbox
+      @change="({ value }) => (boolean = value)"
+      data-test="checkbox-test-data"
+      id="checkbox-id"
+      :disabled="false"
+      :table="false"
+      :value="true"
+      success>
+      Lorem ipsum dolor sit amet.
+    </br-form-checkbox>
+    <br-form-checkbox-group
+      @change="(value) => (model = value)"
+      data-test="checkbox-test-data"
+      class="checkbox-class"
+      name="checkbox-name"
+      id="checkbox-id"
+      :options="options"
+      :model="model" />
+    {{ boolean ? 'true' : 'false' }}
+    {{ model.length ? model : 'nothing' }}
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      boolean: false,
+      model: [],
+      options: [
+        { text: 'Orange text', value: 'orange' },
+        { text: 'Apple text', value: 'apple' },
+      ],
+    }
+  },
+}
+</script>

package/components/BrFormGroup/Component.vue

@@ -0,0 +1,15 @@
+<template>
+  <fieldset :id="generateID">
+    <legend class="col-form-label">{{ label }}</legend>
+    <slot></slot>
+  </fieldset>
+</template>
+
+<script>
+import mixins from "../../mixins/inputs";
+
+export default {
+  props: ["label", "id"],
+  mixins: [mixins],
+};
+</script>

package/components/BrFormGroup/Demo.vue

@@ -0,0 +1,26 @@
+<template>
+  <br-form-group
+    label="I want to get the latest Barbican news and events."
+    data-test="working">
+    <br-form-radio-group
+      @change="({ value }) => (contactMeSelection = value)"
+      data-test="global-opt-in"
+      name="contact-me-options"
+      :options="yesNoOptions"
+      id="contact-me" />
+  </br-form-group>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      contactMeSelection: true,
+      yesNoOptions: [
+        { text: 'Yes', value: true },
+        { text: 'No', value: false },
+      ],
+    }
+  },
+}
+</script>

package/components/BrFormInput/Component.vue

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

package/components/BrFormInput/Demo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <br-form-row>
+      <br-form-radio
+        @change="({ value }) => (radio = value)"
+        name="radio"
+        value="true">
+        true
+      </br-form-radio>
+      <br-form-radio
+        @change="({ value }) => (radio = value)"
+        name="radio"
+        value="false">
+        false
+      </br-form-radio>
+    </br-form-row>
+    <br-form-row>
+      <br-form-input
+        @change="({ value }) => (gift.sendDate = value)"
+        :min="minimumSendDate"
+        :max="maximumSendDate"
+        data-test="send-date"
+        type="date" />
+      <br-form-input
+        @change="({ value }) => (email = value)"
+        data-test="login-form-email"
+        autocomplete="username"
+        value="disabled"
+        class="custom"
+        type="email"
+        name="email"
+        :disabled="false"
+        :required="true" />
+    </br-form-row>
+    <br-form-row>
+      {{ email }}
+      {{ radio }}
+    </br-form-row>
+  </div>
+</template>
+
+<script>
+import { DateTime } from 'luxon'
+
+export default {
+  computed: {
+    minimumSendDate() {
+      return DateTime.now().toISODate()
+    },
+    maximumSendDate() {
+      return DateTime.now().plus({ years: 1 }).toISODate()
+    },
+  },
+  data() {
+    return {
+      radio: 'radio',
+      email: 'email',
+      gift: {
+        sendDate: '',
+      },
+    }
+  },
+}
+</script>

package/components/BrFormRadio/Component.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="custom-radio">
+    <input
+      @input="(event) => emitInputData(event, 'radio')"
+      :data-test="dataTest"
+      :disabled="disabled"
+      :checked="isDefault"
+      :id="generateID"
+      :value="value"
+      type="radio"
+      :name="name" />
+    <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
+  </div>
+</template>
+
+<script>
+import mixins from '../../mixins/inputs'
+
+export default {
+  mixins: [mixins],
+  props: ['id', 'name', 'value', 'disabled', 'default', 'dataTest'],
+}
+</script>

package/components/BrFormRadio/Demo.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-for="(group, index) in radios" :key="index">
+    <div>{{ group.default }}</div>
+    <br-form-radio
+      v-for="(option, index) in group.options"
+      @change="({ value }) => (group.default = value)"
+      :default="group.default"
+      data-test="here it is"
+      :name="group.name"
+      :value="option"
+      :key="index">
+      {{ option }}
+    </br-form-radio>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      radios: [
+        { name: 'testA', default: true, options: [true, false] },
+        { name: 'testB', default: 16, options: [32, 46, 75] },
+        {
+          name: 'testC',
+          default: 'sentence',
+          options: ['paul', 'gareth', 'andrew'],
+        },
+      ],
+    }
+  },
+}
+</script>

package/components/BrFormRadioGroup/Component.vue

@@ -0,0 +1,18 @@
+<template>
+  <div role="radiogroup" :id="id">
+    <br-form-radio
+      v-for="({ value, text }, index) in options"
+      @change="(event) => $emit('change', event)"
+      :value="value"
+      :key="index"
+      :name="name">
+      {{ text }}
+    </br-form-radio>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['options', 'name', 'id'],
+}
+</script>

package/components/BrFormRadioGroup/Demo.vue

@@ -0,0 +1,22 @@
+<template>
+  <br-form-radio-group
+    @change="({ value }) => (contactMeSelection = value)"
+    data-test="global-opt-in"
+    name="contact-me-options"
+    :options="yesNoOptions"
+    id="radio-slots" />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      contactMeSelection: true,
+      yesNoOptions: [
+        { text: 'Yes', value: true },
+        { text: 'No', value: false },
+      ],
+    }
+  },
+}
+</script>

package/components/BrFormTextarea/Component.vue

@@ -0,0 +1,23 @@
+<template>
+  <textarea
+    @input="(event) => emitInputData(event, 'textarea')"
+    class="br-textarea form-control"
+    :placeholder="placeholder"
+    wrap="soft"
+    :id="id"></textarea>
+</template>
+
+<script>
+import mixins from '../../mixins/inputs'
+
+export default {
+  mixins: [mixins],
+  props: ['id', 'value', 'disabled', 'placeholder'],
+}
+</script>
+
+<style lang="scss" scoped>
+.br-textarea {
+  resize: none;
+}
+</style>

package/components/BrFormTextarea/Demo.vue

@@ -0,0 +1,22 @@
+<template>
+  <div style="padding: 100px">
+    <br-form-textarea
+      @change="({ value }) => (gift.message = value)"
+      placeholder="placeholder"
+      data-test="data-test"
+      rows="6" />
+    {{ gift.message }}
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      gift: {
+        message: '',
+      },
+    }
+  },
+}
+</script>

package/index.js

@@ -5,14 +5,23 @@ import BrCard from "./components/BrCard";
 import BrCardText from "./components/BrCardText";
 import BrCardTitle from "./components/BrCardTitle";
 import BrCardSubTitle from "./components/BrCardSubTitle";
+import BrCollapseButton from './components/BrCollapse/Button';
+import BrCollapseContent from './components/BrCollapse/Content';
 import BrConfirmDone from "./components/BrConfirmDone";
 import BrConfirmEmail from "./components/BrConfirmEmail";
 import BrContainer from "./components/BrContainer";
 import BrFooterLower from "./components/BrFooterLower";
 import BrFooterUpper from "./components/BrFooterUpper";
 import BrFormBlock from "./components/BrFormBlock";
+import BrFormCheckbox from "./components/BrFormCheckbox/Component";
+import BrFormCheckboxGroup from "./components/BrFormCheckboxGroup/Component";
+import BrFormGroup from './components/BrFormGroup/Component';
+import BrFormInput from './components/BrFormInput/Component';
 import BrFormPassword from "./components/BrFormPassword";
+import BrFormRadio from './components/BrFormRadio/Component';
+import BrFormRadioGroup from './components/BrFormRadioGroup/Component';
 import BrFormRow from "./components/BrFormRow";
+import BrFormTextarea from './components/BrFormTextarea/Component';
 import BrFormUpdate from "./components/BrFormUpdate";
 import BrLoader from "./components/BrLoader";
 import BrSkiplink from "./components/BrSkiplink";
@@ -32,14 +41,23 @@ export {
   BrCardSubTitle,
   BrCardText,
   BrCardTitle,
+  BrCollapseButton,
+  BrCollapseContent,
   BrConfirmDone,
   BrConfirmEmail,
   BrContainer,
   BrFooterLower,
   BrFooterUpper,
   BrFormBlock,
+  BrFormCheckbox,
+  BrFormCheckboxGroup,
+  BrFormGroup,
+  BrFormInput,
   BrFormPassword,
+  BrFormRadio,
+  BrFormRadioGroup,
   BrFormRow,
+  BrFormTextarea,
   BrFormUpdate,
   BrLoader,
   BrSkiplink,

package/mixins/inputs.js

@@ -0,0 +1,32 @@
+export default {
+  computed: {
+    generateID() {
+      let random = "random_" + Math.ceil(Math.random() * 1000000);
+
+      return this.id ? this.id : random;
+    },
+    isDefault() {
+      return this.default == this.value;
+    },
+  },
+  methods: {
+    emitInputData({ target }, name = "input") {
+      let { value, checked } = target;
+
+      value = this.toggle ? checked : value;
+
+      let content = this.name ? this.name : name;
+
+      console.log({ content, value });
+
+      this.$emit("change", { content, value });
+    },
+    emitCheckboxGroupData({ value }) {
+      this.store.includes(value)
+        ? (this.store = this.store.filter((item) => item !== value))
+        : this.store.push(value);
+
+      this.$emit("change", this.store);
+    },
+  },
+};

package/package.json

@@ -79,6 +79,7 @@
     "dist/**/*",
     "fonts/*",
     "icons/**/*",
+    "mixins/**/*",
     "patterns/**/*",
     "logos/*",
     "scss/**/*",
@@ -99,5 +100,5 @@
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.42.0"
+  "version": "2.43.0"
 }