feat: initial commit

src/components/CodeSnippet/CodeSnippet.Skeleton.svelte

@@ -0,0 +1,32 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let type = 'single';
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx(
+    '--snippet',
+    '--skeleton',
+    type === 'single' && '--snippet--single',
+    type === 'multi' && '--snippet--multi',
+    className
+  );
+</script>
+
+{#if type === 'single'}
+  <div {...props} class={_class}>
+    <div class={cx('--snippet-container')}>
+      <span />
+    </div>
+  </div>
+{:else if type === 'multi'}
+  <div {...props} class={_class}>
+    <div class={cx('--snippet-container')}>
+      <span />
+      <span />
+      <span />
+    </div>
+  </div>
+{/if}

src/components/CodeSnippet/CodeSnippet.Story.svelte

@@ -0,0 +1,57 @@
+<script>
+  export let story = undefined;
+  const { light, feedback, copyLabel, copyButtonDescription, showLessText, showMoreText } = $$props;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import CodeSnippet from './CodeSnippet.svelte';
+  import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
+
+  const inlineProps = { light, feedback, copyLabel };
+  const singleLineProps = {
+    feedback,
+    copyButtonDescription,
+    'aria-label': $$props['aria-label']
+  };
+  const multiLineProps = { feedback, showLessText, showMoreText };
+</script>
+
+<Layout>
+  <div>
+    {#if story === 'skeleton'}
+      <div style="width: 800px">
+        <CodeSnippetSkeleton type="single" props={{ style: 'margin-bottom: 8px' }} />
+        <CodeSnippetSkeleton type="multi" />
+      </div>
+    {:else if story === 'inline'}
+      <CodeSnippet type="inline" {...inlineProps}>{'node -v'}</CodeSnippet>
+    {:else if story === 'single line'}
+      <CodeSnippet type="single" {...singleLineProps}>
+        {'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 type="multi" {...multiLineProps}>
+        {`@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>
+</Layout>

src/components/CodeSnippet/CodeSnippet.stories.js

@@ -0,0 +1,39 @@
+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',
+    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/components/CodeSnippet/CodeSnippet.svelte

@@ -0,0 +1,83 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let type = 'single';
+  export let feedback = undefined;
+  export let copyButtonDescription = undefined;
+  export let copyLabel = undefined;
+  export let showMoreText = 'Show more';
+  export let showLessText = 'Show less';
+  export let light = false;
+  export let props = {};
+
+  import { onMount } from 'svelte';
+  import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
+  import { cx } from '../../lib';
+  import Button from '../Button';
+  import Copy from '../Copy';
+  import CopyButton from '../CopyButton';
+
+  const id = Math.random();
+  let codeRef = undefined;
+  let expandedCode = false;
+  let shouldShowMoreLessBtn = false;
+
+  onMount(() => {
+    if (codeRef) {
+      const { height } = codeRef.getBoundingClientRect();
+      shouldShowMoreLessBtn = type === 'multi' && height > 255;
+    }
+  });
+
+  $: _class = cx(
+    '--snippet',
+    type && `--snippet--${type}`,
+    expandedCode && '--snippet--expand',
+    light && '--snippet--light',
+    className
+  );
+  $: expandCodeBtnText = expandedCode ? showLessText : showMoreText;
+</script>
+
+{#if type === 'inline'}
+  <Copy
+    on:click
+    aria-label={copyLabel || $$props['aria-label']}
+    aria-describedby={id}
+    class={_class}
+    {feedback}
+    {props}>
+    <code {id}>
+      <slot />
+    </code>
+  </Copy>
+{:else}
+  <div {...props} class={_class}>
+    <div
+      role="textbox"
+      tabindex="0"
+      class={cx('--snippet-container')}
+      aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
+      <code>
+        <pre bind:this={codeRef}>
+          <slot />
+        </pre>
+      </code>
+    </div>
+    <CopyButton on:click {feedback} iconDescription={copyButtonDescription} />
+    {#if shouldShowMoreLessBtn}
+      <Button
+        kind="ghost"
+        size="small"
+        class={cx('--snippet-btn--expand')}
+        on:click={() => {
+          expandedCode = !expandedCode;
+        }}>
+        <span class={cx('--snippet-btn--text')}>{expandCodeBtnText}</span>
+        <ChevronDown16
+          aria-label={expandCodeBtnText}
+          class={cx('--icon-chevron--down', '--snippet__icon')} />
+      </Button>
+    {/if}
+  </div>
+{/if}

src/components/CodeSnippet/index.js

@@ -0,0 +1,4 @@
+import CodeSnippet from './CodeSnippet.svelte';
+
+export default CodeSnippet;
+export { default as CodeSnippetSkeleton } from './CodeSnippet.Skeleton.svelte';