feat(callout): web-component created

packages/web-components/src/components/callout/__tests__/callout.test.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, render } from 'lit-html';
+import '../callout.scss';
+
+const template = () => html`
+  <dds-callout>
+    <h1>Hey testing!</h1>
+  </dds-callout>
+`;
+
+describe('dds-callout', function() {
+  it('renders properly', async function() {
+    await render(template(), document.body);
+    await Promise.resolve();
+    expect(document.body.querySelector('dds-callout')).toMatchSnapshot({ mode: 'shadow' });
+  });
+  afterEach(async function() {
+    await render(undefined!, document.body);
+  });
+});

packages/web-components/src/components/callout/callout.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '@carbon/ibmdotcom-styles/scss/internal/callout/callout';

packages/web-components/src/components/callout/callout.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { customElement, html, LitElement } from 'lit-element';
+import settings from 'carbon-components/es/globals/js/settings';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings';
+import styles from './callout.scss';
+
+const { prefix } = settings;
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * Link list.
+ *
+ * @element dds-link-list
+ */
+@customElement(`${ddsPrefix}-callout`)
+class DDSCallout extends LitElement {
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+
+  static get stableSelector() {
+    return `${ddsPrefix}--callout`;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected render() {
+    return html`
+      <div class="${prefix}--callout__container">
+        <div class="${prefix}--callout__column">
+          <div class="${prefix}--callout__content">
+            <slot />
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default DDSCallout;

packages/web-components/src/components/link-list/__tests__/link-list.test.ts

@@ -0,0 +1,54 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render } from 'lit-html';
+import DDSLinkList from '../link-list';
+import { Default, Horizontal, Vertical, VerticalWithCards, EndOfSection } from '../__stories__/link-list.stories';
+
+describe('dds-link-list', function() {
+  it('Renders Default', async function() {
+    render(Default(), document.body);
+    await Promise.resolve();
+    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
+  });
+
+  it('Renders Horizontal', async function() {
+    render(Horizontal(), document.body);
+    await Promise.resolve();
+    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
+  });
+
+  it('Renders Vertical', async function() {
+    render(Vertical(), document.body);
+    await Promise.resolve();
+    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
+  });
+
+  it('Renders Vertical with cards', async function() {
+    render(VerticalWithCards(), document.body);
+    await Promise.resolve();
+    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
+  });
+
+  it('Renders End of section', async function() {
+    render(EndOfSection(), document.body);
+    await Promise.resolve();
+    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({ mode: 'shadow' });
+  });
+
+  it('Tests the get methods', function() {
+    expect((DDSLinkList as typeof DDSLinkList).stableSelector).toBe('dds--link-list');
+    expect((DDSLinkList as typeof DDSLinkList).splitLayoutClass).toBe('bx--link-list__split');
+    expect((DDSLinkList as typeof DDSLinkList).linkListItemSelector).toBe('dds-link-list-item');
+  });
+
+  afterEach(async function() {
+    await render(undefined!, document.body);
+  });
+});

packages/web-components/tests/snapshots/dds-callout.md

@@ -0,0 +1,16 @@
+# `dds-callout`
+
+#### `renders properly`
+
+```
+<div class="bx--callout__container">
+  <div class="bx--callout__column">
+    <div class="bx--callout__content">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+

packages/web-components/tests/snapshots/dds-link-list.md

@@ -0,0 +1,82 @@
+# `dds-link-list`
+
+#### `Renders Default`
+
+```
+<h4 class="bx--link-list__heading">
+  <slot name="heading">
+  </slot>
+</h4>
+<ul
+  class="bx--link-list__list bx--link-list__list--card"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+```
+
+#### `Renders Horizontal`
+
+```
+<h4 class="bx--link-list__heading">
+  <slot name="heading">
+  </slot>
+</h4>
+<ul
+  class="bx--link-list__list bx--link-list__list--horizontal"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+```
+
+#### `Renders Vertical`
+
+```
+<h4 class="bx--link-list__heading">
+  <slot name="heading">
+  </slot>
+</h4>
+<ul
+  class="bx--link-list__list bx--link-list__list--vertical"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+```
+
+#### `Renders Vertical with cards`
+
+```
+<h4 class="bx--link-list__heading">
+  <slot name="heading">
+  </slot>
+</h4>
+<ul
+  class="bx--link-list__list bx--link-list__list--vertical"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+```
+
+#### `Renders End of section`
+
+```
+<h4 class="bx--link-list__heading">
+  <slot name="heading">
+  </slot>
+</h4>
+<ul
+  class="bx--link-list__list dds-ce--link-list__list--end"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+```
+