diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/.gitignore b/packages/web-components/examples/codesandbox/components/card-section-images/.gitignore new file mode 100644 index 00000000000..7d5b7a94f4d --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-images/.gitignore @@ -0,0 +1,2 @@ +/build +/node_modules diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/index.html b/packages/web-components/examples/codesandbox/components/card-section-images/index.html new file mode 100644 index 00000000000..2c595fe41c3 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-images/index.html @@ -0,0 +1,43 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + +
+
+
+ + + + + +
Topic
+
Natural Language Processing.
+ + ${ArrowRight20({ slot: 'icon' })} + + + + +
+
+
+ + diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/package.json b/packages/web-components/examples/codesandbox/components/card-section-images/package.json new file mode 100644 index 00000000000..97ca8860bb2 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-images/package.json @@ -0,0 +1,21 @@ +{ + "name": "ibmdotcom-web-components-card-section-images-example", + "version": "0.1.0", + "private": true, + "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.", + "license": "Apache-2", + "scripts": { + "start": "snowpack dev", + "build": "snowpack build" + }, + "dependencies": { + "@carbon/ibmdotcom-web-components": "canary", + "carbon-components": "~10.17.0", + "lit-element": "~2.4.0", + "lit-html": "~1.3.0" + }, + "devDependencies": { + "snowpack": "2.10.1", + "snowpack-plugin-sass": "^1.0.0" + } +} diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-section-images/sandbox.config.json new file mode 100644 index 00000000000..a4df8557d7b --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-images/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/snowpack.config.json b/packages/web-components/examples/codesandbox/components/card-section-images/snowpack.config.json new file mode 100644 index 00000000000..971179d2174 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-images/snowpack.config.json @@ -0,0 +1,5 @@ +{ + "plugins": [ + "snowpack-plugin-sass" + ] +} diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js b/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js new file mode 100644 index 00000000000..e4f9c7c8985 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-images/src/index.js @@ -0,0 +1,12 @@ +/** + * @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 '@carbon/ibmdotcom-web-components/es/components/card-section-images/card-section-images.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js'; diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/src/index.scss b/packages/web-components/examples/codesandbox/components/card-section-images/src/index.scss new file mode 100644 index 00000000000..878d8b07d11 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-images/src/index.scss @@ -0,0 +1,20 @@ +// +// @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. +// + +// `enable-css-custom-properties` and `grid-columns-16` feature flags are requirements for Carbon for IBM.com styles +$feature-flags: ( + enable-css-custom-properties: true, + grid-columns-16: true, +); + +@import 'carbon-components/scss/globals/grid/grid'; + +body { + visibility: inherit; +} diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/.gitignore b/packages/web-components/examples/codesandbox/components/card-section-simple/.gitignore new file mode 100644 index 00000000000..7d5b7a94f4d --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-simple/.gitignore @@ -0,0 +1,2 @@ +/build +/node_modules diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html b/packages/web-components/examples/codesandbox/components/card-section-simple/index.html new file mode 100644 index 00000000000..4305b04c6eb --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-simple/index.html @@ -0,0 +1,44 @@ + + + + + @carbon/ibmdotcom-web-components example + + + + + +
+
+
+ + + +
Nunc convallis lobortis
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. + Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. +

+ + ${ArrowRight20({ slot: 'icon' })} + + + + +
+
+
+ + diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/package.json b/packages/web-components/examples/codesandbox/components/card-section-simple/package.json new file mode 100644 index 00000000000..fc39137ccdf --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-simple/package.json @@ -0,0 +1,21 @@ +{ + "name": "ibmdotcom-web-components-card-section-simple-example", + "version": "0.1.0", + "private": true, + "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.", + "license": "Apache-2", + "scripts": { + "start": "snowpack dev", + "build": "snowpack build" + }, + "dependencies": { + "@carbon/ibmdotcom-web-components": "canary", + "carbon-components": "~10.17.0", + "lit-element": "~2.4.0", + "lit-html": "~1.3.0" + }, + "devDependencies": { + "snowpack": "2.10.1", + "snowpack-plugin-sass": "^1.0.0" + } +} diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json b/packages/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json new file mode 100644 index 00000000000..a4df8557d7b --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json @@ -0,0 +1,3 @@ +{ + "template": "node" +} diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/snowpack.config.json b/packages/web-components/examples/codesandbox/components/card-section-simple/snowpack.config.json new file mode 100644 index 00000000000..971179d2174 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-simple/snowpack.config.json @@ -0,0 +1,5 @@ +{ + "plugins": [ + "snowpack-plugin-sass" + ] +} diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js b/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js new file mode 100644 index 00000000000..426b2766d70 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.js @@ -0,0 +1,12 @@ +/** + * @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 '@carbon/ibmdotcom-web-components/es/components/card-section-simple/card-section-simple.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js'; diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.scss b/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.scss new file mode 100644 index 00000000000..878d8b07d11 --- /dev/null +++ b/packages/web-components/examples/codesandbox/components/card-section-simple/src/index.scss @@ -0,0 +1,20 @@ +// +// @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. +// + +// `enable-css-custom-properties` and `grid-columns-16` feature flags are requirements for Carbon for IBM.com styles +$feature-flags: ( + enable-css-custom-properties: true, + grid-columns-16: true, +); + +@import 'carbon-components/scss/globals/grid/grid'; + +body { + visibility: inherit; +} diff --git a/packages/web-components/src/components/card-section-images/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-images/__stories__/README.stories.mdx new file mode 100644 index 00000000000..f5b2b8d3915 --- /dev/null +++ b/packages/web-components/src/components/card-section-images/__stories__/README.stories.mdx @@ -0,0 +1,58 @@ +import { Props, Description } from '@storybook/addon-docs/blocks'; +import contributing from '../../../../../../docs/contributing-license.md'; +import markdownContents from '../../../../docs/markdown-contents.md'; + +# `` + +> The Card Section - Images pattern is a collection of cards with images presented in a section with a left-column header. +> 💡 Check our +> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/components/card-section-images) +> example implementation. +[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/components/card-section-images) + +## Getting started + +Here's a quick example to get you started. + +##### JS + +```javascript + +import '@carbon/ibmdotcom-web-components/es/components/card-section-images/card-section-images.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js'; + +``` + +### HTML + +```html + + + + + +
Topic
+
Natural Language Processing.
+ + ${ArrowRight20({ slot: 'icon' })} + + + + +``` + +## Props + + + + +## Stable selectors + +See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used. + +| Web Components selector | Compatibility selector | Description | +| ----------------------------- | ----------------------------------------- | ----------- | +| `` | `data-autoid="dds--card-section-images"` | Component | + + \ No newline at end of file diff --git a/packages/web-components/src/components/card-section-images/__stories__/card-section-images.stories.ts b/packages/web-components/src/components/card-section-images/__stories__/card-section-images.stories.ts new file mode 100644 index 00000000000..1c74cc15dfa --- /dev/null +++ b/packages/web-components/src/components/card-section-images/__stories__/card-section-images.stories.ts @@ -0,0 +1,67 @@ +/** + * @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 } from 'lit-element'; +import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20'; +import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; +import readme from './README.stories.mdx'; +import textNullable from '../../../../.storybook/knob-text-nullable'; +import '../../content-section/content-section'; +import '../../card-group/card-group'; +import '../../card-group/card-group-item'; +import '../card-section-images'; + +const cardGroupItemWithImages = html` + + + +
Topic
+
Natural Language Processing.
+ + ${ArrowRight20({ slot: 'icon' })} + + +`; + +export const Default = ({ parameters }) => { + const { heading, cards } = parameters?.props?.CardSectionImages ?? {}; + return html` + + ${cards} + + `; +}; + +export default { + title: 'Components/Card Section Images', + decorators: [ + story => html` +
+
+
+ ${story()} +
+
+
+ `, + ], + parameters: { + ...readme.parameters, + hasGrid: true, + hasVerticalSpacingInComponent: true, + knobs: { + CardSectionImages: ({ groupId }) => ({ + heading: textNullable('Heading (required)', 'Aliquam condimentum interdum', groupId), + cards: Array.from({ + length: 5, + }).map(() => cardGroupItemWithImages), + }), + }, + }, +}; diff --git a/packages/web-components/src/components/card-section-images/__tests__/card-section-images.test.ts b/packages/web-components/src/components/card-section-images/__tests__/card-section-images.test.ts new file mode 100644 index 00000000000..77c9199d810 --- /dev/null +++ b/packages/web-components/src/components/card-section-images/__tests__/card-section-images.test.ts @@ -0,0 +1,64 @@ +/** + * @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 ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20'; +import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; +import '../card-section-images'; + +const template = (props?) => { + const { heading, children } = props ?? {}; + return html` + + ${children} + + `; +}; + +describe('dds-card-section-images', function() { + describe('Misc attributes', function() { + it('should render with minimum attributes', async function() { + render(template(), document.body); + await Promise.resolve(); + expect(document.body.querySelector('dds-card-section-images')).toMatchSnapshot({ mode: 'shadow' }); + }); + + it('should render with various attributes', async function() { + render( + template({ + heading: 'heading-foo', + cards: html` + + + +
Topic
+
Natural Language Processing.
+ + ${ArrowRight20({ slot: 'icon' })} + + + `, + }), + document.body + ); + await Promise.resolve(); // The update cycle of `` + await Promise.resolve(); // The update cycle that fires `slotchange` event + await Promise.resolve(); // The update cycle that updates content upon `slotchange` event + expect(document.body.querySelector('dds-card-section-images')).toMatchSnapshot({ mode: 'shadow' }); + }); + }); + + afterEach(async function() { + await render(undefined!, document.body); + }); +}); diff --git a/packages/web-components/src/components/card-section-images/card-section-images.scss b/packages/web-components/src/components/card-section-images/card-section-images.scss new file mode 100644 index 00000000000..5556d4b2fd3 --- /dev/null +++ b/packages/web-components/src/components/card-section-images/card-section-images.scss @@ -0,0 +1,16 @@ +// +// 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/components/card-section-images/card-section-images'; +@import '@carbon/ibmdotcom-styles/scss/components/layout/layout'; + +:host(#{$dds-prefix}-card-section-images) { + display: block; + + padding-top: 3rem; + padding-bottom: 10rem; +} diff --git a/packages/web-components/src/components/card-section-images/card-section-images.ts b/packages/web-components/src/components/card-section-images/card-section-images.ts new file mode 100644 index 00000000000..2765fba0eed --- /dev/null +++ b/packages/web-components/src/components/card-section-images/card-section-images.ts @@ -0,0 +1,43 @@ +/** + * @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 } from 'lit-element'; +import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; + +import styles from './card-section-images.scss'; +import DDSContentSection from '../content-section/content-section'; + +const { stablePrefix: ddsPrefix } = ddsSettings; + +/** + * The Card Section Images pattern + * + * @element dds-card-section-images + */ +@customElement(`${ddsPrefix}-card-section-images`) +class DDSCardSectionImages extends StableSelectorMixin(DDSContentSection) { + /** + * Applies section attribute + */ + connectedCallback() { + if (!this.hasAttribute('role')) { + this.setAttribute('role', 'section'); + } + super.connectedCallback(); + } + + static get stableSelector() { + return `${ddsPrefix}--card-section-images`; + } + + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader +} + +export default DDSCardSectionImages; diff --git a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx new file mode 100644 index 00000000000..b8a0870cb2f --- /dev/null +++ b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx @@ -0,0 +1,59 @@ +import { Props, Description } from '@storybook/addon-docs/blocks'; +import contributing from '../../../../../../docs/contributing-license.md'; +import markdownContents from '../../../../docs/markdown-contents.md'; + +# `` + +> The Card Section - Simple pattern is a collection of simple cards presented in a section with a left-column header. +> 💡 Check our +> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/components/card-section-simple) +> example implementation. +[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/components/card-section-simple) + +## Getting started + +Here's a quick example to get you started. + +##### JS + +```javascript + +import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/card-section-simple.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group.js'; +import '@carbon/ibmdotcom-web-components/es/components/card-group/card-group-item.js'; + +``` + +### HTML + +```html + + + +
Nunc convallis lobortis
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. + Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. +

