barbican-reset 2.38.0 → 2.40.0

package/components/account_title.vue

@@ -26,7 +26,7 @@ export default {
 @mixin title {
   margin-bottom: 1.25rem;
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     font-size: $h1-font-size;
   }
 }

package/components/br_alert.vue

@@ -5,25 +5,26 @@
         <div class="title" v-if="title.length > 0 && !toggle">{{ title }}</div>
         <slot />
       </span>
-      <b-button
+      <br-button
         v-if="toggle"
         variant="exit"
         :class="getStatus"
         @click="$emit('close')"
       >
         <close-icon :status="getStatus" />
-      </b-button>
+      </br-button>
     </div>
   </div>
 </template>
 
 <script>
-import { BButton } from "bootstrap-vue";
 import { CloseIcon } from "barbican-reset/icons/stream";
+import BrButton from "./br_button";
+
 export default {
   name: "BrAlert",
   components: {
-    BButton,
+    BrButton,
     CloseIcon,
   },
   computed: {

package/components/br_button.vue

@@ -1,9 +1,13 @@
 <template>
-  
   <!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
 
-  <b-button @click="$emit('click')" :variant="variant" :type="type" aria-live="polite" :aria-busy="loading">
-
+  <button
+    @click="$emit('click')"
+    :aria-busy="loading"
+    aria-live="polite"
+    :variant="variant"
+    :type="type"
+  >
     <remove-ticket v-if="variant === 'remove-ticket'" :state="state">
       <template v-for="(index, name) in $slots" v-slot:[name]>
         <slot :name="name" />
@@ -11,7 +15,6 @@
     </remove-ticket>
 
     <template v-else>
-
       <template v-if="state === 'default'">
         <template v-if="$slots.default">
           <slot name="default" />
@@ -45,45 +48,44 @@
           {{ titleCase(state) }}
         </template>
       </template>
-
     </template>
-
-  </b-button>  
+  </button>
 </template>
 
 <script>
-import { BButton } from 'bootstrap-vue'
-import { RemoveTicket, DotTyping } from './br_button/components'
+import { RemoveTicket, DotTyping } from "./br_button/components";
 
 export default {
-  name: "BrButton",
   props: {
     state: {
       type: String,
-      default: "default"
+      default: "default",
     },
     variant: {
-      type: String
+      type: String,
     },
     type: {
       type: String,
-      default: "button"
-    }
+      default: "button",
+    },
   },
   methods: {
     titleCase(str) {
-      return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-    }
+      return str
+        .toLowerCase()
+        .split(" ")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+    },
   },
   computed: {
     loading() {
       return this.state === "loading" ? "true" : "false";
-    }
+    },
   },
   components: {
-    BButton,
     RemoveTicket,
-    DotTyping
-  }
-}
-</script>
+    DotTyping,
+  },
+};
+</script>

