barbican-reset 2.41.0 → 2.43.0

package/components/{see_inside.vue → SeeInside.vue}

@@ -1,47 +1,63 @@
 <template>
-  <div :class="$style.see_inside">
-    <div :class="$style.see_inside_content">
+  <div :class="$style.SeeInside">
+    <div :class="$style.SeeInside_content">
       <div :class="$style.venue_sections">
         <div :class="$style.sections_title">
           <span v-if="multipleSeeInside">Section:</span>
-          <b-button
-              variant="exit"
-              @click="$emit('closeSeeInside')"
-              :class="$style.close_mobile"
+          <br-button
+            variant="exit"
+            @click="$emit('closeSeeInside')"
+            :class="$style.close_mobile"
           >
             <close-icon />
-          </b-button>
+          </br-button>
         </div>
-        <br-button variant="link" :class="{[$style.venue_section]: true, [$style.venue_section_active]: visibleMapIndex == index}" v-if="multipleSeeInside" v-for="(item, index) in data" :key="'section-' + index" @click="visibleMapIndex = index">{{item.title}}</br-button>
-        <b-button
-            @click="$emit('closeSeeInside')"
-            variant="exit"
-            :class="$style.close_desktop"
+        <template v-if="multipleSeeInside">
+          <br-button
+            variant="link"
+            :class="{
+              [$style.venue_section]: true,
+              [$style.venue_section_active]: visibleMapIndex == index,
+            }"
+            v-for="(item, index) in data"
+            :key="'section-' + index"
+            @click="visibleMapIndex = index"
+            >{{ item.title }}</br-button
+          >
+        </template>
+
+        <br-button
+          @click="$emit('closeSeeInside')"
+          variant="exit"
+          :class="$style.close_desktop"
         >
           <close-icon />
-        </b-button>
+        </br-button>
       </div>
       <div v-for="(item, index) in data" :key="index">
-        <div :class="$style.see_inside_map" v-if="(visibleMapIndex == index) || !multipleSeeInside" v-html="item.markup"></div>
+        <div
+          :class="$style.SeeInside_map"
+          v-if="visibleMapIndex == index || !multipleSeeInside"
+          v-html="item.markup"
+        ></div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
-
+import BrButton from "./BrButton";
 import { CloseIcon } from "barbican-reset/icons/stream";
 
 export default {
-  name: 'SeeInside',
   components: {
-    CloseIcon
+    BrButton,
+    CloseIcon,
   },
   data() {
     return {
       visibleMapIndex: null,
-    }
+    };
   },
   props: {
     data: {
@@ -54,14 +70,13 @@ export default {
       return this.data.length > 1;
     },
   },
-}
+};
 </script>
 
 <style lang="scss" module>
-
-.see_inside_content {
+.SeeInside_content {
   padding: 1rem;
-  border: 1px solid $c-grey-l87;;
+  border: 1px solid $c-grey-l87;
   border-radius: $br-border-radius;
 }
 
@@ -77,7 +92,7 @@ export default {
   }
   .close_mobile {
     margin-left: auto;
-    
+
     @include small-up {
       display: none;
     }
@@ -110,11 +125,10 @@ export default {
   }
 }
 
-.see_inside_map {
+.SeeInside_map {
   margin-top: 1rem;
   iframe {
     width: 100%;
   }
 }
-
 </style>

package/components/{video_content.vue → VideoContent.vue}

@@ -1,15 +1,13 @@
 <template>
-
   <div>
-
     <fluid-iframe v-if="data.type === 'jwplayer'" :src="data.url" />
 
     <template v-if="data.type === 'brightcove'">
-
       <div v-html="data.markup" :class="$style.brightcove"></div>
 
-      <br-alert v-if="data.isExpired" error center inline>Event has passed.</br-alert>
-
+      <br-alert v-if="data.isExpired" error center inline
+        >Event has passed.</br-alert
+      >
     </template>
 
     <h2 v-html="data.title" class="margin-bottom-1"></h2>
@@ -17,41 +15,36 @@
     <p v-html="data.lead_description"></p>
 
     <template v-if="data.long_description">
-
       <p v-html="data.long_description"></p>
-
     </template>
 
     <template v-if="data.expires">
-
       <p>Until {{ formatDateTime(data.expires) }}</p>
-
     </template>
 
     <template v-if="data.programme">
-
-      <p>Read tonight's <a :href="data.programme" target="_blank">Digital Programme</a></p>
-
+      <p>
+        Read tonight's
+        <a :href="data.programme" target="_blank">Digital Programme</a>
+      </p>
     </template>
-
-  </div>  
-
+  </div>
 </template>
 
 <script>
-import { FluidIframe } from 'barbican-reset'
-import BrAlert from './br_alert'
-import { DateTime } from 'luxon';
+import { FluidIframe } from "barbican-reset";
+import BrAlert from "./BrAlert";
+import { DateTime } from "luxon";
 
 export default {
   props: {
     data: {
-      type: Object
+      type: Object,
     },
     concert: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   created() {
     if (this.concert) {
@@ -64,18 +57,16 @@ export default {
   components: { FluidIframe, BrAlert },
   methods: {
     formatDateTime(date) {
-      return DateTime.fromISO(date).toFormat('h:mm a ccc d LLL yyyy');
-    }
-  }
-}
+      return DateTime.fromISO(date).toFormat("h:mm a ccc d LLL yyyy");
+    },
+  },
+};
 </script>
 
 <style lang="scss" module>
-
 .brightcove {
   border-radius: $br-border-radius-lg;
   margin-bottom: 2rem;
   overflow: hidden;
 }
-
-</style>
+</style>

package/icons/account/membership.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "MembershipIcon",
-};
-</script>

package/icons/account/orders.vue

@@ -15,9 +15,3 @@
     <rect height="2" width="2" x="16" y="10" />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "OrdersIcon",
-};
-</script>

package/icons/account/payment.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "PaymentIcon",
-};
-</script>

