fix: block title sizes fix

ccontrols · Apr 1, 2020 · 5cafc0c · 5cafc0c
1 parent d89c19a
commit 5cafc0c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
@@ -19,7 +19,7 @@ export const DocsPage = () => {
         <Title />
         <Subtitle />
         <Description />
-        <ComponentSource id="." title='Component source' />
+        <ComponentSource id="." title='Component' />
         <Playground openTab="source" title=".">
           <Story id="." />
         </Playground>  

diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -42,7 +42,11 @@ export const BlockContainer: FC<BlockContainerProps> = ({
   const blockId =
     id || (title ? title.toLowerCase().replace(/\s/g, '-') : undefined);
   const BlockTitle: FC = () => (
-    <Subtitle color="text" css={{ fontWeight: 400, paddingRight: 10 }}>
+    <Subtitle
+      color="text"
+      as={collapsible ? 'h2' : 'h3'}
+      css={{ fontWeight: 400, paddingRight: 10 }}
+    >
       {title}
     </Subtitle>
   );

diff --git a/ui/components/src/Subtitle/Subtitle.stories.tsx b/ui/components/src/Subtitle/Subtitle.stories.tsx
@@ -18,3 +18,7 @@ overview.story = {
     children: { type: 'text', value: 'Subtitle text' },
   },
 };
+
+export const as = () => {
+  return <Subtitle as="h2">Subtitle text</Subtitle>;
+};
diff --git a/ui/components/src/Subtitle/Subtitle.tsx b/ui/components/src/Subtitle/Subtitle.tsx
@@ -6,15 +6,24 @@ interface SubtitleOwnProps {
    * text to be displayed in the component.
    */
   children?: string;
+  /**
+   * DOM node type to render as. By default h3.
+   */
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
 }
 
-export type SubtitleProps = SubtitleOwnProps & Omit<HeadingProps, 'children'>;
+export type SubtitleProps = SubtitleOwnProps &
+  Omit<HeadingProps, 'children' | 'as'>;
 
 /**
  * `h3` level heading with faded text and font-weight 400.
  */
-export const Subtitle: FC<SubtitleProps> = ({ children, ...rest }) => (
-  <Heading as="h3" color="fadedText" css={{ fontWeight: 400 }} {...rest}>
+export const Subtitle: FC<SubtitleProps> = ({
+  children,
+  as = 'h3',
+  ...rest
+}) => (
+  <Heading as={as} color="fadedText" css={{ fontWeight: 400 }} {...rest}>
     {children}
   </Heading>
 );