<commit_before><template>
    <span @click="switchFilter(id, from, to)">
        <button class="brdr-c-gray brdr-1 bg-transparent mr10" :class="{ active: active }">
            <div class="bg-transparent"></div>
        </button> 
        <span>{{ content }}</span>
    </span>
</template>

<script>
import { coreComponent } from 'lib/themes'

export default { // TODO: move logic to parent component
  data () {
    return {
      active: false
    }
  },
  beforeMount () {
    this.$bus.$on('filter-changed-' + this.context, (filterOption) => {
      if (filterOption.attribute_code === this.code) {
        if (filterOption.id === this.id) {
          if (this.active) {
            this.active = false
            return
          } else {
            this.active = true
          }
        } else {
          this.active = false
        }
        // filterOption.id === this.id ? this.active = true : this.active = false
      }
    })
  },
  methods: {
    switchFilter (id, from, to) {
      this.$bus.$emit('filter-changed-' + this.context, { attribute_code: this.code, id: id, from: from, to: to })
    }
  },
  mixins: [coreComponent('core/PriceButton')]
}
</script>

<style scoped>

    button {
        width: 20px;
        height: 20px;
        position: relative;
        cursor: pointer;
    }

    button > div {
        width: 80%;
        height: 80%;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    button.active > div {
        background-color: black;
    }

</style><commit_msg>Add hover, focus and aria-label to PriceButton<commit_after><template>
    <span @click="switchFilter(id, from, to)">
        <button
          class="relative brdr-c-gray brdr-1 bg-transparent mr10 price-button"
          :class="{ active: active }"
          :aria-label="'Price ' + content"
        >
          <div class="bg-transparent absolute square"></div>
        </button>
        <span>{{ content }}</span>
    </span>
</template>

<script>
import { coreComponent } from 'lib/themes'

export default { // TODO: move logic to parent component
  data () {
    return {
      active: false
    }
  },
  beforeMount () {
    this.$bus.$on('filter-changed-' + this.context, (filterOption) => {
      if (filterOption.attribute_code === this.code) {
        if (filterOption.id === this.id) {
          if (this.active) {
            this.active = false
            return
          } else {
            this.active = true
          }
        } else {
          this.active = false
        }
        // filterOption.id === this.id ? this.active = true : this.active = false
      }
    })
  },
  methods: {
    switchFilter (id, from, to) {
      this.$bus.$emit('filter-changed-' + this.context, { attribute_code: this.code, id: id, from: from, to: to })
    }
  },
  mixins: [coreComponent('core/PriceButton')]
}
</script>

<style lang="scss" scoped>
  @import '~theme/css/global_vars';
  $lightgray-secondary: map-get($colors, lightgray-secondary);
  $darkgray: map-get($colors, darkgray);

  .price-button {
    width: 20px;
    height: 20px;
    cursor: pointer;

    &:hover,
    &:focus {
      .square {
        background-color: $lightgray-secondary;
      }
    }

    &.active {
      .square {
        background-color: $darkgray;
      }
    }
  }

  .square {
    width: 80%;
    height: 80%;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
</style>
{'fraction_non_alphanumeric': 0.1541095890410959, 'fraction_numerical': 0.010844748858447488, 'mean_word_length': 1.9703389830508475, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2645872', 'n_tokens_mistral': 1147, 'n_tokens_neox': 1093, 'n_words': 250}