chore: lift components folder

src/CodeSnippet/CodeSnippet.Skeleton.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let type = "single"; // "single" | "multi"
+</script>
+
+<div
+  class:bx--snippet={true}
+  class:bx--skeleton={true}
+  class:bx--snippet--single={type === 'single'}
+  class:bx--snippet--multi={type === 'multi'}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <div class:bx--snippet-container={true}>
+    {#if type === 'single'}
+      <span />
+    {:else if type === 'multi'}
+      <span />
+      <span />
+      <span />
+    {/if}
+  </div>
+</div>

src/CodeSnippet/CodeSnippet.Story.svelte

@@ -0,0 +1,45 @@
+<script>
+  export let story = undefined;
+
+  import CodeSnippet from "./CodeSnippet.svelte";
+  import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
+</script>
+
+<div>
+  {#if story === 'skeleton'}
+    <div style="width: 800px">
+      <CodeSnippetSkeleton type="single" style="margin-bottom: 8px" />
+      <CodeSnippetSkeleton type="multi" />
+    </div>
+  {:else if story === 'inline'}
+    <CodeSnippet {...$$restProps} type="inline">{'node -v'}</CodeSnippet>
+  {:else if story === 'single line'}
+    <CodeSnippet {...$$restProps} type="single">
+      {'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'}
+    </CodeSnippet>
+  {:else if story === 'multi line'}
+    <CodeSnippet {...$$restProps} type="multi">
+      {`@mixin grid-container {
+  width: 100%;
+  padding-right: padding(mobile);
+  padding-left: padding(mobile);
+
+  @include breakpoint(bp--xs--major) {
+    padding-right: padding(xs);
+    padding-left: padding(xs);
+  }
+}
+
+$z-indexes: (
+  modal : 9000,
+  overlay : 8000,
+  dropdown : 7000,
+  header : 6000,
+  footer : 5000,
+  hidden : -1,
+  overflowHidden: -1,
+  floating: 10000
+);`}
+    </CodeSnippet>
+  {/if}
+</div>

src/CodeSnippet/CodeSnippet.stories.js

@@ -0,0 +1,52 @@
+import { withKnobs, boolean, text } from "@storybook/addon-knobs";
+import Component from "./CodeSnippet.Story.svelte";
+
+export default { title: "CodeSnippet", decorators: [withKnobs] };
+
+export const Inline = () => ({
+  Component,
+  props: {
+    story: "inline",
+    light: boolean("Light variant (light)", false),
+    feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
+    copyLabel: text(
+      "ARIA label for the snippet/copy button (copyLabel)",
+      "copyable code snippet"
+    ),
+  },
+});
+
+export const SingleLine = () => ({
+  Component,
+  props: {
+    story: "single line",
+    light: boolean("Light variant (light)", false),
+    feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
+    copyButtonDescription: text(
+      "Copy icon description (copyButtonDescription)",
+      "copyable code snippet"
+    ),
+    "aria-label": text(
+      "ARIA label of the container (ariaLabel)",
+      "Container label"
+    ),
+  },
+});
+
+export const MultiLine = () => ({
+  Component,
+  props: {
+    story: "multi line",
+    feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
+    showMoreText: text(
+      'Text for "show more" button (showMoreText)',
+      "Show more"
+    ),
+    showLessText: text(
+      'Text for "show less" button (showLessText)',
+      "Show less"
+    ),
+  },
+});
+
+export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

src/CodeSnippet/CodeSnippet.svelte

@@ -0,0 +1,97 @@
+<script>
+  export let type = "single"; // "single" | "inline" | "multi"
+  export let code = undefined;
+  export let light = false;
+  export let skeleton = false;
+  export let copyButtonDescription = undefined;
+  export let copyLabel = undefined;
+  export let feedback = "Copied!";
+  export let feedbackTimeout = 2000;
+  export let showLessText = "Show less";
+  export let showMoreText = "Show more";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let ref = null;
+
+  import { afterUpdate } from "svelte";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import { Button } from "../Button";
+  import { Copy } from "../Copy";
+  import { CopyButton } from "../CopyButton";
+  import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
+
+  $: showMoreLess = false;
+  $: expanded = false;
+  $: expandText = expanded ? showLessText : showMoreText;
+
+  afterUpdate(() => {
+    if (type === "multi" && ref) {
+      showMoreLess = ref.getBoundingClientRect().height > 255;
+    }
+  });
+</script>
+
+{#if skeleton}
+  <CodeSnippetSkeleton {type} {...$$restProps} />
+{:else}
+  {#if type === 'inline'}
+    <Copy
+      aria-label={copyLabel}
+      aria-describedby={id}
+      class="bx--snippet {type && `bx--snippet--${type}`}
+      {type === 'inline' && 'bx--btn--copy'}
+      {expanded && 'bx--snippet--expand'}
+      {light && 'bx--snippet--light'}"
+      {...$$restProps}
+      on:clicks
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
+      <code {id}>
+        <slot>{code}</slot>
+      </code>
+    </Copy>
+  {:else}
+    <div
+      class:bx--snippet={true}
+      class={type && `bx--snippet--${type}`}
+      class:bx--btn--copy={type === 'inline'}
+      class:bx--snippet--expand={expanded}
+      class:bx--snippet--light={light}
+      {...$$restProps}
+      on:mouseover
+      on:mouseenter
+      on:mouseleave>
+      <div
+        role={type === 'single' ? 'textbox' : undefined}
+        tabindex={type === 'single' ? '0' : undefined}
+        class:bx--snippet-container={true}
+        aria-label={$$restProps['aria-label'] || copyLabel || 'code-snippet'}>
+        <code>
+          <pre bind:this={ref}>
+            <slot>{code}</slot>
+          </pre>
+        </code>
+      </div>
+      <CopyButton
+        {feedback}
+        {feedbackTimeout}
+        iconDescription={copyButtonDescription}
+        on:click
+        on:animationend />
+      {#if showMoreLess}
+        <Button
+          kind="ghost"
+          size="small"
+          class="bx--snippet-btn--expand"
+          on:click={() => {
+            expanded = !expanded;
+          }}>
+          <span class:bx--snippet-btn--text={true}>{expandText}</span>
+          <ChevronDown16
+            class="bx--icon-chevron--down bx--snippet__icon"
+            aria-label={expandText} />
+        </Button>
+      {/if}
+    </div>
+  {/if}
+{/if}

src/CodeSnippet/index.js

@@ -0,0 +1,2 @@
+export { default as CodeSnippet } from "./CodeSnippet.svelte";
+export { default as CodeSnippetSkeleton } from "./CodeSnippet.Skeleton.svelte";