chore(website): updated sassdoc examples to be linkable

mlaursen · Sep 9, 2021 · 9ed096e · 9ed096e
1 parent 5a9dd72
commit 9ed096e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/packages/documentation/src/components/Heading/Heading.tsx b/packages/documentation/src/components/Heading/Heading.tsx
@@ -6,24 +6,34 @@ import HeadingLink from "./HeadingLink";
 
 export type Level = 1 | 2 | 3 | 4 | 5 | 6;
 
-export interface HeadingProps extends Omit<TextProps, "type"> {
+export interface HeadingProps extends Omit<TextProps, "type" | "margin"> {
   id: string;
   level: Level;
+  margin?: TextProps["margin"] | "small";
 }
 
 export default function Heading({
   id,
   level,
   children,
   className,
+  margin,
   ...props
 }: HeadingProps): ReactElement {
   return (
     <Text
       id={id}
       {...props}
+      margin={margin === "small" ? undefined : margin}
       type={`headline-${level}` as TextTypes}
-      className={cn("heading", className)}
+      className={cn(
+        "heading",
+        {
+          "heading--no-margin-top": margin === "bottom",
+          "heading--small-margin": margin === "small",
+        },
+        className
+      )}
     >
       <HeadingLink idRef={id} />
       {children}

diff --git a/packages/documentation/src/components/PackageSassDoc/Example.module.scss b/packages/documentation/src/components/PackageSassDoc/Example.module.scss
diff --git a/packages/documentation/src/components/PackageSassDoc/Example.tsx b/packages/documentation/src/components/PackageSassDoc/Example.tsx
@@ -1,12 +1,10 @@
 import React, { ReactElement } from "react";
 import { Switch, useChecked } from "@react-md/form";
-import { Text } from "@react-md/typography";
 
+import Heading from "components/Heading";
 import CodeBlock from "components/Code/CodeBlock";
 import { CompiledExample } from "utils/sassdoc";
 
-import styles from "./Example.module.scss";
-
 interface ExampleProps extends CompiledExample {
   id: string;
 }
@@ -22,12 +20,12 @@ export default function Example({
 
   return (
     <>
-      <Text type="headline-6" className={styles.description}>
+      <Heading id={id} level={6} margin="small">
         {description}
-      </Text>
+      </Heading>
       {compiled && (
         <Switch
-          id={id}
+          id={`${id}-compiled`}
           name="compiledToggle"
           checked={enabled}
           onChange={handleChange}

diff --git a/packages/documentation/src/components/PackageSassDoc/Examples.tsx b/packages/documentation/src/components/PackageSassDoc/Examples.tsx
@@ -27,7 +27,7 @@ export default function Examples({
         <Example
           key={`${example.type}-${example.description}`}
           {...example}
-          id={`${baseId}-example-${i + 1}-compiled`}
+          id={`${baseId}-example-${i + 1}`}
         />
       ))}
     </>

diff --git a/packages/documentation/src/pages/app.scss b/packages/documentation/src/pages/app.scss
@@ -71,6 +71,11 @@
     margin-top: 0;
   }
 
+  &--small-margin {
+    margin-bottom: 0.5em;
+    margin-top: 0.25em;
+  }
+
   &__link {
     @include rmd-icon-theme(color);
     @include rmd-utils-hide-focus-outline;