package/components/br_card.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="card">
+    <div v-if="$slots.header" class="card-header">
+      <slot name="header"></slot>
+    </div>
+    <div v-if="$slots.default" class="card-body"><slot></slot></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card {
+  border: 1px solid hsl(0deg, 0%, 85%);
+  background-color: white;
+  background-clip: border-box;
+  border-radius: 0.375rem;
+  flex-direction: column;
+  word-wrap: break-word;
+  position: relative;
+  display: flex;
+  min-width: 0;
+}
+
+.card[login] .card-header {
+  border-bottom: 1px solid hsl(0deg, 0%, 85%);
+  padding: 1.5rem 1.75rem 1.25rem;
+  justify-content: space-between;
+  background-color: transparent;
+  align-items: center;
+  display: flex;
+}
+
+.card[login] .card-body {
+  color: rgb(51, 51, 51);
+  padding: 1.75rem;
+  flex: 1 1 auto;
+}
+
+.card[confirm] {
+  margin-right: auto;
+  text-align: center;
+  margin-left: auto;
+  max-width: 20rem;
+}
+
+.card[confirm] .card-body {
+  padding: 1.75rem;
+}
+
+.card[block] {
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+  border: none;
+}
+
+.card[slim] .card-body {
+  padding: 1.25rem;
+}
+
+.card[membership] {
+  box-shadow: 0 0 0.375rem rgba(89, 89, 89, 0.5);
+  background: hsl(0deg, 0%, 20%);
+  width: calc(100% - 1rem);
+  display: inline-block;
+  margin: 0.5rem;
+  color: #fff;
+  border: none;
+}
+
+.card[membership] > .card-body {
+  align-items: flex-start;
+  row-gap: 0.75rem;
+  display: grid;
+}
+
+@media only screen and (min-width: 520px) {
+  .card[membership] {
+    width: 23rem;
+  }
+
+  .card[membership] > .card-body {
+    row-gap: 2rem;
+  }
+}
+
+.card[password] .card-header {
+  border-bottom: 1px solid hsl(0deg, 0%, 85%);
+  padding: 1.5rem 1.75rem 1.25rem;
+  background-color: transparent;
+}
+
+.card[password] .card-body {
+  padding: 1.75rem;
+}
+
+.card[account] {
+  margin-top: 2rem;
+  margin-bottom: 0;
+}
+
+.card[account] > .card-body {
+  padding: 2rem;
+}
+</style>

package/components/br_card_sub_title.vue

@@ -0,0 +1,12 @@
+<template>
+  <h6 class="card-subtitle"><slot></slot></h6>
+</template>
+
+<style lang="scss" scoped>
+.card-subtitle {
+  color: hsl(0deg, 0%, 35%);
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin: 0;
+}
+</style>

package/components/br_card_text.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="card-text"><slot></slot></p>
+</template>

package/components/br_card_title.vue

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

package/components/br_confirm_done.vue

@@ -1,22 +1,26 @@
 <template>
-  <b-card confirm done>
+  <br-card confirm done>
     <done-icon />
-    <b-card-title>Done</b-card-title>
-    <b-card-text v-if="$slots.default">
+    <br-card-title>Done</br-card-title>
+    <br-card-text v-if="$slots.default">
       <slot />
-    </b-card-text>
-  </b-card>
+    </br-card-text>
+  </br-card>
 </template>
 
 <script>
-import Animations from 'barbican-reset/animations'
-import { DoneIcon } from 'barbican-reset/icons/confirm'
+import BrCard from "./br_card";
+import BrCardTitle from "./br_card_title";
+import BrCardText from "./br_card_text";
+
+import Animations from "barbican-reset/animations";
+import { DoneIcon } from "barbican-reset/icons/confirm";
 
 export default {
   mixins: [Animations],
-  components: { DoneIcon },
+  components: { BrCard, BrCardTitle, BrCardText, DoneIcon },
   mounted() {
     this.animateDone();
   },
 };
-</script>
+</script>

package/components/br_confirm_email.vue

@@ -1,25 +1,33 @@
 <template>
-  <b-card confirm email>
+  <br-card confirm email>
     <email-icon />
-    <b-card-title v-if="$slots.title">
+    <br-card-title v-if="$slots.title">
       <slot name="title" />
-    </b-card-title>
-    <b-card-text v-if="$slots.default">
+    </br-card-title>
+    <br-card-text v-if="$slots.default">
       <slot />
-    </b-card-text>
-  </b-card>
+    </br-card-text>
+  </br-card>
 </template>
 
 <script>
-import Animations from 'barbican-reset/animations'
-import { EmailIcon } from 'barbican-reset/icons/confirm'
+import BrCard from "./br_card";
+import BrCardTitle from "./br_card_title";
+import BrCardText from "./br_card_text";
+
+import Animations from "barbican-reset/animations";
+import { EmailIcon } from "barbican-reset/icons/confirm";
+
 export default {
   mixins: [Animations],
   components: {
-    EmailIcon
+    BrCard,
+    BrCardTitle,
+    BrCardText,
+    EmailIcon,
   },
   mounted() {
     this.animateEmail();
   },
 };
