barbican-reset 1.5.9 → 1.6.2

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

@@ -5,7 +5,7 @@
         <div class="title" v-if="title.length > 0 && !toggle">{{ title }}</div>
         <slot />
       </span>
-      <b-button v-if="toggle" variant="invisible" :class="[`exit`, getStatus]" @click="$emit('close')">
+      <b-button v-if="toggle" variant="exit" :class="getStatus" @click="$emit('close')">
         <close-icon :status="getStatus" />
       </b-button>
     </div>
@@ -16,7 +16,7 @@
 import { BButton } from 'bootstrap-vue'
 import { CloseIcon } from 'barbican-reset/icons/stream'
 export default {
-  name: "Alert",
+  name: "BrAlert",
   components: {
     BButton,
     CloseIcon,

package/components/br_form_group.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="br-form-group">
+    <label v-if="label" :for="id">
+      <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
+    </label>
+    <div :class="[`content`,{ editable },{ label },{ submit }]">
+      <b-button v-if="editable" variant="input-edit" @click="$emit('edit')">
+        <edit-icon />
+      </b-button>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  import { BButton } from 'bootstrap-vue'
+  import { EditIcon } from '../icons/account'
+  export default {
+    name: 'BrFormGroup',
+    components: {
+      BButton,
+      EditIcon
+    },
+    props: {
+      label: {
+        type: String
+      },
+      required: {
+        type: Boolean
+      },
+      optional: {
+        type: Boolean
+      },
+      submit: {
+        type: Boolean
+      },
+      editable: {
+        type: Boolean
+      }
+    },
+    computed: {
+      id() {
+        return this.label.toLowerCase().split(" ").join("_");
+      }
+    }
+  }
+</script>

package/components/video_content.vue

@@ -8,7 +8,7 @@
 
       <div v-html="data.markup" :class="$style.brightcove"></div>
 
-      <alert v-if="data.isExpired" error center inline>Event has passed.</alert>
+      <br-alert v-if="data.isExpired" error center inline>Event has passed.</br-alert>
 
     </template>
 
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { FluidIframe, Alert } from 'barbican-reset'
+import { FluidIframe, BrAlert } from 'barbican-reset'
 export default {
   props: {
     data: {
@@ -58,7 +58,7 @@ export default {
       this.data.isExpired = this.data.brightcove.isExpired;
     }
   },
-  components: { FluidIframe, Alert },
+  components: { FluidIframe, BrAlert },
   methods: {
     formatDateTime(date) {
       return this.$moment(date).format("LT ddd D MMM YYYY");

package/helpers/mixins/_buttons.scss

@@ -136,6 +136,15 @@
   @include button-outline($c-grey-night);
 }
 
+@mixin btn-input-edit {
+  @include button-outline($c-grey-steel);
+  background-color: $c-grey-pearl;
+  border-color: $c-border-strong;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  padding: 0.625rem 0.75rem;
+}
+
 @mixin btn-cinema {
   @include button-solid($c-brand-cinema);
 }
@@ -192,15 +201,15 @@
 @mixin btn-exit {
   @include button-link;
   @include focus {
-    @include single-box($c-grey-night);
-    background-color: $white;
+    outline: 0.1875rem solid $c-grey-night;
     border-radius: 50%;
+    box-shadow: none;
 
-    [data-outline], [data-cross] {
+    path.cross {
       fill: $white;
     }
 
-    [data-fill] {
+    path.tint {
       fill: $c-grey-night;
     }
   }

package/helpers/mixins/input/_generic.scss

@@ -8,11 +8,9 @@
     height: $size;
     margin: auto;
     width: $size;
-    right: auto;
     z-index: 3;
     left: 1rem;
-    bottom: 0;
-    top: 0;
+    top: 1rem;
 
     @if $state != disabled {
       cursor: pointer;

package/helpers/mixins/input/_radio.scss

@@ -9,11 +9,4 @@
   @include generic-input($state,$type);
   display: inline-block;
   margin: 0.25rem;
-}
-
-// margin: 0;
-// gap: 1rem;
-
-// &:not(:first-of-type) {
-//   margin-top: 1rem;
-// }
+}

package/helpers/mixins/input/_text.scss

@@ -3,5 +3,11 @@
   border: solid $border-width $c-border-strong;
   padding: 0.875rem 0.875rem 0.75rem;
   background-color: $c-grey-alpine;
-  border-radius: $border-radius-lg;  
+  border-radius: $border-radius-lg;
+  color: $c-grey-night;
+
+  &:disabled, &[readonly] {
+    background-color: $c-grey-alpine;
+    color: $c-grey-steel;
+  }
 }

package/icons/account/edit.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="28" height="28" viewBox="0 0 24 24">
+    <path d="M3,21h3.8L17.8,9.9l-3.8-3.8L3,17.2V21z M5,18.1L14.1,9L15,9.9L5.9,19H5V18.1z M18.4,3.3c-0.4-0.4-1-0.4-1.4,0l-1.8,1.8	l3.8,3.8L20.7,7c0.4-0.4,0.4-1,0-1.4L18.4,3.3z"/>
+  </svg>
+</template>

package/icons/account/index.js

@@ -4,6 +4,7 @@ import VideoIcon from './video'
 import PaymentIcon from './payment'
 import OrdersIcon from './orders'
 import SupportIcon from './support'
+import EditIcon from './edit'
 
 export {
   PersonalIcon,
@@ -11,5 +12,6 @@ export {
   VideoIcon,
   PaymentIcon,
   OrdersIcon,
-  SupportIcon
+  SupportIcon,
+  EditIcon
 }

package/icons/stream/close.vue

@@ -1,7 +1,7 @@
 <template>
-  <svg width="28" viewBox="0 0 20 20">
-    <path class="tint" fill="#fefbfa" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z" />
-    <path class="cross" fill="#353535" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8	S14.4,18,10,18z" />
-    <path class="cross" fill="#353535" d="M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z" />
+  <svg width="28" height="28" viewBox="0 0 20 20">
+    <path class="tint" fill="#ffffff" d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4.1,9-9S14.9,1,10,1z"/>
+    <path class="cross" fill="#353535" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8	s8,3.6,8,8S14.4,18,10,18z M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z"/>
   </svg>
-</template>
+</template>
+

package/index.js

@@ -2,7 +2,6 @@ import Container from './components/container'
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
-import Alert from './components/alert'
 import Loader from './components/loader'
 import RelatedTitle from './components/related_title'
 import RelatedCard from './components/related_card'
@@ -12,7 +11,6 @@ import Placeholder from './components/placeholder'
 import CardDisplay from './components/card_display'
 import FormSection from './components/form_section'
 import FormUpdate from './components/form_update'
-import FormGroup from './components/form_group'
 import RadioGroup from './components/radio_group'
 import FooterUpper from './components/footer_upper'
 import FooterLogos from './components/footer_logos'
@@ -22,11 +20,13 @@ 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 BrButton from './components/br_button'
+import BrFormGroup from './components/br_form_group'
 
 export { 
   Loader, 
-  Alert,
+  BrAlert,
   RelatedTitle,
   RelatedCard,
   RelatedRow,
@@ -37,7 +37,7 @@ export {
   Placeholder,
   FormSection,
   FormUpdate,
-  FormGroup,
+  BrFormGroup,
   RadioGroup,
   EventSummary,
   FooterUpper,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.5.9",
+  "version": "1.6.2",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_alert.scss

@@ -56,10 +56,10 @@ $error_focus: $c-status-error, $c-status-error-fade;
 
   .wrap {
     @include wrap($neutral_wrap...);
-    border-radius: $border-radius;
+    border-radius: $border-radius-lg;
     border-width: $border-width;
+    padding: 0.75rem 0.875rem;
     border-style: solid;
-    padding: $space;
 
     .btn.btn-link, a {
       @include status_focus($neutral_focus...);
@@ -115,15 +115,7 @@ $error_focus: $c-status-error, $c-status-error-fade;
     display: flex;    
   }
 
-  .btn.exit {
-    border-radius: 50%;
-    border: none;
-    padding: 0;
-
-    @include focus {
-      outline: 0.1875rem solid;
-      box-shadow: none;
-    }
+  .btn.btn-exit {
     
     &.error {
       @include exit($error_focus...);

package/scss/_btn.scss

@@ -31,6 +31,10 @@
     @include btn-outline-secondary;
   }
 
+  &.btn-input-edit {
+    @include btn-input-edit;
+  }
+
   &.btn-remove {
     // solid grey, slim
     @include btn-remove;

package/scss/_form-group.scss

@@ -0,0 +1,59 @@
+
+.br-form-group {
+
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 33fr 67fr;
+    align-items: center;
+    gap: $gap-account;
+    display: grid;
+  }
+
+  label {
+    font-weight: normal;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  input {
+    width: 100%;
+    margin: 0;
+  }
+
+  .content {
+
+    &.editable {
+      flex-direction: row-reverse;
+      display: flex;
+
+      input[type=text], input[type=email] {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+        border-right: none;
+      }
+    }
+
+    &:not(.label) {
+      @include media-breakpoint-up(sm) {
+        grid-column: 2 / 3;
+      }
+    }
+    
+    &.submit {
+      justify-content: flex-end;
+      display: flex;
+      gap: 1rem;
+
+      @include media-breakpoint-down(sm) {
+        > button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}

package/scss/index.scss

@@ -15,6 +15,7 @@
 @import "table/index";
 @import "promo";
 @import "alert";
+@import "form-group";
 
 // bootstrap component styles
 @import "btn";

package/components/form_group.vue

@@ -1,92 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <label v-if="label" :for="id">
-      <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
-    </label>
-    <div :class="styleContent">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script type="text/javascript">
-  export default {
-    name: 'FormGroup',
-    props: {
-      label: {
-        type: String
-      },
-      required: {
-        type: Boolean
-      },
-      optional: {
-        type: Boolean
-      },
-      submit: {
-        type: Boolean
-      }
-    },
-    computed: {
-      styleContent() {
-        const style = this.$style;
-        let output = [style.content];
-        if (!this.label) { output.push(style.no_label); }
-        if (this.submit) { output.push(style.submit); }
-        return output;
-      },
-      id() {
-        return this.label.toLowerCase().split(" ").join("_");
-      }
-    }
-  }
-</script>
-
-<style lang="scss" module>
-
-.container {
-
-  &:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: 33fr 67fr;
-    align-items: center;
-    gap: $gap-account;
-    display: grid;
-  }
-
-  label {
-    font-weight: normal;
-
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  input {
-    width: 100%;
-    margin: 0;
-  }
-}
-
-.content {
-
-  &.no_label {
-    @include media-breakpoint-up(sm) {
-      grid-column: 2 / 3;
-    }
-  }
-  
-  &.submit {
-    text-align: right;
-
-    @include media-breakpoint-down(sm) {
-      > button {
-        width: 100%;
-      }
-    }
-  }
-}
-
-</style>