Prototype of generating style guide + snapshot tests from *.info.js

.flowconfig

@@ -1,7 +1,6 @@
 [ignore]
 .*/node_modules/react/node_modules/.*
 .*/node_modules/postcss-import/node_modules/.*
-.*/node_modules/@kadira/storybook/node_modules/.*
 .*/node_modules/.*/\(lib\|test\).*\.json$
 
 [include]

frontend/src/metabase/components/Button.info.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Button from "metabase/components/Button";
+
+export const component = Button;
+
+export const description = `
+Metabase's main button component.
+`;
+
+export const examples = {
+    "": <Button>Clickity click</Button>,
+    "primary": <Button primary>Clickity click</Button>,
+    "with an icon": <Button icon='star'>Clickity click</Button>
+};

frontend/src/metabase/components/CheckBox.info.js

@@ -0,0 +1,14 @@
+import React from "react";
+import CheckBox from "metabase/components/CheckBox";
+
+export const component = CheckBox;
+
+export const description = `
+A standard checkbox.
+`;
+
+export const examples = {
+    "off": <CheckBox />,
+    "on": <CheckBox checked />,
+    "on inverted": <CheckBox style={{ color: "#509EE3" }} invertChecked checked />
+};

frontend/src/metabase/components/StackedCheckBox.info.js

@@ -0,0 +1,14 @@
+import React from "react";
+import StackedCheckBox from "metabase/components/StackedCheckBox";
+
+export const component = StackedCheckBox;
+
+export const description = `
+A stacked checkbox, representing "all" items.
+`;
+
+export const examples = {
+    "off": <StackedCheckBox />,
+    "on": <StackedCheckBox checked />,
+    "on inverted": <StackedCheckBox style={{ color: "#509EE3" }} invertChecked checked />
+};

frontend/src/metabase/components/Toggle.info.js

@@ -0,0 +1,13 @@
+import React from "react";
+import Toggle from "metabase/components/Toggle";
+
+export const component = Toggle;
+
+export const description = `
+A standard toggle.
+`;
+
+export const examples = {
+    "off": <Toggle value={false} />,
+    "on": <Toggle value={true} />
+};