barbican-reset 2.41.0 → 2.43.0

package/README.md

@@ -47,32 +47,32 @@ The component library is currently **only available to Vue.js** apps.
 
 You can reference any of the following components:
 
-| Component            | Filename             | SCSS Class           | SCSS Mixin       | Previously    |
-| -------------------- | -------------------- | -------------------- | ---------------- | ------------- |
-| `<br-alert>`         | br_alert.vue         | .br-alert            | br-alert--setup  | -             |
-| `<br-anchor>`        | br_anchor.vue        | .btn                 | setup-button     | -             |
-| `<br-button>`        | br_button.vue        | .br-checkbox         | br-checkbox      | -             |
-| `<br-confirm-done>`  | br_confirm_done.vue  | -                    | -                | -             |
-| `<br-confirm-email>` | br_confirm_email.vue | -                    | -                | -             |
-| `<br-container>`     | br_container.vue     | .br-container--outer | -                | -             |
-| `<br-footer-lower>`  | br_footer_lower.vue  | .br-footer-lower     | br-footer-lower  | -             |
-| `<br-footer-upper>`  | br_footer_upper.vue  | .br-footer-upper     | br-footer-upper  | -             |
-| `<br-form-block>`    | br_form_block.vue    | -                    | -                | -             |
-| `<br-form-password>` | br_form_password.vue | .br-form-password    | br-form-password | -             |
-| `<br-form-row>`      | br_form_row.vue      | .br-form-row         | br-form-row      | -             |
-| `<br-form-update>`   | br_form_update.vue   | .br-form-update      | br-form-update   | -             |
-| `<br-loader>`        | br_loader.vue        | .br-loader           | -                | -             |
-| `<br-skiplink>`      | br_skiplink.vue      | -                    | -                | `<skip-link>` |
-| `<br-wrap>`          | br_wrap.vue          | .br-wrap             | -                | -             |
+| Component            | Filename            | SCSS Class           | SCSS Mixin       | Previously    |
+| -------------------- | ------------------- | -------------------- | ---------------- | ------------- |
+| `<br-alert>`         | BrAlert.vue         | .br-alert            | br-alert--setup  | -             |
+| `<br-anchor>`        | BrAnchor.vue        | .btn                 | setup-button     | -             |
+| `<br-button>`        | BrButton.vue        | .br-checkbox         | br-checkbox      | -             |
+| `<br-confirm-done>`  | BrConfirmDone.vue   | -                    | -                | -             |
+| `<br-confirm-email>` | BrConfirmEmail.vue  | -                    | -                | -             |
+| `<br-container>`     | BrContainer.vue     | .br-container--outer | -                | -             |
+| `<br-footer-lower>`  | br_footer_lower.vue | .br-footer-lower     | br-footer-lower  | -             |
+| `<br-footer-upper>`  | br_footer_upper.vue | .br-footer-upper     | br-footer-upper  | -             |
+| `<br-form-block>`    | BrFormBlock.vue     | -                    | -                | -             |
+| `<br-form-password>` | BrFormPassword.vue  | .br-form-password    | br-form-password | -             |
+| `<br-form-row>`      | BrFormRow.vue       | .br-form-row         | br-form-row      | -             |
+| `<br-form-update>`   | BrFormUpdate.vue    | .br-form-update      | br-form-update   | -             |
+| `<br-loader>`        | BrLoader.vue        | .br-loader           | -                | -             |
+| `<br-skiplink>`      | BrSkiplink.vue      | -                    | -                | `<skip-link>` |
+| `<br-wrap>`          | BrWrap.vue          | .br-wrap             | -                | -             |
 
 The following component titles are deprecated. You can still use them, but they will migrate to the BR naming convention in future.
 
 | Component         | Filename          | SCSS Class | SCSS Mixin |
 | ----------------- | ----------------- | ---------- | ---------- |
-| `<account-title>` | account_title.vue | -          | -          |
+| `<account-title>` | AccountTitle.vue  | -          | -          |
 | `<card-display>`  | card_display.vue  | -          | -          |
-| `<event-summary>` | event_summary.vue | -          | -          |
-| `<fluid-iframe>`  | fluid_iframe.vue  | -          | -          |
+| `<event-summary>` | EventSummary.vue  | -          | -          |
+| `<fluid-iframe>`  | FluidIframe.vue   | -          | -          |
 | `<help-row>`      | help_row.vue      | -          | -          |
 | `<placeholder>`   | placeholder.vue   | -          | -          |
 | `<payment-logo>`  | payment_logo.vue  | -          | -          |
