From 9ed096ed3d4912dc6075472a5bb27038d6bf16a5 Mon Sep 17 00:00:00 2001
From: Mikkel Laursen <mlaursen03@gmail.com>
Date: Wed, 8 Sep 2021 17:47:15 -0600
Subject: [PATCH] chore(website): updated sassdoc examples to be linkable

---
 .../src/components/Heading/Heading.tsx             | 14 ++++++++++++--
 .../components/PackageSassDoc/Example.module.scss  |  3 ---
 .../src/components/PackageSassDoc/Example.tsx      | 10 ++++------
 .../src/components/PackageSassDoc/Examples.tsx     |  2 +-
 packages/documentation/src/pages/app.scss          |  5 +++++
 5 files changed, 22 insertions(+), 12 deletions(-)
 delete mode 100644 packages/documentation/src/components/PackageSassDoc/Example.module.scss

diff --git a/packages/documentation/src/components/Heading/Heading.tsx b/packages/documentation/src/components/Heading/Heading.tsx
index c9328660c5..6e73613c20 100644
--- a/packages/documentation/src/components/Heading/Heading.tsx
+++ b/packages/documentation/src/components/Heading/Heading.tsx
@@ -6,9 +6,10 @@ 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({
@@ -16,14 +17,23 @@ export default function Heading({
   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
deleted file mode 100644
index 0e66935623..0000000000
--- a/packages/documentation/src/components/PackageSassDoc/Example.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.description {
-  margin: 1rem 0;
-}
diff --git a/packages/documentation/src/components/PackageSassDoc/Example.tsx b/packages/documentation/src/components/PackageSassDoc/Example.tsx
index a462eeb1cb..2b8ad8209f 100644
--- 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
index f9e65e8d53..3c8266cae2 100644
--- 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
index 2810f53fb2..0c2f9b075a 100644
--- 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;