feat: add block Title

examples/storybook-5/.storybook/preview.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
-import { Title, Description as SBDescription, Subtitle, Story, Stories, Props } from '@storybook/addon-docs/blocks';
+import { Title as SBTitle, Description as SBDescription, Subtitle, Story, Stories, Props } from '@storybook/addon-docs/blocks';
 import { DependenciesTable } from 'storybook-addon-deps/blocks';
-import { ControlsTable, ThemeProvider, Description, StorySource, ComponentSource, BlockContextProvider } from '@component-controls/storybook';
+import { ControlsTable, ThemeProvider, Title, Description, StorySource, ComponentSource, BlockContextProvider } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
   return (
@@ -21,6 +21,7 @@ export const DocsPage = ({
 }) => {
   return (
     <BlockContextProvider>
+      <SBTitle slot={titleSlot} />
       <Title slot={titleSlot} />
       <Subtitle slot={subtitleSlot} />
       <SBDescription slot={descriptionSlot} />

integrations/storybook/src/blocks/Title.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import { Title as BaseTitle, TitleProps } from '@component-controls/blocks';
+import { ThemeProvider } from '../shared/ThemeProvider';
+
+export const Title: FC<TitleProps> = props => {
+  return (
+    <ThemeProvider>
+      <BaseTitle {...props} />
+    </ThemeProvider>
+  );
+};

integrations/storybook/src/blocks/index.ts

@@ -1,5 +1,6 @@
+export { BlockContextProvider } from './BlockContext';
+export { ComponentSource } from './ComponentSource';
 export { ControlsTable, ControlsTableProps } from './ControlsTable';
 export { Description } from './Description';
 export { StorySource } from './StorySource';
-export { ComponentSource } from './ComponentSource';
-export { BlockContextProvider } from './BlockContext';
+export { Title } from './Title';

ui/block-components/src/Title/Title.tsx

@@ -1,12 +1,16 @@
 import React, { FC } from 'react';
 import styled from '@emotion/styled';
-import { Heading } from 'theme-ui';
+import { Heading, HeadingProps } from 'theme-ui';
 
 const StyledHeading = styled(Heading)(() => ({
   fontWeight: 900,
   paddingBottom: '25px',
 }));
 
-export const Title: FC = ({ children }) => (
-  <StyledHeading as="h1">{children}</StyledHeading>
+export type TitleProps = HeadingProps;
+
+export const Title: FC<TitleProps> = ({ children, ...rest }) => (
+  <StyledHeading as="h1" {...rest}>
+    {children}
+  </StyledHeading>
 );

ui/blocks/src/Description/Description.stories.tsx

@@ -1,30 +1,17 @@
 import React from 'react';
 import { Description } from './Description';
-import { BlockContext } from '../BlocksContext';
+import { MockContext } from '../test/MockContext';
 
-const MockContext: React.FC = ({ children }) => (
-  <BlockContext.Provider
-    value={{
-      currentId: 'blocks-core-description--simple',
-      storyStore: {
-        fromId: () => ({
-          parameters: {
-            component: Description,
-          },
-        }),
-      },
-    }}
-  >
-    {children}
-  </BlockContext.Provider>
-);
 export default {
   title: 'Blocks/Core/Description',
   component: Description,
 };
 
 export const simple = () => (
-  <MockContext>
+  <MockContext
+    storyId="blocks-core-description--simple"
+    component={Description}
+  >
     <Description of={Description} />
   </MockContext>
 );

ui/blocks/src/Title/Title.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Title } from './';
+import { MockContext } from '../test/MockContext';
+
+export default {
+  title: 'Blocks/Core/Title',
+  component: Title,
+};
+
+export const simple = () => (
+  <MockContext storyId="blocks-core-description--simple" component={Title}>
+    <Title />
+  </MockContext>
+);

ui/blocks/src/Title/Title.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import {
+  Title as TitleBlock,
+  TitleProps as TitlePropsBase,
+} from '@component-controls/block-components';
+import { useControlsContext, StoryInputProps } from '../BlocksContext';
+
+export type TitleProps = StoryInputProps & TitlePropsBase;
+
+export const Title: FC<TitleProps> = ({ id, name, ...rest }) => {
+  const { component, kind } = useControlsContext({
+    id,
+    name,
+  });
+  let title;
+  if (component && component.info && component.info.displayName) {
+    title = component.info.displayName;
+  } else if (kind) {
+    const titleParts = kind.title.split('/');
+    title = titleParts[titleParts.length - 1];
+  }
+  return title ? <TitleBlock {...rest}>{title}</TitleBlock> : null;
+};

ui/blocks/src/Title/index.ts

@@ -0,0 +1 @@
+export * from './Title';

ui/blocks/src/index.ts

@@ -4,3 +4,4 @@ export * from './Description';
 export * from './StorySource';
 export * from './ComponentSource';
 export * from './ThemeContext';
+export * from './Title';

ui/blocks/src/test/MockContext.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BlockContext } from '../BlocksContext';
+
+export interface MockContexProps {
+  storyId?: string;
+  component?: React.ComponentType;
+}
+
+export const MockContext: React.FC<MockContexProps> = ({
+  children,
+  storyId = 'blocks-core-description--simple',
+  component = BlockContext,
+}) => (
+  <BlockContext.Provider
+    value={{
+      currentId: storyId,
+      storyStore: {
+        fromId: () => ({
+          parameters: {
+            component,
+          },
+        }),
+      },
+    }}
+  >
+    {children}
+  </BlockContext.Provider>
+);