@@ -80,7 +80,7 @@ The following component titles are deprecated. You can still use them, but they
 | `<related-title>` | related_title.vue | -          | -          |
 | `<related-row>`   | related_row.vue   | -          | -          |
 | `<type-text>`     | type_text.vue     | -          | -          |
-| `<video-content>` | video_content.vue | -          | -          |
+| `<video-content>` | VideoContent.vue  | -          | -          |
 
 ```
 The BR naming convention imitates the Bootstrap example. This format is useful for two reasons:

package/components/{account_title.vue → AccountTitle.vue}

@@ -5,24 +5,22 @@
 </template>
 
 <script>
-export default { 
-  name: 'AccountTitle',
+export default {
   props: {
     placeholder: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   computed: {
     styleTitle() {
       return this.placeholder ? this.$style.placeholder : this.$style.title;
-    }
-  } 
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" module>
-
 @mixin title {
   margin-bottom: 1.25rem;
 
@@ -40,5 +38,4 @@ export default {
   @include placeholder;
   width: 30%;
 }
-
-</style>
+</style>

package/components/{br_alert.vue → BrAlert.vue}

@@ -19,10 +19,9 @@
 
 <script>
 import { CloseIcon } from "barbican-reset/icons/stream";
-import BrButton from "./br_button";
+import BrButton from "./BrButton";
 
 export default {
-  name: "BrAlert",
   components: {
     BrButton,
     CloseIcon,

package/components/BrAnchor.vue

@@ -0,0 +1,34 @@
+<template>
+  <a
+    v-on:click="loading = true"
+    :href="href"
+    :class="variant ? `btn btn-${variant}` : ``"
+  >
+    <slot v-if="!loading" />
+
+    <dot-typing v-else />
+  </a>
+</template>
+
+<script>
+import { DotTyping } from "./BrButton/components";
+
+export default {
+  data() {
+    return {
+      loading: false,
+    };
+  },
+  props: {
+    variant: {
+      type: String,
+    },
+    href: {
+      type: String,
+    },
+  },
+  components: {
+    DotTyping,
+  },
+};
+</script>

package/components/BrButton/dot_typing.vue

@@ -0,0 +1,60 @@
+<template>
+  <!-- https://codepen.io/nzbin/pen/GGrXbp -->
+
+  <div>
+    <svg
+      ref="a"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+    >
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+
+    <svg
+      ref="b"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+    >
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+
+    <svg
+      ref="c"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+    >
+      <path d="M12,7c0,2.8-2.2,5-5,5S2,9.8,2,7s2.2-5,5-5S12,4.2,12,7z" />
+    </svg>
+  </div>
+</template>
+
+<script>
+import { gsap } from "gsap";
+export default {
+  mounted() {
+    const tl = gsap.timeline({ repeat: 9 });
+    const a = this.$refs.a;
+    const b = this.$refs.b;
+    const c = this.$refs.c;
+    const dots = [a, b, c];
+    const speed = 0.3;
+
+    tl.to(dots, {
+      stagger: speed,
+      keyframes: [
+        { y: -8, duration: speed },
+        { y: 0, duration: speed },
+      ],
+    });
+  },
+};
+</script>

package/components/{br_button → BrButton}/remove_ticket.vue

@@ -1,31 +1,24 @@
 <template>
   <div>
-
     <template v-if="state === 'default'">
       <template v-if="$slots.default">
         <slot name="default" />
       </template>
-      <template v-else>
-        remove
-      </template>
+      <template v-else> remove </template>
     </template>
 
     <template v-else-if="state === 'loading'">
       <template v-if="$slots.loading">
         <slot name="loading" />
       </template>
-      <template v-else>
-        removing&nbsp;...
-      </template>
+      <template v-else> removing&nbsp;... </template>
     </template>
 
     <template v-else-if="state === 'loaded'">
       <template v-if="$slots.loaded">
         <slot name="loaded" />
       </template>
-      <template v-else>
-        removed!
-      </template>
+      <template v-else> removed! </template>
     </template>
 
     <template v-else-if="state === 'error'">
@@ -36,22 +29,18 @@
         {{ state.toUpperCase() }}
       </template>
     </template>
-
-  </div>  
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'RemoveTicket',
   props: {
     state: {
       type: String,
-      default: "default"
-    }
+      default: "default",
+    },
   },
-}
+};
 </script>
 
-<style>
-
-</style>
+<style></style>

package/components/{br_button.vue → BrButton.vue}

@@ -2,10 +2,10 @@
   <!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
 
   <button
+    :class="printClassNames"
     @click="$emit('click')"
     :aria-busy="loading"
     aria-live="polite"
-    :variant="variant"
     :type="type"
   >
     <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
@@ -53,7 +53,7 @@
 </template>
 
 <script>
-import { RemoveTicket, DotTyping } from "./br_button/components";
+import { RemoveTicket, DotTyping } from "./BrButton/components";
 
 export default {
   props: {
@@ -63,6 +63,7 @@ export default {
     },
     variant: {
       type: String,
+      default: "secondary",
     },
     type: {
       type: String,
@@ -82,6 +83,9 @@ export default {
     loading() {
       return this.state === "loading" ? "true" : "false";
     },
+    printClassNames() {
+      return "btn btn-" + this.variant;
+    },
   },
   components: {
     RemoveTicket,

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/{br_confirm_done.vue → BrConfirmDone.vue}

@@ -9,9 +9,9 @@
 </template>
 
 <script>
-import BrCard from "./br_card";
-import BrCardTitle from "./br_card_title";
-import BrCardText from "./br_card_text";
+import BrCard from "./BrCard";
+import BrCardTitle from "./BrCardTitle";
+import BrCardText from "./BrCardText";
 
 import Animations from "barbican-reset/animations";
 import { DoneIcon } from "barbican-reset/icons/confirm";

package/components/{br_confirm_email.vue → BrConfirmEmail.vue}

@@ -11,9 +11,9 @@
 </template>
 
 <script>
-import BrCard from "./br_card";
-import BrCardTitle from "./br_card_title";
-import BrCardText from "./br_card_text";
+import BrCard from "./BrCard";
+import BrCardTitle from "./BrCardTitle";
+import BrCardText from "./BrCardText";
 
 import Animations from "barbican-reset/animations";
 import { EmailIcon } from "barbican-reset/icons/confirm";

package/components/{br_container.vue → BrContainer.vue}

@@ -8,52 +8,62 @@
 
 <script>
 export default {
-  name: 'BrContainer',
   props: {
     splash: {
       type: Boolean,
-      default: false
+      default: false,
     },
     masthead: {
       type: Boolean,
-      default: false
+      default: false,
     },
     thin: {
       type: Boolean,
-      default: false
+      default: false,
     },
     header: {
       type: Boolean,
-      default: false
+      default: false,
     },
     footer: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   computed: {
     styleOuter() {
       const style = this.$style;
       let output = [style.outer];
-      if (this.masthead) { output.push(style.masthead); }
-      if (this.splash) { output.push(style.splash); }
+      if (this.masthead) {
+        output.push(style.masthead);
+      }
+      if (this.splash) {
+        output.push(style.splash);
+      }
       return output;
     },
     styleInner() {
       const style = this.$style;
       let output = [style.inner];
-      if (this.masthead) { output.push(style.masthead); }
-      if (this.thin) { output.push(style.thin); }
-      if (this.header) { output.push(style.header); }
-      if (this.footer) { output.push(style.footer); }
+      if (this.masthead) {
+        output.push(style.masthead);
+      }
+      if (this.thin) {
+        output.push(style.thin);
+      }
+      if (this.header) {
+        output.push(style.header);
+      }
+      if (this.footer) {
+        output.push(style.footer);
+      }
       return output;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" module>
-
 .outer {
   padding-right: 5%;
   padding-left: 5%;
@@ -87,9 +97,9 @@ export default {
     padding-bottom: 1.875rem;
     padding-top: 1.875rem;
   }
-  
+
   &.thin {
-    max-width: $layout-width-sm;  
+    max-width: $layout-width-sm;
   }
 
   &.masthead {
@@ -103,5 +113,4 @@ export default {
     }
   }
 }
-
-</style>
+</style>

package/components/{br_footer/lower.vue → BrFooterLower.vue}

@@ -3,9 +3,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default { 
-  name: 'BrFooterLower'
-}
-</script>

package/components/{br_footer/upper.vue → BrFooterUpper.vue}

@@ -5,13 +5,12 @@
 </template>
 
 <script>
-export default { 
-  name: 'BrFooterUpper',
+export default {
   props: {
     splash: {
       type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
+      default: false,
+    },
+  },
+};
+</script>

package/components/{br_form_block.vue → BrFormBlock.vue}

@@ -4,14 +4,7 @@
   </div>
 </template>
 
-<script type="text/javascript">
-  export default {
-    name: 'BrFormBlock',
-  }
-</script>
-
 <style lang="scss" module>
-
 .container {
   @include fontfamily-black;
   padding: 0.875rem 0.75rem 0.625rem 0.75rem;
@@ -19,5 +12,4 @@
   background: $c-grey-l96;
   margin-bottom: 1rem;
 }
-
 </style>

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>