Improve example styling (#4137)

jpmorganchase · Sep 19, 2024 · 93fd8c7 · 93fd8c7
1 parent 336dce0
commit 93fd8c7
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 18 deletions.
diff --git a/site/src/components/components/LivePreview.module.css b/site/src/components/components/LivePreview.module.css
@@ -1,6 +1,6 @@
 .container {
   border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
-  margin-top: calc(var(--salt-size-unit) * 2);
+  margin-top: var(--salt-spacing-200);
 }
 
 .componentPreview {
@@ -15,9 +15,11 @@
 }
 
 .codePreview {
-  border-top: 1px var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
-  margin-top: 0;
-  margin-bottom: calc(-1 * var(--salt-size-unit) * 2);
+  border-top: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);
+}
+
+.codePreview.codePreview {
+  margin: 0;
 }
 
 .codePreview pre {
@@ -29,19 +31,44 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: calc(2 * var(--salt-size-unit));
   flex-wrap: wrap;
-  padding-top: calc(2 * var(--salt-size-unit));
+  gap: var(--salt-spacing-200);
+  padding-top: var(--salt-spacing-300);
 }
 
 .switch {
   align-self: flex-end;
-  padding: var(--salt-size-unit);
 }
 
 .exampleWithSwitch {
   display: flex;
   flex-direction: column;
   flex: 1;
   background: var(--salt-container-primary-background);
+  padding: var(--salt-spacing-200);
+  gap: var(--salt-spacing-300);
+}
+
+.codePanel {
+  display: grid;
+  transition: grid-template-rows var(--salt-duration-perceptible) ease-in-out, opacity var(--salt-duration-perceptible) ease-in-out, visibility var(--salt-duration-perceptible) ease-in-out;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+}
+
+.codePanel[aria-hidden="true"] {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.codePanelInner {
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .codePanel {
+    transition: none;
+  }
 }
diff --git a/site/src/components/components/LivePreview.tsx b/site/src/components/components/LivePreview.tsx
@@ -1,4 +1,4 @@
-import { SaltProviderNext, Switch } from "@salt-ds/core";
+import { SaltProviderNext, Switch, useId } from "@salt-ds/core";
 import { SaltProvider } from "@salt-ds/core";
 import clsx from "clsx";
 import {
@@ -35,7 +35,6 @@ type LivePreviewProps = {
 export const LivePreview: FC<LivePreviewProps> = ({
   componentName,
   exampleName,
-  list,
   children,
 }) => {
   const [showCode, setShowCode] = useState<boolean>(false);
@@ -80,6 +79,8 @@ export const LivePreview: FC<LivePreviewProps> = ({
 
   const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;
 
+  const panelId = useId();
+
   return (
     <>
       {children}
@@ -89,7 +90,6 @@ export const LivePreview: FC<LivePreviewProps> = ({
             [styles.smallViewport]: isMobileView,
           })}
         >
-          {list && list}
           <ChosenSaltProvider mode={mode} accent={accent} corner={corner}>
             <div className={styles.exampleWithSwitch}>
               <div className={styles.example}>
@@ -103,17 +103,27 @@ export const LivePreview: FC<LivePreviewProps> = ({
                   onChange={handleShowCodeToggle}
                   className={styles.switch}
                   label="Show code"
+                  aria-controls={panelId}
                 />
               </ChosenSaltProvider>
             </div>
           </ChosenSaltProvider>
         </div>
 
-        {showCode && (
-          <Pre className={styles.codePreview}>
-            <div className="language-tsx">{ComponentExample.sourceCode}</div>
-          </Pre>
-        )}
+        <div
+          className={styles.codePanel}
+          aria-hidden={!showCode}
+          hidden={!showCode}
+          id={panelId}
+        >
+          <div className={styles.codePanelInner}>
+            <Pre className={styles.codePreview}>
+              <div className="language-tsx">
+                {ComponentExample.sourceCode.trimEnd()}
+              </div>
+            </Pre>
+          </div>
+        </div>
       </div>
     </>
   );

diff --git a/site/src/css/global/code.css b/site/src/css/global/code.css
@@ -59,7 +59,7 @@ code[class*="language-"] ::selection {
 
 /* Code blocks */
 pre[class*="language-"] {
-  padding: 1rem;
+  padding: var(--salt-spacing-200);
   margin: 0.5em 0;
   overflow: auto;
 }
@@ -71,8 +71,6 @@ pre[class*="language-"] {
   color: var(--pre-color);
   font: var(--code-font-size) / var(--pre-line-height) var(--font-family-monospace);
   box-shadow: var(--pre-shadow);
-  /* TODO: remove !important once we add a custom pre component */
-  margin-bottom: calc(var(--salt-size-unit) * 2) !important;
 }
 
 /* Inline code */