feat: added Title, Subtitle and stories

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

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import styled from '@emotion/styled';
-import { Heading } from 'theme-ui';
+import { Subtitle } from '../Subtitle';
 import { ActionBar, ActionItem } from '@component-controls/components';
 
 const SpacedBlockContainer = styled.div(() => ({
@@ -30,7 +30,7 @@ export const BlockContainer: FC<BlockContainerProps> = ({
   actions,
 }) => (
   <SpacedBlockContainer>
-    {title && <Heading as="h3">{title}</Heading>}
+    {title && <Subtitle>{title}</Subtitle>}
     <FramedBlockContainer>{children}</FramedBlockContainer>
     {actions && <ActionBar actionItems={actions} />}
   </SpacedBlockContainer>

ui/block-components/src/BlockContainer/BockContainer.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Donut } from 'theme-ui';
+import { BlockContainer, BlockContainerProps } from './BlockContainer';
+
+export default {
+  title: 'Blocks/Components/BlockContainer',
+  component: BlockContainer,
+};
+
+export const simple = ({ title }: BlockContainerProps) => {
+  return (
+    <BlockContainer
+      title={title}
+      actions={[{ title: 'click me', onClick: () => console.log('clicked') }]}
+    >
+      <Donut value={1 / 2} />
+    </BlockContainer>
+  );
+};
+
+simple.story = {
+  parameters: {
+    controls: {
+      title: { type: 'text', value: 'Block title' },
+    },
+  },
+};

ui/block-components/src/Subtitle/Subtitle.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Subtitle } from './Subtitle';
+
+export default {
+  title: 'Blocks/Components/Subtitle',
+  component: Subtitle,
+};
+
+export const simple = ({ children }: { children: React.ReactNode }) => {
+  return <Subtitle>{children}</Subtitle>;
+};
+
+simple.story = {
+  parameters: {
+    controls: {
+      children: { type: 'text', value: 'Subtitle text' },
+    },
+  },
+};

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

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import styled from '@emotion/styled';
+import { Heading } from 'theme-ui';
+
+const StyledHeading = styled(Heading)(() => ({
+  fontWeight: 700,
+  paddingBottom: '15px',
+}));
+
+export const Subtitle: FC = ({ children }) => (
+  <StyledHeading as="h2">{children}</StyledHeading>
+);

ui/block-components/src/Subtitle/index.ts

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Title } from './Title';
+
+export default {
+  title: 'Blocks/Components/Title',
+  component: Title,
+};
+
+export const simple = ({ children }: { children: React.ReactNode }) => {
+  return <Title>{children}</Title>;
+};
+
+simple.story = {
+  parameters: {
+    controls: {
+      children: { type: 'text', value: 'Title text' },
+    },
+  },
+};

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

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

ui/block-components/src/Title/index.ts

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

ui/block-components/src/index.ts

@@ -2,3 +2,5 @@ export * from './BlockContainer';
 export * from './ControlsTable';
 export * from './StorySource';
 export * from './Source';
+export * from './Subtitle';
+export * from './Title';