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

feat(link-list): aem improvements to end-of-section type #4972

Merged
merged 9 commits into from
Jan 27, 2021
Merged

feat(link-list): aem improvements to end-of-section type #4972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4a3260c
feat(link-list): aem improvements to end-of-section type
raphaelamadeu-zz Jan 21, 2021
3883bf2
feat(link-list): added enum for end type and scss changes
raphaelamadeu Jan 22, 2021
b58e29c
Merge branch 'master' into feat/link-list
raphaelamadeu-zz Jan 22, 2021
8209b58
Merge branch 'master' into feat/link-list
jeffchew Jan 25, 2021
2d4af96
fix(link-list): fixed a bug where icons had different sizes
raphaelamadeu-zz Jan 27, 2021
2074679
fix(link-list): fixed a bug where icons had different sizes
raphaelamadeu-zz Jan 27, 2021
f3b0b32
Merge branch 'feat/link-list' of https://github.com/RaphaelAmadeu/car…
raphaelamadeu-zz Jan 27, 2021
5289281
chore(docs): updated documentation
raphaelamadeu-zz Jan 27, 2021
00ffc5c
Merge branch 'master' into feat/link-list
raphaelamadeu-zz Jan 27, 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
78 changes: 77 additions & 1 deletion 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
@@ -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 Down Expand Up @@ -339,6 +339,82 @@ EndOfSection.story = {
},
};

export const EndOfSectionThreeColumns = ({ parameters }) => {
const { ctaType, download, href } = parameters?.props?.LinkListItem ?? {};
return !ctaType
? html`
<dds-link-list type="end">
<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>
<dds-link-list-item href="https://example.com">
Containerization Guide ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Microservices and containers ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Containerization Guide ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Microservices and containers ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Containerization Guide ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Microservices and containers ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
</dds-link-list>
`
: html`
<dds-link-list type="end">
<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>
<dds-link-list-item-cta href="${ifNonNull(href)}" cta-type="${ifNonNull(ctaType)}" download="${ifNonNull(download)}">
Containerization Guide
</dds-link-list-item-cta>
<dds-link-list-item-cta href="${ifNonNull(href)}" cta-type="${ifNonNull(ctaType)}" download="${ifNonNull(download)}">
Microservices and containers
</dds-link-list-item-cta>
<dds-link-list-item href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Containerization Guide ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Microservices and containers ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Containerization Guide ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
<dds-link-list-item href="https://example.com">
Microservices and containers ${ArrowRight20({ slot: 'icon' })}
</dds-link-list-item>
</dds-link-list>
`;
};

EndOfSectionThreeColumns.story = {
parameters: {
colLgClass: 'bx--col-lg-12',
knobs: Default.story.parameters.knobs,
},
};

