Merge pull request #5372 from storybooks/tech/v5-theming

Tech/v5 theming - treeview & preview
storybookjs · Jan 30, 2019 · d5bce5f · d5bce5f
2 parents ec0949b + 25fc785
commit d5bce5f
Show file tree

Hide file tree

Showing 128 changed files with 12,171 additions and 6,370 deletions.
diff --git a/addons/a11y/src/components/ColorBlindness.js b/addons/a11y/src/components/ColorBlindness.js
@@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';
 
@@ -17,10 +17,6 @@ const ColorIcon = styled.span(
   })
 );
 
-const Hidden = styled.div(() => ({
-  display: 'none',
-}));
-
 class ColorBlindness extends Component {
   state = {
     filter: false,
@@ -44,118 +40,54 @@ class ColorBlindness extends Component {
     const { filter } = this.state;
 
     return (
-      <Fragment>
-        <Hidden>
-          <svg key="svg">
-            <defs>
-              <filter id="protanopia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="protanomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="deuteranopia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="deuteranomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="tritanopia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="tritanomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="achromatopsia">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-              <filter id="achromatomaly">
-                <feColorMatrix
-                  in="SourceGraphic"
-                  type="matrix"
-                  values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
-                />
-              </filter>
-            </defs>
-          </svg>
-        </Hidden>
-        <Popout key="filters">
-          <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
-            <Icons icon="mirror" />
-          </IconButton>
-          {({ hide }) => (
-            <List>
-              {[
-                'protanopia',
-                'protanomaly',
-                'deuteranopia',
-                'deuteranomaly',
-                'tritanopia',
-                'tritanomaly',
-                'achromatopsia',
-                'achromatomaly',
-              ].map(i => (
-                <Item
-                  key={i}
-                  onClick={() => {
-                    this.setFilter(filter === i ? null : i);
-                    hide();
-                  }}
-                >
-                  <Icon type={<ColorIcon filter={i} />} />
-                  <Title>{i}</Title>
-                </Item>
-              ))}
-              <Item
-                onClick={() => {
-                  this.setFilter(filter === 'mono' ? null : 'mono');
-                  hide();
-                }}
-              >
-                <Icon type={<ColorIcon filter="mono" />} />
-                <Title>mono</Title>
-              </Item>
+      <Popout key="filters">
+        <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
+          <Icons icon="mirror" />
+        </IconButton>
+        {({ hide }) => (
+          <List>
+            {[
+              'protanopia',
+              'protanomaly',
+              'deuteranopia',
+              'deuteranomaly',
+              'tritanopia',
+              'tritanomaly',
+              'achromatopsia',
+              'achromatomaly',
+            ].map(i => (
               <Item
+                key={i}
                 onClick={() => {
-                  this.setFilter(null);
+                  this.setFilter(filter === i ? null : i);
                   hide();
                 }}
               >
-                <Icon type={<ColorIcon />} />
-                <Title>Off</Title>
+                <Icon type={<ColorIcon filter={i} />} />
+                <Title>{i}</Title>
               </Item>
-            </List>
-          )}
-        </Popout>
-      </Fragment>
+            ))}
+            <Item
+              onClick={() => {
+                this.setFilter(filter === 'mono' ? null : 'mono');
+                hide();
+              }}
+            >
+              <Icon type={<ColorIcon filter="mono" />} />
+              <Title>mono</Title>
+            </Item>
+            <Item
+              onClick={() => {
+                this.setFilter(null);
+                hide();
+              }}
+            >
+              <Icon type={<ColorIcon />} />
+              <Title>Off</Title>
+            </Item>
+          </List>
+        )}
+      </Popout>
     );
   }
 }

diff --git a/addons/a11y/src/components/Panel.js b/addons/a11y/src/components/Panel.js
@@ -12,11 +12,11 @@ import Tabs from './Tabs';
 import Report from './Report';
 
 const Passes = styled.span(({ theme }) => ({
-  color: theme.successColor,
+  color: theme.color.positive,
 }));
 
 const Violations = styled.span(({ theme }) => ({
-  color: theme.failColor,
+  color: theme.color.negative,
 }));
 
 class A11YPanel extends Component {

diff --git a/addons/a11y/src/components/Report/Item.js b/addons/a11y/src/components/Report/Item.js
@@ -23,7 +23,7 @@ const HeaderBar = styled.button(({ theme }) => ({
 
   '&:focus': {
     outline: '0 none',
-    borderLeft: `3px solid ${theme.highlightColor}`,
+    borderLeft: `3px solid ${theme.color.secondary}`,
   },
 }));
 

diff --git a/addons/a11y/src/components/Tabs.js b/addons/a11y/src/components/Tabs.js
@@ -39,7 +39,7 @@ const Item = styled.button(
 
     '&:focus': {
       outline: '0 none',
-      borderBottom: `3px solid ${theme.highlightColor}`,
+      borderBottom: `3px solid ${theme.color.secondary}`,
     },
   })
 );

