@storybook/addon-knobs#color TypeScript Examples

withFullConfig = (): StoryFnReactReturnType => {
    const value = text('value', '123');
    const units = text('units', 'hz');
    const textColor = color('color', Colors.black[500]);
    const iconColor = color('icon.htmlColor', Colors.red[500]);
    const icon = boolean('Show Icon', true) ? (
        <Trend htmlColor={iconColor} style={getLeftToRightIconTransform()} />
    ) : (
        undefined
    );
    const fontSize = number('fontSize', 30);
    const prefix = boolean('prefix', false);
    const unitSpace = select('unitSpace', ['show', 'hide', 'auto'], 'auto');
    return (
        <ChannelValue
            value={value}
            units={units}
            color={textColor}
            icon={icon}
            fontSize={fontSize}
            prefix={prefix}
            unitSpace={unitSpace}
        />
    );
}

withFullConfig = (): StoryFnReactReturnType => (
    <ListItemTag
        label={text('label', 'clickable')}
        backgroundColor={color('backgroundColor', Colors.blue[500])}
        fontColor={color('fontColor', Colors.white[50])}
        onClick={action('ListItemTag: onClick')}
        style={{
            padding: text('style.padding', '0 4px'),
            width: text('style.width', 'initial'),
            boxSizing: 'border-box',
        }}
        paragraph={boolean('paragraph', false)}
        noWrap={boolean('noWrap', true)}
    />
)

withIcon = (): StoryFnReactReturnType => (
    <InfoListItem
        title={'Info List Item'}
        subtitle={'with an icon'}
        icon={<Alarm />}
        iconAlign={select('iconAlign', ['left', 'center', 'right'], 'left')}
        iconColor={color('iconColor', Colors.black[500])}
    />
)

withFullConfig = (): StoryFnReactReturnType => {
    const divider = select('divider', ['none', 'full', 'partial'], 'full');
    const appliedDivider = divider === 'none' ? undefined : divider;

    return (
        <InfoListItem
            title={text('title', 'Info List Item')}
            subtitle={text('subtitle', 'with all customizable properties')}
            info={text('info', 'more info...')}
            icon={boolean('Show Icon', true) ? <Device /> : undefined}
            hidePadding={boolean('hidePadding', false)}
            statusColor={color('statusColor', Colors.blue[500])}
            iconAlign={select('iconAlign', ['left', 'center', 'right'], 'left')}
            iconColor={color('iconColor', Colors.black[500])}
            fontColor={color('fontColor', Colors.black[500])}
            backgroundColor={color('backgroundColor', Colors.white[50])}
            avatar={boolean('avatar', false)}
            chevron={boolean('chevron', true)}
            chevronColor={color('chevronColor', Colors.gray[500])}
            dense={boolean('dense', false)}
            divider={appliedDivider}
            ripple={boolean('ripple', false)}
            onClick={action('clicked')}
            wrapTitle={boolean('wrapTitle', false)}
            wrapSubtitle={boolean('wrapSubtitle', false)}
            wrapInfo={boolean('wrapInfo', false)}
            disabled={boolean('disabled', false)}
        />
    );
}

withBackgroundColor = (): StoryFnReactReturnType => (
    <InfoListItem
        title={'Info List Item'}
        subtitle={'with a configurable background color'}
        fontColor={Colors.black[500]}
        iconColor={Colors.black[500]}
        icon={<Leaf />}
        backgroundColor={color('backgroundColor', Colors.white[50])}
    />
)

withAvatar = (): StoryFnReactReturnType => (
    <InfoListItem
        avatar
        title={'Info List Item'}
        subtitle={'with an avatar'}
        statusColor={color('statusColor', Colors.green[700])}
        icon={<GradeA />}
    />
)

withIconColors = (): StoryFnReactReturnType => (
    <Hero
        iconBackgroundColor={color('iconBackgroundColor', Colors.red[500])}
        icon={<Temp fontSize={'inherit'} htmlColor={color('icon.htmlColor', Colors.white[50])} />}
        label={'Temperature'}
        value={'38'}
        units={'°C'}
    />
)

