barbican-reset 3.35.0 → 3.39.0

package/index.js

@@ -1,102 +1,52 @@
-import BrAlert from '#components/BrAlert.vue'
-import BrAnchor from '#components/BrAnchor.vue'
-import BrButton from '#components/BrButton.vue'
-
-import BrCard from '#components/BrCard.vue'
-import BrCardBody from '#components/BrCardBody.vue'
-import BrCardText from '#components/BrCardText.vue'
-import BrCardTitle from '#components/BrCardTitle.vue'
-import BrCardSubtitle from '#components/BrCardSubtitle.vue'
-import BrCardTearoff from '#components/BrCardTearoff.vue'
-
-import BrCollapseButton from '#components/BrCollapse/Button.vue'
-import BrCollapseContent from '#components/BrCollapse/Content.vue'
-
-import BrConfirmDone from '#components/BrConfirmDone.vue'
-import BrConfirmEmail from '#components/BrConfirmEmail.vue'
-
-import BrContainer from '#components/BrContainer.vue'
-import BrDetails from '#components/BrDetails.vue'
-import BrFooterLower from '#components/BrFooterLower.vue'
-import BrFooterUpper from '#components/BrFooterUpper.vue'
-
-import BrFormBlock from '#components/BrFormBlock.vue'
-import BrFormCheckbox from '#components/BrFormCheckbox.vue'
-import BrFormCheckboxGroup from '#components/BrFormCheckboxGroup.vue'
-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 BrFormInput from '#components/BrFormInput.vue'
-import BrFormLabel from '#components/BrFormLabel.vue'
-import BrFormPassword from '#components/BrFormPassword.vue'
-import BrFormRadio from '#components/BrFormRadio.vue'
-import BrFormRadioGroup from '#components/BrFormRadioGroup.vue'
-import BrFormRow from '#components/BrFormRow.vue'
-import BrFormSelect from '#components/BrFormSelect.vue'
-import BrFormSelectItem from '#components/BrFormSelectItem.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 BrLink from '#components/BrLink.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 BrTableCell from '#components/BrTableCell.vue'
-import BrTableHeader from '#components/BrTableHeader.vue'
-import BrTableRow from '#components/BrTableRow.vue'
-import BrWrap from '#components/BrWrap.vue'
-
-export {
-  BrAlert,
-  BrAnchor,
-  BrButton,
-  BrCard,
-  BrCardBody,
-  BrCardSubtitle,
-  BrCardText,
-  BrCardTitle,
-  BrCardTearoff,
-  BrCollapseButton,
-  BrCollapseContent,
-  BrConfirmDone,
-  BrConfirmEmail,
-  BrContainer,
-  BrDetails,
-  BrFormDate,
-  BrFooterLower,
-  BrFooterUpper,
-  BrFormBlock,
-  BrFormCheckbox,
-  BrFormCheckboxGroup,
-  BrFormEdit,
-  BrFormEmail,
-  BrFormFieldset,
-  BrFormInput,
-  BrFormLabel,
-  BrFormPassword,
-  BrFormRadio,
-  BrFormRadioGroup,
-  BrFormRow,
-  BrFormSelect,
-  BrFormSelectItem,
-  BrFormTel,
-  BrFormTextarea,
-  BrFormToggle,
-  BrFormUpdate,
-  BrFormVisible,
-  BrLink,
-  BrLoader,
-  BrOverlay,
-  BrSkiplink,
-  BrStatusBars,
-  BrTableCell,
-  BrTableHeader,
-  BrTableRow,
-  BrWrap,
-}
+export { default as BrAlert } from '#components/BrAlert.vue'
+export { default as BrButton } from '#components/BrButton.vue'
+
+export { default as BrCard } from '#components/BrCard.vue'
+export { default as BrCardBody } from '#components/BrCardBody.vue'
+export { default as BrCardSubtitle } from '#components/BrCardSubtitle.vue'
+export { default as BrCardText } from '#components/BrCardText.vue'
+export { default as BrCardTearoff } from '#components/BrCardTearoff.vue'
+export { default as BrCardTitle } from '#components/BrCardTitle.vue'
+
+export { default as BrCollapseButton } from '#components/BrCollapse/Button.vue'
+export { default as BrCollapseContent } from '#components/BrCollapse/Content.vue'
+
+export { default as BrConfirmDone } from '#components/BrConfirmDone.vue'
+export { default as BrConfirmEmail } from '#components/BrConfirmEmail.vue'
+
+export { default as BrContainer } from '#components/BrContainer.vue'
+export { default as BrDetails } from '#components/BrDetails.vue'
+export { default as BrFooterLower } from '#components/BrFooterLower.vue'
+export { default as BrFooterUpper } from '#components/BrFooterUpper.vue'
+
+export { default as BrFormBlock } from '#components/BrFormBlock.vue'
+export { default as BrFormCheckbox } from '#components/BrFormCheckbox.vue'
+export { default as BrFormCheckboxGroup } from '#components/BrFormCheckboxGroup.vue'
+export { default as BrFormDate } from '#components/BrFormDate.vue'
+export { default as BrFormEdit } from '#components/BrFormEdit.vue'
+export { default as BrFormEmail } from '#components/BrFormEmail.vue'
+export { default as BrFormFieldset } from '#components/BrFormFieldset.vue'
+export { default as BrFormInput } from '#components/BrFormInput.vue'
+export { default as BrFormLabel } from '#components/BrFormLabel.vue'
+export { default as BrFormPassword } from '#components/BrFormPassword.vue'
+export { default as BrFormRadio } from '#components/BrFormRadio.vue'
+export { default as BrFormRadioGroup } from '#components/BrFormRadioGroup.vue'
+export { default as BrFormRow } from '#components/BrFormRow.vue'
+export { default as BrFormSelect } from '#components/BrFormSelect.vue'
+export { default as BrFormSelectItem } from '#components/BrFormSelectItem.vue'
+export { default as BrFormTel } from '#components/BrFormTel.vue'
+export { default as BrFormTextarea } from '#components/BrFormTextarea.vue'
+export { default as BrFormToggle } from '#components/BrFormToggle.vue'
+export { default as BrFormUpdate } from '#components/BrFormUpdate.vue'
+export { default as BrFormVisible } from '#components/BrFormVisible.vue'
+
+export { default as BrLink } from '#components/BrLink.vue'
+export { default as BrLoader } from '#components/BrLoader.vue'
+export { default as BrOverlay } from '#components/BrOverlay.vue'
+export { default as BrQrCode } from '#components/BrQrCode.vue'
+export { default as BrSkiplink } from '#components/BrSkiplink.vue'
+export { default as BrStatusBars } from '#components/BrStatusBars.vue'
+export { default as BrTableCell } from '#components/BrTableCell.vue'
+export { default as BrTableHeader } from '#components/BrTableHeader.vue'
+export { default as BrTableRow } from '#components/BrTableRow.vue'
+export { default as BrWrap } from '#components/BrWrap.vue'

