barbican-reset 1.6.1 → 1.6.2

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

@@ -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);
 }

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/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.6.1",
+  "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...);

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>