feat: info row with tags and created info

ccontrols · Jul 8, 2020 · 58e0048 · 58e0048
1 parent 03410d8
commit 58e0048
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 42 deletions.
diff --git a/examples/stories/src/tutorial/parts/document.mdx b/examples/stories/src/tutorial/parts/document.mdx
@@ -2,6 +2,7 @@
 title: Structure/Document
 route: /tutorial/structure/document
 type: tutorial
+author: atanasster
 tags:
   - documentation
 order: 0

diff --git a/ui/app/src/Container/Container.tsx b/ui/app/src/Container/Container.tsx
@@ -1,18 +1,26 @@
 /** @jsx jsx */
+import { FC, useContext } from 'react';
 import { jsx, Box } from 'theme-ui';
-import { FC } from 'react';
 import {
+  BlockContext,
   Pagination,
   Container as BlocksContainer,
+  DocumentShortItem,
 } from '@component-controls/blocks';
 
 /**
  *  application inner container for pages. Adds pagination to the blocks/Container component.
  */
 export const Container: FC = ({ children }) => {
+  const { storeProvider, docId } = useContext(BlockContext);
+  const doc = docId ? storeProvider.getStoryDoc(docId) : undefined;
+  const config = storeProvider.config;
+
   return (
     <Box variant="container.container">
-      <BlocksContainer>
+      <BlocksContainer
+        infoRow={<DocumentShortItem reverse={true} doc={doc} config={config} />}
+      >
         {children}
         <Box variant="container.pagination">
           <Pagination />

diff --git a/ui/blocks/src/Container/Container.tsx b/ui/blocks/src/Container/Container.tsx
@@ -1,19 +1,24 @@
 /** @jsx jsx */
 import { jsx, Box } from 'theme-ui';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { EditPage } from '../EditPage';
 import { LastEdited } from '../LastEdited';
 import { Title } from '../Title';
+
+export interface ContainerProps {
+  infoRow?: ReactNode;
+}
 /**
  * page inner container. will display a like to edit the page and a last updated date.
  */
-export const Container: FC = ({ children }) => {
+export const Container: FC<ContainerProps> = ({ children, infoRow }) => {
   return (
     <Box variant="blockpagecontainer.container">
       <Box variant="blockpagecontainer.editrow">
         <EditPage />
         <LastEdited />
       </Box>
+      {infoRow && <Box variant="blockpagecontainer.inforow">{infoRow}</Box>}
       <Box variant="blockpagecontainer.titlerow">
         <Title sx={{ paddingBottom: 0 }} />
       </Box>

diff --git a/ui/blocks/src/DocumentItem/DocumentItem.tsx b/ui/blocks/src/DocumentItem/DocumentItem.tsx
@@ -1,16 +1,14 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Text } from 'theme-ui';
+import { jsx, Box } from 'theme-ui';
 import {
   Document,
-  getDocPath,
   defDocType,
   RunConfiguration,
-  dateToLocalString,
 } from '@component-controls/core';
 import { Subtitle, Markdown, Link } from '@component-controls/components';
-import { TagsList } from '../TagsList';
 import { PageTypeTag } from '../PageTypeTag';
+import { DocumentShortItem } from './DocumentShortItem';
 
 export interface DocumentItemProps {
   /**
@@ -32,7 +30,7 @@ export interface DocumentItemProps {
  * displays a single doument item
  */
 export const DocumentItem: FC<DocumentItemProps> = ({ doc, link, config }) => {
-  const { tags = [], date, type = defDocType } = doc;
+  const { type = defDocType } = doc;
   return (
     <Box variant="documentitem.container">
       <Box variant="documentitem.titlerow">
@@ -42,34 +40,7 @@ export const DocumentItem: FC<DocumentItemProps> = ({ doc, link, config }) => {
         <PageTypeTag type={type} />
       </Box>
       {doc.description && <Markdown>{doc.description}</Markdown>}
-      <Box variant="documentitem.info.container">
-        <Box variant="documentitem.info.inner">
-          {date ? (
-            <Box variant="documentitem.info.date">{`created: ${dateToLocalString(
-              date,
-            )}`}</Box>
-          ) : (
-            ''
-          )}
-          {doc.author && (
-            <Box variant="documentitem.info.author">
-              {date && <Text variant="documentitem.info.comma">,</Text>}
-              <Text variant="documentitem.info.by">by</Text>
-              <Link
-                href={getDocPath(
-                  'author',
-                  undefined,
-                  config?.pages,
-                  doc.author,
-                )}
-              >
-                {doc.author}
-              </Link>
-            </Box>
-          )}
-        </Box>
-        <TagsList tags={tags} />
-      </Box>
+      <DocumentShortItem config={config} doc={doc} />
     </Box>
   );
 };
diff --git a/ui/blocks/src/DocumentItem/DocumentShortItem.tsx b/ui/blocks/src/DocumentItem/DocumentShortItem.tsx
@@ -0,0 +1,68 @@
+/** @jsx jsx */
+import { FC, Fragment } from 'react';
+import { jsx, Box, Text } from 'theme-ui';
+import {
+  Document,
+  getDocPath,
+  dateToLocalString,
+  RunConfiguration,
+} from '@component-controls/core';
+import { Link } from '@component-controls/components';
+import { TagsList } from '../TagsList';
+
+export interface DocumentShortItemProps {
+  /**
+   * document to be displayed
+   */
+  doc?: Document;
+  /**
+   * store configuration object
+   */
+  config?: RunConfiguration;
+
+  reverse?: boolean;
+}
+export const DocumentShortItem: FC<DocumentShortItemProps> = ({
+  doc,
+  config,
+  reverse,
+}) => {
+  const { tags = [], date, author } = doc || {};
+  const dateNode =
+    date || author ? (
+      <Box variant="documentitem.info.inner">
+        {date ? (
+          <Box variant="documentitem.info.date">{`created: ${dateToLocalString(
+            date,
+          )}`}</Box>
+        ) : (
+          ''
+        )}
+        {author && (
+          <Box variant="documentitem.info.author">
+            {date && <Text variant="documentitem.info.comma">,</Text>}
+            <Text variant="documentitem.info.by">by</Text>
+            <Link href={getDocPath('author', undefined, config?.pages, author)}>
+              {author}
+            </Link>
+          </Box>
+        )}
+      </Box>
+    ) : null;
+  const tagsNode = tags.length ? <TagsList tags={tags} /> : null;
+  return tagsNode && dateNode ? (
+    <Box variant="documentitem.info.container">
+      {reverse ? (
+        <Fragment>
+          {tagsNode}
+          {dateNode}
+        </Fragment>
+      ) : (
+        <Fragment>
+          {dateNode}
+          {tagsNode}
+        </Fragment>
+      )}
+    </Box>
+  ) : null;
+};
diff --git a/ui/blocks/src/DocumentItem/index.ts b/ui/blocks/src/DocumentItem/index.ts
@@ -1 +1,2 @@
 export * from './DocumentItem';
+export * from './DocumentShortItem';
diff --git a/ui/blocks/src/LastEdited/LastEdited.tsx b/ui/blocks/src/LastEdited/LastEdited.tsx
@@ -15,7 +15,7 @@ export const LastEdited: FC = () => {
     <Box variant="lastedited.container">
       <Box variant="lastedited.inner">
         <Text variant="lastedited.text">
-          {`Last updated: ${dateToLocalString(doc.dateModified)}`}
+          {`updated: ${dateToLocalString(doc.dateModified)}`}
         </Text>
       </Box>
     </Box>

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -368,10 +368,10 @@ export const theme: ControlsTheme = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      mb: 4,
     },
+    inforow: { pt: 2 },
     titlerow: {
-      mb: 4,
+      my: 4,
     },
   },
   linkheading: {
@@ -549,7 +549,6 @@ export const theme: ControlsTheme = {
       alignItems: 'center',
     },
     text: {
-      pr: 2,
       color: 'muted',
     },
   },
@@ -894,7 +893,9 @@ export const theme: ControlsTheme = {
         flexDirection: 'row',
         alignItems: 'center',
       },
-      date: {},
+      date: {
+        color: 'muted',
+      },
       comma: { mr: 2 },
       by: { mr: 1 },
       author: {
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './DocumentItem';
		export * from './DocumentShortItem';