package/icons/account/personal.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "PersonalIcon",
-};
-</script>

package/icons/account/support.vue

@@ -11,9 +11,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "SupportIcon",
-};
-</script>

package/icons/account/video.vue

@@ -10,9 +10,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "VideoIcon",
-};
-</script>

package/icons/arrow_back.vue

@@ -1,11 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-    <path d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <path
+      d="M17.51 3.87L15.73 2.1 5.84 12l9.9 9.9 1.77-1.77L9.38 12l8.13-8.13z"
+    />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'ArrowBack'
-}
-</script>

package/icons/arrow_forward.vue

@@ -1,11 +1,10 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-    <polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12" />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'ArrowForward'
-}
-</script>

package/icons/back_arrow.vue

@@ -1,11 +1,10 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'BackArrow'
-}
-</script>

package/icons/city_of_london_lockup.vue

@@ -1,18 +1,23 @@
 <template>
-  <a class="city-of-london-lockup" href="//www.cityoflondon.gov.uk" target="_blank">
+  <a
+    class="city-of-london-lockup"
+    href="//www.cityoflondon.gov.uk"
+    target="_blank"
+  >
     <city-of-london-logo />
     <small>
-      The City of London<br />Corporation is the founder<br />and principal funder of<br />the Barbican Centre
+      The City of London<br />Corporation is the founder<br />and principal
+      funder of<br />the Barbican Centre
     </small>
   </a>
 </template>
 
 <script>
-import CityOfLondonLogo from './city_of_london'
-export default { 
-  name: 'CityOfLondonLockup',
+import CityOfLondonLogo from "./city_of_london";
+
+export default {
   components: {
-    CityOfLondonLogo
-  }
-}
-</script>
+    CityOfLondonLogo,
+  },
+};
+</script>

package/icons/information.vue

@@ -3,14 +3,10 @@
     width="16"
     height="16"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20">
+    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" />
+      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/icons/password/hide.vue

@@ -5,9 +5,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'HidePassword'
-}
-</script>

package/icons/password/show.vue

@@ -5,9 +5,3 @@
     />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'ShowPassword'
-}
-</script>

package/icons/stream/live.vue

@@ -1,11 +1,12 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-    <path d="M7.76,16.24C6.67,15.16,6,13.66,6,12s0.67-3.16,1.76-4.24l1.42,1.42C8.45,9.9,8,10.9,8,12c0,1.1,0.45,2.1,1.17,2.83 L7.76,16.24z M16.24,16.24C17.33,15.16,18,13.66,18,12s-0.67-3.16-1.76-4.24l-1.42,1.42C15.55,9.9,16,10.9,16,12 c0,1.1-0.45,2.1-1.17,2.83L16.24,16.24z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M20,12 c0,2.21-0.9,4.21-2.35,5.65l1.42,1.42C20.88,17.26,22,14.76,22,12s-1.12-5.26-2.93-7.07l-1.42,1.42C19.1,7.79,20,9.79,20,12z M6.35,6.35L4.93,4.93C3.12,6.74,2,9.24,2,12s1.12,5.26,2.93,7.07l1.42-1.42C4.9,16.21,4,14.21,4,12S4.9,7.79,6.35,6.35z"/>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <path
+      d="M7.76,16.24C6.67,15.16,6,13.66,6,12s0.67-3.16,1.76-4.24l1.42,1.42C8.45,9.9,8,10.9,8,12c0,1.1,0.45,2.1,1.17,2.83 L7.76,16.24z M16.24,16.24C17.33,15.16,18,13.66,18,12s-0.67-3.16-1.76-4.24l-1.42,1.42C15.55,9.9,16,10.9,16,12 c0,1.1-0.45,2.1-1.17,2.83L16.24,16.24z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S13.1,10,12,10z M20,12 c0,2.21-0.9,4.21-2.35,5.65l1.42,1.42C20.88,17.26,22,14.76,22,12s-1.12-5.26-2.93-7.07l-1.42,1.42C19.1,7.79,20,9.79,20,12z M6.35,6.35L4.93,4.93C3.12,6.74,2,9.24,2,12s1.12,5.26,2.93,7.07l1.42-1.42C4.9,16.21,4,14.21,4,12S4.9,7.79,6.35,6.35z"
+    />
   </svg>
 </template>
