Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(link-list): introduce heading component #4795

Merged
merged 3 commits into from
Jan 4, 2021
Merged

chore(link-list): introduce heading component #4795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c18dca
chore(link-list): introduce heading component
asudoh Dec 30, 2020
49ff988
docs(link-list): update
asudoh Dec 30, 2020
aa71c80
Merge branch 'master' into link-list-heading
kodiakhq[bot] Jan 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/styles/scss/components/link-list/_link-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@
}
}

.#{$prefix}--link-list__heading {
.#{$prefix}--link-list__heading,
:host(#{$dds-prefix}-link-list-heading) {
margin-bottom: $carbon--spacing-05;

@include carbon--type-style('expressive-heading-02');
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/examples/codesandbox/components/leadspace-block/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
</dds-image-with-caption>
</dds-leadspace-block-media>
<dds-link-list type="end">
<span slot="heading">Featured products</span>
<dds-link-list-heading>Featured products</dds-link-list-heading>
<dds-link-list-item href="https://example.com">
Services
</dds-link-list-item>
Expand Down
1 change: 1 addition & 0 deletions packages/web-components/examples/codesandbox/components/leadspace-block/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/

import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list.js';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-heading.js';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-item.js';
import '@carbon/ibmdotcom-web-components/es/components/button-group/button-group.js';
import '@carbon/ibmdotcom-web-components/es/components/button-group/button-group-item.js';
Expand Down
3 changes: 2 additions & 1 deletion packages/web-components/examples/codesandbox/components/link-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<meta charset="UTF-8" />
<script type="module">
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list.js';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-heading.js';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-item-card.js';
</script>
<style type="text/css">
Expand All @@ -27,7 +28,7 @@
</head>
<body>
<dds-link-list type="default">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-card href="https://example.com">
<p>Learn more</p>
<svg
Expand Down
3 changes: 2 additions & 1 deletion ...nts/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import '../../cta/text-cta';
import '../../video-player/video-player-container';
import '../../content-block/content-block-complementary';
import '../../link-list/link-list';
import '../../link-list/link-list-heading';
import '../content-block-segmented-item';
import '../content-block-segmented';
import { CTA_STYLE, CTA_TYPE } from '../../cta/defs';
Expand Down Expand Up @@ -188,7 +189,7 @@ export const withAsideElements = ({ parameters }) => {
</dds-content-block-segmented-item>
<dds-content-block-complementary>
<dds-link-list type="default">
<span slot="heading">${heading}</span>
<dds-link-list-heading>${heading}</dds-link-list-heading>
<dds-link-list-item-card-cta href="https://example.com" cta-type="local">
<p>Containerization A Complete Guide</p>
<dds-card-cta-footer></dds-card-cta-footer>
Expand Down
5 changes: 4 additions & 1 deletion ...omponents/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,14 @@ import readme from './README.stories.mdx';
import textNullable from '../../../../.storybook/knob-text-nullable';
import { CTA_TYPE } from '../../cta/defs';
import '../../image/image';
import '../../cta/link-list-item-card-cta';
import '../../cta/text-cta';
import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../../content-block/content-block';
import '../../content-item/content-item-copy';
import '../../content-block/content-block-heading';
import '../../content-block/content-block-complementary';
import '../../link-list/link-list';
import '../../link-list/link-list-heading';
import '../content-block-simple';

const ctaTypes = {
Expand Down Expand Up @@ -126,7 +129,7 @@ export const WithAsideElements = ({ parameters }) => {
${image}
<dds-content-block-complementary>
<dds-link-list type="default">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-card-cta href="${ifNonNull(href)}" cta-type="local">
<p>Containerization A Complete Guide</p>
<dds-card-cta-footer></dds-card-cta-footer>
Expand Down
5 changes: 4 additions & 1 deletion packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.j
import readme from './README.stories.mdx';
import textNullable from '../../../../.storybook/knob-text-nullable';
import '../../button-group/button-group-item';
import '../../link-list/link-list';
import '../../link-list/link-list-heading';
import '../../link-list/link-list-item';
import '../cta-section';
import '../cta-section-copy';
import '../cta-section-item';
Expand Down Expand Up @@ -102,7 +105,7 @@ export const WithLinkList = ({ parameters }) => {
</dds-button-group>

<dds-link-list slot="link-list" type="end">
<span slot="heading">More ways to explore DevOps</span>
<dds-link-list-heading>More ways to explore DevOps</dds-link-list-heading>
<dds-link-list-item href="https://example.com">
Events ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
Expand Down
33 changes: 19 additions & 14 deletions packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ import mockLegalLinks from '../../footer/__stories__/legal-links';
import mockLocaleList from '../../locale-modal/__stories__/locale-data.json';
import '../../card/card-eyebrow';
import '../../card/card-heading';
import '../../link-list/link-list';
import '../../link-list/link-list-heading';
import '../../link-list/link-list-item';
import readme from './README.stories.mdx';

const footerSizes = {
Expand Down Expand Up @@ -149,20 +152,22 @@ const StoryContent = () => html`
<dds-video-player-container video-id="1_9h94wo6b"></dds-video-player-container>
</dds-leadspace-block-media>
<dds-link-list type="end">
<span slot="heading">Featured products</span>
<dds-link-list-item href="https://example.com">
IBM Cloud Continuous Delivery ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
UrbanCode ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
View all products ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
</dds-link-list>
<dds-leadspace-block-cta>
<dds-button-group-item href="www.ibm.com">Contact sales ${ArrowRight20({ slot: 'icon' })}</dds-button-group-item>
</dds-leadspace-block-cta>
<dds-link-list-heading>Featured products</dds-link-list-heading>
<dds-link-list-item href="https://example.com">
IBM Cloud Continuous Delivery ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
UrbanCode ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
View all products ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
</dds-link-list>
<dds-leadspace-block-cta>
<dds-button-group-item href="www.ibm.com">Contact sales ${ArrowRight20({
slot: 'icon',
})}</dds-button-group-item>
</dds-leadspace-block-cta>
</dds-leadspace-block-content>
</dds-leadspace-block>

Expand Down
3 changes: 2 additions & 1 deletion ...es/web-components/src/components/leadspace-block/__stories__/README.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ Here's a quick example to get you started.

```javascript
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-heading';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-item';
import '@carbon/ibmdotcom-web-components/es/components/button-group/button-group';
import '@carbon/ibmdotcom-web-components/es/components/button-group/button-group-item';
Expand Down Expand Up @@ -61,7 +62,7 @@ import '@carbon/ibmdotcom-web-components/es/components/leadspace-block/leadspace
</dds-image-with-caption>
</dds-leadspace-block-media>
<dds-link-list type="end">
<span slot="heading">Featured products</span>
<dds-link-list-heading>Featured products</dds-link-list-heading>
<dds-link-list-item href="https://example.com">
Services ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
Expand Down
3 changes: 2 additions & 1 deletion ...ages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import '../../content-block/content-block-heading';
import '../../content-block/content-block-copy';
import '../../image-with-caption/image-with-caption';
import '../../link-list/link-list';
import '../../link-list/link-list-heading';
import '../../link-list/link-list-item';
import '../../video-player/video-player-container';
import '../../button-group/button-group';
Expand Down Expand Up @@ -53,7 +54,7 @@ const image = html`

const linkList = html`
<dds-link-list type="end">
<span slot="heading">Featured products</span>
<dds-link-list-heading>Featured products</dds-link-list-heading>
<dds-link-list-item href="https://example.com">
IBM Cloud Continuous Delivery ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
Expand Down
37 changes: 19 additions & 18 deletions packages/web-components/src/components/link-list/__stories__/README.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,32 @@ Here's a quick example to get you started.

```javascript
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list.js';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-item.js';
import '@carbon/ibmdotcom-web-components/es/components/card-link/card-link.js';
import '@carbon/ibmdotcom-web-components/es/components/link-list/link-list-item-card.js';
```

### HTML

```html
<dds-link-list>
<dds-link-list-item></dds-link-list-item>
<dds-card-link href="https://example.com">
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-card href="https://example.com">
<p>Copy text</p>
<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-card-link>
<dds-card-footer>
<svg
slot="icon"
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-card-footer>
</dds-link-list-item-card>
</dds-link-list>
```

Expand Down
25 changes: 13 additions & 12 deletions packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import '../../cta/link-list-item-cta';
import '../../cta/link-list-item-card-cta';
import '../../card/card-footer';
import '../link-list';
import '../link-list-heading';
import '../link-list-item';
import '../link-list-item-card';
import readme from './README.stories.mdx';
Expand Down Expand Up @@ -60,7 +61,7 @@ export const Default = ({ parameters }) => {
return !ctaType
? html`
<dds-link-list type="default">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-card href="https://example.com">
<p>Learn more about Kubernetes</p>
<dds-card-footer>
Expand All @@ -77,7 +78,7 @@ export const Default = ({ parameters }) => {
`
: html`
<dds-link-list type="default">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-card-cta
href="${ifNonNull(href)}"
cta-type="${ifNonNull(ctaType)}"
Expand Down Expand Up @@ -123,7 +124,7 @@ export const Horizontal = ({ parameters }) => {
return !ctaType
? html`
<dds-link-list type="horizontal">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
Expand All @@ -134,7 +135,7 @@ export const Horizontal = ({ parameters }) => {
`
: html`
<dds-link-list type="horizontal">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-cta
icon-placement="${iconPlacement}"
href="${ifNonNull(href)}"
Expand Down Expand Up @@ -181,7 +182,7 @@ export const Vertical = ({ parameters }) => {
return !ctaType
? html`
<dds-link-list type="vertical">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
Expand All @@ -192,7 +193,7 @@ export const Vertical = ({ parameters }) => {
`
: html`
<dds-link-list type="vertical">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-cta
icon-placement="${iconPlacement}"
href="${ifNonNull(href)}"
Expand Down Expand Up @@ -225,7 +226,7 @@ export const VerticalWithCards = ({ parameters }) => {
return !ctaType
? html`
<dds-link-list type="vertical">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item icon-placement="${iconPlacement}" href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
Expand All @@ -234,7 +235,7 @@ export const VerticalWithCards = ({ parameters }) => {
</dds-link-list-item>
</dds-link-list>
<dds-link-list type="default">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-card href="https://example.com">
<p>Learn more about Kubernetes</p>
<dds-card-footer>
Expand All @@ -251,7 +252,7 @@ export const VerticalWithCards = ({ parameters }) => {
`
: html`
<dds-link-list type="vertical">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-cta
icon-placement="${iconPlacement}"
href="${ifNonNull(href)}"
Expand All @@ -270,7 +271,7 @@ export const VerticalWithCards = ({ parameters }) => {
</dds-link-list-item-cta>
</dds-link-list>
<dds-link-list type="default">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-card-cta
href="${ifNonNull(href)}"
cta-type="${ifNonNull(ctaType)}"
Expand Down Expand Up @@ -303,7 +304,7 @@ export const EndOfSection = ({ parameters }) => {
return !ctaType
? html`
<dds-link-list type="end">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
Expand All @@ -317,7 +318,7 @@ export const EndOfSection = ({ parameters }) => {
`
: html`
<dds-link-list type="end">
<span slot="heading">Tutorial</span>
<dds-link-list-heading>Tutorial</dds-link-list-heading>
<dds-link-list-item-cta href="${ifNonNull(href)}" cta-type="${ifNonNull(ctaType)}" download="${ifNonNull(download)}">
Learn more about Kubernetes
</dds-link-list-item-cta>
Expand Down
Loading