barbican-reset 1.6.5 → 1.6.6

package/components/{container.vue → br_container.vue}

@@ -8,6 +8,7 @@
 
 <script>
 export default {
+  name: 'BrContainer',
   props: {
     splash: {
       type: Boolean,

package/components/{form_section.vue → br_form_block.vue}

@@ -6,7 +6,7 @@
 
 <script type="text/javascript">
   export default {
-    name: 'FormSection',
+    name: 'BrFormBlock',
   }
 </script>
 

package/components/{br_form_group.vue → br_form_row.vue}

@@ -16,7 +16,7 @@
   import { BButton } from 'bootstrap-vue'
   import { EditIcon } from '../icons/account'
   export default {
-    name: 'BrFormGroup',
+    name: 'BrFormRow',
     components: {
       BButton,
       EditIcon

package/components/{form_update.vue → br_form_update.vue}

@@ -1,13 +1,13 @@
 <template>
   <div :class="$style.container">
     <div :class="$style.input" data-test="email"><slot /></div>
-    <b-button class="btn-update" @click.prevent="$emit('update')" data-test="update">update</b-button>
+    <b-button @click.prevent="$emit('update')" data-test="update">update</b-button>
   </div>
 </template>
 
 <script type="text/javascript">
   export default {
-    name: 'FormUpdate',
+    name: 'BrFormUpdate',
   }
 </script>
 
@@ -24,6 +24,7 @@
 
 .input {
   @include all-text-inputs;
+  color: $c-grey-steel;
   user-select: none;
   overflow: hidden;
 }

package/helpers/mixins/input/_radio.scss

@@ -1,12 +1,5 @@
-
-@mixin radio-group {
-  margin: -0.25rem;
-}
-
-@mixin radio-input(
-  $state: neutral,
-  $type: radio) {
-  @include generic-input($state,$type);
+@mixin radio-input($state: neutral, $type: radio) {
+  @include generic-input($state, $type);
   display: inline-block;
   margin: 0.25rem;
-}
+}

package/index.js

@@ -1,4 +1,3 @@
-import Container from './components/container'
 import EventSummary from './components/event_summary'
 import AccountTitle from './components/account_title'
 import Wrap from './components/wrap'
@@ -9,9 +8,6 @@ import RelatedRow from './components/related_row'
 import TypeText from './components/type_text'
 import Placeholder from './components/placeholder'
 import CardDisplay from './components/card_display'
-import FormSection from './components/form_section'
-import FormUpdate from './components/form_update'
-import RadioGroup from './components/radio_group'
 import FooterUpper from './components/footer_upper'
 import FooterLogos from './components/footer_logos'
 import FooterLower from './components/footer_lower'
@@ -23,7 +19,10 @@ import SkipLink from './components/skip_link'
 import BrAlert from './components/br_alert'
 import BrButton from './components/br_button'
 import BrAnchor from './components/br_anchor'
-import BrFormGroup from './components/br_form_group'
+import BrFormRow from './components/br_form_row'
+import BrContainer from './components/br_container'
+import BrFormBlock from './components/br_form_block'
+import BrFormUpdate from './components/br_form_update'
 
 export { 
   Loader, 
@@ -32,14 +31,13 @@ export {
   RelatedCard,
   RelatedRow,
   TypeText,
-  Container,
+  BrContainer,
   Wrap,
   AccountTitle,
   Placeholder,
-  FormSection,
-  FormUpdate,
-  BrFormGroup,
-  RadioGroup,
+  BrFormBlock,
+  BrFormUpdate,
+  BrFormRow,
   EventSummary,
   FooterUpper,
   FooterLogos,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "1.6.5",
+  "version": "1.6.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/{_checkbox-group.scss → _custom-checkbox.scss}

@@ -1,17 +1,16 @@
-
 .custom-checkbox {
   @include checkbox-input;
 
   &:not(:last-of-type) {
     margin-bottom: 0.5rem;
-  }    
+  }
 }
 
 @each $status, $color in $statees {
-  @if $status != 'neutral' {
-    [#{$status}] input[type=radio],
-    input[type=radio][#{$status}] {
+  @if $status != "neutral" {
+    [role="group"][#{$status}] input[type="checkbox"],
+    input[type="checkbox"][#{$status}] {
       @include status-input($color);
     }
   }
-}
+}

package/scss/_custom-radio.scss

@@ -0,0 +1,16 @@
+[role="radiogroup"] {
+  margin: -0.25rem;
+}
+
+.custom-radio {
+  @include radio-input;
+}
+
+@each $status, $color in $statees {
+  @if $status != "neutral" {
+    [role="radiogroup"][#{$status}] input[type="radio"],
+    input[type="radio"][#{$status}] {
+      @include status-input($color);
+    }
+  }
+}

package/scss/index.scss

@@ -21,13 +21,12 @@
 @import "btn";
 @import "card/index";
 @import "card-deck";
-@import "checkbox";
-@import "checkbox-group";
+@import "custom-checkbox";
 @import "custom-select";
+@import "custom-radio";
 @import "form";
 @import "list";
 @import "input";
-@import "radio-group";
 
 // atomic helper styles
 @import "atomic";

package/components/radio_group.vue

@@ -1,27 +0,0 @@
-<template>
-  <div :class="styleGroup">
-    <slot />
-  </div>
-</template>
-
-<script type="text/javascript">
-  export default {
-    name: 'RadioGroup',
-    props: {
-      error: {
-        type: Boolean
-      },
-      success: {
-        type: Boolean
-      }
-    },
-    computed: {
-      styleGroup() {
-        let styles = ['radio-group'];
-        if (this.error) { styles.push('error'); }
-        if (this.success) { styles.push('success'); }
-        return styles;        
-      }
-    }
-  }
-</script>

package/scss/_checkbox.scss

@@ -1,31 +0,0 @@
-
-.checkbox {
-  @include checkbox-input;
-}
-
-@each $status, $color in $statees {
-  @if $status != 'neutral' {
-    .checkbox.#{$status} {
-      input[type=checkbox] {
-        &:hover, &[data-focus-visible-added] {
-          &:checked ~ label {
-            @include single-box(map-get($color, base), 0.0625rem);
-            border: 1px solid map-get($color, base);
-            background-color: map-get($color, fade);
-            color: map-get($color, base);
-          }
-        }
-  
-        &:checked ~ label {
-          border: 1px solid map-get($color, base);
-          background-color: map-get($color, fade);
-          color: map-get($color, base);
-        }
-      }
-    }    
-  }
-}
-
-.custom-checkbox label {
-  font-weight: 400;
-}

package/scss/_radio-group.scss

@@ -1,17 +0,0 @@
-
-[role=radiogroup] {
-  @include radio-group;
-}
-
-.custom-radio {
-  @include radio-input;
-}
-
-@each $status, $color in $statees {
-  @if $status != 'neutral' {
-    [#{$status}] input[type=radio],
-    input[type=radio][#{$status}] {
-      @include status-input($color);
-    }
-  }
-}