-
-<script>
-export default {
-  name: "LiveIcon"
-};
-</script>

package/icons/wheelchair.vue

@@ -1,12 +1,18 @@
 <template>
-  <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7 4C8.10457 4 9 3.10457 9 2C9 0.89543 8.10457 0 7 0C5.89543 0 5 0.89543 5 2C5 3.10457 5.89543 4 7 4Z" fill="black"/>
-    <path d="M14 11V9.00001C12.46 9.02001 10.91 8.25001 9.93 7.17001L8.64 5.74001C8.47 5.55001 8.26 5.40001 8.03 5.29001C8.02 5.29001 8.02 5.28001 8.01 5.28001H8C7.65 5.08001 7.25 4.98001 6.81 5.02001C5.76 5.11001 5 6.04001 5 7.09001V13C5 14.1 5.9 15 7 15H12V20H14V14.5C14 13.4 13.1 12.5 12 12.5H9V9.05001C10.29 10.12 12.25 10.99 14 11ZM5 18C3.34 18 2 16.66 2 15C2 13.69 2.84 12.59 4 12.17V10.1C1.72 10.56 0 12.58 0 15C0 17.76 2.24 20 5 20C7.42 20 9.44 18.28 9.9 16H7.83C7.42 17.16 6.31 18 5 18Z" fill="black"/>
+  <svg
+    width="14"
+    height="20"
+    viewBox="0 0 14 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7 4C8.10457 4 9 3.10457 9 2C9 0.89543 8.10457 0 7 0C5.89543 0 5 0.89543 5 2C5 3.10457 5.89543 4 7 4Z"
+      fill="black"
+    />
+    <path
+      d="M14 11V9.00001C12.46 9.02001 10.91 8.25001 9.93 7.17001L8.64 5.74001C8.47 5.55001 8.26 5.40001 8.03 5.29001C8.02 5.29001 8.02 5.28001 8.01 5.28001H8C7.65 5.08001 7.25 4.98001 6.81 5.02001C5.76 5.11001 5 6.04001 5 7.09001V13C5 14.1 5.9 15 7 15H12V20H14V14.5C14 13.4 13.1 12.5 12 12.5H9V9.05001C10.29 10.12 12.25 10.99 14 11ZM5 18C3.34 18 2 16.66 2 15C2 13.69 2.84 12.59 4 12.17V10.1C1.72 10.56 0 12.58 0 15C0 17.76 2.24 20 5 20C7.42 20 9.44 18.28 9.9 16H7.83C7.42 17.16 6.31 18 5 18Z"
+      fill="black"
+    />
   </svg>
 </template>
-
-<script>
-export default {
-  name: 'WheelchairIcon'
-}
-</script>

package/index.js

