diff --git a/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx b/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx index 9da957d97..a35449605 100644 --- a/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx +++ b/ui/blocks/src/BlockContainer/components/ComponentsBlockContainer.tsx @@ -34,6 +34,7 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({ of, children, visibility, + 'data-testid': dataTestid, ...rest }) => { const [title, setTitle] = React.useState<string | undefined>(); @@ -79,7 +80,12 @@ export const ComponentsBlockContainer: FC<ComponentsBlockContainerProps> = ({ ); // console.log(child); return ( - <BlockContainer title={title} collapsible={collapsible} id={id}> + <BlockContainer + data-testid={dataTestid} + title={title} + collapsible={collapsible} + id={id} + > {block} </BlockContainer> ); diff --git a/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx b/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx index ea1ed607b..31dbdbacf 100644 --- a/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx +++ b/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx @@ -30,6 +30,7 @@ export const StoryBlockContainer: FC<StoryBlockContainerAllProps> = ({ children, useStoryDescription, description: userDescription, + 'data-testid': dataTestid, ...rest }) => { const context = useStoryContext({ @@ -46,6 +47,7 @@ export const StoryBlockContainer: FC<StoryBlockContainerAllProps> = ({ userDescription || (useStoryDescription ? story?.description : undefined); return block ? ( <BlockContainer + data-testid={dataTestid} title={title} collapsible={collapsible} id={userTitle === CURRENT_STORY && story ? story.id : undefined} diff --git a/ui/blocks/src/ComponentDeps/Dependencies.tsx b/ui/blocks/src/ComponentDeps/Dependencies.tsx index 242b701b1..c1c1da430 100644 --- a/ui/blocks/src/ComponentDeps/Dependencies.tsx +++ b/ui/blocks/src/ComponentDeps/Dependencies.tsx @@ -117,5 +117,7 @@ export const Dependencies: FC<DependenciesProps> = ({ dependencies }) => { return null; } - return <Table data={dependencies} columns={columns} />; + return ( + <Table data-testid="dependencies" data={dependencies} columns={columns} /> + ); }; diff --git a/ui/blocks/src/ComponentSource/ComponentSource.tsx b/ui/blocks/src/ComponentSource/ComponentSource.tsx index 47972093c..d09f1d982 100644 --- a/ui/blocks/src/ComponentSource/ComponentSource.tsx +++ b/ui/blocks/src/ComponentSource/ComponentSource.tsx @@ -5,6 +5,7 @@ import { ComponentsBlockContainer, ComponentsBlockContainerProps, } from '../BlockContainer/components/ComponentsBlockContainer'; +import { useCustomProps } from '../context'; import { repositoryActions } from '../utils/repositoryActions'; export type ComponentSourceProps = Omit< @@ -13,16 +14,16 @@ export type ComponentSourceProps = Omit< > & Omit<SourceProps, 'children'>; +const NAME = 'componentsource'; /** * Displays import statement for a component as well as the component file source code * Optionally also displays some repository information from the component's package.json */ -export const ComponentSource: FC<ComponentSourceProps> = ({ - actions, - ...rest -}) => { +export const ComponentSource: FC<ComponentSourceProps> = props => { const [showFileSource, setShowFileSource] = React.useState<boolean>(false); + const custom = useCustomProps<ComponentSourceProps>(NAME, props); + const { actions, ...rest } = custom; return ( <ComponentsBlockContainer visibility="info" {...rest}> {(component, props, sourceProps) => { @@ -61,7 +62,7 @@ export const ComponentSource: FC<ComponentSourceProps> = ({ allActions.push.apply(allActions, actions); } return ( - <Source {...sourceProps} actions={allActions}> + <Source data-testid={NAME} {...sourceProps} actions={allActions}> {showFileSource ? component?.source ?? '' : source} </Source> ); diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx index 72134fa73..57ce1ca5c 100644 --- a/ui/blocks/src/Playground/Playground.tsx +++ b/ui/blocks/src/Playground/Playground.tsx @@ -10,7 +10,7 @@ import { useTheme, ActionItems, } from '@component-controls/components'; -import { BlockDataContext } from '../context'; +import { BlockDataContext, useCustomProps } from '../context'; import { StoryBlockContainer, @@ -34,23 +34,26 @@ export type PlaygroundProps = PlaygroundOwnProps & StoryBlockContainerProps & PanelContainerProps; +const NAME = 'playground'; + /** * Component to display a live playground of component examples. Has custom actions for zooming, switch direction, review story source and configuration. */ -export const Playground: FC<PlaygroundProps> = ({ - title, - id, - name, - collapsible, - dark, - actions: userActions = [], - children, - openTab, - visibleTabs = false, - description, - scale: userScale = 1, -}) => { +export const Playground: FC<PlaygroundProps> = ({ children, ...props }) => { const theme = useTheme(); + const custom = useCustomProps<PlaygroundProps>(NAME, props); + const { + title, + id, + name, + collapsible, + dark, + actions: userActions = [], + openTab, + visibleTabs = false, + description, + scale: userScale = 1, + } = custom; const [scale, setScale] = React.useState(userScale); const [background, setBackground] = React.useState<BackgroundType>('light'); @@ -150,6 +153,7 @@ export const Playground: FC<PlaygroundProps> = ({ : [...storyActions, ...userActions]; return ( <StoryBlockContainer + data-testid={NAME} description={description} useStoryDescription={true} name={name} diff --git a/ui/blocks/src/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable.tsx index c67e832fe..d756af83f 100644 --- a/ui/blocks/src/PropsTable/PropsTable.tsx +++ b/ui/blocks/src/PropsTable/PropsTable.tsx @@ -9,7 +9,7 @@ import { ComponentsBlockContainer, ComponentsBlockContainerProps, } from '../BlockContainer/components/ComponentsBlockContainer'; - +import { useCustomProps } from '../context'; import { BasePropsTable } from './BasePropsTable'; export interface PropsTableOwnProps { @@ -22,16 +22,21 @@ export type PropsTableProps = PropsTableOwnProps & Omit<ComponentsBlockContainerProps, 'children'> & Omit<TableProps, 'columns' | 'data'>; +const NAME = 'propstable'; + /** * Displays the component's properties as well as configurable controls to interact with the component. */ -export const PropsTable: FC<PropsTableProps> = ({ - extraColumns = [], - visibility = 'all', - ...props -}) => { +export const PropsTable: FC<PropsTableProps> = props => { + const custom = useCustomProps<PropsTableProps>(NAME, props); + const { extraColumns = [], visibility = 'all', ...rest } = custom; + return ( - <ComponentsBlockContainer visibility={visibility} {...props}> + <ComponentsBlockContainer + data-testid={NAME} + visibility={visibility} + {...rest} + > {(component, { story }, tableProps) => ( <BasePropsTable component={component} diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx index 1c6427049..e7eecacf4 100644 --- a/ui/components/src/BlockContainer/BlockContainer.tsx +++ b/ui/components/src/BlockContainer/BlockContainer.tsx @@ -33,6 +33,11 @@ export interface BlockContainerProps { * theme-ui styling object for Block Box */ sxStyle?: SxStyleProp; + + /** + * testing id + */ + 'data-testid'?: string; } /** @@ -46,12 +51,13 @@ export const BlockContainer: FC<BlockContainerProps> = ({ description, collapsible = true, sxStyle, + ...rest }) => { const [isOpen, setIsOpen] = React.useState(true); const blockId = id !== '.' ? id : undefined || title; return ( - <Box variant="blockcontainer.container" sx={sxStyle}> + <Box variant="blockcontainer.container" sx={sxStyle} {...rest}> {(blockId || title || collapsible) && ( <LinkHeading as={collapsible ? 'h3' : 'h4'} diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts index 227eff887..d0a35af84 100644 --- a/ui/components/src/ThemeContext/theme.ts +++ b/ui/components/src/ThemeContext/theme.ts @@ -43,7 +43,6 @@ export type ControlsTheme = { pagecontainer: ThemeUIStyleObject; propstable: Record<string, ThemeUIStyleObject>; story: Record<string, ThemeUIStyleObject>; - renderer: Record<string, ThemeUIStyleObject>; colormode: Record<string, ThemeUIStyleObject>; header: ThemeUIStyleObject; navmenu: Record<string, ThemeUIStyleObject>;