barbican-reset 2.31.0 → 2.33.0

package/components/br_alert.vue

@@ -1,11 +1,15 @@
 <template>
-  <div :class="[`br-alert`,{ center }]" :data-test="`alert-${this.getStatus}`">
-    <div :class="[`wrap`, getStatus,{ inline },{ toggle }]">
-      <span :class="{ flex }">
+  <div :class="[`br-alert`, { center }]" :data-test="`alert-${this.getStatus}`">
+    <div :class="[`wrap`, getStatus, { inline }, { toggle }]">
+      <span :class="[{ flex }, { icon }]">
         <div class="title" v-if="title.length > 0 && !toggle">{{ title }}</div>
         <slot />
       </span>
-      <b-button v-if="toggle" variant="exit" :class="getStatus" @click="$emit('close')">
+      <b-button
+        v-if="toggle"
+        variant="exit"
+        :class="getStatus"
+        @click="$emit('close')">
         <close-icon :status="getStatus" />
       </b-button>
     </div>
@@ -16,17 +20,21 @@
 import { BButton } from 'bootstrap-vue'
 import { CloseIcon } from 'barbican-reset/icons/stream'
 export default {
-  name: "BrAlert",
+  name: 'BrAlert',
   components: {
     BButton,
     CloseIcon,
   },
   computed: {
     getStatus() {
-      if (this.error) { return "error"; }
-      if (this.success) { return "success"; }
-      return "neutral";
-    }
+      if (this.error) {
+        return 'error'
+      }
+      if (this.success) {
+        return 'success'
+      }
+      return 'neutral'
+    },
   },
   props: {
     inline: {
@@ -51,14 +59,16 @@ export default {
     },
     title: {
       type: String,
-      default: ''
+      default: '',
     },
     flex: {
       type: Boolean,
       default: false,
-    }
-  }
-};
-
+    },
+    icon: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
 </script>
-

package/components/br_form_row.vue

@@ -3,7 +3,7 @@
     <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 }]">
+    <div :class="[`content`,{ editable },{ label },{ submit },{ radios }]">
       <b-button v-if="editable" variant="input-edit" @click="$emit('edit')">
         <edit-icon />
       </b-button>
@@ -36,6 +36,9 @@
       },
       editable: {
         type: Boolean
+      },
+      radios: {
+        type: Boolean
       }
     },
     computed: {

package/helpers/mixins/_br-alert.scss

@@ -74,6 +74,13 @@
   display: flex;
 }
 
+@mixin br-alert--icon {
+  grid-auto-flow: column;
+  display: inline-grid;
+  align-items: center;
+  gap: 0.75rem;
+}
+
 @mixin br-alert--setup {
   @include x-small-down {
     font-size: $font-size-sm;
@@ -87,6 +94,10 @@
     @include br-alert--flex;
   }
 
+  .icon {
+    @include br-alert--icon;
+  }
+
   .btn.btn-exit {
     &.error {
       @include br-alert-exit($error_focus...);

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

@@ -26,4 +26,8 @@
     width: 100%;
     margin: 0;
   }
+
+  .content.radios {
+    margin: -0.25rem;
+  }
 }

package/icons/index.js

@@ -1,19 +1,11 @@
-import BarbicanLogo from './barbican'
-import CityOfLondonLogo from './city_of_london'
-import CityOfLondonLockup from './city_of_london_lockup'
+import ArrowBack from './arrow_back'
 import ArrowIcon from './arrow'
+import ArrowForward from './arrow_forward'
 import BackArrow from './back_arrow'
+import BarbicanLogo from './barbican'
 import CartIcon from './cart'
-import ArrowBack from './arrow_back'
-import ArrowForward from './arrow_forward'
+import CityOfLondonLogo from './city_of_london'
+import CityOfLondonLockup from './city_of_london_lockup'
+import InformationIcon from './information'
 
-export {
-  BarbicanLogo,
-  CityOfLondonLogo,
-  CityOfLondonLockup,
-  ArrowIcon,
-  BackArrow,
-  CartIcon,
-  ArrowBack,
-  ArrowForward
-};
+export { ArrowBack, ArrowIcon, ArrowForward, BackArrow, BarbicanLogo, CartIcon, CityOfLondonLogo, CityOfLondonLockup, InformationIcon }

package/icons/information.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20">
+    <path
+      d="M9,15h2V9H9V15z M10,7c0.3,0,0.5-0.1,0.7-0.3S11,6.3,11,6s-0.1-0.5-0.3-0.7C10.5,5.1,10.3,5,10,5S9.5,5.1,9.3,5.3	C9.1,5.5,9,5.7,9,6s0.1,0.5,0.3,0.7S9.7,7,10,7z M10,20c-1.4,0-2.7-0.3-3.9-0.8S3.8,18,2.9,17.1s-1.6-2-2.1-3.2S0,11.4,0,10	s0.3-2.7,0.8-3.9S2,3.8,2.9,2.9s2-1.6,3.2-2.1S8.6,0,10,0s2.7,0.3,3.9,0.8s2.3,1.2,3.2,2.1s1.6,2,2.1,3.2S20,8.6,20,10	s-0.3,2.7-0.8,3.9s-1.2,2.3-2.1,3.2s-2,1.6-3.2,2.1S11.4,20,10,20z M10,18c2.2,0,4.1-0.8,5.7-2.3S18,12.2,18,10s-0.8-4.1-2.3-5.7	S12.2,2,10,2S5.9,2.8,4.3,4.3S2,7.8,2,10s0.8,4.1,2.3,5.7S7.8,18,10,18z" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Information',
+}
+</script>

package/package.json

@@ -103,5 +103,5 @@
     "watch:patterns": "cd patterns && gulp watch"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.31.0"
+  "version": "2.33.0"
 }

package/scss/card/_confirm.scss

@@ -5,10 +5,8 @@
   margin-left: auto;
   max-width: 20rem;
 
-  $gap: 0.625rem;
-
   svg {
-    margin-bottom: $gap;
+    margin-bottom: 0.125rem;
   }
 
   .card-title {
@@ -22,6 +20,6 @@
   }
 
   .card-text {
-    margin-top: $gap;
+    margin-top: 1rem;
   }
 }