diff --git a/addons/a11y/src/register.js b/addons/a11y/src/register.js
@@ -1,14 +1,88 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import addons, { types } from '@storybook/addons';
+import { styled } from '@storybook/theming';
 
 import Panel from './components/Panel';
 import ColorBlindness from './components/ColorBlindness';
 
 import { ADDON_ID, PANEL_ID } from './constants';
 
+const Hidden = styled.div(() => ({
+  display: 'none',
+}));
+
+const PreviewWrapper = p => (
+  <Fragment>
+    {p.children}
+    <Hidden>
+      <svg key="svg">
+        <defs>
+          <filter id="protanopia">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
+            />
+          </filter>
+          <filter id="protanomaly">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
+            />
+          </filter>
+          <filter id="deuteranopia">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
+            />
+          </filter>
+          <filter id="deuteranomaly">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
+            />
+          </filter>
+          <filter id="tritanopia">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
+            />
+          </filter>
+          <filter id="tritanomaly">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
+            />
+          </filter>
+          <filter id="achromatopsia">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
+            />
+          </filter>
+          <filter id="achromatomaly">
+            <feColorMatrix
+              in="SourceGraphic"
+              type="matrix"
+              values="0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </Hidden>
+  </Fragment>
+);
+
 addons.register(ADDON_ID, api => {
   addons.add(PANEL_ID, {
     type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
     render: () => <ColorBlindness />,
   });
 
@@ -18,4 +92,9 @@ addons.register(ADDON_ID, api => {
     // eslint-disable-next-line react/prop-types
     render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
   });
+
+  addons.add(PANEL_ID, {
+    type: types.PREVIEW,
+    render: PreviewWrapper,
+  });
 });
diff --git a/addons/actions/src/manager.js b/addons/actions/src/manager.js
@@ -7,7 +7,7 @@ export function register() {
   addons.register(ADDON_ID, api => {
     const channel = addons.getChannel();
     addons.addPanel(PANEL_ID, {
-      title: 'Action Logger',
+      title: 'Actions',
       // eslint-disable-next-line react/prop-types
       render: ({ active, key }) => (
         <ActionLogger key={key} channel={channel} api={api} active={active} />

diff --git a/addons/backgrounds/src/Tool.js b/addons/backgrounds/src/Tool.js
@@ -92,46 +92,44 @@ export default class BackgroundTool extends Component {
     }
 
     return (
-      <Fragment>
-        <Popout key="backgrounds">
-          <IconButton key="background" title="Backgrounds">
-            <Icons icon="photo" />
-          </IconButton>
-          {({ hide }) => (
-            <List>
-              {selected !== undefined ? (
-                <Fragment>
-                  <Item
-                    key="reset"
-                    onClick={() => {
-                      hide();
-                      this.change(undefined);
-                    }}
-                  >
-                    <Icon type="undo" />
-                    <Title>Reset</Title>
-                    <Detail>transparent</Detail>
-                  </Item>
-                </Fragment>
-              ) : null}
-
-              {list.map(([key, value]) => (
+      <Popout key="backgrounds">
+        <IconButton key="background" title="Backgrounds">
+          <Icons icon="photo" />
+        </IconButton>
+        {({ hide }) => (
+          <List>
+            {selected !== undefined ? (
+              <Fragment>
                 <Item
-                  key={key}
+                  key="reset"
                   onClick={() => {
                     hide();
-                    this.change(key);
+                    this.change(undefined);
                   }}
                 >
-                  <Icon type={<S.ColorIcon background={value} />} />
-                  <Title>{key}</Title>
-                  <Detail>{value}</Detail>
+                  <Icon type="undo" />
+                  <Title>Reset</Title>
+                  <Detail>transparent</Detail>
                 </Item>
-              ))}
-            </List>
-          )}
-        </Popout>
-      </Fragment>
+              </Fragment>
+            ) : null}
+
+            {list.map(([key, value]) => (
+              <Item
+                key={key}
+                onClick={() => {
+                  hide();
+                  this.change(key);
+                }}
+              >
+                <Icon type={<S.ColorIcon background={value} />} />
+                <Title>{key}</Title>
+                <Detail>{value}</Detail>
+              </Item>
+            ))}
+          </List>
+        )}
+      </Popout>
     );
   }
 }