feat: added disabled state to accordion component

bloombergindustry · Jan 4, 2019 · 5b57046 · 5b57046
1 parent 73d26f0
commit 5b57046
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 6 deletions.
diff --git a/dev/views/Accordions.vue b/dev/views/Accordions.vue
@@ -9,13 +9,22 @@
 
  <br/>
 
-
  <FishTankAccordionLarge 
  heading="Section Heading"
  >
  <FishTankLoaderContent theme="AlertList"/>
  </FishTankAccordionLarge>
 
+ <br/>
+
+ <FishTankAccordionLarge 
+ heading="Disabled Section Heading"
+ subheading="Disabled Sub-heading"
+ :disabled="disabledAccordion"
+ >
+ <FishTankLoaderContent theme="AlertList"/>
+ </FishTankAccordionLarge>
+
 
  </div>
 </template>
@@ -30,6 +39,11 @@
  components: {
  FishTankAccordionLarge,
  FishTankLoaderContent
+ },
+ data: function() {
+ return{
+ disabledAccordion : true
+ }
  }
  
  }

diff --git a/src/components/FishTankAccordionLarge.vue b/src/components/FishTankAccordionLarge.vue
@@ -1,8 +1,10 @@
 <template>
- <div class="ft-accordion-container">
+ <div 
+ :class="[disabled ? 'ft-accordion-container-gray' : 'ft-accordion-container']"
+ > 
  <div 
  class="ft-accordion-wrapper-lg"
- v-on:click="toggle"
+ @click="toggle"
  >
  <div class="ft-accordion-heading-wrapper">
  <p class="ft-accordion-heading"> {{ heading }} </p>
@@ -48,6 +50,11 @@
  subheading: {
  type: String,
  required: false
+ },
+ disabled:{
+ type: Boolean,
+ required: false,
+ default: false
  }
  },
  methods:{
@@ -67,5 +74,3 @@
 
 </style>
 
-<!--- re-organize accordion classes, styles and structures, then add
- type/javascript, slots/templates to get this working -->
diff --git a/src/styles/components/_accordions.scss b/src/styles/components/_accordions.scss
@@ -1,6 +1,7 @@
 *{
  margin: 0px;
 }
+
 .ft-accordion-container{
  display: flex;
  flex-direction: column;
@@ -39,10 +40,74 @@
  svg{
  color: $color-gray;
 
- } 
+ }
+
+ &:hover{
+ .ft-accordion-heading-wrapper{
+ .ft-accordion-heading{
+ color: $color-black;
+ }
+ .ft-accordion-sub-heading{
+ color: $color-black;
+ }
+ }
+ svg{
+ color: $color-black;
+ }
+ }
+
+
  }
+
+ .ft-accordion-panel{
+ padding: 12px
+ }
+}
+
+
+.ft-accordion-container-gray{
+ display: flex;
+ flex-direction: column;
+ margin: 12px;
+
+ .ft-accordion-wrapper-lg{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px;
+ border-bottom: 1px solid $color-gray-lighter;
 
+ .ft-accordion-heading-wrapper{
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+
+ .ft-accordion-heading{
+ color: $color-gray-lighter;
+ font-size: $fontsize-base-lg;
+ font-weight: $fontweight-regular;
+ line-height: $lineheight-base-lg;
+ letter-spacing: $letterspacing-base-lg;
+ }
+
+ .ft-accordion-sub-heading{
+ color: $color-gray-lighter;
+ font-size: $fontsize-base-sm;
+ font-weight: $fontweight-regular;
+ line-height: $lineheight-base-sm;
+ letter-spacing: $letterspacing-small;
+ }
+ }
+
+ svg{
+ color: $color-gray-lighter;
+
+ }
+ }
+
  .ft-accordion-panel{
+ display:none;
  padding: 12px
  }