barbican-reset 3.17.0 → 3.19.0

package/README.md

@@ -51,7 +51,7 @@ You can reference any of the following components:
 | -------------------- | ------------------- | -------------------- | ---------------- | ------------- |
 | `<br-alert>`         | BrAlert.vue         | .br-alert            | br-alert--setup  | -             |
 | `<br-anchor>`        | BrAnchor.vue        | .btn                 | setup-button     | -             |
-| `<br-button>`        | BrButton.vue        | .br-checkbox         | br-checkbox      | -             |
+| `<br-button>`        | BrButton.vue        | .br-form-checkbox         | br-form-checkbox      | -             |
 | `<br-confirm-done>`  | BrConfirmDone.vue   | -                    | -                | -             |
 | `<br-confirm-email>` | BrConfirmEmail.vue  | -                    | -                | -             |
 | `<br-container>`     | BrContainer.vue     | .br-container--outer | -                | -             |

package/components/BrAlert.vue

@@ -19,7 +19,7 @@
 
 `
 <script>
-import CloseIcon from "#icons/stream/close.vue";
+import CloseIcon from "#icons/close.vue";
 import BrButton from "#components/BrButton.vue";
 
 export default {

package/components/BrButton.vue

@@ -1,6 +1,6 @@
-<template>
-  <!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
+<!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
 
+<template>
   <button
     :class="printClassNames"
     @click="$emit('click')"

package/components/BrCardTitle.vue

@@ -1,3 +1,3 @@
 <template>
-  <h4 class="card-title"><slot /></h4>
+  <div class="card-title"><slot /></div>
 </template>

package/components/BrFormCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-checkbox">
+  <div class="br-form-checkbox">
     <BrFormInput v-bind="$attrs" type="checkbox">
       <slot />
     </BrFormInput>

package/components/BrFormFieldsetNew.vue

@@ -0,0 +1,15 @@
+<template>
+  <div role="group" :aria-labelledby="id" class="fieldset">
+    <div class="wrap-legend">
+      <div :id="id" class="legend">{{ label }}</div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: String,
+  id: String,
+})
+</script>

package/components/BrFormInput.vue

@@ -1,12 +1,20 @@
 <template>
-  <input
-    :autocomplete="generateAutoComplete"
-    :data-test="generateDataTest"
-    :type="generateType"
-    :id="generateID"
-    v-model="model"
-    v-bind="$attrs" />
-  <label v-if="$slots.default" :for="generateID"><slot /></label>
+  <label :for="generateID">
+
+    <input
+      :autocomplete="generateAutoComplete"
+      :data-test="generateDataTest"
+      :type="generateType"
+      :id="generateID"
+      v-model="model"
+      v-bind="$attrs" />
+
+    <span class="label-text">
+      <slot />
+    </span>
+
+  </label>
+
 </template>
 
 <script setup>

package/components/BrFormLabel.vue

@@ -1,8 +1,6 @@
 <template>
   <component :is="!disabled ? 'label' : 'div'" :for="!disabled ? id : null" class="br-form-label">
-    <strong>
-      <slot />
-    </strong>
+    <slot />
     <span v-if="required"> (required)</span>
     <span v-if="optional"> (optional)</span>
   </component>

package/components/BrFormRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-radio">
+  <div :class="['br-radio', slots.default ? 'has-label-text' : 'no-label-text']">
     <BrFormInput v-bind="$attrs" type="radio">
       <slot />
     </BrFormInput>
@@ -8,6 +8,9 @@
 
 <script setup>
 import BrFormInput from '#components/BrFormInput.vue'
+import { useSlots } from 'vue';
+
+const slots = useSlots()
 
 defineOptions({
   inheritAttrs: false,

package/components/BrFormToggle.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="generateClasses">
+    <BrFormLabel>
+      <span>
+        <slot />
+      </span>
+      <BrFormInput v-bind="$attrs" type="checkbox" />
+    </BrFormLabel>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import BrFormLabel from '#components/BrFormLabel.vue'
+import BrFormInput from '#components/BrFormInput.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  class: String
+})
+
+const generateClasses = computed(() => {
+  let result = ['br-form-toggle']
+
+  if (props.class) result.push(props.class)
+
+  return result
+})
+</script>

package/components/BrNavCard.vue

@@ -1,33 +1,33 @@
 <template>
-  <a v-if="to.slice(0, 4) == 'http'" :href="to" class="link-navcard external">
-    <br-card class="navcard external">
-      <div class="wrap-navcard-content">
-        <div class="wrap-navcard-icon">
+  <a v-if="to.startsWith('http')" :href="to" :class="generateClasses">
+    <br-card class="navcard">
+      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
+        <div v-if="$slots.icon" class="wrap-navcard-icon">
           <slot name="icon" />
         </div>
         <div>
-          <br-card-title>
+          <br-card-title v-if="$slots.title">
             <slot name="title" />
           </br-card-title>
-          <br-card-text>
-            <slot name="copy" />
+          <br-card-text v-if="$slots.text">
+            <slot name="text" />
           </br-card-text>
         </div>
       </div>
     </br-card>
   </a>
-  <router-link v-else class="link-navcard" :to="{ name: to }">
+    <router-link v-else class="link-navcard" :to="{ name: to }">
     <br-card class="navcard">
-      <div class="wrap-navcard-content">
-        <div class="wrap-navcard-icon">
+      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
+        <div v-if="$slots.icon" class="wrap-navcard-icon">
           <slot name="icon" />
         </div>
         <div>
-          <br-card-title>
+          <br-card-title v-if="$slots.title">
             <slot name="title" />
           </br-card-title>
-          <br-card-text>
-            <slot name="copy" />
+          <br-card-text v-if="$slots.text">
+            <slot name="text" />
           </br-card-text>
         </div>
       </div>
@@ -36,10 +36,21 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+
+const generateClasses = computed(() => {
+  let result = ['link-navcard']
+
+  if (props.class) result.push(props.class)
+
+  return result
+})
+
 const props = defineProps({
   to: {
     type: String,
     required: true,
   },
+  class: String
 })
 </script>

package/components/BrNavCardWrap.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="br-nav-card-wrap">
+    <slot />
+  </div>
+</template>

package/components/BrOverlay.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="br-overlay-wrap">
+    <div class="br-overlay-content">
+      <slot />
+    </div>
+    <br-button variant="exit-overlay" @click="emit('closeOverlay')">
+      <close-icon class="close-icon" />
+    </br-button>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import BrButton from "#components/BrButton.vue";
+import CloseIcon from "#icons/close.vue";
+
+const emit = defineEmits(["closeOverlay"]);
+
+function listenForKeys({ key }) {
+  if (key == 'Escape') {
+    emit('closeOverlay')    
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', listenForKeys)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', listenForKeys)
+})
+</script>
+

package/components/SeeInside.vue

@@ -44,7 +44,7 @@
 
 <script>
 import BrButton from '#components/BrButton.vue'
-import CloseIcon from '#icons/stream/close.vue'
+import CloseIcon from '#icons/close.vue'
 
 export default {
   components: {

package/icons/back_arrow.vue

@@ -1,10 +1,3 @@
 <template>
-  <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>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path d="M16,7H3.83L9.42,1.41l-1.42-1.41L0,8l8,8,1.41-1.41-5.58-5.59h12.17v-2Z" fill="currentColor" /></svg>
 </template>

package/icons/close.vue

@@ -0,0 +1,7 @@
+<template>
+  <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="currentColor" 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>
+

package/icons/index.js

@@ -1,23 +1,19 @@
-import ArrowBack from "#icons/arrow_back.vue";
-import ArrowIcon from "#icons/arrow.vue";
-import ArrowForward from "#icons/arrow_forward.vue";
 import BackArrow from "#icons/back_arrow.vue";
 import BarbicanLogo from "#icons/barbican.vue";
 import CartIcon from "#icons/cart.vue";
 import CityOfLondonLogo from "#icons/city_of_london.vue";
 import CityOfLondonLockup from "#icons/city_of_london_lockup.vue";
+import CloseIcon from "#icons/close.vue";
 import InformationIcon from "#icons/information.vue";
-
-import PersonIcon from "#icons/person.vue";
+import QrCode from "#icons/qr_code.vue";
 
 export {
-  ArrowBack,
-  ArrowIcon,
-  ArrowForward,
   BackArrow,
   BarbicanLogo,
   CartIcon,
   CityOfLondonLogo,
   CityOfLondonLockup,
+  CloseIcon,
   InformationIcon,
+  QrCode,
 };

package/icons/qr_code.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M55.3902 99.7024V88.6243H66.4683V99.7024H55.3902ZM44.3122 88.6243V60.9292H55.3902V88.6243H44.3122ZM88.6243 72.0073V49.8512H99.7024V72.0073H88.6243ZM77.5463 49.8512V38.7731H88.6243V49.8512H77.5463ZM11.078 60.9292V49.8512H22.1561V60.9292H11.078ZM0 49.8512V38.7731H11.078V49.8512H0ZM49.8512 11.078V0H60.9292V11.078H49.8512ZM8.30853 24.9256H24.9256V8.30853H8.30853V24.9256ZM0 33.2341V0H33.2341V33.2341H0ZM8.30853 91.3938H24.9256V74.7768H8.30853V91.3938ZM0 99.7024V66.4683H33.2341V99.7024H0ZM74.7768 24.9256H91.3938V8.30853H74.7768V24.9256ZM66.4683 33.2341V0H99.7024V33.2341H66.4683ZM77.5463 99.7024V83.0853H66.4683V72.0073H88.6243V88.6243H99.7024V99.7024H77.5463ZM55.3902 60.9292V49.8512H77.5463V60.9292H55.3902ZM33.2341 60.9292V49.8512H22.1561V38.7731H55.3902V49.8512H44.3122V60.9292H33.2341ZM38.7731 33.2341V11.078H49.8512V22.1561H60.9292V33.2341H38.7731ZM12.4628 20.7713V12.4628H20.7713V20.7713H12.4628ZM12.4628 87.2396V78.931H20.7713V87.2396H12.4628ZM78.931 20.7713V12.4628H87.2396V20.7713H78.931Z" fill="currentColor" />
+  </svg>
+</template>

package/icons/stream/index.js

@@ -4,11 +4,9 @@ import ChatIcon from "#icons/stream/chat.vue";
 import CogIcon from "#icons/stream/cog.vue";
 import VolumeIcon from "#icons/stream/volume.vue";
 import LiveIcon from "#icons/stream/live.vue";
-import CloseIcon from "#icons/stream/close.vue";
 
 export {
   AirplayIcon,
-  CloseIcon,
   CastIcon,
   ChatIcon,
   CogIcon,

package/index.js

@@ -25,6 +25,7 @@ import BrFormDate from '#components/BrFormDate.vue'
 import BrFormEdit from '#components/BrFormEdit.vue'
 import BrFormEmail from '#components/BrFormEmail.vue'
 import BrFormFieldset from '#components/BrFormFieldset.vue'
+import BrFormFieldsetNew from '#components/BrFormFieldsetNew.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 import BrFormPassword from '#components/BrFormPassword.vue'
 import BrFormRadio from '#components/BrFormRadio.vue'
@@ -32,12 +33,16 @@ import BrFormRadioGroup from '#components/BrFormRadioGroup.vue'
 import BrFormRow from '#components/BrFormRow.vue'
 import BrFormTel from '#components/BrFormTel.vue'
 import BrFormTextarea from '#components/BrFormTextarea.vue'
+import BrFormToggle from '#components/BrFormToggle.vue'
 import BrFormUpdate from '#components/BrFormUpdate.vue'
 import BrFormVisible from '#components/BrFormVisible.vue'
 
-import BrLoader from '#components/BrLoader.vue'
 import BrNavCard from '#components/BrNavCard.vue'
+import BrNavCardWrap from '#components/BrNavCardWrap.vue'
 import BrNavLink from '#components/BrNavLink.vue'
+import BrOverlay from '#components/BrOverlay.vue'
+
+import BrLoader from '#components/BrLoader.vue'
 import BrSkiplink from '#components/BrSkiplink.vue'
 import BrStatusBars from '#components/BrStatusBars.vue'
 import BrWrap from '#components/BrWrap.vue'
@@ -71,6 +76,7 @@ export {
   BrFormEdit,
   BrFormEmail,
   BrFormFieldset,
+  BrFormFieldsetNew,
   BrFormInput,
   BrFormPassword,
   BrFormRadio,
@@ -78,11 +84,14 @@ export {
   BrFormRow,
   BrFormTel,
   BrFormTextarea,
+  BrFormToggle,
   BrFormUpdate,
   BrFormVisible,
   BrLoader,
   BrNavCard,
+  BrNavCardWrap,
   BrNavLink,
+  BrOverlay,
   BrSkiplink,
   BrStatusBars,
   BrWrap,

package/package.json

@@ -137,5 +137,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "3.17.0"
+  "version": "3.19.0"
 }

package/scss/_br-button.scss

@@ -113,8 +113,15 @@
 /// Membership card button.
 /// Used for membership renewals.
 /// @group Buttons
-.btn.btn-membership-card {
-  @include btn-membership-card;
+.btn.btn-renew-membership {
+  @include btn-renew-membership;
+}
+
+/// Overlay exit button.
+/// Used for closing the overlay.
+/// @group Buttons
+.btn.btn-exit-overlay {
+  @include btn-exit-overlay;
 }
 
 .btn {

package/scss/{_br-checkbox.scss → _br-form-checkbox.scss}

@@ -3,11 +3,10 @@
 @use "mixins/input" as *;
 @use "mixins/focus" as *;
 
-// deprecate custom-checkbox class. br-checkbox is more descriptive
+/// @deprecated custom-checkbox class. br-form-checkbox is more descriptive
 
-.br-checkbox,
-.custom-checkbox {
-  @include br-checkbox; // formerly checkbox-input
+.br-form-checkbox {
+  @include br-form-checkbox; // formerly checkbox-input
 
   input[table][type='checkbox'] {
     @include inset;

package/scss/_br-form-fieldset.scss

@@ -0,0 +1,71 @@
+@use "./mixins/breakpoints" as *;
+
+fieldset, .fieldset {
+  padding: var(--padding-lg) var(--padding-lg) var(--padding-md);
+  border-color: var(--color-black-25-lighten);
+  border-radius: var(--border-radius-sm);
+  border-width: var(--border-width-sm);
+  margin: var(--margin-lg) 0 0;
+  border-style: solid;
+}
+
+.fieldset .legend {
+  background-color: white;
+  display: inline-block;
+  padding: 4px;
+}
+
+.fieldset .wrap-legend {
+  margin-top: calc(var(--margin-xxl) * -1);
+}
+
+@include small-up {
+  .fieldset.table {
+    grid-template-columns: auto repeat(2, 5rem);
+    border-radius: 0;
+    display: grid;
+    padding: 0;
+  }
+
+  .fieldset .wrap-legend {
+    margin-top: 0;
+  }
+
+  .fieldset.table .legend {
+    padding: var(--padding-md);
+  }
+
+  .fieldset.table .br-radio {
+    border-left-color: var(--color-black-25-lighten);
+    border-left-width: var(--border-width-sm);
+    border-left-style: solid;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    margin: 0;
+  }
+
+  .fieldset.table .br-radio label {
+    padding: var(--padding-sm);
+    border-radius: 50%;
+    border-width: 0;
+
+    &:has(input:focus) {
+      outline-width: var(--border-width-sm);
+      outline-style: dashed;
+    }
+
+    &:has(input:checked):has(input:focus) {
+      outline-width: var(--border-width-sm);
+      outline-style: dashed;
+    }
+  }
+
+  .fieldset.table .br-radio input[type=radio] {
+    margin-top: 0;
+  }
+
+  .fieldset.table .br-radio label .label-text {
+    display: none;
+  }
+}

package/scss/_br-form-toggle.scss

@@ -0,0 +1,71 @@
+@use "mixins/input/generic" as *;
+@use "mixins/breakpoints" as *;
+
+.br-form-toggle label {
+  @include generic-input-label;
+
+  @include small-up {
+    max-width: var(--width-layout-xs);
+  }
+
+  & {
+    grid-template-columns: auto 3.25rem;
+    padding-left: var(--padding-md);
+    display: inline-grid;
+    align-items: center;
+    font-weight: normal;
+    height: initial;
+    cursor: pointer;
+    width: 100%;
+    gap: 0.5em;
+  }
+}
+
+.br-form-toggle input[type=checkbox] {
+  background-color: var(--color-black-50-lighten);
+  transition-property: background-color;
+  transition-duration: 200ms;
+  border-radius: 1.125em;
+  position: relative;
+  appearance: none;
+  height: 1.875rem;
+  cursor: inherit;
+  width: 3.25rem;
+  color: white;
+  padding: 0;
+  margin: 0;
+
+  &:focus {
+    outline-color: var(--color-black-50-lighten);
+    outline-offset: var(--border-width-lg);
+    outline-width: var(--border-width-lg);
+    outline-style: solid;
+  }
+}
+
+.br-form-toggle input[type=checkbox]:before {
+  transition-property: transform;
+  transition-duration: 200ms;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  height: 1.65em;
+  bottom: 0.3em;
+  width: 1.65em;
+  left: 0.3em;
+  content: '';
+}
+
+.br-form-toggle input[type=checkbox]:checked:before {
+  -webkit-transform: translateX(1.65em);
+  -ms-transform: translateX(1.65em);
+  transform: translateX(1.65em);
+}
+
+.br-form-toggle input[type=checkbox]:checked {
+  background-color: var(--color-status-success);
+
+  &:focus {
+    outline-color: var(--color-status-success);
+  }
+}

package/scss/_br-nav-card-wrap.scss

@@ -0,0 +1,11 @@
+@use "mixins/breakpoints" as *;
+
+.br-nav-card-wrap {
+  gap: var(--gap-md);
+  display: grid;
+
+  @include medium-up {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--gap-lg);
+  }
+}

package/scss/_br-navlink.scss

@@ -1,5 +1,5 @@
 .br-navlink {
-  border-color: var(--color-black-10-lighten);
+  border-color: var(--color-black-25-lighten);
   border-bottom-width: var(--border-width-sm);
   border-right-width: var(--border-width-sm);
   border-left-width: var(--border-width-sm);
@@ -10,9 +10,11 @@
   background-color: white;
   text-decoration: none;
   border-top-width: 0;
+  align-items: center;
   border-style: solid;
+  gap: var(--gap-xs);
   font-weight: bold;
-  display: block;
+  display: flex;
 }
 
 .br-navlink:first-child {

package/scss/_br-overlay.scss

@@ -0,0 +1,26 @@
+@use "./mixins/core" as *;
+
+.br-overlay-wrap {
+  @include inset;
+
+  & {
+    background-color: var(--color-brand-generic-5-lighten);
+    color: var(--color-black-60-lighten);
+    padding: var(--padding-xxl);
+    align-items: center;
+    overflow: scroll;
+    position: fixed;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    z-index: 5;
+  }
+}
+
+.br-overlay-content {
+  justify-content: center;
+  position: relative;
+  display: flex;
+  width: 100%;
+  z-index: 2;
+}

package/scss/_input.scss

@@ -5,19 +5,18 @@ input::placeholder {
   color: var(--color-black-25-lighten);
 }
 
-input[type='checkbox'],
-input[type='radio'] {
-  margin-bottom: var(--margin-sm);
-  margin-right: var(--margin-sm);
+input[type=checkbox],
+input[type=radio] {
+  margin: 0;
 }
 
-input[type='button'],
-input[type='submit'] {
+input[type=button],
+input[type=submit] {
   border-radius: var(--border-radius-lg);
   appearance: none;
 }
 
-input[type='number'] {
+input[type=number] {
   @include focus {
     @include input-focus-defaults;
   }