Added the more options to the GuideSectionTypes

cchaos · Sep 29, 2021 · f3eccfb · f3eccfb
1 parent 963e589
commit f3eccfb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_code.tsx
@@ -19,23 +19,29 @@ export const GuideSectionExampleCode: FunctionComponent<GuideSectionExampleCode>
   const [codeToRender, setCodeToRender] = useState();
 
   useEffect(() => {
-    setCodeToRender(renderJsSourceCode(code));
+    if (type === GuideSectionTypes.JS) {
+      setCodeToRender(renderJsSourceCode(code));
+    } else {
+      setCodeToRender(code);
+    }
+
     return () => {
       setCodeToRender(undefined);
     };
-  }, [code]);
+  }, [code, type]);
 
-  const codeSandboxLink = (
-    <CodeSandboxLink
-      className="guideSectionExampleCode__link"
-      content={code.default}
-      type={type.toLowerCase()}
-    >
-      <EuiButtonEmpty size="xs" iconType="logoCodesandbox">
-        Try out this demo on Code Sandbox
-      </EuiButtonEmpty>
-    </CodeSandboxLink>
-  );
+  const codeSandboxLink =
+    type === GuideSectionTypes.JS ? (
+      <CodeSandboxLink
+        className="guideSectionExampleCode__link"
+        content={code.default}
+        type={type.toLowerCase()}
+      >
+        <EuiButtonEmpty size="xs" iconType="logoCodesandbox">
+          Try out this demo on Code Sandbox
+        </EuiButtonEmpty>
+      </CodeSandboxLink>
+    ) : undefined;
 
   return (
     <>

diff --git a/src-docs/src/components/guide_section/guide_section_types.tsx b/src-docs/src/components/guide_section/guide_section_types.tsx
@@ -2,4 +2,6 @@ export const GuideSectionTypes = {
   JS: 'JS',
   TSX: 'TSX',
   HTML: 'HTML',
+  SNIPPET: 'SNIPPET',
+  SASS: 'SASS',
 };