barbican-reset 2.54.0 → 2.55.0

package/components/BrCard.vue

@@ -1,8 +1,52 @@
 <template>
-  <div class="card">
-    <div v-if="$slots.header" class="card-header">
-      <slot name="header"></slot>
+  <div :class="containerClasses">
+    <div v-if="$slots.header" :class="headerClasses">
+      <slot name="header" />
     </div>
-    <div v-if="$slots.default" class="card-body"><slot></slot></div>
+    <template v-if="bodyRequired">
+      <br-card-body :styles="body">
+        <slot />
+      </br-card-body>
+    </template>
+    <template v-else>
+      <slot />
+    </template>
   </div>
 </template>
+
+<script>
+import BrCardBody from "./BrCardBody";
+
+export default {
+  components: { BrCardBody },
+  props: ["container", "header", "body"],
+  computed: {
+    bodyRequired() {
+      if (this.body == "none") return false;
+      if (!this.$slots.default) return false;
+      return true;
+    },
+    containerClasses() {
+      let classNames = ["card"];
+
+      if (this.container) classNames.push(this.container);
+
+      return classNames.join(" ");
+    },
+    headerClasses() {
+      let classNames = ["card-header"];
+
+      if (this.header) classNames.push(this.header);
+
+      return classNames.join(" ");
+    },
+    bodyClasses() {
+      let classNames = ["card-body"];
+
+      if (this.body) classNames.push(this.body);
+
+      return classNames.join(" ");
+    },
+  },
+};
+</script>

package/components/BrCardBody.vue

@@ -0,0 +1,20 @@
+<template>
+  <div :class="classNames">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["styles"],
+  computed: {
+    classNames() {
+      let classNames = ["card-body"];
+
+      if (this.styles) classNames.push(this.styles);
+
+      return classNames.join(" ");
+    },
+  },
+};
+</script>

package/components/BrCardTitle.vue

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

package/components/BrFormBlock.vue

@@ -6,10 +6,10 @@
 
 <style lang="scss" module>
 .container {
-  @include fontfamily-black;
   padding: 0.875rem 0.75rem 0.625rem 0.75rem;
   border-left: 0.25rem solid;
   background: $c-grey-l96;
   margin-bottom: 1rem;
+  font-weight: bold;
 }
 </style>

package/components/EventSummary.vue

@@ -62,16 +62,19 @@ export default {
 
 <style lang="scss" module>
 @mixin title {
-  @include fontfamily-black;
   letter-spacing: $headings-letter-spacing;
   line-height: $line-height-sm;
+  font-weight: bold;
 }
 
 @mixin subtitle {
   @include title;
-  font-size: $h5-font-size;
-  color: $c-grey-l44;
-  font-weight: 400;
+
+  & {
+    font-size: $h5-font-size;
+    color: $c-grey-l44;
+    font-weight: 400;
+  }
 
   @include medium-up {
     font-size: $h4-font-size;