withFullConfig = (): StoryFnReactReturnType => (
    <Hero
        label={text('label', 'Velocity')}
        units={text('units', 'RPM')}
        onClick={action('clicked')}
        value={text('value', '470')}
        valueIcon={
            boolean('Show Value Icon', true) ? <TrendingUpIcon style={getLeftToRightIconTransform()} /> : undefined
        }
        iconBackgroundColor={color('iconBackgroundColor', Colors.blue[500])}
        icon={<Fan fontSize={'inherit'} htmlColor={color('icon.htmlColor', Colors.white[50])} />}
        iconSize={number('iconSize', 35)}
        fontSize={select('fontSize', ['normal', 'small'], 'normal')}
    />
)

getProps = (): IconProps => ({
  name: select<ICON_NAME>(
    'name',
    Object.keys(ICON_SETS).reduce((result, key) => {
      // @ts-ignore
      result[key] = key;
      return result;
    }, {}),
    'show'
  ),
  size: number('size', 46),
  // @ts-ignore
  color: color('color', undefined),
})

styles = StyleSheet.create({
  container: {
    width: 200,
    alignContent: 'space-between',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  text: {
    color: 'white',
  },
})

withCustomHeader = (): StoryFnReactReturnType => (
    <ScoreCard
        style={{ width: 400, flex: '0 0 auto' }}
        headerTitle={text('headerTitle', 'Card Title')}
        headerSubtitle={text('headerSubtitle', 'Card Subtitle')}
        headerInfo={text('headerInfo', '4 Devices')}
        headerColor={color('headerColor', Colors.blue[500])}
        headerFontColor={color('headerFontColor', Colors.white[50])}
        headerBackgroundImage={backgroundImage}
    >
        <List>
            <ListItem>
                <ListItemText primary={'Body Content'} />
            </ListItem>
        </List>
    </ScoreCard>
)

withFullConfig = (): any => ({
    template: `
          <blui-list-item-tag [label]="label" [backgroundColor]="backgroundColor" [fontColor]="fontColor"> </blui-list-item-tag>
    `,
    props: {
        label: text('label', 'Label'),
        backgroundColor: color('backgroundColor', Colors.red[500]),
        fontColor: color('fontColor', Colors.white[50]),
    },
})

withStatus = (): any => ({
    template: `
        <blui-info-list-item [statusColor]="statusColor" [avatar]="true">
            <div blui-title>Info List Item</div>
            <div blui-subtitle>with a status indicator</div>
            <mat-icon blui-icon [style.backgroundColor]="statusColor" [style.color]="'white'">offline_bolt</mat-icon>
        </blui-info-list-item>
      `,
    props: {
        statusColor: color('statusColor', Colors.green[700]),
    },
})

AllIcons = () => {
  const size = select("Size", sizes, "x-large");
  const fill = color("Color", "rgba(0,0,0,.8)");
  return (
    <IconTable>
      {names.map((iconName) => {
        const Icon = mappings[iconName];

        if (typeof Icon !== "function") {
          return null;
        }

        return (
          <IconRow key={iconName}>
            <Icon size={size} fill={fill} />
            <IconText>{iconName}</IconText>
          </IconRow>
        );
      })}
    </IconTable>
  );
}

withIconColor = (): any => ({
    template: `
        <blui-hero [label]="'Temperature'" [value]="38" [units]="'°C'" [iconBackgroundColor]="iconBg">
            <i blui-primary [style.color]="iconColor" class="blui-temp"></i>
        </blui-hero>
    `,
    props: {
        iconColor: color('primary.style.color', Colors.white[50]),
        iconBg: color('primary.style.backgroundColor', Colors.red[500]),
    },
})

withFullConfig = (): any => ({
    template: `
        <blui-hero [label]="label" [value]="value" [units]="units" [unitSpace]="unitSpace" [iconSize]="iconSize" [iconBackgroundColor]="colors.blue[500]">
            <i blui-primary [style.color]="iconColor" class="blui-fan"></i>
            <mat-icon blui-secondary *ngIf="showSecondary" [style.transform]="invertRTL()">
                trending_up
            </mat-icon>
        </blui-hero>
      `,
    props: {
        label: text('label', 'Velocity'),
        value: text('value', '470'),
        units: text('units', 'RPM'),
        unitSpace: select('unitSpace', ['show', 'hide', 'auto'], 'hide'),
        showSecondary: boolean('Show Secondary Icon', true),
        iconSize: number('iconSize', 36),
        iconColor: color('primary.style.color', Colors.white[50]),
        invertRTL: invertRTL,
        colors: Colors,
    },
})

withFullConfig = (): any => ({
    template: `
        <blui-empty-state [title]="title" [description]="description">
            <mat-icon blui-empty-icon 
                [style.color]="color" 
                [style.fontSize.px]="fontSize" 
                [style.transform]="invertRTL()">trending_up</mat-icon>
            <button blui-actions mat-stroked-button color="primary" (click)="click()">
                {{actionText}}
            </button>
        </blui-empty-state>
    `,
    props: {
        title: text('title', 'Predictions Page Coming Soon'),
        description: text('description', 'A fully redesigned predictions page is coming in our next release!'),
        click: action('button clicked'),
        actionText: text('Action Text', 'Learn More'),
        color: color('emptyIcon.color', Colors.black[500]),
        fontSize: number('emptyIcon.fontSize.px', 90),
        invertRTL: invertRTL,
    },
})

withIcon = (): any => ({
    template: `
        <blui-channel-value [value]="'123'" [units]="'hz'">
            <mat-icon [style.color]="iconColor" [style.transform]="invertRTL()">trending_up</mat-icon>
        </blui-channel-value>
    `,
    props: {
        iconColor: color('icon.color', Colors.red[500]),
        invertRTL: invertRTL,
    },
})

withFullConfig = (): any => ({
    template: `
        <blui-channel-value [value]="value" [units]="units" [color]="color" [prefix]="prefix" [unitSpace]="unitSpace">
            <mat-icon *ngIf="showIcon" [style.color]="iconColor" [style.transform]="invertRTL()">trending_up</mat-icon>
        </blui-channel-value> 
    `,
    props: {
        value: text('value', '123'),
        units: text('units', 'hz'),
        iconColor: color('icon.color', Colors.red[500]),
        showIcon: boolean('Show Icon', true),
        color: color('color', Colors.black[500]),
        prefix: boolean('prefix', false),
        unitSpace: select('unitSpace', ['show', 'hide', 'auto'], 'auto'),
        invertRTL: invertRTL,
    },
})

gaugeParams = (id) => ({
  type: select(
    'Shape type',
    [ShapeType.circle],
    0,
    'item ' + id
  ),
  color: color('Shape color', 'red', 'item ' + id),
  anchored: boolean('With anchor', false, 'item ' + id),
  percent: percentParams(id),
})

shapeParams = (id) => ({
  type: select(
    'Shape type',
    [ShapeType.circle, ShapeType.square],
    0,
    'item ' + id
  ),
  color: color('Shape color', '#FFCC00', 'item ' + id),
  anchored: boolean('With anchor', false, 'item ' + id),
  plain: boolean('Plain shape', false, 'item ' + id),
  accuracy: accuracyParams(id),
  direction: directionParams(id)
})

iconWithLabel = (): StoryFnReactReturnType => {
    const label = text('label', 'Subtitle');
    const iconColor = color('icon.htmlColor', Colors.green[500]);
    const icon = <GradeA htmlColor={iconColor} />;

    return <ToolbarMenu icon={icon} label={label} menuGroups={menuGroups} />;
}

Playground = () => {
  const fill = color("Color", "rgba(0,0,0,.8)");
  const size = select("Size", sizes, "x-large");
  const Icon = mappings[select("Icon", names, "alert")];
  return <Icon size={size} fill={fill} />;
}

withCustomColors = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        root: {
            color: color('fontColor', Colors.white[50], 'Avatar'),
            backgroundColor: color('backgroundColor', Colors.blue[800], 'Avatar'),
        },
        paper: {
            backgroundColor: color('backgroundColor', Colors.white[50], 'Menu'),
        },
    });

    const classes = useStyles();
    const avatar = <Avatar classes={{ root: classes.root }}>CD</Avatar>;

    return (
        <UserMenu
            avatar={avatar}
            menuGroups={[
                {
                    items: [
                        {
                            title: 'Settings',
                            icon: <Settings />,
                            onClick: action("click 'Settings'"),
                        },
                        {
                            title: 'Contact Us',
                            icon: <Email />,
                            onClick: action("click 'Contact Us'"),
                        },
                        {
                            title: 'Log Out',
                            icon: <ExitToApp style={getLeftToRightIconTransform()} />,
                            onClick: action("click 'Log Out'"),
                        },
                    ],
                    fontColor: color('menuGroups.fontColor', Colors.black[500], 'Menu'),
                    iconColor: color('menuGroups.iconColor', Colors.black[500], 'Menu'),
                },
            ]}
            MenuProps={{ classes: { paper: classes.paper } }}
            onOpen={action('open')}
            onClose={action('close')}
        />
    );
}

