diff --git a/addons/controls/src/components/ControlsPanel.tsx b/addons/controls/src/components/ControlsPanel.tsx index 91d273bb22a..8863ebe7da7 100644 --- a/addons/controls/src/components/ControlsPanel.tsx +++ b/addons/controls/src/components/ControlsPanel.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; -import { styled } from '@storybook/theming'; -import { ArgsTable, Link } from '@storybook/components'; +import { ArgsTable, NoControlsWarning } from '@storybook/components'; import { useArgs, useArgTypes, useParameter } from '@storybook/api'; + import { PARAM_KEY } from '../constants'; interface ControlsParameters { @@ -9,24 +9,6 @@ interface ControlsParameters { hideNoControlsWarning?: boolean; } -const NoControlsWrapper = styled.div(({ theme }) => ({ - background: theme.background.warning, - padding: 20, -})); - -const NoControlsWarning = () => ( - - This story is not configured to handle controls.  - - Learn how to add controls » - - -); - export const ControlsPanel: FC = () => { const [args, updateArgs] = useArgs(); const rows = useArgTypes(); diff --git a/addons/controls/src/components/NoControlsWarning.tsx b/addons/controls/src/components/NoControlsWarning.tsx new file mode 100644 index 00000000000..5e4038f1a02 --- /dev/null +++ b/addons/controls/src/components/NoControlsWarning.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { styled } from '@storybook/theming'; +import { Link } from '@storybook/components'; + +const NoControlsWrapper = styled.div(({ theme }) => ({ + background: theme.background.warning, + padding: '10px 15px', + lineHeight: '20px', + boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, +})); + +export const NoControlsWarning = () => ( + + This story is not configured to handle controls.  + + Learn how to add controls » + + +); diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index d733060152b..9c061c37884 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; +import { styled } from '@storybook/theming'; import { ArgsTable, ArgsTableError } from './ArgsTable'; +import { NoControlsWarning } from './NoControlsWarning'; import * as ArgRow from './ArgRow.stories'; export default { @@ -36,11 +38,29 @@ Compact.args = { compact: true, }; -export const inAddonPanel = Story.bind({}); -inAddonPanel.args = { +const AddonPanelLayout = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s2 - 1, + background: theme.background.content, +})); + +export const InAddonPanel = Story.bind({}); +InAddonPanel.args = { ...Normal.args, inAddonPanel: true, }; +InAddonPanel.decorators = [(storyFn) => {storyFn()}]; + +export const InAddonPanelWithWarning = (args) => ( + <> + + + +); +InAddonPanelWithWarning.args = { + ...InAddonPanel.args, + updateArgs: null, +}; +InAddonPanelWithWarning.decorators = InAddonPanel.decorators; export const Sections = Story.bind({}); Sections.args = { diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx index 951f10c791b..61ec4f4b778 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx @@ -189,16 +189,16 @@ const groupRows = (rows: ArgType) => { if (category) { const section = sections.sections[category] || { ungrouped: [], subsections: {} }; if (!subcategory) { - section.ungrouped.push(row); + section.ungrouped.push({ key, ...row }); } else { const subsection = section.subsections[subcategory] || []; - subsection.push(row); + subsection.push({ key, ...row }); section.subsections[subcategory] = subsection; } sections.sections[category] = section; } else if (subcategory) { const subsection = sections.ungroupedSubsections[subcategory] || []; - subsection.push(row); + subsection.push({ key, ...row }); sections.ungroupedSubsections[subcategory] = subsection; } else { sections.ungrouped.push({ key, ...row }); @@ -227,7 +227,6 @@ export const ArgsTable: FC = (props) => { const { rows, args, updateArgs, compact, inAddonPanel } = props as ArgsTableRowProps; const groups = groupRows(rows); - console.log(groups); if ( groups.ungrouped.length === 0 && diff --git a/lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx b/lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx new file mode 100644 index 00000000000..c4b2e16998d --- /dev/null +++ b/lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { styled } from '@storybook/theming'; +import { Link } from '../../typography/link/link'; + +const NoControlsWrapper = styled.div(({ theme }) => ({ + background: theme.background.warning, + padding: '10px 15px', + lineHeight: '20px', + boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, +})); + +export const NoControlsWarning = () => ( + + This story is not configured to handle controls.  + + Learn how to add controls » + + +); diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx index b2f966735eb..8e5eee827ea 100644 --- a/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx @@ -31,7 +31,9 @@ Collapsed.args = { ...Section.args, initialExpanded: false }; export const Nested = () => ( -
Some content
+ + Some content + ); diff --git a/lib/components/src/blocks/ArgsTable/index.ts b/lib/components/src/blocks/ArgsTable/index.ts index 3be4e9b364c..0a001b28030 100644 --- a/lib/components/src/blocks/ArgsTable/index.ts +++ b/lib/components/src/blocks/ArgsTable/index.ts @@ -1,3 +1,4 @@ export * from './types'; export * from './ArgsTable'; export * from './TabbedArgsTable'; +export * from './NoControlsWarning'; diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx index 8d9bf916aba..641aee8e40c 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/components/src/blocks/Description.stories.tsx @@ -10,15 +10,14 @@ export default { const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`; -export const Text = (args) => { - console.log({ args }); - return ; -}; +const Story = (args) => ; + +export const Text = Story.bind({}); Text.args = { markdown: textCaption, }; -export const Markdown = (args) => ; +export const Markdown = Story.bind({}); Markdown.args = { markdown: markdownCaption, }; diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx index 7cc22467c3b..cd33d862194 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/components/src/controls/Boolean.tsx @@ -1,29 +1,96 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; +import { opacify, transparentize } from 'polished'; + import { ControlProps, BooleanValue, BooleanConfig } from './types'; -const Input = styled.input({ - display: 'table-cell', - boxSizing: 'border-box', - verticalAlign: 'top', - height: 21, - outline: 'none', - border: '1px solid #ececec', - fontSize: '12px', - color: '#555', -}); +const Label = styled.label(({ theme }) => ({ + lineHeight: '20px', + alignItems: 'center', + marginBottom: 8, + display: 'inline-block', + position: 'relative', + + input: { + appearance: 'none', + width: '100%', + height: '100%', + position: 'absolute', + left: 0, + top: 0, + margin: 0, + padding: 0, + border: 'none', + background: 'transparent', + cursor: 'pointer', + + '&:focus': { + outline: 'none', + + '& ~ span': { + boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`, + }, + }, + }, + + span: { + minWidth: 60, + textAlign: 'center', + fontSize: theme.typography.size.s1, + fontWeight: theme.typography.weight.bold, + lineHeight: '1', + cursor: 'pointer', + display: 'inline-block', + padding: '8px 16px', + transition: 'all 150ms ease-out', + userSelect: 'none', + borderRadius: '3em', + + boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 1px inset`, + color: transparentize(0.4, theme.color.defaultText), + background: 'transparent', + + '&:hover': { + boxShadow: `${opacify(0.3, theme.appBorderColor)} 0 0 0 1px inset`, + }, + + '&:active': { + boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 2px inset`, + color: opacify(1, theme.appBorderColor), + }, + + '&:first-of-type': { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }, + '&:last-of-type': { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, + + 'input:checked ~ span:first-of-type, input:not(:checked) ~ span:last-of-type': { + background: `${opacify(0.05, theme.appBorderColor)}`, + boxShadow: `transparent 0 0 0 1px inset`, + color: theme.color.darkest, + }, +})); const format = (value: BooleanValue): string | null => (value ? String(value) : null); const parse = (value: string | null) => value === 'true'; export type BooleanProps = ControlProps & BooleanConfig; export const BooleanControl: FC = ({ name, value, onChange }) => ( - onChange(name, e.target.checked)} - checked={value} - /> + );