Skip to content

Commit

Permalink
feat: visibleTabs prop for Playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed May 10, 2020
1 parent aa97afc commit 842a72d
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 11 deletions.
2 changes: 2 additions & 0 deletions integrations/storybook/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,7 @@ _Playground [source code](https:/github.com/ccontrols/component-controls/tree/ma
| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. |
| `openTab` | _any_ | by default, which tab to have open. |
| `dark` | _boolean_ | whether to use the dark theme for the story source component. |
| `visibleTabs` | _boolean_ | if true, the tabs on story panels will be visible |
| `id` | _string_ | id of the story optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
| `name` | _string_ | alternatively you can use the name of a story to load from an external file |
| `title` | _string_ | optional section title for the block. |
Expand Down Expand Up @@ -614,6 +615,7 @@ _Stories [source code](https:/github.com/ccontrols/component-controls/tree/maste
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |
| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. |
| `openTab` | _any_ | by default, which tab to have open. |
| `visibleTabs` | _boolean_ | if true, the tabs on story panels will be visible |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |

Expand Down
2 changes: 2 additions & 0 deletions ui/blocks/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ _Playground [source code](https:/github.com/ccontrols/component-controls/tree/ma
| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. |
| `openTab` | _any_ | by default, which tab to have open. |
| `dark` | _boolean_ | whether to use the dark theme for the story source component. |
| `visibleTabs` | _boolean_ | if true, the tabs on story panels will be visible |
| `id` | _string_ | id of the story optional id to be used for the block if no id is provided, one will be calculated automatically from the title. |
| `name` | _string_ | alternatively you can use the name of a story to load from an external file |
| `title` | _string_ | optional section title for the block. |
Expand Down Expand Up @@ -290,6 +291,7 @@ _Stories [source code](https:/github.com/ccontrols/component-controls/tree/maste
| `sxStyle` | _SystemStyleObject_ | theme-ui styling object for Block Box |
| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. |
| `openTab` | _any_ | by default, which tab to have open. |
| `visibleTabs` | _boolean_ | if true, the tabs on story panels will be visible |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |

Expand Down
16 changes: 9 additions & 7 deletions ui/blocks/src/Playground/Playground.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,7 @@ export const defaultOpenSource = () => (

export const disableZoomPan = () => (
<MockContext storyId="blocks-core-story-plain--controls">
<Playground
transform={{
options: {
disabled: true,
},
}}
>
<Playground scale={0}>
<Story id="." />
</Playground>
</MockContext>
Expand Down Expand Up @@ -125,3 +119,11 @@ export const zoomDisabled = () => (
</Playground>
</MockContext>
);

export const visibleTabs = () => (
<MockContext storyId="blocks-core-story-plain--controls">
<Playground visibleTabs={true}>
<Story id="." />
</Playground>
</MockContext>
);
16 changes: 12 additions & 4 deletions ui/blocks/src/Playground/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ export interface PlaygroundOwnProps {
* whether to use the dark theme for the story source component.
*/
dark?: boolean;

/**
* if true, the tabs on story panels will be visible
*/
visibleTabs?: boolean;
}
export type PlaygroundProps = PlaygroundOwnProps &
StoryBlockContainerProps &
Expand All @@ -54,6 +59,7 @@ export const Playground: FC<PlaygroundProps> = ({
actions: userActions = [],
children,
openTab,
visibleTabs = false,
scale: userScale = 1,
}) => {
const [tabsIndex, setTabsIndex] = React.useState<number | undefined>(
Expand Down Expand Up @@ -89,19 +95,20 @@ export const Playground: FC<PlaygroundProps> = ({
const panels: ActionItems = getSortedPanels(userActions);

React.useEffect(() => {
const index = panels.findIndex((p: ActionItem) => p.title === openTab);
const index = panels.findIndex(
(p: ActionItem) => (p.id || p.title) === openTab,
);
setTabsIndex(index > -1 ? index : undefined);
}, [openTab]);
const panelActions = React.useMemo(
() =>
userActions.map((panel: ActionItem) => {
const index = panels.findIndex((p: ActionItem) => p.id === panel.id);
return panel.panel
? {
...panel,
title: `${tabsIndex === index ? 'close' : 'open'} ${panel.title}`,
onClick: (e: MouseEvent<HTMLButtonElement>) => {
const index = panels.findIndex(
(p: ActionItem) => p.title === panel.title,
);
if (index < 0) {
return undefined;
}
Expand Down Expand Up @@ -188,6 +195,7 @@ export const Playground: FC<PlaygroundProps> = ({
onSelect={(index: number) => setTabsIndex(index)}
>
<TabList
hidden={!visibleTabs}
style={{
textAlign: 'right',
}}
Expand Down

0 comments on commit 842a72d

Please sign in to comment.