DOP-2583: type now uses the typography component (#662)

* update LG card to v6 * update jest snapshots * attempt 1 * continuing * fix package lock merge conflicts * more fixes * comment deletion * cleaning up more comments * tweak * MARGINAL MARGINS * address typography in cards. TODO: update links styling * remove log * update header component for PLP * more cleanup of margins, breadcrumbs, general code quality * let leafygreen color text in callouts * cleeeeanup * bump sidenav, fix various things, confused why on this page is wonkus * tidying up side nav and contents * update package-lock * Revert "DOP-3167: dangling punctuation after Link (#661)" This reverts commit ee2e40c. * fix intro text color on guides landing * updated with seungs comments * minor fix for admonition margins * fixes from allison's feedback * updated with graces feedback * fix button on guides and remove redundant margins on plp * missed css fix * DOP-2578: update cards to use new typography (#673) * update cards+driver tiles to use typography. TODO: chapters * overwrite new card attributes with existing styling * minor. wrap line on card * address feedback w card * update operation and quiz choice components * tiles have no link inside card * remove border radius overwrite for guides. uniform font for tiles * font size on sidenav in landing, unsquish internal nav * DOP-2577: update LG/tabs to v8 (post typography update) (#674) update tabs to v8. tested with PLP and hidden tabs * increase line height on products list Co-authored-by: Seung Park <[email protected]> Co-authored-by: Seung Park <[email protected]>
mongodb · Aug 22, 2022 · efb8c67 · efb8c67
1 parent 7fa2322
commit efb8c67
Show file tree

Hide file tree

Showing 56 changed files with 1,636 additions and 1,307 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,26 +57,26 @@
     "@leafygreen-ui/banner": "^3.0.6",
     "@leafygreen-ui/box": "^3.0.6",
     "@leafygreen-ui/button": "^13.0.0",
-    "@leafygreen-ui/callout": "^3.0.6",
-    "@leafygreen-ui/card": "^5.1.1",
+    "@leafygreen-ui/callout": "^5.0.0",
+    "@leafygreen-ui/card": "^6.0.1",
     "@leafygreen-ui/checkbox": "^6.0.3",
     "@leafygreen-ui/code": "^11.0.0",
     "@leafygreen-ui/emotion": "^4.0.0",
     "@leafygreen-ui/hooks": "^6.0.1",
     "@leafygreen-ui/icon": "^11.6.1",
     "@leafygreen-ui/icon-button": "^9.1.6",
     "@leafygreen-ui/inline-definition": "^2.0.2",
-    "@leafygreen-ui/leafygreen-provider": "^2.0.2",
+    "@leafygreen-ui/leafygreen-provider": "^2.3.2",
     "@leafygreen-ui/logo": "^4.0.2",
     "@leafygreen-ui/modal": "^6.1.2",
-    "@leafygreen-ui/palette": "^3.3.1",
-    "@leafygreen-ui/select": "^3.0.1",
-    "@leafygreen-ui/side-nav": "^7.2.1",
+    "@leafygreen-ui/palette": "^3.4.0",
+    "@leafygreen-ui/select": "^6.0.0",
+    "@leafygreen-ui/side-nav": "^10.0.0",
     "@leafygreen-ui/table": "^2.0.2",
-    "@leafygreen-ui/tabs": "^5.1.1",
+    "@leafygreen-ui/tabs": "^8.0.0",
     "@leafygreen-ui/text-input": "^6.0.1",
     "@leafygreen-ui/tooltip": "^6.1.7",
-    "@leafygreen-ui/typography": "^7.5.0",
+    "@leafygreen-ui/typography": "^13.0.0",
     "@loadable/component": "^5.14.1",
     "@mdb/consistent-nav": "1.2.16",
     "@mdb/flora": "^0.20.5",

diff --git a/src/components/Admonition.js b/src/components/Admonition.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import Callout, { Variant } from '@leafygreen-ui/callout';
+import { cx, css } from '@leafygreen-ui/emotion';
 import ComponentFactory from './ComponentFactory';
 import { getPlaintext } from '../utils/get-plaintext';
+import { theme } from '../theme/docsTheme';
 
 export const admonitionMap = {
   example: Variant.Example,
@@ -15,17 +16,22 @@ export const admonitionMap = {
   warning: Variant.Warning,
 };
 
-const StyledCallout = styled(Callout)`
-  /* Add margin to right so drop shadow is visible */
-  margin: 24px 3px 24px 0;
+const admonitionStyles = css`
+  margin-top: ${theme.size.medium};
+  margin-bottom: ${theme.size.medium};
 
-  /* Add margins below all child elements in the callout */
-  & > div > div > * {
-    margin: 0 0 12px;
+  p {
+    color: unset;
   }
-
-  & > div > div > *:last-child {
-    margin: 0;
+  // remove bottom margin off the final paragraph in a callout,
+  // similarly remove the bottom margin off lists and list items so that
+  // the spacing looks proper on those callouts
+  > li:last-of-type,
+  > ul:last-of-type,
+  > ol:last-of-type,
+  > li:last-of-type > p,
+  > p:last-of-type {
+    margin-bottom: 0px;
   }
 `;
 
@@ -38,11 +44,16 @@ const Admonition = ({ nodeData: { argument, children, name }, ...rest }) => {
   }
 
   return (
-    <StyledCallout title={title} variant={admonitionMap[name] || Variant.Note}>
+    <Callout
+      className={cx(admonitionStyles)}
+      title={title}
+      variant={admonitionMap[name] || Variant.Note}
+      baseFontSize={16}
+    >
       {children.map((child, i) => (
         <ComponentFactory {...rest} key={i} nodeData={child} />
       ))}
-    </StyledCallout>
+    </Callout>
   );
 };
 

diff --git a/src/components/Breadcrumbs/BreadcrumbContainer.js b/src/components/Breadcrumbs/BreadcrumbContainer.js
@@ -1,15 +1,16 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { uiColors } from '@leafygreen-ui/palette';
+import { palette } from '@leafygreen-ui/palette';
 import { css } from '@emotion/react';
 import Link from '../Link';
 import { NavigationContext } from '../../context/navigation-context';
 import { formatText } from '../../utils/format-text';
 import { reportAnalytics } from '../../utils/report-analytics';
+import { theme } from '../../theme/docsTheme';
 
 const activeColor = css`
-  color: ${uiColors.gray.dark3};
+  color: ${palette.gray.dark3};
 `;
 
 const StyledArrow = styled('span')`
@@ -33,6 +34,7 @@ const StyledLink = styled(Link)`
       ${activeColor}
     }
   }
+  font-size: ${theme.fontSize.small};
 `;
 
 const BreadcrumbContainer = ({ homeCrumb, lastCrumb }) => {

diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js
@@ -1,23 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { uiColors } from '@leafygreen-ui/palette';
+import { Body } from '@leafygreen-ui/typography';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { palette } from '@leafygreen-ui/palette';
 import BreadcrumbSchema from './BreadcrumbSchema';
 import BreadcrumbContainer from './BreadcrumbContainer';
-import { theme } from '../../theme/docsTheme';
 import { baseUrl } from '../../utils/base-url';
+import { theme } from '../../theme/docsTheme';
 
-const Wrapper = styled('nav')`
+const breadcrumbBodyStyle = css`
   font-size: ${theme.fontSize.small};
-  margin-bottom: ${theme.size.medium};
-
-  * {
-    color: ${uiColors.gray.dark1};
-  }
-
-  & > p {
-    margin-top: 0;
-    min-height: ${theme.size.medium};
+  a {
+    color: ${palette.gray.dark1};
   }
 `;
 
@@ -35,11 +29,9 @@ const Breadcrumbs = ({ homeUrl = null, pageTitle = null, parentPaths, siteTitle,
   return (
     <>
       <BreadcrumbSchema breadcrumb={parentPaths} siteTitle={siteTitle} slug={slug} />
-      <Wrapper>
-        <p>
-          <BreadcrumbContainer homeCrumb={homeCrumb} lastCrumb={lastCrumb} />
-        </p>
-      </Wrapper>
+      <Body className={cx(breadcrumbBodyStyle)}>
+        <BreadcrumbContainer homeCrumb={homeCrumb} lastCrumb={lastCrumb} />
+      </Body>
     </>
   );
 };

diff --git a/src/components/Button.js b/src/components/Button.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LeafyButton from '@leafygreen-ui/button';
 import ComponentFactory from './ComponentFactory';
-import Link from './Link';
 
 const Button = ({
   nodeData: {
@@ -12,7 +11,7 @@ const Button = ({
   ...rest
 }) => {
   return (
-    <LeafyButton className="button" as={Link} hideExternalIcon={true} variant="primary" to={uri}>
+    <LeafyButton className="button" variant="primary" href={uri}>
       {argument.map((child, i) => (
         <ComponentFactory {...rest} nodeData={child} key={i} />
       ))}

diff --git a/src/components/Card/index.js b/src/components/Card/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withPrefix, navigate } from 'gatsby';
 import styled from '@emotion/styled';
 import LeafyGreenCard from '@leafygreen-ui/card';
-import { uiColors } from '@leafygreen-ui/palette';
+import { Body } from '@leafygreen-ui/typography';
 import { theme } from '../../theme/docsTheme';
 import ComponentFactory from '../ComponentFactory';
 import ConditionalWrapper from '../ConditionalWrapper';
@@ -26,18 +26,11 @@ const CardIcon = styled('img')`
   width: ${theme.size.medium};
 `;
 
-const H4 = styled('h4')`
+const H4 = styled(Body)`
+  font-weight: 600;
   letter-spacing: 0.5px;
   margin: ${({ compact, theme }) =>
-    compact ? `0 0 ${theme.size.small}` : `${theme.size.medium} 0 ${theme.size.small} 0`};
-`;
-
-const CTA = styled('p')`
-  font-weight: bold;
-  margin-top: auto;
-  & > a:hover {
-    color: ${uiColors.blue.dark2};
-  }
+    compact ? `0 0 ${theme.size.small}` : `${theme.size.default} 0 ${theme.size.small} 0`};
 `;
 
 const FlexTag = styled(Tag)`
@@ -59,8 +52,6 @@ const CompactIcon = styled('img')`
 `;
 
 const CompactIconCircle = styled('div')`
-  background: ${uiColors.green.light3};
-  border-radius: 50%;
   display: flex;
   flex-shrink: 0 !important;
   height: 48px;
@@ -79,6 +70,16 @@ const CompactTextWrapper = styled('div')`
   @media ${theme.screenSize.upToSmall} {
     margin-left: ${theme.size.default};
   }
+
+  p {
+    line-height: ${theme.size.medium};
+  }
+`;
+
+const StyledBody = styled(Body)`
+  a {
+    line-height: unset;
+  }
 `;
 
 const onCardClick = (url) => {
@@ -110,15 +111,19 @@ const Card = ({
         wrapper={(children) => <CompactTextWrapper>{children}</CompactTextWrapper>}
       >
         {tag && <FlexTag>{tag}</FlexTag>}
-        <H4 compact={isCompact || isExtraCompact}>{headline}</H4>
+        {headline && (
+          <H4 className="check-h4" compact={isCompact || isExtraCompact} weight="medium">
+            {headline}
+          </H4>
+        )}
         {children.map((child, i) => (
           // The cardRef prop's purpose to distinguish wich RefRoles are coming from the Card component (a workaround while we figure out card-ref support in the parser/)
           <ComponentFactory nodeData={child} key={i} cardRef={true} />
         ))}
         {cta && (
-          <CTA>
+          <StyledBody>
             <Link to={url}>{cta}</Link>
-          </CTA>
+          </StyledBody>
         )}
       </ConditionalWrapper>
     </Card>

diff --git a/src/components/Chapters/Chapter.js b/src/components/Chapters/Chapter.js
@@ -4,6 +4,7 @@ import { withPrefix } from 'gatsby';
 import styled from '@emotion/styled';
 import Card from '@leafygreen-ui/card';
 import { uiColors } from '@leafygreen-ui/palette';
+import { Body } from '@leafygreen-ui/typography';
 import ChapterNumberLabel from './ChapterNumberLabel';
 import Link from '../Link';
 import { theme } from '../../theme/docsTheme';
@@ -14,7 +15,6 @@ const IMAGE_SIZE = 200;
 
 const Container = styled(Card)`
   background-color: ${uiColors.white};
-  border-radius: ${theme.size.tiny};
   border: 1px solid ${uiColors.gray.light3};
   padding: ${theme.size.large} ${theme.size.medium};
 
@@ -79,7 +79,7 @@ const ChapterTitle = styled('div')`
   margin-top: ${theme.size.small};
 `;
 
-const ChapterDescription = styled('div')`
+const ChapterDescription = styled(Body)`
   margin-top: ${theme.size.small};
 `;
 
@@ -102,11 +102,16 @@ const GuideLink = styled(Link)`
   flex-direction: column;
   padding: ${theme.size.small};
   position: relative;
+  font-size: ${theme.size.default};
+  line-height: ${theme.size.medium};
 
   :hover {
     background-color: ${uiColors.gray.light2};
     color: unset;
-    text-decoration: none;
+
+    ::after {
+      content: none;
+    }
   }
 
   @media ${theme.screenSize.mediumAndUp} {
@@ -145,6 +150,8 @@ const Chapter = ({ metadata, nodeData: { argument, options } }) => {
   const guides = useMemo(() => getGuidesData(metadata, currentChapter), [metadata, currentChapter]);
 
   return (
+    // TODO: have to return specific typography here. card is explicit size 13 font
+
     <Container id={currentChapter?.id}>
       {image ? (
         <ChapterImage

diff --git a/src/components/Chapters/ChapterNumberLabel.js b/src/components/Chapters/ChapterNumberLabel.js
@@ -10,6 +10,7 @@ const Label = styled('div')`
   color: ${uiColors.green.base};
   font-size: ${theme.fontSize.small};
   font-weight: bold;
+  line-height: ${theme.size.medium};
   height: ${theme.size.medium};
   text-align: center;
   width: 83px;

diff --git a/src/components/Chapters/RightColumn.js b/src/components/Chapters/RightColumn.js
@@ -18,7 +18,6 @@ const learningCardStyle = ({ isVisible }) => css`
   display: flex;
   flex-direction: column;
   padding: ${theme.size.large};
-  border-radius: ${theme.size.tiny};
   margin-bottom: ${theme.size.default};
 
   > p {

diff --git a/src/components/Code/styles/codeStyle.js b/src/components/Code/styles/codeStyle.js
@@ -4,7 +4,7 @@ import { theme } from '../../../theme/docsTheme';
 
 export const baseCodeStyle = css`
   display: table;
-  margin: ${theme.size.default} 0;
+  margin: ${theme.size.medium} 0;
   min-width: 150px;
   table-layout: fixed;
   width: 100%;

diff --git a/src/components/Contents/ContentsListItem.js b/src/components/Contents/ContentsListItem.js
@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { uiColors } from '@leafygreen-ui/palette';
+import { palette } from '@leafygreen-ui/palette';
 import Link from '../Link';
 import { theme } from '../../theme/docsTheme';
 
 const LINK_DEPTH_PADDING = 16;
 
 const activeBorderLeftCSS = css`
-  border-left: 2px solid ${uiColors.gray.dark3};
+  border-left: 2px solid ${palette.black};
   padding-left: 0;
 `;
 
@@ -22,7 +22,7 @@ const ListItem = styled('li')`
   }
 
   @media ${theme.screenSize.largeAndUp} {
-    ${({ isActive }) => (isActive ? activeBorderLeftCSS : `border-left: 1px solid ${uiColors.gray.light2};`)}
+    ${({ isActive }) => (isActive ? activeBorderLeftCSS : `border-left: 1px solid ${palette.gray.light2};`)}
 
     &:hover,
     &:active {
@@ -32,7 +32,12 @@ const ListItem = styled('li')`
 `;
 
 const StyledLink = styled(Link)`
-  color: ${uiColors.black};
+  color: ${palette.black};
+  font-size: ${theme.fontSize.small};
+  line-height: ${theme.fontSize.default};
+
+  ${({ isActive }) => (isActive ? `font-weight: 600;` : `font-weight: normal;`)}
+
   display: inline-block;
   padding-left: ${({ depth }) => `${depth * LINK_DEPTH_PADDING}px`};
   width: 100%;
@@ -51,7 +56,7 @@ const StyledLink = styled(Link)`
 const ContentsListItem = ({ children, depth = 0, id, isActive = false }) => {
   return (
     <ListItem isActive={isActive}>
-      <StyledLink to={`#${id}`} depth={depth}>
+      <StyledLink to={`#${id}`} depth={depth} isActive={isActive}>
         {children}
       </StyledLink>
     </ListItem>