barbican-reset 2.41.0 → 2.43.0

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/BrFormPassword.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="br-form-password">
+    <input
+      :autocomplete="autocomplete"
+      @input="inputChange"
+      :value="password"
+      name="password"
+      :type="type"
+      required
+      :id="id"
+    />
+    <br-button
+      @click="showPassword = !showPassword"
+      data-test="show-password"
+      class="padding-0"
+    >
+      <span class="sr-only">
+        {{ showPassword ? "Hide" : "Show" }} password
+      </span>
+      <show-password-icon v-if="showPassword" />
+      <hide-password-icon v-else />
+    </br-button>
+  </div>
+</template>
+
+<script>
+import BrButton from "./BrButton";
+import HidePasswordIcon from "../icons/password/hide";
+import ShowPasswordIcon from "../icons/password/show";
+
+export default {
+  data() {
+    return {
+      password: "",
+      showPassword: false,
+    };
+  },
+  components: {
+    HidePasswordIcon,
+    ShowPasswordIcon,
+    BrButton,
+  },
+  props: {
+    id: {
+      type: String,
+      default: "password",
+    },
+  },
+  methods: {
+    inputChange({ target }) {
+      let { value } = target;
+
+      this.password = value;
+
+      this.$emit("change", value);
+    },
+  },
+  computed: {
+    type() {
+      return this.showPassword ? "text" : "password";
+    },
+    autocomplete() {
+      return this.showPassword ? "off" : "current-password";
+    },
+  },
+};
+</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/{br_form_row.vue → BrFormRow.vue}

@@ -6,16 +6,16 @@
       ><span v-if="label && optional">(optional)</span>
     </label>
     <div :class="[`content`, { editable }, { label }, { submit }, { radios }]">
-      <b-button v-if="editable" variant="input-edit" @click="$emit('edit')">
+      <br-button v-if="editable" variant="input-edit" @click="$emit('edit')">
         <edit-icon />
-      </b-button>
+      </br-button>
       <slot />
     </div>
   </div>
 </template>
 
-<script type="text/javascript">
-import BrButton from "./br_button";
+<script>
+import BrButton from "./BrButton";
 import { EditIcon } from "../icons/account";
 
 export default {

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/components/BrFormUpdate.vue

@@ -0,0 +1,18 @@
+<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">
+      update
+    </br-button>
+  </div>
+</template>
+
+<script>
+import BrButton from "./BrButton";
+
+export default {
+  components: {
+    BrButton,
+  },
+};
+</script>

package/components/{br_loader.vue → BrLoader.vue}

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import BrCard from "./br_card";
+import BrCard from "./BrCard";
 
 export default {
   components: {

package/components/{br_skiplink.vue → BrSkiplink.vue}

@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  name: "BrSkiplink",
   props: {
     href: {
       type: String,

package/components/{br_wrap.vue → BrWrap.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['br_wrap',{ title },{ videos },{ thin }]">
+  <div :class="['br-wrap', { title }, { videos }, { thin }]">
     <slot></slot>
   </div>
 </template>
@@ -18,7 +18,7 @@ export default {
     videos: {
       type: Boolean,
       default: false,
-    }
+    },
   },
-}
-</script>
+};
+</script>

package/components/{event_summary.vue → EventSummary.vue}

@@ -5,21 +5,31 @@
       <div :class="$style.title">{{ data.title }}</div>
       <div :class="$style.date_time">{{ data.date_formatted }}</div>
       <div :class="$style.venue">{{ data.venue }}</div>
-      <br-button v-if="!basket && hasSeeInside" variant="link" :class="$style.show_see_inside" @click="showSeeInside = !showSeeInside">See inside</br-button>
+      <br-button
+        v-if="!basket && hasSeeInside"
+        variant="link"
+        :class="$style.show_SeeInside"
+        @click="showSeeInside = !showSeeInside"
+        >See inside</br-button
+      >
     </div>
-    <div :class="$style.see_inside" v-if="!basket && hasSeeInside && showSeeInside">
-      <see-inside v-if="!basket && hasSeeInside" :data="data.see_inside" @closeSeeInside="showSeeInside = !showSeeInside"></see-inside>
+    <div
+      :class="$style.SeeInside"
+      v-if="!basket && hasSeeInside && showSeeInside"
+    >
+      <see-inside
+        v-if="!basket && hasSeeInside"
+        :data="data.SeeInside"
+        @closeSeeInside="showSeeInside = !showSeeInside"
+      ></see-inside>
     </div>
   </div>
-
 </template>
 
 <script>
-
-import SeeInside from './see_inside';
+import SeeInside from "./SeeInside";
 
 export default {
-  name: 'EventSummary',
   components: { SeeInside },
   props: {
     data: {
@@ -33,19 +43,19 @@ export default {
   },
   data() {
     return {
-      showSeeInside: false
-    }
+      showSeeInside: false,
+    };
   },
   computed: {
     wrapperClasses() {
       return [
-          this.$style.event_summary,
-          this.basket ? this.$style.in_basket : ''
-      ]
+        this.$style.EventSummary,
+        this.basket ? this.$style.in_basket : "",
+      ];
     },
     hasSeeInside() {
-      return this.data.see_inside.length > 0;
-    }
+      return this.data.SeeInside.length > 0;
+    },
   },
 };
 </script>
@@ -83,12 +93,12 @@ export default {
   @include subtitle;
 }
 
-.show_see_inside {
+.show_SeeInside {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-.event_summary {
+.EventSummary {
   @include medium-up {
     display: grid;
     grid-template-columns: 20rem auto;
@@ -109,17 +119,17 @@ export default {
   max-width: 100%;
   width: 100%;
   margin-bottom: $gap-instance;
-  
+
   @include medium-up {
     margin-bottom: 0;
   }
 }
 
 .event_info {
-  grid-row-end:2;
+  grid-row-end: 2;
 }
 
-.see_inside {
+.SeeInside {
   grid-column-start: 1;
   grid-column-end: 3;
   margin-top: 1rem;
@@ -127,8 +137,6 @@ export default {
   @include large-up {
     margin-top: 0;
     grid-column-start: 2;
-
   }
 }
-
 </style>

package/components/{fluid_iframe.vue → FluidIframe.vue}

@@ -13,7 +13,6 @@
 
 <script>
 export default {
-  name: "FluidIframe",
   props: {
     src: {
       type: String,