import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { createNamespace } from '../../../tools/namingTools';
import Icon from '../Icon';
import types from '../types';
import '../styles/Icon.story.scss';

export const storyRowStyle = {
    display: 'flex',
    alignItems: 'center',
    padding: '4px 12px',
    marginBottom: '6px'
};
export const iconWrapperStyle = {
    display: 'flex'
};

export const renderIcons = ns => Object.keys(types).map(type => (
    <div
        style={storyRowStyle}
        key={`icon-${type}`}
    >
        <span style={{ marginRight: '20px' }}>
            {`type ${type}`}
        </span>
        <div style={iconWrapperStyle}>
            <Icon
                type={type}
                {...ns('story', type).props}
            />
        </div>
    </div>
));

<Meta title="Atoms/Icon" component={Icon} />

# Icon
<br />

## `Icons` are used to insert symbols representing a particular thing or action.
<br />

### All types at matching sizes
<Canvas>
    <Story name="All types at matching sizes">
        {renderIcons(createNamespace('Icon'))}
    </Story>
</Canvas>

### With other colors and sizes
<Canvas>
    <Story name="With other colors and sizes">
        {renderIcons(createNamespace('IconColored'))}
    </Story>
</Canvas>

### Ratings
<Canvas>
    <Story name="Ratings">
        <React.Fragment>
            <div style={storyRowStyle}>
                <span style={{ marginRight: '20px' }}>ratings</span>
                <div style={iconWrapperStyle}>
                    <Icon type="star" className="iconRatings_positiveStar" />
                    <Icon type="star" className="iconRatings_positiveStar" />
                    <Icon type="star" className="iconRatings_positiveStar" />
                    <Icon type="star" className="iconRatings_star" />
                    <Icon type="star" className="iconRatings_star" />
                </div>
            </div>
        </React.Fragment>
    </Story>
</Canvas>

## Usage Example
```jsx
import Icon from '@appdirect/sfb-theme-components/src/atoms/icon/Icon';

<Icon type="star" className="iconRatings_positiveStar" />
```
## Props

<ArgsTable of={Icon} />
