feat: initial commit

src/components/Button/Button.Skeleton.svelte

@@ -0,0 +1,17 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let small = false;
+  export let href = undefined;
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx('--skeleton', '--btn', small && '--btn--sm', className);
+</script>
+
+{#if href}
+  <a {...props} class={_class} {href} role="button">{''}</a>
+{:else}
+  <div {...props} class={_class} />
+{/if}

src/components/Button/Button.Story.svelte

@@ -0,0 +1,73 @@
+<script>
+  export let story = undefined;
+
+  import { cx } from '../../lib';
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Button from './Button.svelte';
+  import ButtonSkeleton from './Button.Skeleton.svelte';
+  import Add16 from 'carbon-icons-svelte/lib/Add16';
+
+  const {
+    kind,
+    disabled,
+    size,
+    renderIcon,
+    iconDescription,
+    small,
+    tooltipPosition,
+    tooltipAlignment
+  } = $$props;
+
+  const regularProps = {
+    kind,
+    disabled,
+    size,
+    iconDescription,
+    small
+  };
+
+  const iconOnlyProps = {
+    kind,
+    disabled,
+    size,
+    renderIcon: Add16,
+    iconDescription,
+    tooltipPosition,
+    tooltipAlignment
+  };
+
+  const setProps = { disabled, small, size, iconDescription };
+</script>
+
+<Layout>
+  <div>
+    {#if story === 'skeleton'}
+      <ButtonSkeleton />
+      &nbsp;
+      <ButtonSkeleton href="#" />
+      &nbsp;
+      <ButtonSkeleton small />
+    {:else if story === 'inline'}
+      <Button />
+    {:else if story === 'icon-only buttons'}
+      <Button {...iconOnlyProps} hasIconOnly />
+    {:else if story === 'set of buttons'}
+      <div class={cx('--btn-set')}>
+        <Button kind="secondary" {...setProps}>Secondary button</Button>
+        <Button kind="primary" {...setProps}>Primary button</Button>
+      </div>
+    {:else}
+      <Button {...regularProps}>Button</Button>
+      &nbsp;
+      <Button {...regularProps} href="#">Link</Button>
+      &nbsp;
+      <Button {...regularProps} as let:props>
+        <p {...props}>Element</p>
+      </Button>
+      &nbsp;
+      <Button {...regularProps} as let:props>
+        <a href="#link" {...props}>Custom component</a>
+      </Button>
+    {/if}
+  </div>
+</Layout>

src/components/Button/Button.stories.js

@@ -0,0 +1,64 @@
+import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
+import Component from './Button.Story.svelte';
+
+export default { title: 'Button', decorators: [withKnobs] };
+
+// TODO: add selectable renderIcon for Default, Icon-only stories
+
+const kinds = {
+  'Primary button (primary)': 'primary',
+  'Secondary button (secondary)': 'secondary',
+  'Danger button (danger)': 'danger',
+  'Ghost button (ghost)': 'ghost'
+};
+
+const sizes = {
+  Default: 'default',
+  Field: 'field',
+  Small: 'small'
+};
+
+export const Default = () => ({
+  Component,
+  props: {
+    kind: select('Button kind (kind)', kinds, 'primary'),
+    disabled: boolean('Disabled (disabled)', false),
+    size: select('Button size (size)', sizes, 'default'),
+    iconDescription: text('Icon description (iconDescription)', 'Button icon'),
+    small: boolean('Small (small) - Deprecated in favor of `size`', false)
+  }
+});
+
+export const IconOnlyButtons = () => ({
+  Component,
+  props: {
+    story: 'icon-only buttons',
+    kind: select('Button kind (kind)', kinds, 'primary'),
+    disabled: boolean('Disabled (disabled)', false),
+    size: select('Button size (size)', sizes, 'default'),
+    iconDescription: text('Icon description (iconDescription)', 'Button icon'),
+    tooltipPosition: select(
+      'Tooltip position (tooltipPosition)',
+      ['top', 'right', 'bottom', 'left'],
+      'bottom'
+    ),
+    tooltipAlignment: select(
+      'Tooltip alignment (tooltipAlignment)',
+      ['start', 'center', 'end'],
+      'center'
+    )
+  }
+});
+
+export const SetOfButtons = () => ({
+  Component,
+  props: {
+    story: 'set of buttons',
+    disabled: boolean('Disabled (disabled)', false),
+    small: boolean('Small (small)', false),
+    size: select('Button size (size)', sizes, 'default'),
+    iconDescription: text('Icon description (iconDescription)', 'Button icon')
+  }
+});
+
+export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

src/components/Button/Button.svelte

@@ -0,0 +1,82 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let as = undefined;
+  export let disabled = false;
+  export let size = 'default';
+  export let small = false;
+  export let kind = 'primary';
+  export let href = undefined;
+  export let tabindex = '0';
+  export let type = 'button';
+  export let renderIcon = undefined;
+  export let iconDescription = undefined;
+  export let hasIconOnly = false;
+  export let tooltipPosition = undefined;
+  export let tooltipAlignment = undefined;
+  export let props = {};
+
+  import { cx } from '../../lib';
+
+  const _class = cx(
+    '--btn',
+    size === 'field' && '--btn--field',
+    (size === 'small' || small) && '--btn--sm',
+    kind === 'primary' && '--btn--primary',
+    kind === 'danger' && '--btn--danger',
+    kind === 'secondary' && '--btn--secondary',
+    kind === 'ghost' && '--btn--ghost',
+    kind === 'danger--primary' && '--btn--danger--primary',
+    kind === 'tertiary' && '--btn--tertiary',
+    disabled && '--btn--disabled',
+    hasIconOnly && '--btn--icon-only',
+    hasIconOnly && '--tooltip__trigger',
+    hasIconOnly && '--tooltip--a11y',
+    hasIconOnly && tooltipPosition && `--tooltip--${tooltipPosition}`,
+    hasIconOnly && tooltipAlignment && `--tooltip--align-${tooltipAlignment}`,
+    className
+  );
+  const buttonProps = {
+    ...props,
+    tabindex,
+    class: _class,
+    disabled,
+    type: href && !disabled ? undefined : type,
+    role: 'button',
+    href
+  };
+</script>
+
+{#if as}
+  <slot props={buttonProps} />
+{:else}
+  {#if href && !disabled}
+    <a {...buttonProps} {href} on:click on:mouseover on:mouseenter on:mouseleave>
+      {#if hasIconOnly}
+        <span class={cx('--assistive-text')}>{iconDescription}</span>
+      {/if}
+      <slot />
+      {#if renderIcon}
+        <svelte:component
+          this={renderIcon}
+          aria-hidden="true"
+          class={cx('--btn__icon')}
+          aria-label={iconDescription} />
+      {/if}
+    </a>
+  {:else}
+    <button {...buttonProps} on:click on:mouseover on:mouseenter on:mouseleave>
+      {#if hasIconOnly}
+        <span class={cx('--assistive-text')}>{iconDescription}</span>
+      {/if}
+      <slot />
+      {#if renderIcon}
+        <svelte:component
+          this={renderIcon}
+          aria-hidden="true"
+          class={cx('--btn__icon')}
+          aria-label={iconDescription} />
+      {/if}
+    </button>
+  {/if}
+{/if}

src/components/Button/index.js

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