package/package.json

@@ -1,26 +1,22 @@
 {
   "name": "barbican-reset",
-  "version": "3.35.0",
+  "version": "3.39.0",
   "description": "Shared design system for Barbican projects, providing SCSS utilities, animations, icons, Vue components, and JS helpers for consistent styling and behaviour.",
   "main": "index.js",
   "exports": {
     ".": "./index.js",
-    "./animations": "./animations/index.js",
     "./lists": "./scss/lists.scss",
     "./reset": "./scss/reset.scss",
     "./supreme": "./scss/supreme.scss",
     "./typography": "./scss/typography.scss",
     "./focus-visible": "./focus-visible.min.js",
     "./icons": "./icons/index.js",
-    "./icons/account": "./icons/account/index.js",
-    "./icons/confirm": "./icons/confirm/index.js",
-    "./icons/stream": "./icons/stream/index.js",
     "./scss": "./scss/index.scss",
     "./scss/functions": "./scss/functions/index.scss",
     "./scss/mixins": "./scss/mixins/index.scss",
     "./scss/helpers": "./scss/_helpers.scss",
-    "./scripts/helpers": "./scripts/helpers.js",
-    "./mixins": "./mixins/inputs.js"
+    "./mixins": "./mixins/inputs.js",
+    "./utils": "./utils.js"
   },
   "imports": {
     "#animations/*": "./animations/*.js",
@@ -28,8 +24,7 @@
     "#icons/*": "./icons/*",
     "#mixins/*": "./mixins/*.js",
     "#styles/*": "./scss/*.scss",
-    "#scripts/*": "./scripts/*.js",
-    "#helpers/*": "./scripts/helpers/*.js"
+    "#utils/*": "./utils/*.js"
   },
   "scripts": {
     "build:css": "gulp build:css",
@@ -47,6 +42,7 @@
     "luxon": "^3.2.1",
     "nodemon": "^3.1.0",
     "pug": "^3.0.2",
+    "qrcode": "^1.5.3",
     "serve-favicon": "^2.5.0"
   },
   "peerDependencies": {
@@ -55,16 +51,14 @@
   "files": [
     "animations/**/*",
     "components/**/*",
-    "css/**/*",
-    "fonts/*",
     "icons/**/*",
     "mixins/**/*",
     "patterns/**/*",
-    "logos/*",
-    "scripts/**/*",
+    "utils/**/*",
     "scss/**/*",
     "focus-visible.min.js",
-    "index.js"
+    "index.js",
+    "utils.js"
   ],
   "homepage": "https://bitbucket.org/barbicandev/barbican-reset#readme",
   "license": "MIT",

package/scss/_atomic.scss

@@ -12,7 +12,7 @@
 @use "atomic/widths";
 
 .border-radius-lg {
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
 }
 
 .list-style-none {

package/scss/_br-button.scss

@@ -1,10 +1,6 @@
 @use "mixins/focus" as *;
 @use "mixins/buttons" as *;
 
-button.btn:active {
-  transform: var(--scale-click);
-}
-
 /// Button component setup class. 
 /// Used in combination with a button style class
 /// @group Buttons
@@ -70,14 +66,6 @@ button.btn:active {
   @include btn-edit-input;
 }
 
-/// Remove button. 
-/// Used only by StreamDonation.vue component. Could be deprecated.
-/// Defaults to slim solid grey. Borders grey on focus.
-/// @group Buttons
-.btn.btn-remove {
-  @include btn-remove;
-}
-
 /// Link button.
 /// Imitates the appearance of an anchor link. 
 /// Defaults to transparent fill. Fills grey on focus.
@@ -86,13 +74,6 @@ button.btn:active {
   @include btn-link;
 }
 
-/// Video help button.
-/// Apparently no longer used. Could be deprecated.
-/// @group Buttons
-.btn.btn-video-help {
-  @include btn-video-help;
-}
-
 /// Exit button.
 /// Circular close button. Used in the BrAlert component.
 /// @group Buttons
@@ -128,6 +109,11 @@ button.btn:active {
   @include btn-exit-overlay;
 }
 
+/// @group Buttons
+.btn.btn-exit-overlay-bg {
+  @include btn-exit-overlay-bg;
+}
+
 .btn {
   &.btn-video-login {
     @include btn-video-login;
@@ -241,6 +227,10 @@ button.btn:active {
     @include btn-slim;
   }
 
+  &.btn-voucher-amount {
+    @include btn-voucher-amount;
+  }
+
   // modifyers
 
   &.expand {
@@ -250,4 +240,8 @@ button.btn:active {
   &.expand--mobile {
     @include btn-expand--mobile;
   }
+
+  &.btn-react:not(:disabled):not([aria-busy=true]):active {
+    transform: var(--scale-click);
+  }
 }

package/scss/_br-form-select.scss

@@ -0,0 +1,52 @@
+@use "mixins/breakpoints" as *;
+
+.br-select-form {
+  width: var(--width-select-form);
+  position: relative;
+}
+
+.br-select-form-button[aria-expanded='false'] + .br-select-form-list {
+  visibility: hidden;
+}
+
+.br-select-form-button svg {
+  @include large-down {
+    display: none;
+  }
+}
+
+.br-select-form-list {
+  border-bottom-right-radius: var(--border-radius-lg);
+  border-bottom-left-radius: var(--border-radius-lg);
+  border-width: var(--border-width-sm);
+  color: var(--color-form-select-list);
+  border-color: currentColor;
+  background-color: white;
+  border-style: solid;
+  position: absolute;
+  margin-bottom: 0;
+  list-style: none;
+  border-top: none;
+  overflow: hidden;
+  padding-left: 0;
+  margin-top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.br-select-form-item:not(:last-of-type) {
+  border-bottom: 1px solid currentColor;
+}
+
+.br-form-select-link {
+  padding: var(--padding-md);
+  display: block;
+}
+
+.br-form-select-link:focus-visible,
+.br-form-select-link:hover {
+  background-color: var(--background-color-form-select-link-focus);
+  outline-offset: var(--outline-inset-lg);
+  outline-color: inherit;
+  outline-style: dashed;
+}

package/scss/_br-form-toggle.scss

@@ -1,42 +1,54 @@
+@use "sass:map";
 @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;
+    grid-template-columns: auto var(--width-toggle);
     padding-left: var(--padding-md);
     display: inline-grid;
     align-items: center;
     font-weight: normal;
+    gap: var(--gap-sm);
     height: initial;
     cursor: pointer;
     width: 100%;
-    gap: 0.5em;
   }
 }
 
+.br-form-toggle.drawer {
+  display: inline-block;
+}
+
+.br-form-toggle.drawer label {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top-width: 0;
+}
+
 .br-form-toggle input[type=checkbox] {
-  background-color: var(--color-black-50-lighten);
+  background-color: var(--background-color-toggle-unchecked);
+  border-color: var(--border-color-toggle-unchecked);
+  border-radius: var(--border-radius-toggle);
   transition-property: background-color;
+  border-width: var(--border-width-sm);
   transition-duration: 200ms;
-  border-radius: 1.125em;
+  height: var(--height-toggle);
+  width: var(--width-toggle);
+  border-style: solid;
   position: relative;
   appearance: none;
-  height: 1.875rem;
-  cursor: inherit;
-  width: 3.25rem;
+  cursor: pointer;
+  display: block;
   color: white;
   padding: 0;
   margin: 0;
 
-  &:focus {
-    outline-color: var(--color-black-50-lighten);
+  &:hover,
+  &:focus-visible {
+    outline-color: var(--outline-color-toggle-unchecked);
     outline-offset: var(--border-width-lg);
     outline-width: var(--border-width-lg);
     outline-style: solid;
@@ -44,28 +56,34 @@
 }
 
 .br-form-toggle input[type=checkbox]:before {
+  background-color: var(--background-color-toggle-before-unchecked);
   transition-property: transform;
-  transition-duration: 200ms;
-  background-color: white;
+  transition-duration: 300ms;
+  bottom: var(--margin-toggle-before);
+  height: var(--width-toggle-before);
+  left: var(--margin-toggle-before);
+  width: var(--width-toggle-before);
   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);
+  -webkit-transform: translateX(var(--width-toggle-before));
+  -ms-transform: translateX(var(--width-toggle-before));
+  transform: translateX(var(--width-toggle-before));
 }
 
 .br-form-toggle input[type=checkbox]:checked {
-  background-color: var(--color-status-success);
+  border-color: var(--border-color-toggle-checked);
+  background-color: var(--background-color-toggle-checked);
 
-  &:focus {
-    outline-color: var(--color-status-success);
+  &:hover,
+  &:focus-visible {
+    outline-color: var(--outline-color-toggle-checked);
   }
+}
+
+.br-form-toggle input[type=checkbox]:checked:before {
+  background-color: var(--background-color-toggle-before-checked);
 }

package/scss/_br-overlay.scss

@@ -11,16 +11,41 @@
     overflow: scroll;
     position: fixed;
     display: flex;
+    z-index: 999;
     height: 100%;
     width: 100%;
-    z-index: 5;
+
+    &.fade-enter-active,
+    &.fade-leave-active {
+      transition: opacity 0.3s ease;
+    }
+
+    &.fade-enter-from,
+    &.fade-leave-to {
+      opacity: 0;
+    }
   }
 }
 
 .br-overlay-content {
-  justify-content: center;
+  margin-right: auto;
   position: relative;
-  display: flex;
-  width: 100%;
+  margin-left: auto;
+  z-index: 2;
+}
+
+.wrap-overlay-exit-button {
+  padding: var(--padding-xxl);
+  position: absolute;
   z-index: 2;
+  right: 0;
+}
+
+.br-overlay-background {
+    @include inset;
+
+  & {
+    position: fixed;
+    z-index: 1;
+  }
 }

package/scss/_br-qr-code.scss

@@ -0,0 +1,3 @@
+  .br-qr-code path:last-child {
+    stroke: var(--stroke-qr-code);
+  }

package/scss/_br-table-row.scss

@@ -14,7 +14,7 @@
   }
 
   @include medium-down {
-    border-radius: var(--border-radius-lg);
+    border-radius: var(--border-radius-md);
     padding: var(--padding-sm);
   }
 }

package/scss/_input.scss

@@ -12,7 +12,7 @@ input[type=radio] {
 
 input[type=button],
 input[type=submit] {
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-md);
   appearance: none;
 }