[storybook] Add tone selection to container

sanity-io · Oct 6, 2020 · 3843dd8 · 3843dd8
1 parent 6394669
commit 3843dd8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/packages/@sanity/storybook/src/components/centeredContainer.css b/packages/@sanity/storybook/src/components/centeredContainer.css
@@ -8,7 +8,17 @@
   align-items: center;
   justify-content: center;
 
-  & > * {
+  @nest & > * {
     min-width: 0;
   }
+
+  @nest &[data-tone='component'] {
+    background-color: var(--component-bg);
+    color: var(--component-text-color);
+  }
+
+  @nest &[data-tone='navbar'] {
+    background-color: var(--main-navigation-color);
+    color: var(--main-navigation-color--inverted);
+  }
 }
diff --git a/packages/@sanity/storybook/src/components/centeredContainer.js b/packages/@sanity/storybook/src/components/centeredContainer.js
@@ -1,19 +1,31 @@
 import classNames from 'classnames'
-import {color, number} from 'part:@sanity/storybook/addons/knobs'
+import {number, select} from 'part:@sanity/storybook/addons/knobs'
 import React from 'react'
 
 import styles from './centeredContainer.css'
 
 export function CenteredContainer({children, className: classNameProp, style, ...restProps}) {
-  const backgroundColor = color('View color', 'rgba(255, 255, 255, 0', 'test')
-  const fontSize = number('Font size (rem)', 1, {range: true, min: 0.5, max: 3, step: 0.25})
+  const fontSize = number(
+    'Font size (rem)',
+    1,
+    {range: true, min: 0.5, max: 3, step: 0.25},
+    'Container'
+  )
   const className = classNames(styles.root, classNameProp)
+  const tone =
+    select(
+      'Background tone',
+      {'': '(none)', component: 'Component', navbar: 'Navbar'},
+      'component',
+      'Container'
+    ) || undefined
 
   return (
     <div
       {...restProps}
       className={className}
-      style={{backgroundColor, fontSize: `${fontSize}rem`, ...(style || {})}}
+      data-tone={tone}
+      style={{fontSize: `${fontSize}rem`, ...(style || {})}}
     >
       {children}
     </div>