barbican-reset 2.2.6 → 2.2.8

package/components/br_form_password.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="br-form-password">
+    <input
+      @input="$emit('input', $event.target.value)"
+      :autocomplete="autocomplete"
+      :data-test="testData"
+      name="password"
+      :value="value"
+      :type="type"
+      required
+      :id="id"
+    />
+    <br-button class="padding-0" @click="showPassword = !showPassword">
+      <span class="sr-only"><template v-if="showPassword">Hide</template><template v-else>Show</template> password</span>
+      <show-password-icon v-if="showPassword" />
+      <hide-password-icon v-else />
+    </br-button>
+  </div>
+</template>
+
+<script>
+import { BrButton } from 'barbican-reset'
+import {
+  HidePasswordIcon,
+  ShowPasswordIcon
+} from 'barbican-reset/icons/password'
+
+export default {
+  name: 'PasswordField',
+  data() {
+    return {
+      password: '',
+      showPassword: false
+    }
+  },
+  components: {
+    HidePasswordIcon,
+    ShowPasswordIcon,
+    BrButton
+  },
+  props: {
+    value: {
+      type: String
+    },
+    id: {
+      type: String,
+      default: 'password'
+    },
+    testData: {
+      type: String,
+      default: 'password-field'
+    }
+  },
+  computed: {
+    type() {
+      return this.showPassword ? 'text' : 'password'
+    },
+    autocomplete() {
+      return this.showPassword ? 'off' : 'current-password'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  padding: 0;
+}
+</style>

package/helpers/mixins/_br-form-password.scss

@@ -0,0 +1,5 @@
+@mixin br-form-password {
+  grid-template-columns: auto 4rem;
+  display: grid;
+  gap: 1rem;
+}

package/helpers/mixins/_buttons.scss

@@ -59,7 +59,7 @@
 
 @mixin solid-button(
   $background: $c-brand-generic,
-  $color: $white,
+  $color: white,
   $border: 1px,
   $padding: false,
   $margin: false,
@@ -110,7 +110,7 @@
 
 @mixin outline-button(
   $color: $c-brand-generic,
-  $background: $white,
+  $background: white,
   $border: 1px,
   $padding: false,
   $margin: false,
@@ -223,7 +223,7 @@
 
 @mixin btn-outline-header {
   @include outline-button(
-    $color: $white,
+    $color: white,
     $background: $c-brand-generic,
     $border: 0.125rem,
     $display: "flex"
@@ -248,7 +248,7 @@
 }
 
 @mixin btn-power-login {
-  @include solid-button($background: $white, $color: $c-power-blue);
+  @include solid-button($background: white, $color: $c-power-blue);
 }
 
 @mixin btn-info {
@@ -285,7 +285,7 @@
 
   @include focus {
     background-color: $c-grey-l44;
-    color: $white;
+    color: white;
   }
 }
 
@@ -304,7 +304,7 @@
     border-radius: 50%;
 
     path.cross {
-      fill: $white;
+      fill: white;
     }
 
     path.tint {
@@ -334,7 +334,7 @@
 }
 
 @mixin btn-membership-card {
-  @include outline-button($color: $white, $background: transparent);
+  @include outline-button($color: white, $background: transparent);
 
   @include focus {
     &.member {
@@ -347,20 +347,20 @@
 }
 
 @mixin btn-video-login {
-  // @include solid-button($background: $white, $color: $c-splash-videos);
+  @include solid-button($background: white, $color: #0a0a0a);
 }
 
 @mixin btn-cta {
   @include solid-button($background: $c-grey-l21, $display: "flex");
-  fill: $white;
+  fill: white;
 }
 
 @mixin btn-carousel {
   @include solid-button($c-grey-l21);
-  @include single-box($white);
+  @include single-box(white);
   border-radius: 50%;
   font-size: 0;
-  fill: $white;
+  fill: white;
 
   @include media-breakpoint-down(lg) {
     padding: 0.75rem;
@@ -378,7 +378,7 @@
 }
 
 @mixin btn-menu-focus($brand: $c-brand-generic) {
-  background-color: $white;
+  background-color: white;
   color: $brand;
 
   path {
@@ -389,7 +389,7 @@
 @mixin btn-menu {
   @include display-button(flex, 0.75);
   @include outline-button(
-    $color: $white,
+    $color: white,
     $background: $c-brand-generic,
     $padding: 0 0.75rem,
     $margin: 0.25rem,
@@ -410,7 +410,7 @@
 @mixin btn-basket {
   @include display-button(flex, 0.5);
   @include solid-button(
-    $background: $white,
+    $background: white,
     $color: $c-brand-generic,
     $padding: 0 0.75rem,
     $margin: 0.25rem,

package/helpers/mixins/index.scss

@@ -1,4 +1,3 @@
-
 @mixin inset($val: 0) {
   bottom: $val;
   right: $val;
@@ -7,7 +6,7 @@
 }
 
 @mixin sr-only {
-  clip: rect(0,0,0,0);
+  clip: rect(0, 0, 0, 0);
   position: absolute;
   overflow: hidden;
   margin: -1px;
@@ -17,21 +16,22 @@
   border: 0;
 }
 
-@import "br-alert";
-@import "br-form-row";
-@import "br-form-update";
-@import "br-footer";
-@import "account/orders";
-@import "basket";
-@import "buttons";
-@import "card";
-@import "content";
-@import "city-of-london";
-@import "core";
-@import "drupal/index.scss";
-@import "festival";
-@import "focus";
-@import "font";
-@import "loading";
-@import "input";
-@import "table";
+@import 'br-alert';
+@import 'br-form-row';
+@import 'br-form-update';
+@import 'br-form-password';
+@import 'br-footer';
+@import 'account/orders';
+@import 'basket';
+@import 'buttons';
+@import 'card';
+@import 'content';
+@import 'city-of-london';
+@import 'core';
+@import 'drupal/index.scss';
+@import 'festival';
+@import 'focus';
+@import 'font';
+@import 'loading';
+@import 'input';
+@import 'table';

package/icons/password/hide.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 48 48" width="30">
+    <path
+      d="M40.8,44.8l-8.4-8.2c-1.2,0.5-2.5,0.8-4,1.1C27,37.9,25.5,38,24,38c-4.9,0-9.3-1.4-13.2-4.1S3.9,27.6,2,23	c0.7-1.7,1.6-3.4,2.8-5.1s2.6-3.2,4.3-4.7L2.8,6.9l2.1-2.2l37.8,37.8L40.8,44.8z M24,31.5c0.5,0,1,0,1.5-0.1s1-0.2,1.4-0.4L16,20.1	c-0.2,0.4-0.3,0.9-0.4,1.4s-0.1,1-0.1,1.5c0,2.4,0.8,4.4,2.5,6C19.7,30.7,21.7,31.5,24,31.5z M37.9,33.5L31.5,27	c0.3-0.5,0.6-1.2,0.8-1.9c0.2-0.7,0.3-1.4,0.3-2.2c0-2.4-0.8-4.4-2.5-6c-1.6-1.7-3.7-2.5-6-2.5c-0.7,0-1.4,0.1-2.1,0.2	c-0.7,0.2-1.3,0.4-1.9,0.8L14.4,10c1.2-0.5,2.7-1,4.5-1.4C20.7,8.2,22.5,8,24.2,8c4.8,0,9.1,1.4,13.1,4.1S44.2,18.4,46,23	c-0.9,2.1-2,4.1-3.3,5.9S39.7,32.2,37.9,33.5z M29.3,24.9l-7.1-7.1c1-0.4,2-0.4,3-0.2c1,0.2,1.9,0.7,2.7,1.4	c0.8,0.8,1.3,1.6,1.6,2.6C29.8,22.5,29.7,23.6,29.3,24.9z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'HidePassword'
+}
+</script>

package/icons/password/index.js

@@ -0,0 +1,4 @@
+import HidePasswordIcon from './hide'
+import ShowPasswordIcon from './show'
+
+export { HidePasswordIcon, ShowPasswordIcon }

package/icons/password/show.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg width="30" viewBox="0 0 48 48">
+    <path
+      d="M24,38c-4.9,0-9.3-1.4-13.2-4.2S3.9,27.5,2,23c1.9-4.5,4.9-8.1,8.8-10.9S19.1,8,24,8s9.3,1.4,13.2,4.1S44.1,18.5,46,23	c-1.9,4.5-4.9,8.1-8.8,10.8S28.9,38,24,38z M24,32.3c2.6,0,4.8-0.9,6.6-2.7c1.9-1.8,2.7-4.1,2.7-6.6s-0.9-4.8-2.7-6.6	c-1.8-1.9-4.1-2.8-6.6-2.8s-4.8,0.9-6.6,2.8c-1.9,1.8-2.8,4.1-2.8,6.6s0.9,4.8,2.8,6.6C19.2,31.5,21.4,32.3,24,32.3z M24,28.6	c-1.6,0-2.9-0.5-4-1.6s-1.6-2.4-1.6-4s0.5-2.9,1.6-4s2.4-1.6,4-1.6s2.9,0.5,4,1.6s1.6,2.4,1.6,4s-0.5,2.9-1.6,4S25.6,28.6,24,28.6z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ShowPassword'
+}
+</script>

package/index.js

@@ -1,34 +1,35 @@
-import EventSummary from './components/event_summary'
-import AccountTitle from './components/account_title'
-import RelatedTitle from './components/related_title'
-import RelatedCard from './components/related_card'
-import RelatedRow from './components/related_row'
-import TypeText from './components/type_text'
-import Placeholder from './components/placeholder'
-import CardDisplay from './components/card_display'
-import FluidIframe from './components/fluid_iframe'
-import HelpRow from './components/help_row'
-import VideoContent from './components/video_content'
-import PaymentLogo from './components/payment_logo'
-import SkipLink from './components/skip_link'
+import EventSummary from "./components/event_summary";
+import AccountTitle from "./components/account_title";
+import RelatedTitle from "./components/related_title";
+import RelatedCard from "./components/related_card";
+import RelatedRow from "./components/related_row";
+import TypeText from "./components/type_text";
+import Placeholder from "./components/placeholder";
+import CardDisplay from "./components/card_display";
+import FluidIframe from "./components/fluid_iframe";
+import HelpRow from "./components/help_row";
+import VideoContent from "./components/video_content";
+import PaymentLogo from "./components/payment_logo";
+import SkipLink from "./components/skip_link";
 
-import BrAlert from './components/br_alert'
-import BrAnchor from './components/br_anchor'
-import BrButton from './components/br_button'
-import BrConfirmDone from './components/br_confirm_done'
-import BrConfirmEmail from './components/br_confirm_email'
-import BrContainer from './components/br_container'
-import BrFormBlock from './components/br_form_block'
-import BrFormRow from './components/br_form_row'
-import BrFormUpdate from './components/br_form_update'
-import BrLoader from './components/br_loader'
-import BrWrap from './components/br_wrap'
+import BrAlert from "./components/br_alert";
+import BrAnchor from "./components/br_anchor";
+import BrButton from "./components/br_button";
+import BrConfirmDone from "./components/br_confirm_done";
+import BrConfirmEmail from "./components/br_confirm_email";
+import BrContainer from "./components/br_container";
+import BrFormBlock from "./components/br_form_block";
+import BrFormRow from "./components/br_form_row";
+import BrFormUpdate from "./components/br_form_update";
+import BrFormPassword from "./components/br_form_password";
+import BrLoader from "./components/br_loader";
+import BrWrap from "./components/br_wrap";
 
-import BrFooterUpper from './components/br_footer/upper'
-import BrFooterLower from './components/br_footer/lower'
+import BrFooterUpper from "./components/br_footer/upper";
+import BrFooterLower from "./components/br_footer/lower";
 
-export { 
-  BrLoader, 
+export {
+  BrLoader,
   BrAlert,
   RelatedTitle,
   RelatedCard,
@@ -39,6 +40,7 @@ export {
   Placeholder,
   BrFormBlock,
   BrFormUpdate,
+  BrFormPassword,
   BrFormRow,
   EventSummary,
   BrFooterLower,
@@ -53,5 +55,5 @@ export {
   BrAnchor,
   BrConfirmDone,
   BrConfirmEmail,
-  BrWrap
-};
+  BrWrap,
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "_args": [
     [
-      "barbican-reset@2.2.6",
+      "barbican-reset@2.2.8",
       "/Users/pheading/Sites/eticketing-vue"
     ]
   ],
-  "_from": "barbican-reset@2.2.6",
-  "_id": "barbican-reset@2.2.6",
+  "_from": "barbican-reset@2.2.8",
+  "_id": "barbican-reset@2.2.8",
   "_inBundle": false,
   "_integrity": "sha512-9QMrzuoZ/NZfFlFagC6go3ofn5hBhU9rtSPEeGH0krwY5dBKOlfs8oGIvqUaEGFKI+jQ3spuDOQoeyYK5NRiQw==",
   "_location": "/barbican-reset",
@@ -35,18 +35,18 @@
   "_requested": {
     "type": "version",
     "registry": true,
-    "raw": "barbican-reset@2.2.6",
+    "raw": "barbican-reset@2.2.8",
     "name": "barbican-reset",
     "escapedName": "barbican-reset",
-    "rawSpec": "2.2.6",
+    "rawSpec": "2.2.8",
     "saveSpec": null,
-    "fetchSpec": "2.2.6"
+    "fetchSpec": "2.2.8"
   },
   "_requiredBy": [
     "/"
   ],
-  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.6.tgz",
-  "_spec": "2.2.6",
+  "_resolved": "https://registry.npmjs.org/barbican-reset/-/barbican-reset-2.2.8.tgz",
+  "_spec": "2.2.8",
   "_where": "/Users/pheading/Sites/eticketing-vue",
   "author": {
     "name": "Paul Heading"
@@ -100,5 +100,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.2.6"
+  "version": "2.2.8"
 }

package/scss/_atomic.scss

@@ -62,6 +62,10 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
   margin: 0;
 }
 
+.padding-0 {
+  padding: 0;
+}
+
 .margin-bottom-0 {
   margin-bottom: 0;
 }

package/scss/_br-form-password.scss

@@ -0,0 +1,3 @@
+.br-form-password {
+  @include br-form-password;
+}

package/scss/_br-form-update.scss

@@ -1,8 +1,7 @@
-
 .br-form-update {
   @include br-form-update;
 }
 
 .br-form-update--input {
   @include br-form-update--input;
-}
+}

package/scss/index.scss

@@ -14,6 +14,7 @@
 
 @import 'br-alert';
 @import 'br-container';
+@import 'br-form-password';
 @import 'br-form-row';
 @import 'br-form-update';
 @import 'br-loader';