From 5bf16e42f796a12b1b8ea4de6f69bc83a119e7f4 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sun, 13 Mar 2022 06:14:30 -0700
Subject: [PATCH] docs: hide deprecated components, add "Disabled items"
 OverflowMenu example (#1167)

---
 docs/src/components/Footer.svelte           | 11 -------
 docs/src/pages/_layout.svelte               |  4 +--
 docs/src/pages/components/Button.svx        |  6 ++--
 docs/src/pages/components/Checkbox.svx      |  2 +-
 docs/src/pages/components/ComboBox.svx      |  2 +-
 docs/src/pages/components/DataTable.svx     |  4 +--
 docs/src/pages/components/DatePicker.svx    |  2 +-
 docs/src/pages/components/Dropdown.svx      |  2 +-
 docs/src/pages/components/Icon.svx          |  2 +-
 docs/src/pages/components/OrderedList.svx   |  2 +-
 docs/src/pages/components/OverflowMenu.svx  | 17 +++++++++++
 docs/src/pages/components/RecursiveList.svx |  2 +-
 docs/src/pages/components/ToggleSmall.svx   |  2 +-
 docs/src/pages/components/TreeView.svx      |  2 +-
 docs/src/pages/components/UnorderedList.svx |  2 +-
 docs/src/pages/index.svelte                 | 34 +++++++++++++--------
 16 files changed, 54 insertions(+), 42 deletions(-)
 delete mode 100644 docs/src/components/Footer.svelte

diff --git a/docs/src/components/Footer.svelte b/docs/src/components/Footer.svelte
deleted file mode 100644
index 6ad85ff3..00000000
--- a/docs/src/components/Footer.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-  import { Grid, Row, Column } from "carbon-components-svelte";
-</script>
-
-<footer class="bx--content">
-  <Grid>
-    <Row>
-      <Column />
-    </Row>
-  </Grid>
-</footer>
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 7c25d441..6b624263 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -17,7 +17,6 @@
   } from "carbon-components-svelte";
   import LogoGithub20 from "carbon-icons-svelte/lib/LogoGithub20";
   import Theme from "../components/Theme.svelte";
-  import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
   const new_components = [];
@@ -104,7 +103,7 @@
         expanded="{$isActive($url('')) || $isActive($url('/components'))}"
         text="Components"
       >
