Skip to content

Commit

Permalink
Merge branch 'master' into fix/content-group-simple_stories
Browse files Browse the repository at this point in the history
  • Loading branch information
ariellalgilmore authored Jan 8, 2021
2 parents 0ea2127 + e666a72 commit dc4c6a0
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 76 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* Copyright IBM Corp. 2016, 2020
* Copyright IBM Corp. 2016, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand All @@ -21,28 +21,28 @@
margin: $carbon--layout-06 0;
}

.#{$prefix}--feature-card-block-medium__heading,
::slotted(#{$dds-prefix}-card-heading) {
@include carbon--type-style('expressive-heading-04', true);

display: block;
margin-bottom: $carbon--spacing-07;
&:focus {
outline: none;
}
}

// There is no content under `.#{$prefix}--card__heading` in feature card block medium,
// because `.#{$prefix}--card__heading` actually is a copy content and the heading content goes outside the card
.#{$prefix}--feature-card-block-medium
.#{$prefix}--card
.#{$prefix}--card__heading,
:host(#{$dds-prefix}-feature-card-block-medium)
.#{$prefix}--card
::slotted(#{$dds-prefix}-card-heading) {
width: auto;
max-width: none;
}
margin-bottom: 0;
}

&:focus {
outline: none;
}
.#{$prefix}--feature-card-block-medium__heading,
::slotted(#{$dds-prefix}-feature-card-block-medium-block-heading) {
@include carbon--type-style('expressive-heading-04', true);

// There is no content under `.#{$prefix}--card__heading` in feature card block medium,
// because `.#{$prefix}--card__heading` actually is a copy content and the heading content goes outside the card
.#{$prefix}--card .#{$prefix}--card__heading {
margin-bottom: 0;
}
display: block;
margin-bottom: $carbon--spacing-07;
}
}
@include exports('feature-card-block-medium') {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,40 +21,38 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card-heading.js';
import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-footer.js';
import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium.js';
import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium-heading.js';
import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium-card.js';
import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium-block-heading.js';
```

### HTML

```html
<dds-feature-card-block-medium>
<dds-feature-card-block-medium-heading slot="heading">
<dds-feature-card-block-medium href="https://example.com">
<dds-feature-card-block-medium-block-heading>
How is artificial intelligence used today in your industry?
</dds-feature-card-block-medium-heading>
<dds-feature-card-block-medium-card href="https://example.com">
<dds-image
slot="image"
alt="Image alt text"
default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616/ee5396/161616&amp;amp;text=1x1"
></dds-image>
<dds-card-heading>Explore AI use cases in all industries</dds-card-heading>
<dds-feature-card-footer>
<svg
slot="footer"
focusable="false"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
>
<path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
</svg>
</dds-feature-card-footer>
</dds-feature-card-block-medium-card>
</dds-feature-card-block-medium-block-heading>
<dds-image
slot="image"
alt="Image alt text"
default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616/ee5396/161616&amp;amp;text=1x1"
>
</dds-image>
<dds-card-heading>Explore AI use cases in all industries</dds-card-heading>
<dds-feature-card-footer>
<svg
slot="footer"
focusable="false"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
aria-hidden="true"
width="20"
height="20"
viewBox="0 0 20 20"
>
<path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
</svg>
</dds-feature-card-footer>
</dds-feature-card-block-medium>
```

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* @license
*
* Copyright IBM Corp. 2020
* Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand All @@ -16,15 +16,16 @@ import textNullable from '../../../../.storybook/knob-text-nullable';
import '../../card/card-eyebrow';
import '../../card/card-heading';
import '../feature-card-block-medium';
import '../feature-card-block-medium-block-heading';

export const Default = ({ parameters }) => {
const { copy, eyebrow, heading, defaultSrc, alt, href } = parameters?.props?.['dds-feature-card-block-medium'] ?? {};
const { blockHeading, eyebrow, heading, defaultSrc, alt, href } = parameters?.props?.['dds-feature-card-block-medium'] ?? {};
return html`
<dds-feature-card-block-medium href=${ifNonNull(href || undefined)}>
<dds-card-heading>${heading}</dds-card-heading>
<dds-feature-card-block-medium-block-heading>${blockHeading}</dds-feature-card-block-medium-block-heading>
<dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
<dds-card-heading>${heading}</dds-card-heading>
<dds-image slot="image" alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"></dds-image>
${copy}
<dds-feature-card-footer>
${ArrowRight20({ slot: 'icon' })}
</dds-feature-card-footer>
Expand All @@ -51,10 +52,13 @@ export default {
hasVerticalSpacingInComponent: true,
knobs: {
'dds-feature-card-block-medium': () => ({
heading: textNullable('Block Heading (blockHeading):', 'How is artificial intelligence used today in your industry?'),
copy: textNullable('Card copy (copy):', 'Explore AI use cases in all industries'),
blockHeading: textNullable(
'Block Heading (block-heading):',
'How is artificial intelligence used today in your industry?'
),
heading: textNullable('Card heading (heading):', 'Explore AI use cases in all industries'),
defaultSrc: textNullable(
'Image src (defaultSrc):',
'Image src (default-src):',
'https://fpoimg.com/672x672?text=1:1&amp;bg_color=ee5396&amp;text_color=161616'
),
eyebrow: textNullable('Card eyebrow (eyebrow):', 'Explore AI use cases in all industries'),
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* @license
*
* Copyright IBM Corp. 2020, 2021
*
* 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, property, customElement, LitElement } from 'lit-element';
import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
import styles from './feature-card-block-medium.scss';

const { stablePrefix: ddsPrefix } = ddsSettings;

/**
* The block heading content of feature card block medium.
*
* @element dds-feature-card-block-medium-block-heading
*/
@customElement(`${ddsPrefix}-feature-card-block-medium-block-heading`)
class DDSFeatureCardBlockMediumBlockHeading extends LitElement {
/**
* The shadow slot this block heading should be in.
*/
@property({ reflect: true })
slot = 'block-heading';

connectedCallback() {
if (!this.hasAttribute('role')) {
this.setAttribute('role', 'heading');
}
if (!this.hasAttribute('aria-level')) {
this.setAttribute('aria-level', '3');
}
super.connectedCallback();
}

render() {
return html`
<slot></slot>
`;
}

// `styles` here is a `CSSResult` generated by custom WebPack loader
static styles = styles;
}

export default DDSFeatureCardBlockMediumBlockHeading;
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* @license
*
* Copyright IBM Corp. 2020
* Copyright IBM Corp. 2020, 2021
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
Expand All @@ -12,7 +12,6 @@ import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/setti
import settings from 'carbon-components/es/globals/js/settings';
import DDSFeatureCard from '../feature-card/feature-card';
import styles from './feature-card-block-medium.scss';
import StableSelectorMixin from '../../globals/mixins/stable-selector';

const { prefix } = settings;
const { stablePrefix: ddsPrefix } = ddsSettings;
Expand All @@ -21,20 +20,13 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
* Feature Card Block Medium
*
* @element dds-feature-card-block-medium
* @slot heading - The heading content.
* @slot block-heading - The block heading content.
*/
@customElement(`${ddsPrefix}-feature-card-block-medium`)
class DDSFeatureCardBlockMedium extends StableSelectorMixin(DDSFeatureCard) {
class DDSFeatureCardBlockMedium extends DDSFeatureCard {
protected _renderInner() {
return html`
${this._renderImage()}
<div class="${prefix}--card__wrapper">
<div class="${prefix}--card__content">
<slot name="eyebrow"></slot>
<h3 class="${prefix}--card__heading">${this._renderCopy()}</h3>
<slot name="footer"></slot>
</div>
</div>
${this._renderImage()}${super._renderInner()}
`;
}

Expand All @@ -49,7 +41,7 @@ class DDSFeatureCardBlockMedium extends StableSelectorMixin(DDSFeatureCard) {

render() {
return html`
<slot name="heading"></slot>
<slot name="block-heading"></slot>
<div class="${prefix}--feature-card" data-autoid="${ddsPrefix}--feature-card">
${super.render()}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,29 @@
#### `should render with minimum attributes`

```
<slot name="heading">
<slot name="block-heading">
</slot>
<div
class="bx--feature-card"
data-autoid="dds--feature-card"
>
<slot name="image">
</slot>
<slot name="image">
</slot>
<div class="bx--card__wrapper">
<div class="bx--card__content">
<slot name="eyebrow">
</slot>
<h3 class="bx--card__heading">
<slot>
</slot>
</h3>
<slot
data-pictogram-placement="top"
name="pictogram"
>
</slot>
<slot name="heading">
</slot>
<slot>
</slot>
<slot name="footer">
</slot>
</div>
Expand All @@ -32,7 +39,7 @@
#### `should render with various attributes`

```
<slot name="heading">
<slot name="block-heading">
</slot>
<div
class="bx--feature-card"
Expand All @@ -44,16 +51,23 @@
id="link"
part="link"
>
<slot name="image">
</slot>
<slot name="image">
</slot>
<div class="bx--card__wrapper">
<div class="bx--card__content">
<slot name="eyebrow">
</slot>
<h3 class="bx--card__heading">
<slot>
</slot>
</h3>
<slot
data-pictogram-placement="top"
name="pictogram"
>
</slot>
<slot name="heading">
</slot>
<slot>
</slot>
<slot name="footer">
</slot>
</div>
Expand Down

0 comments on commit dc4c6a0

Please sign in to comment.