Merge pull request #334 from mongodb/brooke/codesandbox

Adds Codesandbox links to components!
mongodb · Dec 18, 2023 · cd76a40 · cd76a40
2 parents ec71055 + bf55e96
commit cd76a40
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 35 deletions.
diff --git a/components/icons/CodeSandboxIcon.tsx b/components/icons/CodeSandboxIcon.tsx
@@ -0,0 +1,23 @@
+function CodeSandboxIcon(props: JSX.IntrinsicElements['svg']) {
+  return (
+    <svg
+      {...props}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99999 0C7.61442 0 7.23563 0.100517 6.90158 0.291464L4.55802 1.61984C4.40393 1.65008 4.26018 1.72903 4.15195 1.85001L1.76959 3.20038L1.76676 3.202C1.49544 3.35738 1.26145 3.56801 1.07969 3.81912C1.03544 3.86303 0.996163 3.91333 0.963332 3.96963C0.935052 4.01812 0.913046 4.06851 0.897064 4.11986C0.746218 4.42062 0.667128 4.75247 0.666779 5.08962L0.666779 7.98605C0.666616 7.99491 0.666616 8.00376 0.666779 8.0126L0.666779 10.9104C0.667175 11.2931 0.769015 11.6689 0.962082 12.0002C1.15515 12.3315 1.43265 12.6067 1.76676 12.798L1.76959 12.7996L4.15231 14.1502C4.25674 14.2665 4.39823 14.3493 4.5584 14.3804L6.90001 15.7076L6.90137 15.7084C7.23547 15.8994 7.61434 16 7.99999 16C8.38566 16 8.76454 15.8994 9.09865 15.7084L9.09997 15.7076L11.4416 14.3804C11.6017 14.3493 11.7432 14.2665 11.8477 14.1502L14.2304 12.7996L14.2332 12.798C14.5673 12.6067 14.8448 12.3315 15.0379 12.0002C15.231 11.6689 15.3328 11.2931 15.3332 10.9104V8.01265C15.3334 8.00378 15.3334 7.99489 15.3332 7.986V5.08962C15.3329 4.75248 15.2538 4.42064 15.1029 4.11988C15.0869 4.06852 15.0649 4.01813 15.0367 3.96963C15.0038 3.91332 14.9645 3.86302 14.9203 3.8191C14.7385 3.568 14.5045 3.35737 14.2332 3.20199L11.848 1.85002C11.7398 1.72903 11.596 1.65007 11.4419 1.61984L9.09997 0.292363L9.09844 0.291487C8.76438 0.100525 8.38558 0 7.99999 0ZM2.13342 7.58019V5.48137L7.26667 8.42684V14.2399L5.43337 13.2007V9.89127C5.43337 9.63147 5.29368 9.3914 5.06691 9.26143L2.13342 7.58019ZM8.73331 14.2399L10.5666 13.2007V9.89127C10.5666 9.63147 10.7063 9.3914 10.9331 9.26143L13.8666 7.58019V5.48138L8.73331 8.42684V14.2399ZM7.99999 7.16693L13.1047 4.23787L11.2637 3.19437L8.36685 4.85459C8.13986 4.98468 7.86012 4.98468 7.63313 4.85459L4.73631 3.19437L2.89533 4.23787L7.99999 7.16693ZM12.0333 12.3694L13.4999 11.5381L13.5011 11.5374C13.6119 11.4737 13.704 11.3822 13.7681 11.2722C13.8325 11.1617 13.8664 11.0364 13.8666 10.9089V9.26038L12.0333 10.3111V12.3694ZM2.13342 10.9092V9.26038L3.96672 10.3111V12.3694L2.50008 11.5381L2.49893 11.5374C2.38807 11.4737 2.29599 11.3822 2.23185 11.2722C2.16755 11.1618 2.13361 11.0367 2.13342 10.9092ZM9.78974 2.35891L8.36948 1.55388L8.36665 1.55227C8.25517 1.48843 8.12872 1.45482 7.99999 1.45482C7.87126 1.45482 7.74481 1.48843 7.63333 1.55227L7.6305 1.55388L6.21024 2.35891L7.99999 3.38465L9.78974 2.35891Z"
+        fill="#000"
+      />
+    </svg>
+  );
+}
+
+CodeSandboxIcon.displayName = 'CodeSandboxIcon';
+
+export default CodeSandboxIcon;
diff --git a/components/icons/FigmaIcon.tsx b/components/icons/FigmaIcon.tsx
@@ -1,39 +1,45 @@
 function FigmaIcon(props: JSX.IntrinsicElements['svg']) {
   return (
     <svg
+      {...props}
       width="16"
       height="16"
-      viewBox="0 0 288 432"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect
-        width="95.0226"
-        height="142.534"
-        fill="black"
-        fillOpacity="0"
-        transform="translate(1.46603 2.19946) scale(3)"
-      />
-      <path
-        d="M144 216C144 176.641 175.907 144.733 215.267 144.733V144.733C254.626 144.733 286.534 176.641 286.534 216V216C286.534 255.36 254.626 287.267 215.267 287.267V287.267C175.907 287.267 144 255.36 144 216V216Z"
-        fill="#1ABCFE"
-      />
-      <path
-        d="M1.46603 358.534C1.46603 319.175 33.3733 287.267 72.733 287.267H144V358.534C144 397.894 112.093 429.801 72.733 429.801V429.801C33.3733 429.801 1.46603 397.894 1.46603 358.534V358.534Z"
-        fill="#0ACF83"
-      />
-      <path
-        d="M144 2.19946V144.733H215.267C254.627 144.733 286.534 112.826 286.534 73.4664V73.4664C286.534 34.1068 254.627 2.19946 215.267 2.19946L144 2.19946Z"
-        fill="#FF7262"
-      />
-      <path
-        d="M1.46603 73.4664C1.46603 112.826 33.3733 144.733 72.733 144.733L144 144.733L144 2.19941L72.733 2.19941C33.3733 2.19941 1.46603 34.1067 1.46603 73.4664V73.4664Z"
-        fill="#F24E1E"
-      />
-      <path
-        d="M1.46603 216C1.46603 255.36 33.3733 287.267 72.733 287.267H144L144 144.733L72.733 144.733C33.3733 144.733 1.46603 176.641 1.46603 216V216Z"
-        fill="#A259FF"
-      />
+      <g clip-path="url(#clip0_3_573)">
+        <path
+          d="M8 7.99999C8 6.54225 9.18174 5.36047 10.6395 5.36047C12.0973 5.36047 13.279 6.54225 13.279 7.99999C13.279 9.45777 12.0973 10.6395 10.6395 10.6395C9.18174 10.6395 8 9.45777 8 7.99999Z"
+          fill="#1ABCFE"
+        />
+        <path
+          d="M2.72095 13.279C2.72095 11.8213 3.9027 10.6395 5.36046 10.6395H7.99998V13.279C7.99998 14.7368 6.81824 15.9186 5.36046 15.9186C3.9027 15.9186 2.72095 14.7368 2.72095 13.279Z"
+          fill="#0ACF83"
+        />
+        <path
+          d="M8 0.0814514V5.36047H10.6395C12.0973 5.36047 13.279 4.17873 13.279 2.72097C13.279 1.2632 12.0973 0.0814514 10.6395 0.0814514H8Z"
+          fill="#FF7262"
+        />
+        <path
+          d="M2.72095 2.72097C2.72095 4.17873 3.9027 5.36047 5.36046 5.36047H7.99998V0.0814514H5.36046C3.9027 0.0814514 2.72095 1.2632 2.72095 2.72097Z"
+          fill="#F24E1E"
+        />
+        <path
+          d="M2.72095 7.99999C2.72095 9.45777 3.9027 10.6395 5.36046 10.6395H7.99998V5.36047H5.36046C3.9027 5.36047 2.72095 6.54225 2.72095 7.99999Z"
+          fill="#A259FF"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3_573">
+          <rect
+            width="10.6667"
+            height="16"
+            fill="white"
+            transform="translate(2.66666)"
+          />
+        </clipPath>
+      </defs>
     </svg>
   );
 }

