feat(card-section): introducing web component versions (#4471)

### Related Ticket(s) #3776 #3778 ### Description Introducing `<dds-card-section-simple>` and `<dds-card-section-images` for Web Components. `Card Section Simple` contains the Default and With CTA variations: Default: ![Screen Shot 2020-11-12 at 2 52 27 PM](https://user-images.githubusercontent.com/24970122/99006527-75fd7900-24f7-11eb-88c6-26e9fa442b1f.png) With CTA: ![Screen Shot 2020-11-12 at 2 52 38 PM](https://user-images.githubusercontent.com/24970122/99006531-77c73c80-24f7-11eb-92da-4e494ed01ca4.png) `Card Section Images` only contains the Default variation: ![Screen Shot 2020-11-12 at 2 52 51 PM](https://user-images.githubusercontent.com/24970122/99006534-785fd300-24f7-11eb-8329-03ab64449ce6.png) ### Changelog **New** - `<dds-card-section-simple>` component - `<dds-card-section-images>` component
carbon-design-system · Nov 13, 2020 · 9272002 · 9272002
1 parent c44b6a5
commit 9272002
Show file tree

Hide file tree

Showing 27 changed files with 824 additions and 0 deletions.
diff --git a/packages/web-components/examples/codesandbox/components/card-section-images/.gitignore 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
@@ -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.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <script type="module" src="src/index.js"></script>
+    <style type="text/css">
+      /* Avoids FOUC - Will be overriden by `index.scss` */
+      body {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="bx--grid">
+      <div class="bx--row">
+        <div class="bx--col-sm-4">
+          <dds-card-section-images heading="Aliquam condimentum interdum">
+            <dds-card-group>
+                <dds-card-group-item href="https://example.com">
+                <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
+                </dds-image>
+                <div slot="eyebrow">Topic</div>
+                <div slot="heading">Natural Language Processing.</div>
+                <dds-card-footer slot="footer">
+                  ${ArrowRight20({ slot: 'icon' })}
+                </dds-card-footer>
+              </dds-card-group-item>  
+            </dds-card-group>
+          </dds-card-section-images>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
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
@@ -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/...es/web-components/examples/codesandbox/components/card-section-images/sandbox.config.json b/...es/web-components/examples/codesandbox/components/card-section-images/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/...s/web-components/examples/codesandbox/components/card-section-images/snowpack.config.json b/...s/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
@@ -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
@@ -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
@@ -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
@@ -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.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <script type="module" src="src/index.js"></script>
+    <style type="text/css">
+      /* Avoids FOUC - Will be overriden by `index.scss` */
+      body {
+        visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="bx--grid">
+      <div class="bx--row">
+        <div class="bx--col-sm-4">
+          <dds-card-section-simple heading="Aliquam condimentum interdum">
+            <dds-card-group>
+              <dds-card-group-item href="https://example.com">
+                <div slot="heading">Nunc convallis lobortis</div>
+                <p>
+                  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.
+                </p>
+                <dds-card-footer slot="footer">
+                  ${ArrowRight20({ slot: 'icon' })}
+                </dds-card-footer>
+              </dds-card-group-item>
+            </dds-card-group>
+          </dds-card-section-simple>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
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
@@ -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/...es/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json b/...es/web-components/examples/codesandbox/components/card-section-simple/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/...s/web-components/examples/codesandbox/components/card-section-simple/snowpack.config.json b/...s/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
@@ -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
@@ -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/...eb-components/src/components/card-section-images/__stories__/README.stories.mdx b/...eb-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';
+
+# `<dds-card-section-images>`
+
+> 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
+<dds-card-section-images heading="Aliquam condimentum interdum">
+  <dds-card-group>
+      <dds-card-group-item href="https://example.com">
+      <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
+      </dds-image>
+      <div slot="eyebrow">Topic</div>
+      <div slot="heading">Natural Language Processing.</div>
+      <dds-card-footer slot="footer">
+        ${ArrowRight20({ slot: 'icon' })}
+      </dds-card-footer>
+    </dds-card-group-item>  
+  </dds-card-group>
+</dds-card-section-images>
+```
+
+## Props
+
+<Props of="dds-card-section-images" />
+<Description markdown={markdownContents} />
+
+## 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 |
+| ----------------------------- | ----------------------------------------- | ----------- |
+| `<dds-card-section-images>`   | `data-autoid="dds--card-section-images"`  | Component   |
+
+<Description markdown={contributing} />
diff --git a/...-components/src/components/card-section-images/__stories__/card-section-images.stories.ts b/...-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`
+  <dds-card-group-item href="https://example.com">
+    <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
+    </dds-image>
+    <div slot="eyebrow">Topic</div>
+    <div slot="heading">Natural Language Processing.</div>
+    <dds-card-footer slot="footer">
+      ${ArrowRight20({ slot: 'icon' })}
+    </dds-card-footer>
+  </dds-card-group-item>
+`;
+
+export const Default = ({ parameters }) => {
+  const { heading, cards } = parameters?.props?.CardSectionImages ?? {};
+  return html`
+    <dds-card-section-images heading=${ifNonNull(heading)}>
+      <dds-card-group>${cards}</dds-card-group>
+    </dds-card-section-images>
+  `;
+};
+
+export default {
+  title: 'Components/Card Section Images',
+  decorators: [
+    story => html`
+      <div class="bx--grid bx--content-group-story dds-ce-demo-devenv--grid--stretch">
+        <div class="bx--row dds-ce-demo-devenv--grid-row">
+          <div class="bx--col-sm-4">
+            ${story()}
+          </div>
+        </div>
+      </div>
+    `,
+  ],
+  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),
+      }),
+    },
+  },
+};