Addon-docs: add escape hatch css classes in docpages

addons/docs/src/blocks/Anchor.tsx

@@ -4,8 +4,11 @@ export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`;
 
 export interface AnchorProps {
   storyId: string;
+  className?: string;
 }
 
-export const Anchor: FC<AnchorProps> = ({ storyId, children }) => (
-  <div id={anchorBlockIdFromId(storyId)}>{children}</div>
+export const Anchor: FC<AnchorProps> = ({ storyId, children, className }) => (
+  <div className={className} id={anchorBlockIdFromId(storyId)}>
+    {children}
+  </div>
 );

addons/docs/src/blocks/ArgsTable.tsx

@@ -24,6 +24,7 @@ type PropDescriptor = string[] | RegExp;
 interface BaseProps {
   include?: PropDescriptor;
   exclude?: PropDescriptor;
+  className?: string;
 }
 
 type OfProps = BaseProps & {
@@ -146,7 +147,7 @@ export const StoryTable: FC<
     parameters: { argTypes },
     storyStore,
   } = context;
-  const { story, component, subcomponents, showComponent, include, exclude } = props;
+  const { story, component, subcomponents, showComponent, include, exclude, className } = props;
   let storyArgTypes;
   try {
     let storyId;
@@ -195,18 +196,18 @@ export const StoryTable: FC<
     if (subcomponents) {
       tabs = addComponentTabs(tabs, subcomponents, context, include, exclude);
     }
-    return <TabbedArgsTable tabs={tabs} />;
+    return <TabbedArgsTable className={className} tabs={tabs} />;
   } catch (err) {
-    return <PureArgsTable error={err.message} />;
+    return <PureArgsTable className={className} error={err.message} />;
   }
 };
 
 export const ComponentsTable: FC<ComponentsProps> = (props) => {
   const context = useContext(DocsContext);
-  const { components, include, exclude } = props;
+  const { components, include, exclude, className } = props;
 
   const tabs = addComponentTabs({}, components, context, include, exclude);
-  return <TabbedArgsTable tabs={tabs} />;
+  return <TabbedArgsTable className={className} tabs={tabs} />;
 };
 
 export const ArgsTable: FC<ArgsTableProps> = (props) => {
@@ -215,12 +216,19 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     parameters: { subcomponents },
   } = context;
 
-  const { include, exclude, components } = props as ComponentsProps;
+  const { include, exclude, components, className } = props as ComponentsProps;
   const { story } = props as StoryProps;
 
   const main = getComponent(props, context);
   if (story) {
-    return <StoryTable {...(props as StoryProps)} component={main} subcomponents={subcomponents} />;
+    return (
+      <StoryTable
+        className={className}
+        {...(props as StoryProps)}
+        component={main}
+        subcomponents={subcomponents}
+      />
+    );
   }
 
   if (!components && !subcomponents) {
@@ -230,22 +238,30 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     } catch (err) {
       mainProps = { error: err.message };
     }
-    return <PureArgsTable {...mainProps} />;
+    return <PureArgsTable className={className} {...mainProps} />;
   }
 
   if (components) {
-    return <ComponentsTable {...(props as ComponentsProps)} components={components} />;
+    return (
+      <ComponentsTable
+        {...(props as ComponentsProps)}
+        className={className}
+        components={components}
+      />
+    );
   }
 
   const mainLabel = getComponentName(main);
   return (
     <ComponentsTable
       {...(props as ComponentsProps)}
+      className={className}
       components={{ [mainLabel]: main, ...subcomponents }}
     />
   );
 };
 
 ArgsTable.defaultProps = {
   story: PRIMARY_STORY,
+  className: 'sbdocs sbdocs-argsTable',
 };

addons/docs/src/blocks/Description.tsx

@@ -70,7 +70,9 @@ ${extractComponentDescription(target) || ''}
 const DescriptionContainer: FunctionComponent<DescriptionProps> = (props) => {
   const context = useContext(DocsContext);
   const { markdown } = getDescriptionProps(props, context);
-  return markdown ? <Description markdown={markdown} /> : null;
+  return markdown ? (
+    <Description className="sbdocs sbdocs-description" markdown={markdown} />
+  ) : null;
 };
 
 // since we are in the docs blocks, assume default description if for primary component story

addons/docs/src/blocks/DocsStory.tsx

@@ -12,7 +12,7 @@ const warnStoryDescription = deprecate(
   () => {},
   dedent`
     Deprecated parameter: docs.storyDescription => docs.description.story
