Updated stories

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx

@@ -2,9 +2,12 @@ import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
 import { ColorPicker } from './ColorPicker';
 import { SeriesColorPicker } from './SeriesColorPicker';
-import { UseState } from './NamedColorsPicker.story';
+import { UseState } from './NamedColorsPalette.story';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import { GrafanaTheme } from '../../types';
 
-const CenteredStory: FunctionComponent<{}> = ({ children }) => {
+// TODO: extract to decorators
+export const CenteredStory: FunctionComponent<{}> = ({ children }) => {
   return (
     <div
       style={{
@@ -22,10 +25,39 @@ const CenteredStory: FunctionComponent<{}> = ({ children }) => {
 const ColorPickerStories = storiesOf('UI/ColorPicker', module);
 
 ColorPickerStories.addDecorator(story => <CenteredStory>{story()}</CenteredStory>);
+ColorPickerStories.addDecorator(withKnobs);
+
 ColorPickerStories.add('Color picker', () => {
-  return <ColorPicker color="#ff0000" onChange={() => {}} />;
+  const selectedTheme = select(
+    'Theme',
+    {
+      Default: '',
+      Light: GrafanaTheme.Light,
+      Dark: GrafanaTheme.Dark,
+    },
+    GrafanaTheme.Light
+  );
+
+  return (
+    <UseState initialState="#00ff00">
+      {(selectedColor, updateSelectedColor) => {
+        return <ColorPicker color={selectedColor} onChange={updateSelectedColor} theme={selectedTheme || undefined} />;
+      }}
+    </UseState>
+  );
 });
+
 ColorPickerStories.add('Series color picker', () => {
+  const selectedTheme = select(
+    'Theme',
+    {
+      Default: '',
+      Light: GrafanaTheme.Light,
+      Dark: GrafanaTheme.Dark,
+    },
+    GrafanaTheme.Light
+  );
+
   return (
     <UseState initialState="#00ff00">
       {(selectedColor, updateSelectedColor) => {
@@ -35,8 +67,9 @@ ColorPickerStories.add('Series color picker', () => {
             onToggleAxis={() => {}}
             color={selectedColor}
             onChange={color => updateSelectedColor(color)}
+            theme={selectedTheme || undefined}
           >
-            <div style={{color: selectedColor}}>Open color picker</div>
+            <div style={{ color: selectedColor }}>Open color picker</div>
           </SeriesColorPicker>
         );
       }}

packages/grafana-ui/src/components/ColorPicker/NamedColorsPicker.story.tsx → packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { storiesOf } from '@storybook/react';
-import NamedColorsPicker from './NamedColorsPicker';
+import NamedColorsPalette from './NamedColorsPalette';
 import { getColorName } from '@grafana/ui/src/utils/colorsPalette';
 import { withKnobs, select } from '@storybook/addon-knobs';
 
@@ -47,7 +47,7 @@ export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T
   }
 }
 
-storiesOf('UI/NamedColorPicker', module)
+storiesOf('UI/NamedColorsPalette', module)
   .addDecorator(withKnobs)
   .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
   .add('Named colors swatch - support for named colors', () => {
@@ -65,7 +65,7 @@ storiesOf('UI/NamedColorPicker', module)
       <UseState initialState={selectedColor}>
         {(selectedColor, updateSelectedColor) => {
           return (
-            <NamedColorsPicker
+            <NamedColorsPalette
               color={selectedColor}
               onChange={updateSelectedColor}
             />
@@ -79,7 +79,7 @@ storiesOf('UI/NamedColorPicker', module)
       <UseState initialState="#00ff00">
         {(selectedColor, updateSelectedColor) => {
           return (
-            <NamedColorsPicker
+            <NamedColorsPalette
               color={getColorName(selectedColor)}
               onChange={updateSelectedColor}
             />