diff --git a/components/icons/GithubIcon.tsx b/components/icons/GithubIcon.tsx
@@ -1,12 +1,25 @@
 const GithubIcon = (props: JSX.IntrinsicElements['svg']) => (
   <svg
     {...props}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
   >
-    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    <g clipPath="url(#clip0_3_574)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.97616 0C3.56555 0 0 3.66667 0 8.20283C0 11.8288 2.28457 14.8982 5.45388 15.9845C5.85012 16.0662 5.99527 15.808 5.99527 15.5908C5.99527 15.4007 5.9822 14.7488 5.9822 14.0697C3.76343 14.5587 3.30139 13.0918 3.30139 13.0918C2.94482 12.1412 2.41649 11.8968 2.41649 11.8968C1.69029 11.3943 2.46939 11.3943 2.46939 11.3943C3.27494 11.4487 3.69763 12.2363 3.69763 12.2363C4.41061 13.4857 5.55951 13.1327 6.02171 12.9153C6.08767 12.3857 6.2991 12.019 6.52359 11.8153C4.75396 11.6252 2.89208 10.919 2.89208 7.76817C2.89208 6.87183 3.20882 6.1385 3.71069 5.56817C3.63151 5.3645 3.35412 4.52233 3.79004 3.39517C3.79004 3.39517 4.46351 3.17783 5.98204 4.23717C6.63218 4.05761 7.30265 3.96627 7.97616 3.9655C8.64963 3.9655 9.33616 4.06067 9.97012 4.23717C11.4888 3.17783 12.1623 3.39517 12.1623 3.39517C12.5982 4.52233 12.3207 5.3645 12.2415 5.56817C12.7566 6.1385 13.0602 6.87183 13.0602 7.76817C13.0602 10.919 11.1984 11.6115 9.41551 11.8153C9.70612 12.0733 9.9569 12.5622 9.9569 13.3363C9.9569 14.4363 9.94384 15.3192 9.94384 15.5907C9.94384 15.808 10.0891 16.0662 10.4852 15.9847C13.6545 14.898 15.9391 11.8288 15.9391 8.20283C15.9522 3.66667 12.3736 0 7.97616 0Z"
+        fill="#24292F"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3_574">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
   </svg>
 );
 

