feat(callout with media): web component version

packages/styles/scss/components/callout-with-media/_callout-with-media.scss

@@ -5,46 +5,72 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@import '../../globals/imports';
+@import '../../globals/vars';
+@import '../../internal/callout/callout';
+
 @mixin callout-with-media {
+  :host(#{$dds-prefix}-callout-with-media),
   .#{$prefix}--callout-with-media {
-    .#{$prefix}--callout__content {
-      padding-top: 0;
-
-      .#{$prefix}--content-block {
-        padding-bottom: $layout-05;
-
-        @include carbon--theme(
-          $carbon--theme--g90,
-          feature-flag-enabled('enable-css-custom-properties')
-        ) {
-          color: $text-04;
-          .#{$prefix}--image__caption {
-            color: $text-01;
-          }
-          .#{$prefix}--video-player__video-caption {
-            color: $text-01;
-          }
-        }
-      }
-
-      .#{$prefix}--content-block-simple__media-video {
-        @include carbon--breakpoint-down('md') {
-          margin-top: -16px;
-        }
-
-        margin-top: $spacing-07;
-      }
-
-      .#{$prefix}--content-block-simple__media-image {
-        @include carbon--breakpoint-down('md') {
-          margin-top: 0;
-        }
-
-        margin-top: $spacing-09;
-      }
+    display: block;
+    background-color: $inverse-02;
+  }
+
+  .#{$prefix}--callout-with-media .#{$prefix}--callout__content {
+    padding-top: 0;
+  }
+  :host(#{$dds-prefix}-callout-with-media-video),
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block-simple__media-video {
+    @include carbon--breakpoint-down('md') {
+      margin-top: -16px;
+    }
+
+    margin-top: $spacing-07;
+  }
+
+  :host(#{$dds-prefix}-callout-with-media-image),
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block-simple__media-image {
+    @include carbon--breakpoint-down('md') {
+      margin-top: 0;
     }
 
+    margin-top: $spacing-09;
+  }
+
+  :host(#{$dds-prefix}-callout-with-media) .#{$prefix}--callout__content,
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block {
+    padding-bottom: $layout-05;
+
+    @include carbon--theme(
+      $carbon--theme--g90,
+      feature-flag-enabled('enable-css-custom-properties')
+    ) {
+      color: $text-04;
+      // `$text-05` in inverse theme is not accessible, which has an adverse effect to `bx--video-player__video-caption` in `<dds-callout-with-media>`.
+      // TODO: Consider global `$text-05` color change in inverse theme, or introduce a component-specific token for `.bx--video-player__video-caption`.
+      --cds-text-05: #f4f4f4;
+    }
+  }
+
+  :host(#{$dds-prefix}-callout-with-media-image),
+  .#{$prefix}--callout-with-media
+    .#{$prefix}--callout__content
+    .#{$prefix}--content-block {
+    .#{$prefix}--image__caption {
+      @include use-carbon-productive-tokens();
+      @include carbon--type-style('body-short-01', true);
+
+      margin-top: $carbon--spacing-03;
+      color: $text-01;
+    }
     .#{$prefix}--video-player__video-caption {
+      color: $text-01;
       padding-top: $spacing-03;
     }
   }

packages/styles/scss/internal/content-item/_content-item.scss

@@ -24,6 +24,7 @@
 
   :host(#{$dds-prefix}-content-item),
   .#{$prefix}--content-item {
+    display: block;
     margin-top: $carbon--spacing-07;
     margin-bottom: $carbon--spacing-07;
   }
@@ -39,6 +40,8 @@
   .#{$prefix}--content-item__copy {
     @include carbon--breakpoint(md) {
       @include content-width;
+
+      display: block;
     }
   }
 

packages/web-components/examples/codesandbox/components/callout-with-media/.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}

packages/web-components/examples/codesandbox/components/callout-with-media/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/web-components/examples/codesandbox/components/callout-with-media/index.html

