@storybook/addon-knobs#color JavaScript Examples

The following examples show how to use @storybook/addon-knobs#color. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Chevron.stories.js    From pollaris with MIT License 6 votes vote down vote up 
atDifferentSizes = () => {
  const direction = select('Chevron', Object.values(ChevronDirections), Chevron.defaultProps.direction);
  const exampleText = text('Text', 'This is some text.');
  const chevronColor = color('Color');
  return (
    <div>
      <p>
        The chevron sizing and thickness is based on relative font size. Color
        by default is inherited from font color.
      </p>
      {Object.entries(theme.fontSize).map(([name, fontSize]) => (
        <div style={{ fontSize, marginBottom: theme.spacing.sp2 }}>
          <b>{`${name} (${fontSize}): `}</b>
          {exampleText}
          {' '}
          <Chevron direction={direction} color={chevronColor} />
        </div>
      ))}
    </div>
  );
}
Example #2
Source File: index.stories.js    From aeon with MIT License 5 votes vote down vote up 
dateOnly = () => {
  const knobs = {
    initialDate: text('Initial date', '2020-01-02'),
    defaultDate: text('Default date', '2020-01-01'),
    startDay: select('Start day', startDays, 1),
    startYear: text('Start year', '1900'),
    endYear: text('End year', '2050'),
    locale: text('Locale', ''),
    dateStyle: object('Date style', {
      year: 'numeric',
      month: 'numeric',
      day: 'numeric'
    }),
    confirmOnDate: boolean('Confirm on date', false),
    useNative: boolean('Use native', false),
    fgColor: color('Foreground Color', 'rgb(0, 0, 0)'),
    bgColor: color('Background Color', 'rgb(248, 248, 248)')
  };

  const container = document.createElement('div');
  container.innerHTML = `
    <aeon-datepicker
      default-date="${knobs.defaultDate}"
      start-day="${knobs.startDay}"
      start-year="${knobs.startYear}"
      end-year="${knobs.endYear}"
      locale="${knobs.locale}"
      date-style='${JSON.stringify(knobs.dateStyle)}'
      ${knobs.confirmOnDate ? `confirm-on-date` : ''}
      ${knobs.useNative ? `use-native` : ''}
      style="--aeon-rgb: ${getRGB(knobs.fgColor)}; --aeon-bgRgb: ${getRGB(
    knobs.bgColor
  )};"
    >
      <input
        type="date"
        id="date"
        value="${knobs.initialDate}"
        placeholder="Start date"
      />
    </aeon-datepicker>
  `;

  return container.firstElementChild;
}
Example #3
Source File: index.stories.js    From aeon with MIT License 5 votes vote down vote up 
dateAndTime = () => {
  const knobs = {
    initialDate: text('Initial date', '2020-01-02'),
    initialTime: text('Initial time', '12:00'),
    defaultDate: text('Default date', '2020-01-01'),
    defaultTime: text('Default time', '19:30'),
    startDay: select('Start day', startDays, 1),
    startYear: text('Start year', '1900'),
    endYear: text('End year', '2050'),
    locale: text('Locale', ''),
    dateStyle: object('Date style', {
      year: 'numeric',
      month: 'numeric',
      day: 'numeric',
      hours: 'numeric',
      minutes: 'numeric'
    }),
    useNative: boolean('Use native', false),
    fgColor: color('Foreground Color', 'rgb(0, 0, 0)'),
    bgColor: color('Background Color', 'rgb(248, 248, 248)')
  };

  const container = document.createElement('div');
  container.innerHTML = `
    <aeon-datepicker
      default-date="${knobs.defaultDate}"
      default-time="${knobs.defaultTime}"
      start-day="${knobs.startDay}"
      start-year="${knobs.startYear}"
      end-year="${knobs.endYear}"
      locale="${knobs.locale}"
      date-style='${JSON.stringify(knobs.dateStyle)}'
      ${knobs.useNative ? `use-native` : ''}
      style="--aeon-rgb: ${getRGB(knobs.fgColor)}; --aeon-bgRgb: ${getRGB(
    knobs.bgColor
  )};"
    >
      <input
        type="date"
        id="date"
        value="${knobs.initialDate}"
        placeholder="Date"
      />
      <input
        type="time"
        id="time"
        value="${knobs.initialTime}"
        placeholder="Time"
      />
    </aeon-datepicker>
  `;

  return container.firstElementChild;
}