import React from 'react';
import { AddIcon, AlertCircleIcon, ArrowsStackedIcon, ArrowIcon, BuildingCircleIcon, CalendarIcon, CheckCircleIcon, CheckIcon, CloseIcon, CloseIconThin, DownloadIcon, ExternalLinkIcon, ImageIcon, InfoCircleIcon, InfoCircleIconThin, LockCircleIcon, LockIcon, MenuIcon, MenuIconThin, MinusCircleIcon, NextIcon, PdfIcon, PlusCircleIcon, RemoveIcon, StarIcon, UsaFlagIcon, WarningIcon } from './index';
import SvgIcon from './SvgIcon';
export default {
  title: 'Components/Icons',
  component: SvgIcon
};
var iconData = [{
  defaultTitle: 'Add',
  component: /*#__PURE__*/React.createElement(AddIcon, null),
  name: 'AddIcon'
}, {
  defaultTitle: 'Alert',
  component: /*#__PURE__*/React.createElement(AlertCircleIcon, null),
  name: 'AlertCircleIcon'
}, {
  defaultTitle: 'Sort',
  component: /*#__PURE__*/React.createElement(ArrowsStackedIcon, null),
  name: 'ArrowsStackedIcon'
}, {
  defaultTitle: '[direction of arrow]',
  component: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ArrowIcon, {
    direction: "up"
  }), /*#__PURE__*/React.createElement(ArrowIcon, {
    direction: "down"
  }), /*#__PURE__*/React.createElement(ArrowIcon, {
    direction: "left"
  }), /*#__PURE__*/React.createElement(ArrowIcon, {
    direction: "right"
  })),
  name: 'ArrowIcon',
  notes: 'Component takes <code>direction</code> prop to determine if it is up, down, left or right.'
}, {
  defaultTitle: 'Building in circle',
  component: /*#__PURE__*/React.createElement(BuildingCircleIcon, null),
  name: 'BuildingCircleIcon'
}, {
  defaultTitle: 'Calendar',
  component: /*#__PURE__*/React.createElement(CalendarIcon, null),
  name: 'CalendarIcon'
}, {
  defaultTitle: 'Check mark in circle',
  component: /*#__PURE__*/React.createElement(CheckCircleIcon, null),
  name: 'CheckCircleIcon'
}, {
  defaultTitle: 'Check mark',
  component: /*#__PURE__*/React.createElement(CheckIcon, null),
  name: 'CheckIcon'
}, {
  defaultTitle: 'Close',
  component: /*#__PURE__*/React.createElement(CloseIcon, null),
  name: 'CloseIcon'
}, {
  defaultTitle: 'Close',
  component: /*#__PURE__*/React.createElement(CloseIconThin, null),
  name: 'CloseIconThin'
}, {
  defaultTitle: 'Download',
  component: /*#__PURE__*/React.createElement(DownloadIcon, null),
  name: 'DownloadIcon'
}, {
  defaultTitle: 'External Link',
  component: /*#__PURE__*/React.createElement(ExternalLinkIcon, null),
  name: 'ExternalLinkIcon'
}, {
  defaultTitle: 'Image',
  component: /*#__PURE__*/React.createElement(ImageIcon, null),
  name: 'ImageIcon'
}, {
  defaultTitle: 'Information',
  component: /*#__PURE__*/React.createElement(InfoCircleIcon, null),
  name: 'InfoCircleIcon'
}, {
  defaultTitle: 'Information',
  component: /*#__PURE__*/React.createElement(InfoCircleIconThin, null),
  name: 'InfoCircleIconThin'
}, {
  defaultTitle: 'Lock in circle',
  component: /*#__PURE__*/React.createElement(LockCircleIcon, null),
  name: 'LockCircleIcon'
}, {
  defaultTitle: 'Lock',
  component: /*#__PURE__*/React.createElement(LockIcon, null),
  name: 'LockIcon'
}, {
  defaultTitle: 'Menu Icon',
  component: /*#__PURE__*/React.createElement(MenuIcon, null),
  name: 'MenuIcon'
}, {
  defaultTitle: 'Menu',
  component: /*#__PURE__*/React.createElement(MenuIconThin, null),
  name: 'MenuIconThin'
}, {
  defaultTitle: 'Minus in circle',
  component: /*#__PURE__*/React.createElement(MinusCircleIcon, null),
  name: 'MinusCircleIcon'
}, {
  defaultTitle: 'Next',
  component: /*#__PURE__*/React.createElement(NextIcon, null),
  name: 'NextIcon'
}, {
  defaultTitle: 'Pdf',
  component: /*#__PURE__*/React.createElement(PdfIcon, null),
  name: 'PdfIcon'
}, {
  defaultTitle: 'Plus in circle',
  component: /*#__PURE__*/React.createElement(PlusCircleIcon, null),
  name: 'PlusCircleIcon'
}, {
  defaultTitle: 'Remove',
  component: /*#__PURE__*/React.createElement(RemoveIcon, null),
  name: 'RemoveIcon'
}, {
  defaultTitle: 'Star / Star Filled',
  component: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StarIcon, null), /*#__PURE__*/React.createElement(StarIcon, {
    isFilled: true
  })),
  name: 'StarIcon',
  notes: 'Component takes <code>isFilled</code> prop to determine star is filled or an outline.'
}, {
  defaultTitle: 'U.S. flag',
  component: /*#__PURE__*/React.createElement(UsaFlagIcon, null),
  name: 'UsaFlagIcon'
}, {
  defaultTitle: 'Warning',
  component: /*#__PURE__*/React.createElement(WarningIcon, null),
  name: 'WarningIcon'
}];
export var AvailableIcons = function AvailableIcons() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("table", {
    className: "ds-c-table"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Icon Component"), /*#__PURE__*/React.createElement("th", null, "Example"), /*#__PURE__*/React.createElement("th", null, "Default ", /*#__PURE__*/React.createElement("code", null, "title"), " attribute"), /*#__PURE__*/React.createElement("th", null, "Notes"))), /*#__PURE__*/React.createElement("tbody", null, iconData.map(function (_ref) {
    var defaultTitle = _ref.defaultTitle,
        component = _ref.component,
        name = _ref.name,
        notes = _ref.notes;
    return /*#__PURE__*/React.createElement("tr", {
      key: name
    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("code", null, name)), /*#__PURE__*/React.createElement("td", {
      className: "ds-u-text-align--center"
    }, component), /*#__PURE__*/React.createElement("td", null, defaultTitle), /*#__PURE__*/React.createElement("td", {
      dangerouslySetInnerHTML: {
        __html: notes
      }
    }));
  }))));
};