-      
+
     https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-description-parameter
   `
 );
@@ -23,6 +23,7 @@ export const DocsStory: FunctionComponent<DocsStoryProps> = ({
   expanded = true,
   withToolbar = false,
   parameters,
+  className,
 }) => {
   let description = expanded && parameters?.docs?.description?.story;
   if (!description) {
@@ -32,7 +33,7 @@ export const DocsStory: FunctionComponent<DocsStoryProps> = ({
   const subheading = expanded && name;
 
   return (
-    <Anchor storyId={id}>
+    <Anchor className={className} storyId={id}>
       {subheading && <Subheading>{subheading}</Subheading>}
       {description && <Description markdown={description} />}
       <Canvas withToolbar={withToolbar}>

addons/docs/src/blocks/Primary.tsx

@@ -14,5 +14,7 @@ export const Primary: FC<PrimaryProps> = ({ name }) => {
   if (componentStories) {
     story = name ? componentStories.find((s) => s.name === name) : componentStories[0];
   }
-  return story ? <DocsStory {...story} expanded={false} withToolbar /> : null;
+  return story ? (
+    <DocsStory {...story} className="sbdocs sbdocs-primary" expanded={false} withToolbar />
+  ) : null;
 };

addons/docs/src/blocks/Stories.tsx

@@ -23,7 +23,12 @@ export const Stories: FunctionComponent<StoriesProps> = ({ title, includePrimary
   return (
     <>
       <Heading>{title}</Heading>
-      {stories.map((story) => story && <DocsStory key={story.id} {...story} expanded />)}
+      {stories.map(
+        (story) =>
+          story && (
+            <DocsStory className="sbdocs sbdocs-stories" key={story.id} {...story} expanded />
+          )
+      )}
     </>
   );
 };

addons/docs/src/blocks/Subtitle.tsx

@@ -13,5 +13,5 @@ export const Subtitle: FunctionComponent<SubtitleProps> = ({ children }) => {
   if (!text) {
     text = parameters?.componentSubtitle;
   }
-  return text ? <PureSubtitle className="sbdocs-subtitle">{text}</PureSubtitle> : null;
+  return text ? <PureSubtitle className="sbdocs sbdocs-subtitle">{text}</PureSubtitle> : null;
 };

addons/docs/src/blocks/Title.tsx

@@ -17,5 +17,5 @@ export const Title: FunctionComponent<TitleProps> = ({ children }) => {
   if (!text) {
     text = extractTitle(context);
   }
-  return text ? <PureTitle className="sbdocs-title">{text}</PureTitle> : null;
+  return text ? <PureTitle className="sbdocs sbdocs-title">{text}</PureTitle> : null;
 };

addons/docs/src/blocks/types.ts

@@ -13,4 +13,5 @@ export interface StoryData {
 export type DocsStoryProps = StoryData & {
   expanded?: boolean;
   withToolbar?: boolean;
+  className?: string;
 };

lib/components/src/blocks/ArgsTable/ArgsTable.tsx

@@ -204,6 +204,7 @@ export interface ArgsTableRowProps {
 
 export interface ArgsTableErrorProps {
   error: ArgsTableError;
+  className?: string;
 }
 
 export type ArgsTableProps = ArgsTableRowProps | ArgsTableErrorProps;
@@ -252,10 +253,10 @@ const groupRows = (rows: ArgType) => {
  * ArgDefs, usually derived from docgen info for the component.
  */
 export const ArgsTable: FC<ArgsTableProps> = (props) => {
-  const { error } = props as ArgsTableErrorProps;
+  const { error, className } = props as ArgsTableErrorProps;
   if (error) {
     return (
-      <EmptyBlock>
+      <EmptyBlock className={className}>
         {error}&nbsp;
         <Link href="http://storybook.js.org/docs/" target="_blank" withArrow>
           Read the docs
@@ -274,7 +275,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     Object.entries(groups.ungroupedSubsections).length === 0
   ) {
     return (
-      <EmptyBlock>
+      <EmptyBlock className={className}>
         No inputs found for this component.&nbsp;
         <Link href="http://storybook.js.org/docs/" target="_blank" withArrow>
           Read the docs
@@ -290,7 +291,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
 
   const common = { updateArgs, compact, inAddonPanel };
   return (
-    <ResetWrapper>
+    <ResetWrapper className={className}>
       <TableWrapper {...{ compact, inAddonPanel }} className="docblock-argstable">
         <thead className="docblock-argstable-head">
           <tr>

lib/components/src/blocks/ArgsTable/TabbedArgsTable.tsx

@@ -4,17 +4,18 @@ import { TabsState } from '../../tabs/tabs';
 
 export interface TabbedArgsTableProps {
   tabs: Record<string, ArgsTableProps>;
+  className?: string;
 }
 
-export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) => {
+export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, className, ...props }) => {
   const entries = Object.entries(tabs);
 
   if (entries.length === 1) {
-    return <ArgsTable {...entries[0][1]} {...props} />;
+    return <ArgsTable className={className} {...entries[0][1]} {...props} />;
   }
 
   return (
-    <TabsState>
+    <TabsState className={className}>
       {entries.map((entry) => {
         const [label, table] = entry;
         const id = `prop_table_div_${label}`;

lib/components/src/blocks/Description.tsx

@@ -5,14 +5,15 @@ import { components } from '../html';
 
 export interface DescriptionProps {
   markdown: string;
+  className?: string;
 }
 
 /**
  * A markdown description for a component, typically used to show the
  * components docgen docs.
  */
-export const Description: FunctionComponent<DescriptionProps> = ({ markdown }) => (
-  <ResetWrapper>
+export const Description: FunctionComponent<DescriptionProps> = ({ markdown, className }) => (
+  <ResetWrapper className={className}>
     <Markdown options={{ forceBlock: true, overrides: components }}>{markdown}</Markdown>
   </ResetWrapper>
 );

lib/components/src/placeholder/placeholder.tsx

@@ -14,10 +14,19 @@ const Message = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
 }));
 
-export const Placeholder: FunctionComponent = ({ children, ...props }) => {
+interface PlaceholderProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const Placeholder: FunctionComponent<PlaceholderProps> = ({
+  children,
+  className,
+  ...props
+}) => {
   const [title, desc] = Children.toArray(children);
   return (
-    <Message {...props}>
+    <Message className={className} {...props}>
       <Title>{title}</Title>
       {desc && <Desc>{desc}</Desc>}
     </Message>

lib/components/src/tabs/tabs.tsx

@@ -150,14 +150,25 @@ export interface TabsProps {
   backgroundColor?: string;
   absolute?: boolean;
   bordered?: boolean;
+  className?: string;
 }
 
 export const Tabs: FunctionComponent<TabsProps> = memo(
-  ({ children, selected, actions, absolute, bordered, tools, backgroundColor, id: htmlId }) => {
+  ({
+    children,
+    selected,
+    actions,
+    absolute,
+    bordered,
+    tools,
+    backgroundColor,
+    id: htmlId,
+    className,
+  }) => {
     const list = childrenToList(children, selected);
 
     return list.length ? (
-      <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
+      <Wrapper className={className} absolute={absolute} bordered={bordered} id={htmlId}>
         <FlexBar border backgroundColor={backgroundColor}>
           <TabBar role="tablist">
             {list.map(({ title, id, active, color }) => {
@@ -188,7 +199,7 @@ export const Tabs: FunctionComponent<TabsProps> = memo(
         </Content>
       </Wrapper>
     ) : (
-      <Placeholder>
+      <Placeholder className={className}>
         <Fragment key="title">Nothing found</Fragment>
       </Placeholder>
     );
@@ -212,6 +223,7 @@ export interface TabsStateProps {
   absolute: boolean;
   bordered: boolean;
   backgroundColor: string;
+  className?: string;
 }
 
 export interface TabsStateState {
@@ -225,6 +237,7 @@ export class TabsState extends Component<TabsStateProps, TabsStateState> {
     absolute: false,
     bordered: false,
     backgroundColor: '',
+    className: '',
   };
 
   constructor(props: TabsStateProps) {
@@ -240,10 +253,11 @@ export class TabsState extends Component<TabsStateProps, TabsStateState> {
   };
 
   render() {
-    const { bordered = false, absolute = false, children, backgroundColor } = this.props;
+    const { bordered = false, absolute = false, children, backgroundColor, className } = this.props;
     const { selected } = this.state;
     return (
       <Tabs
+        className={className}
         bordered={bordered}
         absolute={absolute}
         selected={selected}