barbican-reset 2.40.0 → 2.42.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/{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/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/{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/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>