header links in guidelines

mik-patient · Aug 25, 2022 · 6fe0988 · 6fe0988
1 parent 874ff6d
commit 6fe0988
Show file tree

Hide file tree

Showing 13 changed files with 169 additions and 170 deletions.
diff --git a/components/.DS_Store b/components/.DS_Store
diff --git a/components/ContentfulRichText.tsx b/components/ContentfulRichText.tsx
diff --git a/components/ContentfulRichText/ContentfulRichText.tsx b/components/ContentfulRichText/ContentfulRichText.tsx
@@ -0,0 +1,35 @@
+import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
+import { BLOCKS, INLINES } from '@contentful/rich-text-types';
+import {
+  Body,
+  H1,
+  H2,
+  H3,
+  Subtitle,
+  Overline,
+  Link,
+} from '@leafygreen-ui/typography';
+import HeaderContent from './HeaderContent';
+import renderAsset from './renderAsset';
+import renderEntry from './renderEntry';
+
+const ContentfulRichText = ({ document }) => (
+  <>
+    {documentToReactComponents(document, {
+      renderNode: {
+        [BLOCKS.PARAGRAPH]: (node, children) => <Body>{children}</Body>,
+        [BLOCKS.HEADING_1]: (node, children) => <H1><HeaderContent>{children}</HeaderContent></H1>,
+        [BLOCKS.HEADING_2]: (node, children) => <H2><HeaderContent>{children}</HeaderContent></H2>,
+        [BLOCKS.HEADING_3]: (node, children) => <H3><HeaderContent>{children}</HeaderContent></H3>,
+        [BLOCKS.HEADING_4]: (node, children) => <Subtitle><HeaderContent>{children}</HeaderContent></Subtitle>,
+        [BLOCKS.HEADING_5]: (node, children) => <Overline>{children}</Overline>,
+        [BLOCKS.EMBEDDED_ASSET]: renderAsset,
+        [BLOCKS.EMBEDDED_ENTRY]: renderEntry,
+        [INLINES.HYPERLINK]: (node, children) => <Link href={node.data.uri} target="_blank">{children}</Link>,
+        [INLINES.ASSET_HYPERLINK]: renderAsset,
+      },
+    })}
+  </>
+);
+
+export default ContentfulRichText;
diff --git a/components/ContentfulRichText/HeaderContent.tsx b/components/ContentfulRichText/HeaderContent.tsx
@@ -0,0 +1,57 @@
+import styled from '@emotion/styled';
+import { palette } from '@leafygreen-ui/palette';
+import kebabCase from 'lodash/kebabCase';
+import { PropsWithChildren } from "react";
+import Icon from '@leafygreen-ui/icon';
+import Link from 'next/link';
+
+const StyledAnchor = styled('a')`
+  color: inherit;
+  text-decoration: inherit;
+`;
+
+const LinkContent = styled('span')`
+  position: relative;
+  color: inherit;
+  text-decoration: inherit;
+
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: -4px;
+    left: 0;
+    border-radius: 2px;
+  }
+
+  &:hover {
+    &:after {
+      background-color: ${palette.gray.light2};
+    }
+    + svg {
+      opacity: 1;
+    }
+  }
+`;
+
+const StyledIcon = styled(Icon)`
+  margin-left: 8px;
+  opacity: 0; // overridden on LinkContent hover
+`
+
+const HeaderContent = ({ children }: PropsWithChildren<{}>) => {
+  const headerId = kebabCase(children?.toString());
+  return (
+    <Link href={`#${headerId}`} passHref>
+      <StyledAnchor id={headerId}>
+        <LinkContent>
+          {children}
+        </LinkContent>
+        <StyledIcon glyph="Link" fill={palette.gray.light1} />
+      </StyledAnchor>
+    </Link>
+  )
+}
+
+export default HeaderContent;
diff --git a/components/ContentfulRichText/index.ts b/components/ContentfulRichText/index.ts
@@ -0,0 +1,3 @@
+import ContentfulRichText from "./ContentfulRichText";
+
+export default ContentfulRichText;
diff --git a/components/ContentfulRichText/renderAsset.tsx b/components/ContentfulRichText/renderAsset.tsx
@@ -0,0 +1,20 @@
+import Image from '../Image';
+
+const renderAsset = node => {
+  if (!node.data.target.fields) {
+    return <>Invalid asset.</>;
+  }
+
+  const { title, file } = node.data.target.fields;
+  const mimeType = file.contentType;
+  const mimeGroup = mimeType.split('/')[0];
+
+  switch (mimeGroup) {
+    case 'image':
+      return <Image alt={title} src={file.url} width="100%" />;
+    default:
+      return <h1>Unsupported embedded-asset-block mimeGroup: ${mimeGroup!}</h1>;
+  }
+};
+
+export default renderAsset;
diff --git a/components/ContentfulRichText/renderEntry.tsx b/components/ContentfulRichText/renderEntry.tsx
@@ -0,0 +1,25 @@
+import ExpandableCard from '@leafygreen-ui/expandable-card';
+
+const renderEntry = node => {
+  const embeddedEntryNodeType = node.data.target?.sys?.contentType?.sys.id;
+  const embeddedEntryFields = node.data.target.fields;
+
+  switch (embeddedEntryNodeType) {
+    case 'expandableCardBlock': {
+      const { title, description, content } = embeddedEntryFields;
+      return (
+        <ExpandableCard title={title} description={description}>
+          <ContentfulRichText document={content} />
+        </ExpandableCard>
+      );
+    }
+    default:
+      return (
+        <h1>
+          Unsupported embedded-entry-block nodeType: ${embeddedEntryNodeType!}
+        </h1>
+      );
+  }
+};
+
+export default renderEntry;
diff --git a/layouts/BaseLayout.tsx b/layouts/BaseLayout.tsx
@@ -16,19 +16,19 @@ const containerStyle = css`
   overflow: hidden;
 
   ${mq({
-    height: ['auto', 'auto', '100vh'],
-    display: ['block', 'block', 'grid'],
-    paddingLeft: [`${spacing[4]}px`, `${spacing[4]}px`, '0px'],
-    paddingRight: [`${spacing[4]}px`, `${spacing[4]}px`, '0px'],
-  })}
+  height: ['auto', 'auto', '100vh'],
+  display: ['block', 'block', 'grid'],
+  paddingLeft: [`${spacing[4]}px`, `${spacing[4]}px`, '0px'],
+  paddingRight: [`${spacing[4]}px`, `${spacing[4]}px`, '0px'],
+})}
 `;
 
 const layout = css`
   position: relative;
   ${mq({
-    overflowX: ['visible', 'visible', 'hidden'],
-    overflowY: ['visible', 'visible', 'auto'],
-  })}
+  overflowX: ['visible', 'visible', 'hidden'],
+  overflowY: ['visible', 'visible', 'auto'],
+})}
 `;
 
 const padding = `${spacing[5]}px`;