diff --git a/layouts/ComponentLayout.tsx b/layouts/ComponentLayout.tsx
@@ -11,6 +11,7 @@ import getFullPageTitle from 'utils/getFullPageTitle';
 import { getGithubLink } from 'utils/getGithubLink';
 import { mq } from 'utils/mediaQuery';
 
+import CodeSandboxIcon from 'components/icons/CodeSandboxIcon';
 import FigmaIcon from 'components/icons/FigmaIcon';
 import GithubIcon from 'components/icons/GithubIcon';
 import { NextLinkWrapper } from 'components/NextLinkWrapper';
@@ -69,15 +70,15 @@ const mobileLinksContainer = css`
 
 const desktopLinksContainer = css`
   border-bottom: 1px solid ${palette.gray.light2};
-  padding-bottom: 11px;
-  align-self: flex-start;
   flex: 1;
   justify-content: flex-end;
+  height: 100%;
 `;
 
 const tabStyles = css`
   width: 100%;
   max-width: 100%;
+
   [role='tablist'] {
     width: 100%;
     max-width: 100%;
@@ -96,7 +97,21 @@ const ComponentLinks = ({
   [key: string]: any;
 }) => (
   <div {...rest}>
+    {component?.codesandbox_url?.href && (
+      <IconButton
+        key="codesandbox"
+        aria-label="View in CodeSandbox"
+        as="a"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ marginRight: '8px' }}
+        href={component?.codesandbox_url?.href}
+      >
+        <CodeSandboxIcon />
+      </IconButton>
+    )}
     <IconButton
+      key="github"
       aria-label="View in Github"
       as="a"
       target="_blank"
@@ -108,6 +123,7 @@ const ComponentLinks = ({
     </IconButton>
     {component.figmaurl && (
       <IconButton
+        key="figma"
         aria-label="View in Figma"
         as="a"
         href={component.figmaurl}
@@ -175,7 +191,7 @@ function ComponentLayout({
           )}
         </div>
         {component && (!component.private || (component.private && session)) ? (
-          <div className={flexContainer}>
+          <div className={cx(flexContainer)}>
             <Tabs
               selected={selected}
               setSelected={setSelected}

diff --git a/utils/ContentStack/getContentstackResources.ts b/utils/ContentStack/getContentstackResources.ts
@@ -45,6 +45,7 @@ const componentProperties = [
   'url',
   'figmaurl',
   'private',
+  'codesandbox_url',
 ];
 const optionalComponentProperties = ['designguidelines'];
 

diff --git a/utils/ContentStack/types.ts b/utils/ContentStack/types.ts
@@ -31,6 +31,7 @@ export interface ComponentPageMeta {
   url: string;
   description: string;
   figmaurl?: string;
+  codesandbox_url?: { title?: string; href?: string };
   private?: boolean;
 }