+ + ${ArrowRight20({ slot: 'icon' })} + + + + +``` + +## Props + + + + +## Stable selectors + +See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used. + +| Web Components selector | Compatibility selector | Description | +| ----------------------------- | ----------------------------------------- | ----------- | +| `` | `data-autoid="dds--card-section-simple"` | Component | + + \ No newline at end of file diff --git a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts new file mode 100644 index 00000000000..fabd077207e --- /dev/null +++ b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts @@ -0,0 +1,85 @@ +/** + * @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 } from 'lit-element'; +import ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20'; +import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; +import readme from './README.stories.mdx'; +import textNullable from '../../../../.storybook/knob-text-nullable'; +import '../../content-section/content-section'; +import '../../card-group/card-group'; +import '../../card-group/card-group-item'; +import '../card-section-simple'; + +const defaultCardGroupItem = html` + +
Nunc convallis lobortis
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. + Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. +

+ + ${ArrowRight20({ slot: 'icon' })} + + +`; + +export const Default = ({ parameters }) => { + const { heading, cards } = parameters?.props?.CardSectionSimple ?? {}; + return html` + + ${cards} + + `; +}; + +export const WithCTA = ({ parameters }) => { + const { heading, cards } = parameters?.props?.CardSectionSimple ?? {}; + return html` + + + ${cards} + +
Top level card link
+ + ${ArrowRight20({ slot: 'icon' })} + + + + + `; +}; + +export default { + title: 'Components/Card Section Simple', + decorators: [ + story => html` +
+
+
+ ${story()} +
+
+
+ `, + ], + parameters: { + ...readme.parameters, + hasGrid: true, + hasVerticalSpacingInComponent: true, + knobs: { + CardSectionSimple: ({ groupId }) => ({ + heading: textNullable('Heading (required)', 'Aliquam condimentum interdum', groupId), + cards: Array.from({ + length: 5, + }).map(() => defaultCardGroupItem), + }), + }, + }, +}; diff --git a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts new file mode 100644 index 00000000000..1613776022a --- /dev/null +++ b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts @@ -0,0 +1,61 @@ +/** + * @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 ArrowRight20 from 'carbon-web-components/es/icons/arrow--right/20'; +import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js'; +import '../card-section-simple'; + +const template = (props?) => { + const { heading, children } = props ?? {}; + return html` + + ${children} + + `; +}; + +describe('dds-card-section-simple', function() { + describe('Misc attributes', function() { + it('should render with minimum attributes', async function() { + render(template(), document.body); + await Promise.resolve(); + expect(document.body.querySelector('dds-card-section-simple')).toMatchSnapshot({ mode: 'shadow' }); + }); + + it('should render with various attributes', async function() { + render( + template({ + heading: 'heading-foo', + cards: html` + +
Nunc convallis lobortis
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec + hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. +