props = (): SpinnerProps => ({
  size: number('size', 44),
  // @ts-ignore
  activeColor: color('activeColor', undefined),
  // @ts-ignore
  trackColor: color('trackColor', undefined),
})

Inline = () => {
  const fill = color("Color", "rgba(0,0,0,.8)");
  return (
    <div style={{ color: fill, fontFamily: "sans-serif" }}>
      This <AlertIcon inline /> inherits text styles.
    </div>
  );
}

withFullConfig = (): StoryFnReactReturnType => {
    const useStyles = makeStyles({
        title: {
            fontWeight: 400,
        },
    });
    const classes = useStyles();

    return (
        <ScoreCard
            style={{ width: 400, flex: '0 0 auto' }}
            headerTitle={text('headerTitle', 'Substation 3')}
            headerSubtitle={text('headerSubtitle', 'High Humidity Alarm')}
            headerInfo={text('headerInfo', '4 Devices')}
            headerColor={color('headerColor', Colors.blue[500])}
            headerFontColor={color('headerFontColor', Colors.white[50])}
            headerBackgroundImage={boolean('headerBackgroundImage', true) ? backgroundImage : undefined}
            actionLimit={number('actionLimit', 3, { range: true, min: 1, max: 6, step: 1 })}
            actionItems={actionItems}
            actionRow={actionRow}
            badge={
                <HeroBanner>
                    {heroes.slice(0, number('Number of Heroes', 1, { range: true, min: 0, max: 2, step: 1 }))}
                </HeroBanner>
            }
            badgeOffset={number('badgeOffset', -40)}
        >
            <List style={{ padding: '.5rem 0' }}>
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'0 Alarms'}
                    icon={<Notifications color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    fontColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    iconColor={useDarkMode() ? Colors.blue[300] : Colors.blue[500]}
                    title={'1 Event'}
                    icon={<ListAlt color={'inherit'} style={getLeftToRightIconTransform()} />}
                />
                <InfoListItem
                    dense
                    style={{ height: '2.25rem' }}
                    title={'Online'}
                    icon={<Cloud color={'inherit'} />}
                    classes={{ title: classes.title }}
                />
            </List>
        </ScoreCard>
    );
}

