From f5509060d5baad116c75cff7bc613eda4ecf25d2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 Nov 2020 09:50:46 -0800
Subject: [PATCH] docs: tweak body copy, link to CopyableCodeSnippet recipe

---
 docs/src/pages/_layout.svelte                              | 7 +++++++
 docs/src/pages/components/Breadcrumb.svx                   | 2 +-
 docs/src/pages/components/CodeSnippet.svx                  | 6 ++++--
 docs/src/pages/components/ComposedModal.svx                | 2 +-
 docs/src/pages/components/CopyButton.svx                   | 6 ++++--
 docs/src/pages/components/ToggleSmall.svx                  | 4 ++--
 .../framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte  | 2 +-
 docs/src/pages/recipes/CopyableCodeSnippet.svx             | 6 ++++--
 8 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index d51a6ff5..c87c7a90 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -35,6 +35,13 @@
 </script>
 
 <style global>
+  .body-short-01 {
+    font-size: var(--cds-body-short-01-font-size);
+    font-weight: var(--cds-body-short-01-font-weight);
+    letter-spacing: var(--cds-body-short-01-letter-spacing);
+    line-height: var(--cds-body-short-01-line-height);
+  }
+
   .bx--col > h1 {
     font-size: var(--cds-display-01-font-size);
     font-weight: var(--cds-display-01-font-weight);
diff --git a/docs/src/pages/components/Breadcrumb.svx b/docs/src/pages/components/Breadcrumb.svx
index d6d3c17b..61ce50da 100644
--- a/docs/src/pages/components/Breadcrumb.svx
+++ b/docs/src/pages/components/Breadcrumb.svx
@@ -10,7 +10,7 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for building a reusable breadcrumbs component.
+See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs component.
 
 ### Default
 
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index 697931af..b5d2ce11 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -1,5 +1,5 @@
 <script>
-  import { CodeSnippet, InlineNotification } from "carbon-components-svelte";
+  import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 
   let code = `// helpers.js
@@ -27,7 +27,9 @@ let comment = `
 `
 </script>
 
-<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+</InlineNotification>
 
 ### Default (single-line)
 
diff --git a/docs/src/pages/components/ComposedModal.svx b/docs/src/pages/components/ComposedModal.svx
index ed19c196..65adc6ac 100644
--- a/docs/src/pages/components/ComposedModal.svx
+++ b/docs/src/pages/components/ComposedModal.svx
@@ -1,5 +1,5 @@
 ---
-components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter", "Checkbox"]
+components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
 ---
 
 <script>
diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx
index e9c983ce..a04a332a 100644
--- a/docs/src/pages/components/CopyButton.svx
+++ b/docs/src/pages/components/CopyButton.svx
@@ -1,9 +1,11 @@
 <script>
-  import { CopyButton, InlineNotification } from "carbon-components-svelte";
+  import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic." kind="info" hideCloseButton />
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
+</InlineNotification>
 
 ### Default
 
diff --git a/docs/src/pages/components/ToggleSmall.svx b/docs/src/pages/components/ToggleSmall.svx
index a1158fd1..ac2a06ca 100644
--- a/docs/src/pages/components/ToggleSmall.svx
+++ b/docs/src/pages/components/ToggleSmall.svx
@@ -7,9 +7,9 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
   <div>
-    This component will be removed in version 1.0.0. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
+    This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
   </div>
 </InlineNotification>
 
diff --git a/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte b/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
index aa7f4492..a411d51c 100644
--- a/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
+++ b/docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
@@ -5,4 +5,4 @@
   import copy from "clipboard-copy";
 </script>
 
-<CodeSnippet on:click="{() => copy(code)}">{code}</CodeSnippet>
+<CodeSnippet on:click="{() => copy(code)}" code="{code}" />
diff --git a/docs/src/pages/recipes/CopyableCodeSnippet.svx b/docs/src/pages/recipes/CopyableCodeSnippet.svx
index 96334ad5..3b994518 100644
--- a/docs/src/pages/recipes/CopyableCodeSnippet.svx
+++ b/docs/src/pages/recipes/CopyableCodeSnippet.svx
@@ -6,10 +6,12 @@ layout: recipe
   import Preview from "../../components/Preview.svelte";
 </script>
 
-The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) do not include logic to copy the supplied `code` text.
+The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
+
+You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
 
 ## clipboard-copy
 
-This example uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy), a lightweight module designed for the web.
+This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
 
 <FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />