feat: package version block

ui/blocks/src/EditPage/EditPage.tsx

@@ -12,7 +12,7 @@ import { useStoryContext } from '../context';
  * In order for this to work, you need to set up the `repository` field in `package.json`.
  */
 export const EditPage: FC = () => {
-  const { storyPackage } = useStoryContext({ id: '.', name });
+  const { storyPackage } = useStoryContext({ id: '.' });
   return storyPackage &&
     storyPackage.repository &&
     storyPackage.repository.browse ? (

ui/blocks/src/PackageVersion/PackageVersion.tsx

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+/* eslint react/jsx-key: 0 */
+import { jsx } from 'theme-ui';
+import { FC } from 'react';
+import { Tag } from '@component-controls/components';
+import { useComponentsContext } from '../context';
+
+/**
+ * Display a label with the component's package version.
+ * extracted from package.json
+ */
+export const PackageVersion: FC = () => {
+  const { componentPackage } = useComponentsContext({ of: '.' });
+  return componentPackage && componentPackage.version ? (
+    <Tag color="lightgrey">{`${componentPackage.name}: ${componentPackage.version}`}</Tag>
+  ) : null;
+};

ui/blocks/src/PackageVersion/index.ts

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

ui/blocks/src/index.ts

@@ -4,6 +4,7 @@ export * from './ComponentSource';
 export * from './ControlsTable';
 export * from './Description';
 export * from './EditPage';
+export * from './PackageVersion';
 export * from './PageContainer';
 export * from './Playground';
 export * from './PropsTable';

ui/components/src/Subtitle/Subtitle.tsx

@@ -23,7 +23,12 @@ export const Subtitle: FC<SubtitleProps> = ({
   as = 'h3',
   ...rest
 }) => (
-  <Heading as={as} color="fadedText" css={{ fontWeight: 400 }} {...rest}>
+  <Heading
+    as={as}
+    color="fadedText"
+    css={{ fontWeight: 400, paddingBottom: 2 }}
+    {...rest}
+  >
     {children}
   </Heading>
 );

ui/components/src/Title/Title.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from 'theme-ui';
+import { jsx, SxStyleProp } from 'theme-ui';
 import { FC } from 'react';
 import { Heading, HeadingProps } from 'theme-ui';
 
@@ -8,16 +8,21 @@ interface TitleOwnProps {
    * text to be displayed in the component.
    */
   children?: string;
+  /**
+   * theme-ui styling object
+   */
+  sxStyle?: SxStyleProp;
 }
 
 export type TitleProps = TitleOwnProps & Omit<HeadingProps, 'children'>;
 
-export const Title: FC<TitleProps> = ({ children, ...rest }) => (
+export const Title: FC<TitleProps> = ({ children, sxStyle, ...rest }) => (
   <Heading
     as="h1"
     sx={{
-      fontWeight: 900,
-      paddingBottom: '25px',
+      fontWeight: 800,
+      paddingBottom: 4,
+      ...sxStyle,
     }}
     {...rest}
   >

ui/pages/src/ClassicPage/ClassicPage.tsx

@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+/** @jsx jsx */
+import { jsx, Box } from 'theme-ui';
+import { FC } from 'react';
 import {
   EditPage,
   Title,
@@ -9,21 +11,28 @@ import {
   Description,
   ComponentSource,
   PropsTable,
+  PackageVersion,
 } from '@component-controls/blocks';
 
 export const ClassicPage: FC = () => {
   return (
-    <>
+    <div>
       <EditPage />
-      <Title />
+      <Title sxStyle={{ paddingBottom: 0 }} />
       <Subtitle />
+      <PackageVersion />
+      <Box
+        sx={{
+          paddingBottom: 4,
+        }}
+      />
       <Description />
       <ComponentSource id="." title="Component" />
       <Playground openTab="source" title=".">
         <Story id="." />
       </Playground>
       <PropsTable of="." title="Properties" />
       <Stories dark={true} />
-    </>
+    </div>
   );
 };