+ + ${ArrowRight20({ slot: 'icon' })} + + + `, + }), + document.body + ); + await Promise.resolve(); // The update cycle of `` + await Promise.resolve(); // The update cycle that fires `slotchange` event + await Promise.resolve(); // The update cycle that updates content upon `slotchange` event + expect(document.body.querySelector('dds-card-section-simple')).toMatchSnapshot({ mode: 'shadow' }); + }); + }); + + afterEach(async function() { + await render(undefined!, document.body); + }); +}); diff --git a/packages/web-components/src/components/card-section-simple/card-section-simple.scss b/packages/web-components/src/components/card-section-simple/card-section-simple.scss new file mode 100644 index 00000000000..ddac058ce74 --- /dev/null +++ b/packages/web-components/src/components/card-section-simple/card-section-simple.scss @@ -0,0 +1,16 @@ +// +// 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/components/card-section-simple/card-section-simple'; +@import '@carbon/ibmdotcom-styles/scss/components/layout/layout'; + +:host(#{$dds-prefix}-card-section-simple) { + display: block; + + padding-top: 3rem; + padding-bottom: 10rem; +} diff --git a/packages/web-components/src/components/card-section-simple/card-section-simple.ts b/packages/web-components/src/components/card-section-simple/card-section-simple.ts new file mode 100644 index 00000000000..26bcea7a88f --- /dev/null +++ b/packages/web-components/src/components/card-section-simple/card-section-simple.ts @@ -0,0 +1,43 @@ +/** + * @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 } from 'lit-element'; +import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; +import StableSelectorMixin from '../../globals/mixins/stable-selector'; + +import styles from './card-section-simple.scss'; +import DDSContentSection from '../content-section/content-section'; + +const { stablePrefix: ddsPrefix } = ddsSettings; + +/** + * The Card Section Simple pattern + * + * @element dds-card-section-simple + */ +@customElement(`${ddsPrefix}-card-section-simple`) +class DDSCardSectionSimple extends StableSelectorMixin(DDSContentSection) { + /** + * Applies section attribute + */ + connectedCallback() { + if (!this.hasAttribute('role')) { + this.setAttribute('role', 'section'); + } + super.connectedCallback(); + } + + static get stableSelector() { + return `${ddsPrefix}--card-section-simple`; + } + + static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader +} + +export default DDSCardSectionSimple; diff --git a/packages/web-components/src/components/content-section/content-section.ts b/packages/web-components/src/components/content-section/content-section.ts index 7ad670134be..a705e18d6f9 100644 --- a/packages/web-components/src/components/content-section/content-section.ts +++ b/packages/web-components/src/components/content-section/content-section.ts @@ -20,6 +20,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * The Content Section component for use with cardSection * * @element dds-content-section + * @slot heading - Section heading */ @customElement(`${ddsPrefix}-content-section`) class DDSContentSection extends StableSelectorMixin(LitElement) { diff --git a/packages/web-components/tests/snapshots/dds-card-section-images.md b/packages/web-components/tests/snapshots/dds-card-section-images.md new file mode 100644 index 00000000000..2f28dd08132 --- /dev/null +++ b/packages/web-components/tests/snapshots/dds-card-section-images.md @@ -0,0 +1,49 @@ +# `dds-card-section-images` + +## `Misc attributes` + +#### `should render with minimum attributes` + +``` +
+
+
+

+ + +

+

+

+
+
+ + +
+
+
+ +``` + +#### `should render with various attributes` + +``` +
+
+
+

+ + heading-foo + +

+

+

+
+
+ + +
+
+
+ +``` + diff --git a/packages/web-components/tests/snapshots/dds-card-section-simple.md b/packages/web-components/tests/snapshots/dds-card-section-simple.md new file mode 100644 index 00000000000..3d4c71eff08 --- /dev/null +++ b/packages/web-components/tests/snapshots/dds-card-section-simple.md @@ -0,0 +1,49 @@ +# `dds-card-section-simple` + +## `Misc attributes` + +#### `should render with minimum attributes` + +``` +
+
+
+

+ + +

+

+

+
+
+ + +
+
+
+ +``` + +#### `should render with various attributes` + +``` +
+
+
+

+ + heading-foo + +

+

+

+
+
+ + +
+
+
+ +``` +