feat: Fish Tank Button Group component

dev/views/ButtonGroup.vue

@@ -1,19 +1,19 @@
 <template>
  <div>
- <FishTankButtonGroup v-model="bgValue">
- <FishTankBGButton 
+ <FishTankButtonGroup>
+ <FishTankBGButton
  v-model="bgValue"
  value="All"
  label="All"/>
- <FishTankBGButton 
+ <FishTankBGButton
  v-model="bgValue"
  value="Members"
  label="Members"/>
- <FishTankBGButton 
- v-model="bgValue"
+ <FishTankBGButton
+ v-model="bgValue" 
  value="Staff"
  label="Staff"/>
- <FishTankBGButton 
+ <FishTankBGButton
  v-model="bgValue"
  value="Agency"
  label="Agency"/>
@@ -31,15 +31,16 @@
 </template>
 <script lang="ts">
 import Vue from 'vue'
-import {FishTankButtonGroup, FishTankButtonGroupButton as FishTankBGButton} from '@/index'
+import {FishTankButtonGroup, FishTankButtonGroupButton as FishTankBGButton} from '@/index';
+
 export default Vue.extend({
  components:{
  FishTankButtonGroup,
  FishTankBGButton
  },
  data: function(){
  return {
- bgValue:"All"
+ bgValue:"Members"
  }
  }
 })

src/components/FishTankButtonGroup.vue

@@ -1,21 +1,17 @@
 <template>
  <div 
- :class="[{'ft-small':small}]">
+ :class="[{'ft-small':small}, 'ft-buttongroup']">
  <slot/>
  </div>
 </template>
 <script lang="ts">
 import Vue from 'vue'
+import { setTimeout } from 'timers';
 export default Vue.extend({
  model:{
  prop: 'modelValue',
  event:'change'
  },
- provide () {
- return {
- ["modelValue"]: this.modelValue
- }
- },
  props:{
  small:{
  required:false,
@@ -27,6 +23,6 @@ export default Vue.extend({
  default: "",
  require:true
  },
- }
+ },
 })
 </script>

src/components/FishTankButtonGroupButton.vue

@@ -1,14 +1,21 @@
 <template>
- <div>
+ <div 
+ :class="[{'ft-buttongroup__button--active':shouldBeChecked},'ft-buttongroup__button']">
  <label 
- :for="(id !==null? id: labelId)">
+ :for="(id !==null? id: labelId)"
+ class="ft-buttongroup__button__label ft-baseButton">
  <input 
- :id="(id !==null? id: labelId)" 
+ :disabled="disabled" 
+ :id="(id !==null? id: labelId)" 
  :value="value" 
  :checked ="shouldBeChecked" 
+ class="ft-buttongroup__button__input" 
  type="radio" 
- name="">
- {{ label }}
+ v-on="listeners">
+ <div class="ft-buttongroup__button__icon"/>
+ <div class="ft-buttongroup__button__label-content">
+ {{ label }}
+ </div>
  </label>
  </div>
 </template>
@@ -20,7 +27,6 @@ export default Vue.extend({
  prop: 'modelValue',
  event: 'change'
  },
- inject: ['modelValue'],
  props:{
  value:{
  type:[String,Boolean,Object,Number], 

src/components/InputCheckbox.vue

@@ -32,7 +32,7 @@
  <div
  v-if="label" 
  class="ft-input-checkbox__label-content">
- <p class="ft-input-checkbox__label-content__label">{{ label }}</p>
+ <div class="ft-input-checkbox__label-content__label">{{ label }}</div>
  <slot/>
  </div>
  </label>

src/styles/_mixins.scss

@@ -84,4 +84,13 @@ $breakpoint-small-min: 480px;
  @media (max-width: $breakpoint-small-min - 1px) {
  @content;
  }
+}
+
+@mixin baseButton {
+ @include font-base-lg();
+ font-family: $font-primary;
+ font-weight: $fontweight-semi;
+
+ padding: 7px 11px 9px 11px;
+ height: $baseline*10;
 }

src/styles/components/_buttongroup.scss

@@ -0,0 +1,24 @@
+.ft-buttongroup{
+ display: flex;
+ width: 100%;
+}
+.ft-buttongroup__button {
+ flex: 1 0 0;
+ background-color:$color-secondary;
+ text-align: center;
+}
+.ft-buttongroup__button__input{
+ opacity: 0;
+}
+.ft-buttongroup__button__label{
+ position: relative;
+ display: block;
+ height: 100%;
+}
+.ft-buttongroup__button__input{
+ position: absolute;
+}
+.ft-buttongroup__button--active{
+ color:$color-white;
+ background-color: $color-selected-darkest; 
+}

src/styles/components/_buttons.scss

@@ -1,14 +1,11 @@
 body.user-is-tabbing button:focus {
  box-shadow: 0 0 0 2px $color-selected;
 }
-
+.ft-baseButton{
+ @include baseButton();
+}
 .ft-button {
- @include font-base-lg();
- font-family: $font-primary;
- font-weight: $fontweight-semi;
-
- padding: 7px 11px 9px 11px;
- height: $baseline*10;
+ @include baseButton();
  box-sizing: border-box;
 
  border-radius: 2px;