mongodb · spark33 · Mar 8, 2023 · Mar 9, 2023 · Mar 9, 2023 · Mar 9, 2023
diff --git a/.env.example b/.env.example
@@ -1,3 +1,6 @@
 NEXT_PUBLIC_CONTENTSTACK_API_KEY='apikey'
 NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN='token'
-NEXT_PUBLIC_GOOGLE_ANALYTICS='<Tracking_ID>'
+NEXT_PUBLIC_GOOGLE_ANALYTICS='<Tracking_ID>'
+MDB_USER="<MDB user name>"
+MDB_PASSWORD="<password>"
+FIGMA_TOKEN="<token>"
diff --git a/components/ContentstackRichText/ExampleCardBlock/types.ts b/components/ContentstackRichText/ExampleCardBlock/types.ts
@@ -7,6 +7,6 @@ const Variant = {
   Do: 'do',
 } as const;
 
-type Variant = typeof Variant[keyof typeof Variant];
+type Variant = (typeof Variant)[keyof typeof Variant];
 
 export { Variant };
diff --git a/components/ContentstackRichText/types.ts b/components/ContentstackRichText/types.ts
@@ -135,7 +135,7 @@ export interface HorizontalLayoutBlockProps {
   column_1: CSNode; // richText
   column_2: CSNode; // richText,
   vertical_align: 'start' | 'center' | 'end' | 'baseline';
-  flex_ratio: `${number}:${number}`
+  flex_ratio: `${number}:${number}`;
 }
 
 export interface BlockPropsMap {

diff --git a/components/ContentstackRichText/utils.ts b/components/ContentstackRichText/utils.ts
@@ -22,8 +22,8 @@ export const getCSNodeTextContent = (node?: CSNode): string => {
 
 export const nodeHasAssets = (node: CSNode): boolean => {
   if (['asset', 'entry', 'reference'].includes(node.type)) {
-    return true
+    return true;
   } else {
-    return node.children && node.children.some(child => nodeHasAssets(child))
+    return node.children && node.children.some(child => nodeHasAssets(child));
   }
-}
+};
diff --git a/components/Grid.tsx b/components/Grid.tsx
@@ -32,10 +32,10 @@ const Wrap = {
   WrapReverse: 'wrap-reverse',
 };
 
-type Direction = typeof Direction[keyof typeof Direction];
-type Align = typeof Align[keyof typeof Align];
-type Justify = typeof Justify[keyof typeof Justify];
-type Wrap = typeof Wrap[keyof typeof Wrap];
+type Direction = (typeof Direction)[keyof typeof Direction];
+type Align = (typeof Align)[keyof typeof Align];
+type Justify = (typeof Justify)[keyof typeof Justify];
+type Wrap = (typeof Wrap)[keyof typeof Wrap];
 
 type GridContainerProps = JSX.IntrinsicElements['div'] & {
   direction?: Direction;

diff --git a/components/pages/changelogs/FigmaChangelogs.tsx b/components/pages/changelogs/FigmaChangelogs.tsx
@@ -0,0 +1,87 @@
+import { startCase } from 'lodash';
+
+import FigmaIcon from 'components/icons/FigmaIcon';
+import ReactIcon from 'components/icons/ReactIcon';
+
+import { palette } from '@leafygreen-ui/palette';
+import { spacing } from '@leafygreen-ui/tokens';
+import {
+  Body,
+  Disclaimer,
+  H3,
+  Link,
+  Subtitle,
+} from '@leafygreen-ui/typography';
+
+import { css } from '@emotion/css';
+
+const FigmaChangelogs = ({ componentName, figmaEntries }) => {
+  return (
+    <>
+      {figmaEntries &&
+        figmaEntries.map(figmaVersion => (
+          <div
+            key={JSON.stringify(figmaVersion)}
+            className={css`
+              padding: ${spacing[3]}px 0 ${spacing[2]}px;
+              &:not(:last-child) {
+                border-bottom: 1px solid ${palette.gray.light2};
+              }
+            `}
+          >
+            <Disclaimer>
+              {new Date(figmaVersion.created_at).toDateString()}
+            </Disclaimer>
+            <H3 as="h2">{figmaVersion.version}</H3>
+            <Subtitle>
+              {startCase(figmaVersion.update_type?.toLowerCase())}
+            </Subtitle>
+            <Body
+              className={css`
+                margin-bottom: ${spacing[2]}px;
+              `}
+            >
+              {figmaVersion.description}
+            </Body>
+            <div>
+              {figmaVersion.figma_url && (
+                <Link
+                  target="_blank"
+                  href={figmaVersion.figma_url}
+                  className={css`
+                    span {
+                      display: inline-flex;
+                      align-items: center;
+                    }
+                  `}
+                >
+                  <FigmaIcon />
+                  Figma Version v{figmaVersion.version}
+                </Link>
+              )}
+              {figmaVersion.react_version && (
+                <Link
+                  target="_blank"
+                  href={`https://github.com/mongodb/leafygreen-ui/blob/main/packages/${componentName}/CHANGELOG.md#${figmaVersion.react_version.replaceAll(
+                    '.',
+                    '',
+                  )}`}
+                  className={css`
+                    span {
+                      display: inline-flex;
+                      align-items: center;
+                    }
+                  `}
+                >
+                  <ReactIcon />
+                  React Version v{figmaVersion.react_version}
+                </Link>
+              )}
+            </div>
+          </div>
+        ))}
+    </>
+  );
+};
+
+export default FigmaChangelogs;
diff --git a/components/pages/changelogs/LogsControl.tsx b/components/pages/changelogs/LogsControl.tsx
@@ -0,0 +1,47 @@
+import FigmaIcon from 'components/icons/FigmaIcon';
+import ReactIcon from 'components/icons/ReactIcon';
+
+import { css } from '@leafygreen-ui/emotion';
+import {
+  SegmentedControl,
+  SegmentedControlOption,
+} from '@leafygreen-ui/segmented-control';
+import { spacing } from '@leafygreen-ui/tokens';
+
+const controlOptionStyles = css`
+  display: flex;
+  align-items: center;
+`;
+
+const controlOptionTextStyles = css`
+  margin-left: ${spacing[1]}px;
+`;
+
+const LogsControl = ({ setDisplayedLogs, figmaEntries, reactVersion }) => {
+  return (
+    <div style={{ width: '400px' }}>
+      <SegmentedControl onChange={setDisplayedLogs}>
+        {figmaEntries && (
+          <SegmentedControlOption value="figma">
+            <div className={controlOptionStyles}>
+              <FigmaIcon />
+              <span className={controlOptionTextStyles}>
+                Figma - v{figmaEntries[0].version}
+              </span>
+            </div>
+          </SegmentedControlOption>
+        )}
+        <SegmentedControlOption value="react">
+          <div className={controlOptionStyles}>
+            <ReactIcon />
+            <span className={controlOptionTextStyles}>
+              React - v{reactVersion}
+            </span>
+          </div>
+        </SegmentedControlOption>
+      </SegmentedControl>
+    </div>
+  );
+};
+
+export default LogsControl;
diff --git a/components/pages/changelogs/ReactChangelogs.tsx b/components/pages/changelogs/ReactChangelogs.tsx
@@ -0,0 +1,30 @@
+import { palette } from '@leafygreen-ui/palette';
+import { spacing } from '@leafygreen-ui/tokens';
+
+import { css } from '@emotion/css';
+
+const changelogStyles = css`
+  color: ${palette.gray.dark3};
+  pointer-events: none;
+
+  & > h2 {
+    padding-top: ${spacing[3]}px;
+    border-top: 1px solid ${palette.gray.light2};
+  }
+
+  a {
+    color: ${palette.gray.dark3};
+    text-decoration: none;
+  }
+`;
+
+const ReactChangelogs = ({ reactChangelogs }) => {
+  return (
+    <div
+      className={changelogStyles}
+      dangerouslySetInnerHTML={{ __html: reactChangelogs }}
+    ></div>
+  );
+};
+
+export default ReactChangelogs;
diff --git a/components/pages/documentation/CodeDocs.tsx b/components/pages/documentation/CodeDocs.tsx
@@ -9,7 +9,6 @@ import { InstallInstructions } from './InstallInstructions';
 
 function CodeDocs({
   componentKebabCaseName,
-  changelog,
   tsDoc,
 }: BaseLayoutProps & { tsDoc?: Array<CustomComponentDoc> }) {
   const tsDocArray = tsDoc?.sort(
@@ -30,10 +29,7 @@ function CodeDocs({
 
   return (
     <>
-      <InstallInstructions
-        componentKebabCaseName={componentKebabCaseName}
-        changelog={changelog}
-      />
+      <InstallInstructions componentKebabCaseName={componentKebabCaseName} />
       {tsDocArray && tsDocArray.length > 0 ? (
         <TSDocPropTableSection tsDocArray={tsDocArray} />
       ) : (

diff --git a/components/pages/documentation/InstallInstructions.tsx b/components/pages/documentation/InstallInstructions.tsx
@@ -1,13 +1,9 @@
 import { useState } from 'react';
 
-import Button from '@leafygreen-ui/button';
 import Card from '@leafygreen-ui/card';
 import Copyable from '@leafygreen-ui/copyable';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { useViewportSize } from '@leafygreen-ui/hooks';
-import ActivityFeedIcon from '@leafygreen-ui/icon/dist/ActivityFeed';
-import Modal from '@leafygreen-ui/modal';
-import { palette } from '@leafygreen-ui/palette';
 import {
   SegmentedControl,
   SegmentedControlOption,
@@ -30,68 +26,7 @@ const subtitlePadding = css`
   padding-bottom: ${spacing[3]}px;
 `;
 
-const changelogStyles = css`
-  color: ${palette.gray.dark3};
-  pointer-events: none;
-
-  & > h2 {
-    padding-top: ${spacing[3]}px;
-    border-top: 1px solid ${palette.gray.light2};
-  }
-
-  a {
-    color: ${palette.gray.dark3};
-    text-decoration: none;
-  }
-`;
-
-interface VersionCardProps {
-  version?: string;
-  changelog: string;
-  isMobile?: boolean;
-}
-function VersionCard({
-  version,
-  changelog,
-  isMobile = false,
-}: VersionCardProps) {
-  const [openModal, setOpenModal] = useState(false);
-
-  return (
-    <Card className={cx(topAlignment, cardStyle)}>
-      <Subtitle as="h2" className={subtitlePadding}>
-        Version {version}
-      </Subtitle>
-      <Button
-        size={isMobile ? 'large' : 'default'}
-        leftGlyph={<ActivityFeedIcon />}
-        onClick={() => setOpenModal(curr => !curr)}
-        className={cx({
-          [css`
-            width: 100%;
-          `]: isMobile,
-        })}
-      >
-        View Changelog
-      </Button>
-      <Modal
-        className={css`
-          z-index: 1;
-        `}
-        open={openModal}
-        setOpen={setOpenModal}
-      >
-        <div
-          className={changelogStyles}
-          dangerouslySetInnerHTML={{ __html: changelog }}
-        ></div>
-      </Modal>
-    </Card>
-  );
-}
-
-export const InstallInstructions = ({ componentKebabCaseName, changelog }) => {
-  const version = changelog?.split('h2')[1]?.replace(/[>/<]+/g, '');
+export const InstallInstructions = ({ componentKebabCaseName }) => {
   const viewport = useViewportSize();
   const isMobile = viewport?.width
     ? viewport?.width < breakpoints.Tablet
@@ -138,8 +73,6 @@ export const InstallInstructions = ({ componentKebabCaseName, changelog }) => {
           </Copyable>
         </div>
       </Card>
-
-      <VersionCard version={version} changelog={changelog} />
     </div>
   );
 };
diff --git a/components/pages/example/Knob/types.ts b/components/pages/example/Knob/types.ts
@@ -9,5 +9,5 @@ export interface KnobProps extends HTMLElementProps<'input'> {
   value: any;
   onChange: (val: any) => void;
   darkMode?: boolean;
-  [key: string]: any
+  [key: string]: any;
 }
diff --git a/components/pages/example/types.ts b/components/pages/example/types.ts
@@ -39,8 +39,8 @@ export type KnobType = PropItem & {
     max?: number;
     step?: number;
     disabled?: boolean;
-    [key: string]: any
-  }
+    [key: string]: any;
+  };
 };
 
 export interface LiveExampleState {

diff --git a/components/pages/example/utils.ts b/components/pages/example/utils.ts
@@ -129,9 +129,9 @@ function getPropItemToKnobTypeMapFn({
         StoryFn,
         TSDocProp,
       }),
-      args: getOtherControlArgs({meta, StoryFn, TSDocProp})
-    } as KnobType
-  }
+      args: getOtherControlArgs({ meta, StoryFn, TSDocProp }),
+    } as KnobType;
+  };
 }
 
 /**
@@ -233,9 +233,13 @@ function getOtherControlArgs({
 }: MetadataSources): object | undefined {
   const SBInputType = getSBInputType({ meta, StoryFn, TSDocProp });
 
-  if (SBInputType && SBInputType.control && typeof SBInputType.control === 'object') {
-    const {type, ...args} = SBInputType.control
-    return args
+  if (
+    SBInputType &&
+    SBInputType.control &&
+    typeof SBInputType.control === 'object'
+  ) {
+    const { type, ...args } = SBInputType.control;
+    return args;
   }
 }