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,42 @@
+/**
+ * @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;
+
+/**
+ * Callout.
+ *
+ * @element dds-callout
+ */
+@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
+  render() {
+    return html`
+      <div class="${prefix}--callout__column">
+        <div class="${prefix}--callout__content">
+          <slot />
+        </div>
+      </div>
+    `;
+  }
+}
+
+export default DDSCallout;

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>
+
+```
+