var _examples$SIMPLE_EXAM;

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/*
Copyright (c) 2018 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import * as React from 'react';
import { number as numberKnob, select as selectKnob } from '@storybook/addon-knobs';
import { styled } from '../styles/index.js';
import { Button, KIND } from '../button/index.js';
import * as Icons from './icon-exports.js';
var Centered = styled('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  height: '90vh'
});
Centered.displayName = "Centered";
var Grid = styled('div', function (_ref) {
  var $size = _ref.$size;
  return {
    display: 'grid',
    gridTemplateColumns: '20% 20% 20% 20% 20%',
    gridTemplateRows: '20% 20% 20% 20% 20%',
    width: "".concat($size, "px"),
    height: "".concat($size, "px")
  };
});
Grid.displayName = "Grid";
var Buttons = styled('div', {
  maxWidth: '600px'
});
Buttons.displayName = "Buttons";
var ButtonContainer = styled('div', {
  display: 'inline-block',
  margin: '6px'
});
ButtonContainer.displayName = "ButtonContainer";
var GridItem = styled('div', function (_ref2) {
  var row = _ref2.row,
      col = _ref2.col;
  return {
    alignSelf: 'center',
    justifySelf: 'center'
  };
});
GridItem.displayName = "GridItem";
export var suite = 'Icon Suite';
export var examples = {
  SIMPLE_EXAMPLE: 'Icon',
  BUTTON_EXAMPLE: 'Icons in Button'
};
export default (_examples$SIMPLE_EXAM = {}, _defineProperty(_examples$SIMPLE_EXAM, examples.SIMPLE_EXAMPLE, function Story1() {
  var size = selectKnob('Size', ['12px', '16px', '24px', '36px', '48px', '64px'], '48px');
  var sizeNum = parseInt(size);
  var hue = numberKnob('Color', 0, {
    range: true,
    min: 0,
    max: 360
  });
  var hsl = hue === 0 ? '#000' : "hsl(".concat(hue, ", 40%, 40%)");
  var numCols = 5;
  return React.createElement(Centered, null, React.createElement(Grid, {
    $size: // Plus two to add some extra padding between items
    sizeNum * (numCols + 2)
  }, Object.keys(Icons).map(function (key) {
    var Icon = Icons[key];
    return React.createElement(GridItem, {
      key: key
    }, React.createElement(Icon, {
      size: size,
      color: hsl
    }));
  })));
}), _defineProperty(_examples$SIMPLE_EXAM, examples.BUTTON_EXAMPLE, function Story1() {
  var buttonKind = selectKnob('Button Kind', [KIND.primary, KIND.secondary, KIND.tertiary, KIND.minimal], KIND.primary);
  return React.createElement(Centered, null, React.createElement(Buttons, null, Object.keys(Icons).map(function (key) {
    var Icon = Icons[key];
    return React.createElement(ButtonContainer, {
      key: key
    }, React.createElement(Button, {
      kind: buttonKind,
      endEnhancer: Icon
    }, Icon.name));
  })));
}), _examples$SIMPLE_EXAM);