@@ -0,0 +1,36 @@
+<!--
+@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" />
+    <style type="text/css">
+      body {
+        font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+      }
+
+      #app {
+        width: 300px;
+      }
+    </style>
+    <script src="src/index.js"></script>
+  </head>
+  <body>
+    <h1>Hello World! 👋</h1>
+    <dds-callout-with-media copy='lorum ipsum dolor sit ameet'>
+      <dds-content-block-heading slot="heading">lorum ipsum dolor sit ameet</dds-content-block-heading>
+      <dds-callout-with-media-image
+        alt="Image alt text"
+        default-src="https://dummyimage.com/672x378/ee5396/161616&text=16:9"
+        heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+      </dds-callout-with-media-image>
+    </dds-callout-with-media>
+  </body>
+</html>

packages/web-components/examples/codesandbox/components/callout-with-media/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ibmdotcom-web-components-callout-with-media-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",
+  "main": "index.html",
+  "scripts": {
+    "start": "parcel index.html --port=9000 --no-hmr",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "canary",
+    "lit-element": "~2.4.0",
+    "lit-html": "~1.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.0",
+    "parcel-bundler": "^1.10.0"
+  }
+}

packages/web-components/examples/codesandbox/components/callout-with-media/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}

packages/web-components/examples/codesandbox/components/callout-with-media/src/index.js

@@ -0,0 +1,10 @@
+/**
+ * @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/callout-with-media/callout-with-media';

packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx

@@ -0,0 +1,44 @@
+import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import CalloutWithMedia from '../CalloutWithMedia';
+
+# Callout with Media
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/web-components/examples/codesandbox/components/callout-with-media)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/ibm-dotcom-library/tree/master/packages/web-components/examples/codesandbox/components/callout-with-media)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callout-with-media';
+```
+
+or with [JSPM](https://jspm.org)
+
+```html
+<script type="module">
+  import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/callout-with-media/callout-with-media.js';
+</script>
+```
+
+### HTML
+
+```html
+<dds-callout-with-media copy='lorum ipsum dolor sit ameet'>
+  <dds-content-block-heading slot="heading">lorum ipsum dolor sit ameet</dds-content-block-heading>
+  <dds-callout-with-media-image
+   alt="Image alt text"
+   default-src="https://dummyimage.com/672x378/ee5396/161616&text=16:9"
+   heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+  </dds-callout-with-media-image>
+</dds-callout-with-media>
+```
+
+<Description markdown={contributing} />

packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.scss

@@ -0,0 +1,10 @@
+//
+// 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.
+//
+
+.dds-ce-demo-devenv--container {
+  padding: 0;
+}

packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts

@@ -0,0 +1,75 @@
+/**
+ * @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 { select } from '@storybook/addon-knobs';
+import styles from './callout-with-media.stories.scss';
+import '../callout-with-media';
+import '../callout-with-media-image';
+import '../callout-with-media-video';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import readme from './README.stories.mdx';
+
+const image = html`
+  <dds-callout-with-media-image
+    alt="Image alt text"
+    default-src="https://dummyimage.com/672x378/ee5396/161616&amp;text=16:9"
+    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  >
+  </dds-callout-with-media-image>
+`;
+
+const video = html`
+  <dds-callout-with-media-video video-id="0_uka1msg4"></dds-callout-with-media-video>
+`;
+
+export const Default = ({ parameters }) => {
+  const { copy, heading, mediaType } = parameters?.props?.CalloutWithMedia ?? {};
+  return html`
+    <dds-callout-with-media copy=${copy}>
+      <dds-content-block-heading slot="heading">${heading}</dds-content-block-heading>
+      ${mediaType === 'image' ? image : ``} ${mediaType === 'video' ? video : ``}
+    </dds-callout-with-media>
+  `;
+};
+
+export default {
+  title: 'Components/Callout with Media',
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      CalloutWithMedia: ({ groupId }) => ({
+        mediaType: select('mediaType (optional)', ['image', 'video', 'none'], 'image', groupId),
+        heading: textNullable('Heading', 'Curabitur malesuada varius mi eu posuere', groupId),
+        copy: textNullable(
+          'Copy',
+          `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. Here are
+  some common categories:`,
+          groupId
+        ),
+      }),
+    },
+    decorators: [
+      story => html`
+        <style>
+          ${styles}
+        </style>
+        <div class="bx--grid" style="width:100%">
+          <div class="bx--row">
+            <div class="bx--offset-lg-4 bx--col-lg-12">
+              ${story()}
+            </div>
+          </div>
+        </div>
+      `,
+    ],
+  },
+};