diff --git a/ui/blocks/src/Playground/Playground.stories.tsx b/ui/blocks/src/Playground/Playground.stories.tsx new file mode 100644 index 000000000..2a71e7d56 --- /dev/null +++ b/ui/blocks/src/Playground/Playground.stories.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Playground } from './Playground'; +import { Story } from '../Story'; +import { MockContext } from '../test/MockContext'; +export default { + title: 'Blocks/Playground', + component: Playground, +}; + +export const overview = () => ( + + + + + +); + +export const multiStories = () => ( + + + + + + +); + +export const title = () => ( + + + + + +); + +export const customTitle = () => ( + + + + + +); +export const notCollapsible = () => ( + + + + + +); diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx index 7f9d72217..7e8fff68c 100644 --- a/ui/blocks/src/Playground/Playground.tsx +++ b/ui/blocks/src/Playground/Playground.tsx @@ -1,5 +1,7 @@ import React, { FC } from 'react'; import Octicon, { Plus, Dash, Sync } from '@primer/octicons-react'; +import { Global, css } from '@emotion/core'; + import { Button } from 'theme-ui'; import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'; import { @@ -7,73 +9,74 @@ import { ActionContainerProps, } from '@component-controls/components'; -export interface PlaygroundZoomProps { - zoomPanEnabled?: boolean; +export interface TransformOptions { limitToBounds?: boolean; - panningEnabled?: boolean; transformEnabled?: boolean; - pinchEnabled?: boolean; + disabled?: boolean; limitToWrapper?: boolean; +} + +export interface PanOptions { disabled?: boolean; - dbClickEnabled?: boolean; lockAxisX?: boolean; lockAxisY?: boolean; velocityEqualToMove?: boolean; + velocity?: boolean; +} + +export interface PinchOptions { + disabled?: boolean; +} +export interface DoubleClickOptions { + disabled?: boolean; +} + +export interface WheelOptions { + wheelEnabled?: boolean; + touchPadEnabled?: boolean; + limitsOnWheel?: boolean; +} +export interface PlaygroundZoomProps { + zoomPanEnabled?: boolean; + + pinchEnabled?: boolean; + dbClickEnabled?: boolean; enableWheel?: boolean; enableTouchPadPinch?: boolean; - enableVelocity?: boolean; limitsOnWheel?: boolean; } -export type PlaygroundProps = PlaygroundZoomProps & - Omit; +export interface PlaygroundTransformOptions { + options?: TransformOptions; + pan?: PanOptions; + pinch?: PinchOptions; + doubleClick?: DoubleClickOptions; + wheel?: WheelOptions; +} +export type PlaygroundProps = { transform: PlaygroundTransformOptions } & Omit< + ActionContainerProps, + 'paddingTop' +>; export const Playground: FC = ({ - zoomPanEnabled = true, - limitToBounds = true, - panningEnabled = true, - transformEnabled = true, - pinchEnabled = true, - limitToWrapper = false, - disabled = false, - dbClickEnabled = true, - lockAxisX = false, - lockAxisY = false, - velocityEqualToMove = true, - enableWheel = true, - enableTouchPadPinch = true, - enableVelocity = true, - limitsOnWheel = false, + transform, actions, children, }) => { - const childStories =
{children}
; + const childStories = <>{children}; - return zoomPanEnabled ? ( -
- - {({ zoomIn, zoomOut, resetTransform, ...rest }: any) => { + return ( + <> + + + {({ zoomIn, zoomOut, resetTransform }: any) => { const actionsItems = [ { title: ( @@ -109,15 +112,40 @@ export const Playground: FC = ({ ]; return ( -
- {childStories} -
+ {childStories} ); }} -
- ) : ( - childStories + ); }; + +Playground.defaultProps = { + transform: { + options: { + limitToBounds: true, + transformEnabled: true, + disabled: false, + limitToWrapper: false, + }, + pan: { + disabled: false, + lockAxisX: false, + lockAxisY: false, + velocityEqualToMove: true, + velocity: true, + }, + pinch: { + disabled: false, + }, + doubleClick: { + disabled: false, + }, + wheel: { + wheelEnabled: true, + touchPadEnabled: true, + limitsOnWheel: false, + }, + }, +}; diff --git a/ui/components/src/ActionBar/ActionBar.stories.tsx b/ui/components/src/ActionBar/ActionBar.stories.tsx index eccb7aab9..56e4ac4a6 100644 --- a/ui/components/src/ActionBar/ActionBar.stories.tsx +++ b/ui/components/src/ActionBar/ActionBar.stories.tsx @@ -97,7 +97,6 @@ export const override = () => ( onClick: () => console.log('clicked'), }, { - //this will override the action above title: 'Copy', id: 'copy', }, @@ -105,3 +104,43 @@ export const override = () => ( /> ); + +export const groupEnd = () => ( + + + +); + +export const groupStart = () => ( + + + +); diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx index 7aa663725..2818b1cfc 100644 --- a/ui/components/src/ActionBar/ActionBar.tsx +++ b/ui/components/src/ActionBar/ActionBar.tsx @@ -33,6 +33,11 @@ export interface ActionItem { */ order?: number; + /** + * optional group. ActionItems in the same group will not be separated by horizonal margin + */ + group?: string | number; + /** * optional label visible to screen readers for aria accessibility. */ @@ -78,6 +83,30 @@ export const ActionBar: FunctionComponent = ({ actions = [], }) => { const { theme } = useThemeUI(); + const sortedItems = actions + .filter(({ hidden }) => !hidden) + .reduce((acc: ActionItem[], item: ActionItem) => { + const accIndex = acc.findIndex( + accItem => (accItem.id ?? accItem.title) === (item.id ?? item.title), + ); + if (accIndex > -1) { + acc[accIndex] = { ...acc[accIndex], ...item }; + return acc; + } else { + return [...acc, item]; + } + }, []) + .map( + ({ order, ...item }, index) => + ({ + ...item, + order: order ?? index, + } as ActionItem), + ) + .sort((a: ActionItem, b: ActionItem) => { + //@ts-ignore + return a.order - b.order; + }); return ( = ({ width: '100%', }} > - {actions - .filter(({ hidden }) => !hidden) - .reduce((acc: ActionItem[], item: ActionItem) => { - const accIndex = acc.findIndex( - accItem => - (accItem.id ?? accItem.title) === (item.id ?? item.title), - ); - if (accIndex > -1) { - acc[accIndex] = { ...acc[accIndex], ...item }; - return acc; - } else { - return [...acc, item]; - } - }, []) - .map( - ({ order, ...item }, index) => - ({ - ...item, - order: order ?? index, - } as ActionItem), - ) - .sort((a: ActionItem, b: ActionItem) => { - //@ts-ignore - return a.order - b.order; - }) - .map( - ({ title, onClick, disabled, 'aria-label': ariaLabel }, index) => ( + {sortedItems.map( + ( + { title, onClick, disabled, 'aria-label': ariaLabel, group }, + index, + ) => { + const nextGroup = + index < sortedItems.length - 1 + ? sortedItems[index + 1].group + : group; + return ( = ({ title )} - ), - )} + ); + }, + )} ); diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx index d96449671..5f4ab13c9 100644 --- a/ui/components/src/BlockContainer/BlockContainer.tsx +++ b/ui/components/src/BlockContainer/BlockContainer.tsx @@ -52,6 +52,7 @@ export const BlockContainer: FC = ({ position: 'relative', mt: 3, mb: 4, + width: '100%', }} id={blockId} >