Merge pull request #338 from IBM/improve-docs

Improve docs

docs/src/components/AspectRatio.svelte

@@ -1,16 +0,0 @@
-<script>
-  /**
-   * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"}
-   */
-  export let ratio = "2x1";
-</script>
-
-<div
-  {...$$restProps}
-  class:bx--aspect-ratio="{true}"
-  class="bx--aspect-ratio--{ratio} {$$restProps.class}"
->
-  <div class:bx--aspect-ratio--object="{true}">
-    <slot />
-  </div>
-</div>

docs/src/components/Preview.svelte

@@ -107,11 +107,12 @@
   }
 
   .preview-viewer.framed {
-    min-height: 22rem;
+    min-height: 20rem;
   }
 
   .framed-header {
     display: flex;
+    align-items: center;
   }
 
   iframe {
@@ -121,23 +122,16 @@
     width: 100%;
     height: 100%;
   }
-
-  .loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 </style>
 
 <div class="preview">
   {#if framed}
     <div class="framed-header">
-      <div></div>
+      <div style="margin-left: var(--cds-spacing-03)">
+        {#if framed && !success}
+          <InlineLoading description="Loading..." />
+        {/if}
+      </div>
       <Button
         style="margin-left: auto;"
         kind="ghost"
@@ -151,11 +145,6 @@
     </div>
   {/if}
   <div class="preview-viewer" class:framed>
-    {#if framed && !success}
-      <div class="loader">
-        <InlineLoading />
-      </div>
-    {/if}
     {#if framed}
       <iframe
         on:load="{() => {

docs/src/components/TileCard.svelte

@@ -5,8 +5,7 @@
   export let borderRight = false;
   export let borderBottom = false;
 
-  import { ClickableTile, Tile } from "carbon-components-svelte";
-  import AspectRatio from "./AspectRatio.svelte";
+  import { AspectRatio, ClickableTile, Tile } from "carbon-components-svelte";
   import LogoGithub32 from "carbon-icons-svelte/lib/LogoGithub32";
   import Launch20 from "carbon-icons-svelte/lib/Launch20";
 

docs/src/layouts/ComponentLayout.svelte

@@ -10,6 +10,7 @@
   } from "carbon-components-svelte";
   import Code16 from "carbon-icons-svelte/lib/Code16";
   import { page, metatags } from "@sveltech/routify";
+  import { onMount } from "svelte";
   import { theme } from "../store";
 
   export let component = $page.title;
@@ -17,6 +18,14 @@
 
   metatags.title = $page.title;
 
+  onMount(() => {
+    const currentTheme = window.location.search.split("?theme=")[1];
+
+    if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
+      theme.set(currentTheme);
+    }
+  });
+
   // TODO: [refactor] read from package.json value
   $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
     source || `${$page.title}/${$page.title}.svelte`

docs/src/pages/_layout.svelte

@@ -112,6 +112,7 @@
 
   main.bx--content {
     background: none;
+    min-height: calc(100vh - 3rem - 3rem);
   }
 
   @media (max-width: 1056px) {
@@ -158,6 +159,7 @@
   }
 </style>
 
+<!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />
 
 <Theme persist>

docs/src/pages/components/ButtonSet.svx

@@ -4,6 +4,7 @@ source: Button/ButtonSet.svelte
 
 <script>
   import { Button, ButtonSet } from "carbon-components-svelte";
+  import Login16 from "carbon-icons-svelte/lib/Login16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -17,6 +18,6 @@ source: Button/ButtonSet.svelte
 ### Stacked
 
 <ButtonSet stacked>
-  <Button>Login</Button>
+  <Button icon={Login16}>Log in</Button>
   <Button kind="ghost">Sign up</Button>
 </ButtonSet>

docs/src/pages/framed/_reset.svelte

@@ -1,7 +1,24 @@
 <script>
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    document.body.classList.add("framed");
+    return () => {
+      document.body.classList.remove("framed");
+    };
+  });
+
   // TODO: [refactor] parse search parameters more reliably
   $: currentTheme = window.location.search.split("?theme=")[1];
   $: document.documentElement.setAttribute("theme", currentTheme);
 </script>
 
+<style>
+  :global(body.framed) {
+    min-height: 100vh;
+    width: 100%;
+    padding: var(--cds-spacing-06) var(--cds-spacing-05);
+  }
+</style>
+
 <slot />

docs/src/pages/index.svelte

@@ -6,6 +6,9 @@
     Column,
     CodeSnippet,
     Link,
+    Tabs,
+    Tab,
+    TabContent,
   } from "carbon-components-svelte";
   import TileCard from "../components/TileCard.svelte";
   import { metatags } from "@sveltech/routify";
@@ -16,6 +19,7 @@
     "The Svelte implementation of the Carbon Design System featuring UI components, icons, pictograms, and charts.";
 
   const installYarn = "yarn add -D carbon-components-svelte";
+  const installNpm = "npm i -D carbon-components-svelte";
 </script>
 
 <Content>
@@ -51,12 +55,31 @@
     </Row>
     <Row noGutter style="margin-bottom: var(--cds-layout-02)">
       <Column>
-        <CodeSnippet
-          code="{installYarn}"
-          on:click="{() => {
-            copy(installYarn);
-          }}"
-        />
+        <Tabs>
+          <Tab label="Yarn" />
+          <Tab label="npm" />
+          <div
+            slot="content"
+            style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05));"
+          >
+            <TabContent>
+              <CodeSnippet
+                code="{installYarn}"
+                on:click="{() => {
+                  copy(installYarn);
+                }}"
+              />
+            </TabContent>
+            <TabContent>
+              <CodeSnippet
+                code="{installNpm}"
+                on:click="{() => {
+                  copy(installNpm);
+                }}"
+              />
+            </TabContent>
+          </div>
+        </Tabs>
       </Column>
     </Row>
     <Row>