-        {#each components.children as child, i (child.path)}
+        {#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)}
           <SideNavMenuItem
             text="{child.title}"
             href="{$url(child.path)}"
@@ -145,7 +144,6 @@
     </SideNavItems>
   </SideNav>
   <slot />
-  <Footer />
 </Theme>
 
 <style global>
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index efe7681d..7edd934f 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -37,7 +37,7 @@
 
 ### Danger tertiary, icon-only button
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     You must provide an <strong>iconDescription</strong> for the button tooltip.
   </div>
@@ -55,7 +55,7 @@
 
 ### Icon-only button
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     You must provide an <strong>iconDescription</strong> for the button tooltip.
   </div>
@@ -131,7 +131,7 @@ If an `href` value is specified, the component will render an [anchor element](h
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Expressive styles only work with the default, "lg", and "xl" button sizes.
   </div>
diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx
index a389340e..12be8a0d 100644
--- a/docs/src/pages/components/Checkbox.svx
+++ b/docs/src/pages/components/Checkbox.svx
@@ -33,7 +33,7 @@ The `checked` prop supports two-way binding.
 
 An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs]([group](https://svelte.dev/tutorial/group-inputs)).
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
   </div>
diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 15466601..b5d11af5 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -3,7 +3,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
   </div>
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 12cd26e6..9fdc6510 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -12,11 +12,11 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
 
 `DataTable` is keyed for both rendering and sorting purposes.
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
 </InlineNotification>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
 </InlineNotification>
 
diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx
index e142a8ae..732690a8 100644
--- a/docs/src/pages/components/DatePicker.svx
+++ b/docs/src/pages/components/DatePicker.svx
@@ -63,7 +63,7 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"]
 
 ### Single
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     If using Rollup, specify <strong>inlineDynamicImports: true</strong> in your <strong>rollup.config.js</strong>.
   </div>
diff --git a/docs/src/pages/components/Dropdown.svx b/docs/src/pages/components/Dropdown.svx
index a7a3413f..d93ce89b 100644
--- a/docs/src/pages/components/Dropdown.svx
+++ b/docs/src/pages/components/Dropdown.svx
@@ -7,7 +7,7 @@ components: ["Dropdown", "DropdownSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Since version 0.53, <strong>selectedIndex</strong> has been replaced with <strong>selectedId</strong>.
   </div>
diff --git a/docs/src/pages/components/Icon.svx b/docs/src/pages/components/Icon.svx
index 802fe427..c034ce0e 100644
--- a/docs/src/pages/components/Icon.svx
+++ b/docs/src/pages/components/Icon.svx
@@ -7,7 +7,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
   <div>
     This component will be removed in the next major release. Use icons from <OutboundLink href="https://github.com/carbon-design-system/carbon-icons-svelte">carbon-icons-svelte</OutboundLink> instead.
   </div>
diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx
index 9cc58175..3178257e 100644
--- a/docs/src/pages/components/OrderedList.svx
+++ b/docs/src/pages/components/OrderedList.svx
@@ -7,7 +7,7 @@ components: ["OrderedList", "ListItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
   <div class="body-short-01">
     Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
    </div>
diff --git a/docs/src/pages/components/OverflowMenu.svx b/docs/src/pages/components/OverflowMenu.svx
index 9cd9491b..3b46d470 100644
--- a/docs/src/pages/components/OverflowMenu.svx
+++ b/docs/src/pages/components/OverflowMenu.svx
@@ -81,4 +81,21 @@ By default, the first overflow menu item is focused when opening the dropdown.
   <OverflowMenuItem text="Manage credentials" />
   <OverflowMenuItem href="https://cloud.ibm.com/docs/api-gateway/" text="API documentation" />
   <OverflowMenuItem danger text="Delete service" />
+</OverflowMenu>
+
+### Disabled items
+
+Disable menu items by setting `disabled` to `true`.
+
+<OverflowMenu>
+  <OverflowMenuItem text="Create key" />
+  <OverflowMenuItem text="Import key" />
+  <OverflowMenuItem text="Revoke key" disabled />
+  <OverflowMenuItem text="Duplicate key" disabled />
+  <OverflowMenuItem
+    hasDivider
+    href="https://cloud.ibm.com/docs/api-gateway/"
+    text="API documentation"
+  />
+  <OverflowMenuItem hasDivider danger text="Delete service" />
 </OverflowMenu>
\ No newline at end of file
diff --git a/docs/src/pages/components/RecursiveList.svx b/docs/src/pages/components/RecursiveList.svx
index 8b6d7412..e1bc3dbc 100644
--- a/docs/src/pages/components/RecursiveList.svx
+++ b/docs/src/pages/components/RecursiveList.svx
@@ -7,7 +7,7 @@ This component uses the [svelte:self API](https://svelte.dev/docs#svelte_self) t
 
 A child node can render text, a link, HTML content, and other children.
 
-<InlineNotification svx-ignore title="Warning:" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Warning:" kind="warning" hideCloseButton>
   <div class="body-short-01">
     HTML content provided via the <code>html</code> prop is not sanitized.
   </div>
diff --git a/docs/src/pages/components/ToggleSmall.svx b/docs/src/pages/components/ToggleSmall.svx
index 26230d05..dfa8cbde 100644
--- a/docs/src/pages/components/ToggleSmall.svx
+++ b/docs/src/pages/components/ToggleSmall.svx
@@ -7,7 +7,7 @@ components: ["ToggleSmall", "ToggleSmallSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Deprecation warning" kind="warning" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Deprecation warning" kind="warning" hideCloseButton>
   <div>
     This component will be removed in the next major release. Use the <Link href="/components/Toggle#small-size">Toggle small variant</Link> instead.
   </div>
diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index d97b5057..99fa7a2a 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -11,7 +11,7 @@ Optional properties include `disabled`, `expanded`, `icon`, and `children`.
 
 A parent node contains `children` while a leaf node does not.
 
-<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">Every node must have a unique id.</div>
 </InlineNotification>
 
diff --git a/docs/src/pages/components/UnorderedList.svx b/docs/src/pages/components/UnorderedList.svx
index 2eea512e..b4d4570f 100644
--- a/docs/src/pages/components/UnorderedList.svx
+++ b/docs/src/pages/components/UnorderedList.svx
@@ -7,7 +7,7 @@ components: ["UnorderedList", "ListItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-<InlineNotification svx-ignore title="Tip:" kind="info" hideCloseButton>
+<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
   <div class="body-short-01">
    Consider using the <Link href="/components/RecursiveList#unordered">RecursiveList</Link> component for rendering tree structured data.
   </div>
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index c9be5bcc..9a972512 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -60,7 +60,7 @@
 </script>
 
 <Content>
-  <Grid>
+  <Grid style="margin-bottom: var(--cds-layout-06);">
     <Row>
       <Column>
         <h1>Carbon Components Svelte</h1>
@@ -91,18 +91,26 @@
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
         <h3>Installation</h3>
-        <h4>Using Yarn:</h4>
-        <Row noGutter>
-          <CodeSnippet code="{installYarn}" />
-        </Row>
-        <h4>Using NPM:</h4>
-        <Row noGutter>
-          <CodeSnippet code="{installNpm}" />
-        </Row>
-        <h4>Using pnpm:</h4>
-        <Row noGutter>
-          <CodeSnippet code="{installPnpm}" />
-        </Row>
+      </Column>
+    </Row>
+    <Row style="margin-bottom: var(--cds-layout-02)">
+      <Column noGutter>
+        <Tabs>
+          <Tab label="Yarn" />
+          <Tab label="NPM" />
+          <Tab label="pnpm" />
+          <div slot="content" style="margin: 1rem -1rem">
+            <TabContent>
+              <CodeSnippet code="{installYarn}" />
+            </TabContent>
+            <TabContent>
+              <CodeSnippet code="{installNpm}" />
+            </TabContent>
+            <TabContent>
+              <CodeSnippet code="{installPnpm}" />
+            </TabContent>
+          </div>
+        </Tabs>
       </Column>
     </Row>
     <Row style="margin-bottom: var(--cds-layout-04)">