@@ -37,14 +37,14 @@ const childrenWrapper = css`
   min-height: 100vh;
 
   ${mq({
-    paddingLeft: [0, 0, padding, padding],
-    paddingRight: [0, 0, padding, padding],
-    width: [
-      '100%',
-      '100%',
-      `calc(100% - (${padding} * 2))', 'calc(1440px - 270px - (${padding} * 2))`,
-    ],
-  })}
+  paddingLeft: [0, 0, padding, padding],
+  paddingRight: [0, 0, padding, padding],
+  width: [
+    '100%',
+    '100%',
+    `calc(100% - (${padding} * 2))', 'calc(1440px - 270px - (${padding} * 2))`,
+  ],
+})}
 `;
 
 function BaseLayout({ children }: { children: React.ReactNode }) {

diff --git a/pages/[contentPageGroup]/[contentPageTitle].tsx b/pages/[contentPageGroup]/[contentPageTitle].tsx
@@ -1,4 +1,4 @@
-import ContentfulRichText from 'components/ContentfulRichText';
+import ContentfulRichText from 'components/ContentfulRichText/ContentfulRichText';
 import { Entry } from 'contentful';
 import ContentPageLayout from 'layouts/ContentPageLayout';
 import { ReactElement } from 'react';

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,11 +1,8 @@
 import React, { ReactElement, ReactNode } from 'react';
 import type { AppProps } from 'next/app';
-import { MDXProvider } from '@mdx-js/react';
-import { css, Global } from '@emotion/react';
-import styled from '@emotion/styled';
+import { Global } from '@emotion/react';
 import { globalStyles } from 'styles/globals';
 import BaseLayout from 'layouts/BaseLayout';
-import { Body, H1, H2, H3, InlineCode, Link } from '@leafygreen-ui/typography';
 import { NextPage } from 'next';
 import Head from 'next/head';
 import { AppContextProvider } from 'contexts/AppContext';
@@ -14,42 +11,6 @@ import {
   getContentPageGroups,
 } from 'utils/getContentfulResources';
 import getFullPageTitle from 'utils/getFullPageTitle';
-const headerStyle = css`
-  margin-block: 0.5em;
-  a,
-  p {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-`;
-
-const MDXComponentMap = {
-  h1: styled(H1 as any)`
-    ${headerStyle}
-  `,
-  h2: styled(H2 as any)`
-    ${headerStyle}
-  `,
-  h3: styled(H3 as any)`
-    ${headerStyle}
-  `,
-  code: InlineCode,
-  p: styled(Body as any)`
-    margin-block: 1em;
-    // Keep inline code inline
-    code {
-      display: inline;
-    }
-  `,
-  a: styled(Link as any)`
-    span,
-    p {
-      display: inline;
-    }
-  `,
-};
 
 export type NextPageWithLayout = NextPage & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -74,17 +35,15 @@ function MyApp({
       components={components}
       contentPageGroups={contentPageGroups}
     >
-      <MDXProvider components={MDXComponentMap}>
-        <Head>
-          <title>{getFullPageTitle('Home')}</title>
-          <meta
-            property="og:title"
-            content={getFullPageTitle('Home')}
-          />
-        </Head>
-        <Global styles={globalStyles} />
-        <BaseLayout>{getLayout(<Component {...pageProps} />)}</BaseLayout>
-      </MDXProvider>
+      <Head>
+        <title>{getFullPageTitle('Home')}</title>
+        <meta
+          property="og:title"
+          content={getFullPageTitle('Home')}
+        />
+      </Head>
+      <Global styles={globalStyles} />
+      <BaseLayout>{getLayout(<Component {...pageProps} />)}</BaseLayout>
     </AppContextProvider>
   );
 }

diff --git a/pages/component/[componentName]/guidelines.tsx b/pages/component/[componentName]/guidelines.tsx
@@ -1,5 +1,5 @@
 import ComingSoon from 'components/ComingSoon';
-import ContentfulRichText from 'components/ContentfulRichText';
+import ContentfulRichText from 'components/ContentfulRichText/ContentfulRichText';
 import ComponentLayout from 'layouts/ComponentLayout';
 import { ReactElement } from 'react';
 import {

diff --git a/public/connect.svg b/public/connect.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ContentfulRichText from "./ContentfulRichText";

		export default ContentfulRichText;