feat(content-section): web-component version

packages/web-components/src/components/content-section/__tests__/content-section.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 '../content-section.scss';
+
+const template = heading => html`
+  <dds-content-section heading=${heading}>
+    <p>This is a test.</p>
+  </dds-content-section>
+`;
+
+describe('dds-section-content', function() {
+  it('renders properly', async function() {
+    await render(template('Test header'), document.body);
+    await Promise.resolve();
+    expect(document.body.querySelector('dds-content-section')).toMatchSnapshot({ mode: 'shadow' });
+  });
+  afterEach(async function() {
+    await render(undefined!, document.body);
+  });
+});

packages/web-components/src/components/content-section/content-section.scss

@@ -0,0 +1,15 @@
+//
+// 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 '../../globals/scss/vars';
+@import '@carbon/ibmdotcom-styles/scss/internal/content-section/content-section';
+
+:host(#{$dds-prefix}-content-section) {
+  @include content-section;
+
+  display: block;
+}

packages/web-components/src/components/content-section/content-section.ts

@@ -0,0 +1,74 @@
+/**
+ * @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, property, LitElement } from 'lit-element';
+import settings from 'carbon-components/es/globals/js/settings';
+import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import styles from './content-section.scss';
+
+const { prefix } = settings;
+const { stablePrefix: ddsPrefix } = ddsSettings;
+
+/**
+ * The Content Section component for use with cardSection
+ *
+ * @element dds-content-section
+ */
+@customElement(`${ddsPrefix}-content-section`)
+class DDSContentSection extends StableSelectorMixin(LitElement) {
+  /**
+   * Renders Content Section heading slot
+   */
+  protected _renderHeading() {
+    const { heading } = this;
+    return html`
+      <slot name="heading">${heading}</slot>
+    `;
+  }
+
+  /**
+   * Applies section attribute
+   */
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'section');
+    }
+    super.connectedCallback();
+  }
+
+  /**
+   * The Content Section heading.
+   */
+  @property()
+  heading = '';
+
+  render() {
+    return html`
+      <div class="${prefix}--content-section__grid">
+        <div class="${prefix}--content-section__row">
+          <div class="${prefix}--content-section__left">
+            <h2 class="${prefix}--content-section__heading">${this._renderHeading()}<h2>
+          </div>
+          <div class="${prefix}--content-section__children">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static get stableSelector() {
+    return `${ddsPrefix}--content-section`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default DDSContentSection;

packages/web-components/tests/snapshots/dds-section-content.md

@@ -0,0 +1,25 @@
+# `dds-section-content`
+
+#### `renders properly`
+
+```
+<div class="bx--content-section__grid">
+  <div class="bx--content-section__row">
+    <div class="bx--content-section__left">
+      <h2 class="bx--content-section__heading">
+        <slot name="heading">
+          Test header
+        </slot>
+      </h2>
+      <h2>
+      </h2>
+    </div>
+    <div class="bx--content-section__children">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+