feat/fixing code and format errors for Fab button component

bloombergindustry · Oct 18, 2018 · caa96a3 · caa96a3
1 parent 873f551
commit caa96a3
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 19 deletions.
diff --git a/dev/views/Buttons.vue b/dev/views/Buttons.vue
@@ -15,11 +15,13 @@
 
  <div><ButtonFeatureIcon> <Alert24/> </ButtonFeatureIcon></div>
  <br>
+
  <div><ButtonGradient 
  :color-direction="colorDirection" 
  :gradient-start="colorStart" 
  :gradient-end="colorEnd" >Button Gradient</ButtonGradient></div>
  <br>
+
  <div>
  <ButtonFeatureLabel> 
  <template slot="icon"> <Alert24/> </template>
@@ -34,12 +36,22 @@
 
  <div><ButtonOutlineDark> Button Outline Dark </ButtonOutlineDark></div>
  <br>
+
  <div><ButtonOutlineDarkSmall> Button Outline Dark Small </ButtonOutlineDarkSmall></div>
  <br>
+
  </div>
 
- <div><ButtonFAB v-bind:fab-option="fabLinks" :fab-color-primary="fabPrimaryColor" :fab-color-secondary="fabSecondaryColor"> + </ButtonFAB></div>
+ <div>
+ <ButtonFAB 
+ :fab-option="fabLinks" 
+ :fab-color-primary="fabPrimaryColor" 
+ :fab-color-secondary="fabSecondaryColor">
+ !
+ </ButtonFAB>
+ </div>
  <br>
+
  </div>
 </template>
 
@@ -81,7 +93,7 @@ export default Vue.extend({
  fabPrimaryColor: '#EA60A7',
  fabSecondaryColor: '#0D9DDB',
  fabLinks:[
- {icon: '1', text: 'Twitter', link: 'https://twitter.com/'},
+ {icon: '1', text: 'Twitter', link: 'https://www.twitter.com/'},
  {icon: '2', text: 'Facebook', link: 'https://www.facebook.com'},
  {icon: '3', text: 'Instagram', link: 'https://www.instagram.com'},
  ],

diff --git a/src/components/ButtonFAB.vue b/src/components/ButtonFAB.vue
@@ -1,16 +1,25 @@
 <template>
  <div class="ft-button--fab-wrapper">
 
- <BaseButton v-bind="$attrs" v-on="$listeners" class="ft-button--fab" :style="returnPrimaryFabColor">
- <p> <slot/> </p>
- </BaseButton>
+ <BaseButton 
+ v-bind="$attrs"
+ :style="returnPrimaryFabColor"
+ class="ft-button--fab"
+ v-on="$listeners">
 
- <ul>
- <li v-for="fablink in fabOption" :style="returnSecondaryFabColor" >
- <a :href="fablink.link" > {{fablink.icon}} </a>
- <p>{{fablink.text}} </p>
- </li> 
- </ul>
+ <p> <slot/> </p>
+ </BaseButton>
+
+ <ul>
+ <li 
+ v-for="fablink in fabOption" 
+ :style="returnSecondaryFabColor" >
+
+ <a :href="fablink.link" > {{ fablink.icon }} </a>
+ <p>{{ fablink.text }} </p>
+
+ </li> 
+ </ul>
 
  </div> 
 </template>
@@ -25,9 +34,9 @@ export default Vue.extend({
  BaseButton
  },
  props:{
- fabOption: String,
- fabColorPrimary : String,
- fabColorSecondary: String,
+ fabOption :{type: String, required:true, default: "!"},
+ fabColorPrimary :{type: String, required:true, default: "#292E31"},
+ fabColorSecondary :{type: String, required:true, default: "#777C7F"},
  }, 
  computed:{
  returnPrimaryFabColor(): string {

diff --git a/src/components/ButtonFeatureIcon.vue b/src/components/ButtonFeatureIcon.vue
@@ -5,7 +5,7 @@
  v-on="$listeners"
  >
 
- <slot></slot>
+ <slot/>
 
  </BaseButton>
 

diff --git a/src/components/ButtonFeatureLabel.vue b/src/components/ButtonFeatureLabel.vue
@@ -6,7 +6,7 @@
  >
 
  <ButtonFeatureIcon> 
- <slot name="icon"></slot> 
+ <slot name="icon"/> 
  </ButtonFeatureIcon>
 
  <p> 

diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
@@ -259,7 +259,7 @@ body.user-is-tabbing button:focus {
  }
 
  li{
- background: grey;
+ background: $color-gray;
  width: 50px;
  height: 50px;
  border-radius: 50%;
@@ -306,8 +306,6 @@ body.user-is-tabbing button:focus {
  }
  }
 }
-/*********************************************************/
-/************ Button Feature Label Styles ****************/
 
 .ft-button--feature-label{
  padding: 0px ;