withCustomColors = (): StoryFnReactReturnType => (
    <ListItemTag
        label={text('label', 'active')}
        backgroundColor={color('backgroundColor', Colors.red['500'])}
        fontColor={color('fontColor', Colors.white['50'])}
    />
)

withFooter = (): StoryFnReactReturnType => {
    const [selected, setSelected] = useState('');

    const navGroupItems: NavItem[] = [
        {
            title: 'Settings',
            itemID: '1',
            icon: <Settings />,
            onClick: (): void => setSelected('1'),
        },
        {
            title: 'Legal',
            itemID: '2',
            icon: <Gavel />,
            onClick: (): void => setSelected('2'),
        },
    ];

    return (
        <Drawer open={boolean('open', true)} activeItem={selected}>
            <DrawerHeader icon={<Menu />} title={'Footer Example'} />
            <DrawerBody>
                <DrawerNavGroup items={navGroupItems} />
            </DrawerBody>

            <DrawerFooter
                backgroundColor={color('backgroundColor', Colors.white[50])}
                hideContentOnCollapse={boolean('hideContentOnCollapse', true)}
                divider={boolean('divider', true)}
            >
                <div
                    style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        flexDirection: 'row',
                        padding: 16,
                    }}
                >
                    <img
                        src={useDarkMode() ? EatonFooterLogoDark : EatonFooterLogoLight}
                        alt="Eaton Logo"
                        height={28}
                        width={'auto'}
                    />
                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                        <Typography
                            variant={'caption'}
                        >{`Copyright \u00A9 Eaton ${new Date().getFullYear()}`}</Typography>
                        <Typography variant={'caption'}>All Rights Reserved</Typography>
                    </div>
                </div>
            </DrawerFooter>
        </Drawer>
    );
}