# All files / shorthands buttons.js

100% Statements 3/3
100% Branches 0/0
100% Functions 2/2
100% Lines 3/3

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53

    1x

    6x

    5x

     // @flow
    import statefulSelectors from '../internalHelpers/_statefulSelectors'

    const stateMap = [undefined, null, 'active', 'focus', 'hover']

    function template(state) {
      return `button${state},
      input[type="button"]${state},
      input[type="reset"]${state},
      input[type="submit"]${state}`
    }

    /** */
    type ButtonState =
      | typeof(undefined)
      | null
      | 'active'
      | 'focus'
      | 'hover';

    /**
     * Populates selectors that target all buttons. You can pass optional states to append to the selectors.
     * @example
     * // Styles as object usage
     * const styles = {
     *   [buttons('active')]: {
     *     'border': 'none'
     *   }
     * }
     *
     * // styled-components usage
     * const div = styled.div`
     *   > ${buttons('active')} {
     *     border: none;
     *   }
     * `
     *
     * // CSS in JS Output
     *
     *  'button:active,
     *  'input[type="button"]:active,
     *  'input[type=\"reset\"]:active,
     *  'input[type=\"submit\"]:active: {
     *   'border': 'none'
     * }
     */

    function buttons(...states: Array<ButtonState>) {
      return statefulSelectors(states, template, stateMap)
    }

    export default buttons