barbican-reset 1.2.5 → 1.2.6

package/components/form_group.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :class="$style.container">
+    <label v-if="label" :for="id">
+      <strong>{{ label }}</strong> <span v-if="label && required">(required)</span><span v-if="label && optional">(optional)</span>
+    </label>
+    <div :class="styleContent">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  export default {
+    name: 'FormGroup',
+    props: {
+      label: {
+        type: String
+      },
+      required: {
+        type: Boolean
+      },
+      optional: {
+        type: Boolean
+      },
+      submit: {
+        type: Boolean
+      }
+    },
+    computed: {
+      styleContent() {
+        const style = this.$style;
+        let output = [style.content];
+        if (!this.label) { output.push(style.no_label); }
+        if (this.submit) { output.push(style.submit); }
+        return output;
+      },
+      id() {
+        return this.label.toLowerCase().split(" ").join("_");
+      }
+    }
+  }
+</script>
+
+<style lang="scss" module>
+
+.container {
+
+  &:not(:last-of-type) {
+    margin-bottom: 1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 33fr 67fr;
+    align-items: center;
+    gap: $gap-account;
+    display: grid;
+  }
+
+  label {
+    font-weight: normal;
+
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  input {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+.content {
+
+  &.no_label {
+    @include media-breakpoint-up(sm) {
+      grid-column: 2 / 3;
+    }
+  }
+  
+  &.submit {
+    text-align: right;
+
+    @include media-breakpoint-down(sm) {
+      > button {
+        width: 100%;
+      }
+    }
+  }
+}
+
+</style>

package/index.js

@@ -17,6 +17,7 @@ import Carousel from './components/carousel'
 import CardDeck from './components/card_deck'
 import FormSection from './components/form_section'
 import FormUpdate from './components/form_update'
+import FormGroup from './components/form_group'
 
 export { 
   LoadingAnimation, 
@@ -33,6 +34,7 @@ export {
   Placeholder,
   FormSection,
   FormUpdate,
+  FormGroup,
   TableRow,
   Block,
   EventSummary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A collection of useful scss imports and js scripts, that provide consistent styling and functionality across barbican projects.",
   "main": "index.js",
   "scripts": {

package/scss/_atomic.scss

@@ -16,6 +16,10 @@ $aligns: "left", "center", "right";
   }
 }
 
+.margin-0 {
+  margin: 0;
+}
+
 .width-100 {
   width: 100%;
 }
@@ -34,4 +38,10 @@ $aligns: "left", "center", "right";
 
 .c-brand-orange {
   color: $c-brand-orange;
+}
+
+.list-style-none {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }

package/scss/index.scss

@@ -17,7 +17,6 @@
 @import "checkbox.scss";
 @import "checkbox-group.scss";
 @import "form.scss";
-@import "form-group.scss";
 @import "list.scss";
 @import "input.scss";
 @import "radio-group.scss";

package/scss/table/_orders.scss

@@ -0,0 +1,48 @@
+table.orders {
+
+  thead {
+    background-color: $c-grey-alpine;
+    margin-bottom: 1rem;
+    font-weight: 700;
+    display: block;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
+
+  tr {
+    border: 1px solid $c-grey-pearl;
+    display: grid;
+
+    @include media-breakpoint-up(md) {
+      grid-template-columns: 9rem 8rem auto 7rem;
+    }
+
+    @include media-breakpoint-down(md) {
+      border-radius: $border-radius-lg;
+    }
+  }
+
+  th, td {
+    padding: 0.75rem;
+
+    @include media-breakpoint-up(md) {
+      &:not(:last-of-type) {
+        border-right: 1px solid $c-grey-pearl;
+      }
+  
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
+
+  label {
+    font-size: $font-size-lg;
+
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+}

package/scss/table/index.scss

@@ -2,6 +2,7 @@
 @import "tickets.scss";
 @import "basket.scss";
 @import "section.scss";
+@import "orders.scss";
 
 table {
   border-spacing: 0;

package/scss/_form-group.scss

@@ -1,59 +0,0 @@
-
-form > .form-group {
-  @include media-breakpoint-up(sm) {
-    grid-template-columns: 33fr 67fr;
-    align-items: center;
-    gap: $gap-account;
-    display: grid;
-  }
-
-  > div:first-child {
-    @include media-breakpoint-up(sm) {
-      grid-column: 2 / 3;
-    }
-  }
-}
-
-.form-group {
-  &:not(:last-of-type) {
-    margin-bottom: 1rem;
-  }
-
-  legend {
-    padding: 0 !important;
-    font-weight: 700;
-    
-    @include media-breakpoint-down(sm) {
-      margin-bottom: 0.5rem;
-    }
-  }
-}
-
-.form-group[submit] {
-  text-align: right;
-
-  @include media-breakpoint-down(sm) {
-    button {
-      width: 100%;
-    }
-  }
-}
-
-@mixin label-status($content: '(required)') {
-  margin-left: 0.375rem;
-  display: inline-block;
-  content: $content;
-  font-weight: 400;
-}
-
-.form-group[required] {
-  legend::after {
-    @include label-status;
-  }
-}
-
-.form-group[optional] {
-  legend::after {
-    @include label-status('(optional)');
-  }
-}