feat: data-testids

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>
   );

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}

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} />
+  );
 };

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>
         );

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}

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}

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'}

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>;