pinafore/src/routes/_components/IconButton.html

<!-- Toggle buttons should have an immutable label, e.g. a mute/unmute button should just always say
     "mute." For sighted users, though, I think it's nice if the title changes when the action changes.
     See http://w3c.github.io/aria-practices/#button -->
<button type="button"
        title={pressable ? (pressed ? pressedLabel : label) : label}
        aria-label={label}
        aria-pressed={pressable ? !!pressed : undefined}
        aria-hidden={ariaHidden}
        tabindex="{ariaHidden ? '-1' : '0'}"
        class={computedClass}
        {disabled}
        ref:node
>
  <SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} />
</button>
<style>
  .icon-button {
    padding: 6px 10px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :global(.icon-button-svg) {
    width: 24px;
    height: 24px;
    fill: var(--action-button-fill-color);
    pointer-events: none; /* hack for Edge */
  }

  :global(.icon-button.big-icon .icon-button-svg) {
    width: 32px;
    height: 32px;
  }

  /*
   * regular styles
   */

  :global(.icon-button:hover .icon-button-svg) {
    fill: var(--action-button-fill-color-hover);
  }

  :global(.icon-button.not-pressable:active .icon-button-svg,
  .icon-button.same-pressed:active .icon-button-svg) {
    fill: var(--action-button-fill-color-active);
  }

  :global(.icon-button.pressed.not-same-pressed .icon-button-svg) {
    fill: var(--action-button-fill-color-pressed);
  }

  :global(.icon-button.pressed.not-same-pressed:hover .icon-button-svg) {
    fill: var(--action-button-fill-color-pressed-hover);
  }

  :global(.icon-button.pressed.not-same-pressed:active .icon-button-svg) {
    fill: var(--action-button-fill-color-pressed-active);
  }

  /*
   * muted
   */

  :global(.icon-button.muted-style .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color);
  }

  :global(.icon-button.muted-style:hover .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-hover);
  }

  :global(.icon-button.muted-style.not-pressable:active .icon-button-svg,
  .icon-button.muted-style.same-pressed:active .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-active);
  }

  :global(.icon-button.muted-style.pressed.not-same-pressed .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-pressed);
  }

  :global(.icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-pressed-hover);
  }

  :global(.icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-pressed-active);
  }

</style>
<script>
  import { classname } from '../_utils/classname'
  import { store } from '../_store/store'
  import SvgIcon from './SvgIcon.html'

  export default {
    oncreate () {
      const { clickListener, elementId } = this.get()
      if (clickListener) {
        this.onClick = this.onClick.bind(this)
        this.refs.node.addEventListener('click', this.onClick)
      }
      if (elementId) {
        this.refs.node.setAttribute('id', elementId)
      }
      if (process.env.NODE_ENV !== 'production') {
        const { pressable, pressedLabel, label } = this.get()
        if (pressable && ((!pressedLabel || !label) || pressedLabel === label)) {
          throw new Error('pressable buttons should have a label and a pressedLabel different from each other')
        }
      }
    },
    ondestroy () {
      const { clickListener } = this.get()
      if (clickListener) {
        this.refs.node.removeEventListener('click', this.onClick)
      }
    },
    data: () => ({
      big: false,
      muted: false,
      disabled: false,
      svgClassName: undefined,
      elementId: undefined,
      pressable: false,
      pressed: false,
      pressedLabel: undefined,
      className: undefined,
      sameColorWhenPressed: false,
      ariaHidden: false,
      clickListener: true
    }),
    store: () => store,
    computed: {
      computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => {
        return classname(
          'icon-button',
          !pressable && 'not-pressable',
          pressed && 'pressed',
          big && 'big-icon',
          muted && 'muted-style',
          sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
          className
        )
      }
    },
    methods: {
      animate (animation) {
        this.refs.svg.animate(animation)
      },
      onClick (e) {
        this.fire('click', e)
      }
    },
    components: {
      SvgIcon
    }
  }
</script>