From 736fbe9bab026d76f1a584afb72b8d98f814889f Mon Sep 17 00:00:00 2001
From: Raphael Amadeu <30945011+RaphaelAmadeu@users.noreply.github.com>
Date: Wed, 27 Jan 2021 17:46:25 -0300
Subject: [PATCH] feat(link-list): aem improvements to end-of-section type
(#4972)
### Related Ticket(s)
#4902
### Description
End variant of Link List was updated to reflect the new design specs by AEM team.
---
.../__stories__/link-list.stories.ts | 78 ++++++++++++++++++-
.../src/components/link-list/defs.ts | 17 +++-
.../components/link-list/link-list-item.ts | 14 +++-
.../src/components/link-list/link-list.scss | 30 ++++++-
.../src/components/link-list/link-list.ts | 63 +++++++++++++--
5 files changed, 187 insertions(+), 15 deletions(-)
diff --git a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
index 96c0c29b640..cc34bb6e257 100644
--- a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
+++ b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
@@ -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.
@@ -339,6 +339,82 @@ EndOfSection.story = {
},
};
+export const EndOfSectionThreeColumns = ({ parameters }) => {
+ const { ctaType, download, href } = parameters?.props?.LinkListItem ?? {};
+ return !ctaType
+ ? html`
+
+ Tutorial
+
+ Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
+
+
+ Containerization Guide ${ArrowRight20({ slot: 'icon' })}
+
+
+ Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+
+
+ Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
+
+
+ Containerization Guide ${ArrowRight20({ slot: 'icon' })}
+
+
+ Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+
+
+ Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
+
+
+ Containerization Guide ${ArrowRight20({ slot: 'icon' })}
+
+
+ Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+
+
+ `
+ : html`
+
+ Tutorial
+
+ Learn more about Kubernetes
+
+
+ Containerization Guide
+
+
+ Microservices and containers
+
+
+ Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
+
+
+ Containerization Guide ${ArrowRight20({ slot: 'icon' })}
+
+
+ Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+
+
+ Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
+
+
+ Containerization Guide ${ArrowRight20({ slot: 'icon' })}
+
+
+ Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+
+
+ `;
+};
+
+EndOfSectionThreeColumns.story = {
+ parameters: {
+ colLgClass: 'bx--col-lg-12',
+ knobs: Default.story.parameters.knobs,
+ },
+};
+
export default {
title: 'Components/Link List',
parameters: {
diff --git a/packages/web-components/src/components/link-list/defs.ts b/packages/web-components/src/components/link-list/defs.ts
index 46beb6cf24f..4d9c7a57248 100644
--- a/packages/web-components/src/components/link-list/defs.ts
+++ b/packages/web-components/src/components/link-list/defs.ts
@@ -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.
@@ -31,3 +31,18 @@ export enum LINK_LIST_TYPE {
*/
END = 'end',
}
+
+/**
+ * Link list item type. Should mirror `LINK_LIST_TYPE` of parent ``.
+ */
+export enum LINK_LIST_ITEM_TYPE {
+ /**
+ * Default
+ */
+ DEFAULT = 'default',
+
+ /**
+ * End of Section variant - End
+ */
+ END = 'end',
+}
diff --git a/packages/web-components/src/components/link-list/link-list-item.ts b/packages/web-components/src/components/link-list/link-list-item.ts
index 9437ba101ec..ef8e4667cf9 100644
--- a/packages/web-components/src/components/link-list/link-list-item.ts
+++ b/packages/web-components/src/components/link-list/link-list-item.ts
@@ -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;
/**
@@ -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;
+
connectedCallback() {
if (!this.hasAttribute('role')) {
this.setAttribute('role', 'listitem');
diff --git a/packages/web-components/src/components/link-list/link-list.scss b/packages/web-components/src/components/link-list/link-list.scss
index 1a1a0f0d30b..dd753b0be00 100644
--- a/packages/web-components/src/components/link-list/link-list.scss
+++ b/packages/web-components/src/components/link-list/link-list.scss
@@ -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;
@@ -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;
@@ -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) {
@@ -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;
+ }
+ }
}
diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts
index b12beff9eed..8e6c578a03a 100644
--- a/packages/web-components/src/components/link-list/link-list.ts
+++ b/packages/web-components/src/components/link-list/link-list.ts
@@ -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.
*
@@ -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
@@ -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 =
{
@@ -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`
@@ -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.
*/