@navinc/base-react-components
Version:
Nav's Pattern Library
170 lines (164 loc) • 6.13 kB
JavaScript
import React from 'react'
import withPropsCombinations from 'react-storybook-addon-props-combinations'
import { Icon } from './icon.js'
import readme from './icon.readme.md'
import * as theme from './theme.js'
export const iconList = {
'actions/close': 'actions/close',
'actions/done': 'actions/done',
'actions/logout': 'actions/logout',
'actions/minus': 'actions/minus',
'actions/plus': 'actions/plus',
'actions/arrow-back': 'actions/arrow-back',
'actions/arrow-down': 'actions/arrow-down',
'actions/arrow-forward': 'actions/arrow-forward',
'actions/arrow-up': 'actions/arrow-up',
'actions/carrot-down': 'actions/carrot-down',
'actions/carrot-left': 'actions/carrot-left',
'actions/carrot-right': 'actions/carrot-right',
'actions/carrot-up': 'actions/carrot-up',
'actions/check-circle': 'actions/check-circle',
'actions/circle-block': 'actions/circle-block',
'actions/circle-delete': 'actions/circle-delete',
'actions/circle-faq': 'actions/circle-faq',
'actions/circle-info': 'actions/circle-info',
'actions/circle-minus': 'actions/circle-minus',
'actions/circle-play': 'actions/circle-play',
'actions/circle-plus': 'actions/circle-plus',
'actions/circle-warning': 'actions/circle-warning',
'actions/cloud-download': 'actions/cloud-download',
'actions/cloud-upload': 'actions/cloud-upload',
'actions/download': 'actions/download',
'actions/export': 'actions/export',
'actions/link-out': 'actions/link-out',
'actions/sort-horizontal': 'actions/sort-horizontal',
'actions/sort-vertical': 'actions/sort-vertical',
'actions/print': 'actions/print',
'buildings/bank': 'buildings/bank',
'buildings/home': 'buildings/home',
'buildings/business': 'buildings/business',
'business/archive': 'business/archive',
'business/calendar': 'business/calendar',
'business/delivery-box': 'business/delivery-box',
'business/document': 'business/document',
'business/email': 'business/email',
'business/history': 'business/history',
'business/map': 'business/map',
'business/calendar-date': 'business/calendar-date',
'business/imac': 'business/imac',
'business/iphone': 'business/iphone',
'business/matchfactor': 'business/matchfactor',
'data/report': 'data/report',
'data/todo': 'data/todo',
'data/bar-graph': 'data/bar-graph',
'data/chart-down': 'data/chart-down',
'data/chart-up': 'data/chart-up',
'data/line-graph': 'data/line-graph',
'data/report-fail': 'data/report-fail',
'data/report-success': 'data/report-success',
'data/reports-multiple': 'data/reports-multiple',
'data/round-chart': 'data/round-chart',
'feedback/balloon': 'feedback/balloon',
'feedback/flag': 'feedback/flag',
'feedback/hot': 'feedback/hot',
'feedback/party': 'feedback/party',
'feedback/star': 'feedback/star',
'feedback/alert': 'feedback/alert',
'feedback/alert-notification': 'feedback/alert-notification',
'feedback/alert-off': 'feedback/alert-off',
'feedback/thumbs-down': 'feedback/thumbs-down',
'feedback/thumbs-up': 'feedback/thumbs-up',
'financing/calculation': 'financing/calculation',
'financing/calculator': 'financing/calculator',
'financing/cart': 'financing/cart',
'financing/cash': 'financing/cash',
'financing/coins': 'financing/coins',
'financing/lending': 'financing/lending',
'financing/wallet': 'financing/wallet',
'financing/card-add': 'financing/card-add',
'financing/card-coins': 'financing/card-coins',
'financing/card-lock': 'financing/card-lock',
'financing/card-ok': 'financing/card-ok',
'financing/cart-add': 'financing/cart-add',
'financing/cash-register': 'financing/cash-register',
'financing/coin-bag': 'financing/coin-bag',
'financing/coin-stack': 'financing/coin-stack',
'financing/credit-card': 'financing/credit-card',
'financing/money-bag': 'financing/money-bag',
'financing/money-circle': 'financing/money-circle',
'financing/piggy-bank': 'financing/piggy-bank',
'food/apple': 'food/apple',
'food/burger': 'food/burger',
'food/cake': 'food/cake',
'food/donut': 'food/donut',
'food/pizza': 'food/pizza',
'food/popsicle': 'food/popsicle',
'food/soup': 'food/soup',
'food/strawberry': 'food/strawberry',
'food/turkey': 'food/turkey',
'food/watermelon': 'food/watermelon',
'food/coffee-cup': 'food/coffee-cup',
'food/coffee-mug': 'food/coffee-mug',
'medical/stethoscope': 'medical/stethoscope',
'people/man': 'people/man',
'people/profile': 'people/profile',
'people/woman': 'people/woman',
'seasons/leaf': 'seasons/leaf',
'seasons/raindrop': 'seasons/raindrop',
'seasons/snowflake': 'seasons/snowflake',
'seasons/sun': 'seasons/sun',
'seasons/umbrella': 'seasons/umbrella',
'seasons/cloud-sun': 'seasons/cloud-sun',
'seasons/tree-palm': 'seasons/tree-palm',
'seasons/tree-point': 'seasons/tree-point',
'seasons/tree-round': 'seasons/tree-round',
'system/attachment': 'system/attachment',
'system/bookmark': 'system/bookmark',
'system/certified-ribbon': 'system/certified-ribbon',
'system/edit': 'system/edit',
'system/link': 'system/link',
'system/mic': 'system/mic',
'system/pen': 'system/pen',
'system/pencil': 'system/pencil',
'system/search': 'system/search',
'system/share': 'system/share',
'system/trash': 'system/trash',
'system/unlink': 'system/unlink',
'system/mic-off': 'system/mic-off',
'tech/car': 'tech/car',
'tech/dashboard': 'tech/dashboard',
'tech/filter': 'tech/filter',
'tech/locked': 'tech/locked',
'tech/pin': 'tech/pin',
'tech/settings': 'tech/settings',
'tech/tool': 'tech/tool',
'tech/unlocked': 'tech/unlocked',
}
export default {
title: 'General/Icon',
component: Icon,
parameters: {
info: { text: readme },
},
}
export const Basic = (args) => <Icon {...args} />
Basic.argTypes = {
name: {
control: { type: 'select' },
options: Object.values(iconList),
},
color: {
control: 'color',
colorPresets: theme.azure,
},
}
Basic.args = {
name: 'feedback/hot',
color: '',
}
export const Variations = withPropsCombinations(Icon, {
name: Object.values(iconList),
})
Variations.parameters = {
info: { disable: true },
}