-</script>
+</script>

package/components/br_container.vue

@@ -65,7 +65,7 @@ export default {
 
   &.masthead {
     box-shadow: 0 0.375rem 0.375rem rgba($black, 0.1);
-    background-color: $white;
+    background-color: $br-white;
   }
 }
 
@@ -77,7 +77,7 @@ export default {
     padding-bottom: 1.5rem;
     padding-top: 1.5rem;
 
-    @include media-breakpoint-up(sm) {
+    @include small-up {
       padding-bottom: 2.5rem;
       padding-top: 2.5rem;
     }
@@ -93,7 +93,7 @@ export default {
   }
 
   &.masthead {
-    @include media-breakpoint-up(sm) {
+    @include small-up {
       padding-bottom: 3rem;
       padding-top: 3rem;
     }

package/components/br_form_row.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="br-form-row">
     <label v-if="label" :for="id">
-      <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
+      <strong>{{ label }}</strong>
+      <span v-if="label && required">(required)</span
+      ><span v-if="label && optional">(optional)</span>
     </label>
-    <div :class="[`content`,{ editable },{ label },{ submit },{ radios }]">
+    <div :class="[`content`, { editable }, { label }, { submit }, { radios }]">
       <b-button v-if="editable" variant="input-edit" @click="$emit('edit')">
         <edit-icon />
       </b-button>
@@ -13,38 +15,38 @@
 </template>
 
 <script type="text/javascript">
-  import { BButton } from 'bootstrap-vue'
-  import { EditIcon } from '../icons/account'
-  export default {
-    name: 'BrFormRow',
-    components: {
-      BButton,
-      EditIcon
+import BrButton from "./br_button";
+import { EditIcon } from "../icons/account";
+
+export default {
+  components: {
+    BrButton,
+    EditIcon,
+  },
+  props: {
+    label: {
+      type: String,
+    },
+    required: {
+      type: Boolean,
+    },
+    optional: {
+      type: Boolean,
+    },
+    submit: {
+      type: Boolean,
+    },
+    editable: {
+      type: Boolean,
+    },
+    radios: {
+      type: Boolean,
     },
-    props: {
-      label: {
-        type: String
-      },
-      required: {
-        type: Boolean
-      },
-      optional: {
-        type: Boolean
-      },
-      submit: {
-        type: Boolean
-      },
-      editable: {
-        type: Boolean
-      },
-      radios: {
-        type: Boolean
-      }
+  },
+  computed: {
+    id() {
+      return this.label.toLowerCase().split(" ").join("_");
     },
-    computed: {
-      id() {
-        return this.label.toLowerCase().split(" ").join("_");
-      }
-    }
-  }
-</script>
+  },
+};
+</script>

package/components/br_loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-card class="br-loader" no-body>
+  <br-card class="br-loader" no-body>
     <div class="wrap br-loader">
       <div class="icon br-loader"></div>
       <div class="icon br-loader"></div>
@@ -8,11 +8,15 @@
       <div class="icon br-loader"></div>
       <div class="icon br-loader"></div>
     </div>
-  </b-card>
+  </br-card>
 </template>
 
 <script>
+import BrCard from "./br_card";
+
 export default {
-  name: "BrLoader",
+  components: {
+    BrCard,
+  },
 };
-</script>
+</script>

package/components/event_summary.vue

@@ -63,7 +63,7 @@ export default {
   color: $c-grey-l44;
   font-weight: 400;
 
-  @include media-breakpoint-up(md) {
+  @include medium-up {
     font-size: $h4-font-size;
   }
 }

package/components/fluid_iframe.vue

@@ -27,7 +27,7 @@ export default {
 @import "../scss/helpers";
 
 .component {
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   padding-top: 56.25%;
   position: relative;
   overflow: hidden;

package/components/video_content.vue

@@ -73,7 +73,7 @@ export default {
 <style lang="scss" module>
 
 .brightcove {
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   margin-bottom: 2rem;
   overflow: hidden;
 }

package/index.js

@@ -1,6 +1,10 @@
 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";
@@ -15,7 +19,6 @@ import BrSkiplink from "./components/br_skiplink";
 import BrWrap from "./components/br_wrap";
 
 import AccountTitle from "./components/account_title";
-import CardDisplay from "./components/card_display";
 import EventSummary from "./components/event_summary";
 import FluidIframe from "./components/fluid_iframe";
 import HelpRow from "./components/help_row";
@@ -32,6 +35,10 @@ export {
   BrAlert,
   BrAnchor,
   BrButton,
+  BrCard,
+  BrCardSubTitle,
+  BrCardText,
+  BrCardTitle,
   BrConfirmDone,
   BrConfirmEmail,
   BrContainer,
@@ -45,7 +52,6 @@ export {
   BrSkiplink,
   BrWrap,
   AccountTitle,
-  CardDisplay,
   EventSummary,
   FluidIframe,
   HelpRow,

package/package.json

@@ -52,7 +52,6 @@
     "name": "Paul Heading"
   },
   "dependencies": {
-    "bootstrap-vue": "^2.21.2",
     "express": "^4.19.2",
     "focus-visible": "^5.2.0",
     "gsap": "^3.7.1",
@@ -73,9 +72,6 @@
     "sassdoc": "^2.7.4",
     "serve-favicon": "^2.5.0"
   },
-  "devDependencies": {
-    "bootstrap": "^5.1.3"
-  },
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "files": [
     "animations/**/*",
@@ -96,7 +92,6 @@
     "type": "git",
     "url": "git+https://bitbucket.org/barbicandev/barbican-reset.git"
   },
-  "sass": "scss/index.scss",
   "scripts": {
     "serve:patterns": "cd patterns && node index",
     "watch:patterns": "cd patterns && gulp watch",
@@ -104,5 +99,5 @@
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.38.0"
+  "version": "2.40.0"
 }

package/scss/_atomic.scss

@@ -63,7 +63,7 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
 }
 
 .border-radius-lg {
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
 }
 
 .color-orange {
@@ -71,7 +71,7 @@ $paddings05: 'padding-top', 'padding-bottom', 'padding-right', 'padding-left';
 }
 
 .font-size-lg {
-  font-size: $font-size-lg;
+  font-size: $br-font-size-lg;
 }
 
 .font-size-h3 {

package/scss/_br-loader.scss

@@ -30,13 +30,13 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 
   &:before {
     @include loading-icon;
-    background-color: $gray-500;
+    background-color: $br-gray-500;
     animation: animation-before $animation-setup;
   }
 
   &:after {
     @include loading-icon;
-    background-color: $gray-400;
+    background-color: $br-gray-400;
     animation: animation-after $animation-setup;
   }
 
@@ -85,7 +85,7 @@ $animation-setup: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
   25% {
-    background-color: $gray-300;
+    background-color: $br-gray-300;
     transform: scale(0.75);
     z-index: 1;
   }

package/scss/_card-deck.scss

@@ -18,7 +18,7 @@
   }
 
   .card-img {
-    border-radius: $border-radius-lg;
+    border-radius: $br-border-radius-lg;
     margin-top: 1rem;
   }
 }

package/scss/_close-icon.scss

@@ -23,12 +23,12 @@
 
   &.focus-visible {
     @include single-box($c-grey-l21);
-    background-color: $white;
+    background-color: $br-white;
     border-radius: 50%;
 
     .outline,
     .cross {
-      fill: $white;
+      fill: $br-white;
     }
 
     .fill {

package/scss/_footer.scss

@@ -1,5 +1,5 @@
 footer {
-  color: $white;
+  color: $br-white;
 
   &:not(.splash) {
     background-color: $c-grey-l11;

package/scss/_input.scss

@@ -16,7 +16,7 @@ input[type='radio'] {
 
 input[type='button'],
 input[type='submit'] {
-  border-radius: $border-radius-lg;
+  border-radius: $br-border-radius-lg;
   appearance: none;
 }