export default {
title: 'Components/Link List',
parameters: {
Expand Down
17 changes: 16 additions & 1 deletion packages/web-components/src/components/link-list/defs.ts
View file
Open in desktop
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 Down Expand Up @@ -31,3 +31,18 @@ export enum LINK_LIST_TYPE {
*/
END = 'end',
}

/**
* Link list item type. Should mirror `LINK_LIST_TYPE` of parent `<dds-link-list>`.
*/
export enum LINK_LIST_ITEM_TYPE {
/**
* Default
*/
DEFAULT = 'default',

/**
* End of Section variant - End
*/
END = 'end',
}
14 changes: 12 additions & 2 deletions packages/web-components/src/components/link-list/link-list-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
/**
* @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.
*/

import { css, customElement } from 'lit-element';
import { css, customElement, property } from 'lit-element';
import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
import DDSLinkWithIcon from '../link-with-icon/link-with-icon';
import styles from './link-list.scss';

import { LINK_LIST_ITEM_TYPE } from './defs';

export { LINK_LIST_ITEM_TYPE };

const { stablePrefix: ddsPrefix } = ddsSettings;

/**
Expand All @@ -21,6 +25,12 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
*/
@customElement(`${ddsPrefix}-link-list-item`)
class DDSLinkListItem extends DDSLinkWithIcon {
/**
* Defines the style of the link-list-item: `default` or `end`
*/
@property({ reflect: true })
type = LINK_LIST_ITEM_TYPE.DEFAULT;
Comment on lines +31 to +32
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add a JSDoc comment that describes what this property is for? That will be reflected to docs page in Storybook.


connectedCallback() {
if (!this.hasAttribute('role')) {
this.setAttribute('role', 'listitem');
Expand Down
30 changes: 27 additions & 3 deletions packages/web-components/src/components/link-list/link-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,21 @@
}
}

:host(#{$dds-prefix}-link-list-item) {
:host(#{$dds-prefix}-link-list-item) .bx--link-with-icon__icon-left ::slotted(svg[slot='icon']) {
min-width: 20px;
min-height: 20px;
}

:host(#{$dds-prefix}-link-list-item)[type='end'] {
outline: none;

&:hover {
.#{$prefix}--link {
text-decoration: none;
background: $ui-03;
}
}

.#{$prefix}--link {
> span {
flex: 1;
Expand Down Expand Up @@ -76,7 +88,8 @@
}
}

.#{$dds-prefix}-ce--link-list__list--split {
.#{$dds-prefix}-ce--link-list__list--split,
.#{$dds-prefix}-ce--link-list__list--three-columns {
@include carbon--breakpoint('sm') {
::slotted(#{$dds-prefix}-link-list-item) {
margin-right: -$carbon--layout-01;
Expand All @@ -85,7 +98,6 @@

@include carbon--breakpoint('md') {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2rem;

::slotted(#{$dds-prefix}-link-list-item) {
Expand All @@ -95,4 +107,16 @@
}
}
}

.#{$dds-prefix}-ce--link-list__list--split {
@include carbon--breakpoint('md') {
grid-template-columns: 1fr 1fr;
}
}

.#{$dds-prefix}-ce--link-list__list--three-columns {
@include carbon--breakpoint('md') {
grid-template-columns: 1fr 1fr 1fr;
}
}
}
63 changes: 55 additions & 8 deletions packages/web-components/src/components/link-list/link-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,30 @@ import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/setti
import StableSelectorMixin from '../../globals/mixins/stable-selector';
import { LINK_LIST_TYPE } from './defs';
import styles from './link-list.scss';
import DDSLinkListItem, { LINK_LIST_ITEM_TYPE } from './link-list-item';

export { LINK_LIST_TYPE };

const { prefix } = settings;
const { stablePrefix: ddsPrefix } = ddsSettings;

export enum END_TYPE_LAYOUT {
/**
* Default layout | 1 - 3 items
*/
DEFAULT = 'default',

/**
* Two Columns - Split layout | 4 - 6 items
*/
TWO_COLUMNS = 'two-columns',

/**
* Tree Columns Layout | 7 + items
*/
THREE_COLUMNS = 'three-columns',
}

/**
* Link list.
*
Expand All @@ -29,11 +47,16 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
@customElement(`${ddsPrefix}-link-list`)
class DDSLinkList extends StableSelectorMixin(LitElement) {
/**
* `true` to use "split mode" layout for `type="end"`.
* Should happen if there are more than three child items slotted in.
* Defines the layout for the end layout - based on END_TYPE_LAYOUT
*/
@internalProperty()
private _endTypeLayout = END_TYPE_LAYOUT.DEFAULT;

/**
* Child items
*/
@internalProperty()
private _useSplitLayoutForEndType = false;
private _childItems: Element[] = [];

/**
* Handler for @slotChange, toggles the split layout class and set the children link-list-item to the same height
Expand All @@ -42,23 +65,37 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
*/
private _handleSlotChange(event: Event) {
const { selectorItem } = this.constructor as typeof DDSLinkList;
const childItems = (event.target as HTMLSlotElement)
this._childItems = (event.target as HTMLSlotElement)
.assignedNodes({ flatten: true })
.filter(node => node.nodeType === Node.ELEMENT_NODE && (node as Element)?.matches(selectorItem)) as Element[];
this._useSplitLayoutForEndType = childItems.length > 3;
if (this._childItems.length > 3) {
if (this._childItems.length < 7) this._endTypeLayout = END_TYPE_LAYOUT.TWO_COLUMNS;
else this._endTypeLayout = END_TYPE_LAYOUT.THREE_COLUMNS;
}
if (this.type === LINK_LIST_TYPE.END) {
this._childItems.forEach(elem => {
(elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
});
}
}

/**
* The link list type.
* possible values are:
* default - Vertically stacked card-like links;
* vertical - Vertically stacked inline links;
* horizontal - Horizontaly stacked inline links;
* end - End of section variant - Inline links stacked up to three columns based on the quantity of links;
*/
@property({ reflect: true })
type = LINK_LIST_TYPE.DEFAULT;

render() {
const { type, _useSplitLayoutForEndType: useSplitLayoutForEndType } = this;
const { type, _endTypeLayout: endTypeLayout } = this;
const headingClasses = classMap({
[`${ddsPrefix}-ce--link-list__heading__wrapper`]: true,
[`${ddsPrefix}-ce--link-list__heading--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType,
[`${ddsPrefix}-ce--link-list__heading--split`]:
type === LINK_LIST_TYPE.END && endTypeLayout === END_TYPE_LAYOUT.TWO_COLUMNS,
});
const listTypeClasses =
{
Expand All @@ -69,7 +106,9 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
const listClasses = classMap({
[`${prefix}--link-list__list`]: true,
[listTypeClasses]: true,
[`${ddsPrefix}-ce--link-list__list--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType,
[`${ddsPrefix}-ce--link-list__list--split`]: type === LINK_LIST_TYPE.END && endTypeLayout === END_TYPE_LAYOUT.TWO_COLUMNS,
[`${ddsPrefix}-ce--link-list__list--three-columns`]:
type === LINK_LIST_TYPE.END && endTypeLayout === END_TYPE_LAYOUT.THREE_COLUMNS,
});
return html`
<div class="${headingClasses}"><slot name="heading"></slot></div>
Expand All @@ -79,6 +118,14 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
`;
}

updated() {
if (this.type === LINK_LIST_TYPE.END) {
this._childItems.forEach(elem => {
(elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
});
}
}

/**
* A selector selecting the child items.
*/
Expand Down