@@ -1,28 +1,37 @@
-import BrAlert from "./components/br_alert";
-import BrAnchor from "./components/br_anchor";
-import BrButton from "./components/br_button";
-import BrCard from "./components/br_card";
-import BrCardText from "./components/br_card_text";
-import BrCardTitle from "./components/br_card_title";
-import BrCardSubTitle from "./components/br_card_sub_title";
-import BrConfirmDone from "./components/br_confirm_done";
-import BrConfirmEmail from "./components/br_confirm_email";
-import BrContainer from "./components/br_container";
-import BrFooterLower from "./components/br_footer/lower";
-import BrFooterUpper from "./components/br_footer/upper";
-import BrFormBlock from "./components/br_form_block";
-import BrFormPassword from "./components/br_form_password";
-import BrFormRow from "./components/br_form_row";
-import BrFormUpdate from "./components/br_form_update";
-import BrLoader from "./components/br_loader";
-import BrSkiplink from "./components/br_skiplink";
-import BrWrap from "./components/br_wrap";
+import BrAlert from "./components/BrAlert";
+import BrAnchor from "./components/BrAnchor";
+import BrButton from "./components/BrButton";
+import BrCard from "./components/BrCard";
+import BrCardText from "./components/BrCardText";
+import BrCardTitle from "./components/BrCardTitle";
+import BrCardSubTitle from "./components/BrCardSubTitle";
+import BrCollapseButton from './components/BrCollapse/Button';
+import BrCollapseContent from './components/BrCollapse/Content';
+import BrConfirmDone from "./components/BrConfirmDone";
+import BrConfirmEmail from "./components/BrConfirmEmail";
+import BrContainer from "./components/BrContainer";
+import BrFooterLower from "./components/BrFooterLower";
+import BrFooterUpper from "./components/BrFooterUpper";
+import BrFormBlock from "./components/BrFormBlock";
+import BrFormCheckbox from "./components/BrFormCheckbox/Component";
+import BrFormCheckboxGroup from "./components/BrFormCheckboxGroup/Component";
+import BrFormGroup from './components/BrFormGroup/Component';
+import BrFormInput from './components/BrFormInput/Component';
+import BrFormPassword from "./components/BrFormPassword";
+import BrFormRadio from './components/BrFormRadio/Component';
+import BrFormRadioGroup from './components/BrFormRadioGroup/Component';
+import BrFormRow from "./components/BrFormRow";
+import BrFormTextarea from './components/BrFormTextarea/Component';
+import BrFormUpdate from "./components/BrFormUpdate";
+import BrLoader from "./components/BrLoader";
+import BrSkiplink from "./components/BrSkiplink";
+import BrWrap from "./components/BrWrap";
 
-import AccountTitle from "./components/account_title";
-import EventSummary from "./components/event_summary";
-import FluidIframe from "./components/fluid_iframe";
-import SeeInside from './components/see_inside'
-import VideoContent from "./components/video_content";
+import AccountTitle from "./components/AccountTitle";
+import EventSummary from "./components/EventSummary";
+import FluidIframe from "./components/FluidIframe";
+import SeeInside from "./components/SeeInside";
+import VideoContent from "./components/VideoContent";
 
 export {
   BrAlert,
@@ -32,14 +41,23 @@ export {
   BrCardSubTitle,
   BrCardText,
   BrCardTitle,
+  BrCollapseButton,
+  BrCollapseContent,
   BrConfirmDone,
   BrConfirmEmail,
   BrContainer,
   BrFooterLower,
   BrFooterUpper,
   BrFormBlock,
+  BrFormCheckbox,
+  BrFormCheckboxGroup,
+  BrFormGroup,
+  BrFormInput,
   BrFormPassword,
+  BrFormRadio,
+  BrFormRadioGroup,
   BrFormRow,
+  BrFormTextarea,
   BrFormUpdate,
   BrLoader,
   BrSkiplink,

package/mixins/inputs.js

@@ -0,0 +1,32 @@
+export default {
+  computed: {
+    generateID() {
+      let random = "random_" + Math.ceil(Math.random() * 1000000);
+
+      return this.id ? this.id : random;
+    },
+    isDefault() {
+      return this.default == this.value;
+    },
+  },
+  methods: {
+    emitInputData({ target }, name = "input") {
+      let { value, checked } = target;
+
+      value = this.toggle ? checked : value;
+
+      let content = this.name ? this.name : name;
+
+      console.log({ content, value });
+
+      this.$emit("change", { content, value });
+    },
+    emitCheckboxGroupData({ value }) {
+      this.store.includes(value)
+        ? (this.store = this.store.filter((item) => item !== value))
+        : this.store.push(value);
+
+      this.$emit("change", this.store);
+    },
+  },
+};

package/package.json

@@ -79,6 +79,7 @@
     "dist/**/*",
     "fonts/*",
     "icons/**/*",
+    "mixins/**/*",
     "patterns/**/*",
     "logos/*",
     "scss/**/*",
@@ -99,5 +100,5 @@
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.41.0"
+  "version": "2.43.0"
 }

package/scss/_br-wrap.scss

@@ -1,15 +1,14 @@
-
-.br_wrap {
+.br-wrap {
   max-width: $layout-width-lg;
   margin-right: auto;
   margin-left: auto;
 
   &.title {
-    max-width: $layout-width-title;    
+    max-width: $layout-width-title;
   }
 
   &.videos {
-    max-width: $layout-width-md;    
+    max-width: $layout-width-md;
   }
 
   &.thin {

package/scss/index.scss

@@ -1,7 +1,3 @@
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
-
 @import "helpers/index";
 
 @include font-face;