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 1 commit
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
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
* Link list item type
* 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',
}
11 changes: 9 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,9 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
*/
@customElement(`${ddsPrefix}-link-list-item`)
class DDSLinkListItem extends DDSLinkWithIcon {
@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
29 changes: 28 additions & 1 deletion 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,16 @@
}
}

:host(#{$dds-prefix}-link-list-item) {
: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 @@ -95,4 +102,24 @@
}
}
}

.#{$dds-prefix}-ce--link-list__list--three-columns {
@include carbon--breakpoint('sm') {
::slotted(#{$dds-prefix}-link-list-item) {
margin-right: -$carbon--layout-01;
}
}

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

::slotted(#{$dds-prefix}-link-list-item) {
display: block;
margin-left: -$carbon--layout-01;
margin-right: 0;
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

There seem many duplicate CSS rules with two columns mode. One way to solve it is:

.#{$dds-prefix}-ce--link-list__list--split {
   /* The common rules */
}

.#{$dds-prefix}-ce--link-list__list--two-columns {
  /* 2-column mode-specific rules */
}

.#{$dds-prefix}-ce--link-list__list--three-columns {
  /* 3-column mode-specific rules */
}
.#{$dds-prefix}-ce--link-list__list--split,
.#{$dds-prefix}-ce--link-list__list--three-columns {
   /* The common rules */
}

}
23 changes: 21 additions & 2 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,6 +14,7 @@ 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 };

Expand All @@ -35,6 +36,13 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
@internalProperty()
private _useSplitLayoutForEndType = false;

/**
* `true` to use three column layout for `type="end"`
* Should happen if there are more than 6 child items slotted in.
*/
@internalProperty()
private _useThreeColumnLayoutForEndType = false;
Copy link
Contributor

Choose a reason for hiding this comment

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

Would you rename _useSplitLayoutForEndType with _endTypeLayout? Good to define an internal enum (defined in this file) like END_TYPE_LAYOUT.TWO_COLUMNS and END_TYPE_LAYOUT.THREE_COLUMNS.


/**
* Handler for @slotChange, toggles the split layout class and set the children link-list-item to the same height
*
Expand All @@ -45,7 +53,13 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
const 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;
this._useSplitLayoutForEndType = childItems.length > 3 && childItems.length < 7;
this._useThreeColumnLayoutForEndType = childItems.length >= 7;
if (this.type === LINK_LIST_TYPE.END) {
childItems.forEach(elem => {
(elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
});
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Please make sure updating type of child <dds-link-list-item> in updated() lifecycle method, too, to cope with change in type after <dds-link-list-item> is slotted in.

}

/**
Expand All @@ -55,7 +69,11 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
type = LINK_LIST_TYPE.DEFAULT;

render() {
const { type, _useSplitLayoutForEndType: useSplitLayoutForEndType } = this;
const {
type,
_useSplitLayoutForEndType: useSplitLayoutForEndType,
_useThreeColumnLayoutForEndType: useThreeColumnLayoutForEndType,
} = this;
const headingClasses = classMap({
[`${ddsPrefix}-ce--link-list__heading__wrapper`]: true,
[`${ddsPrefix}-ce--link-list__heading--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType,
Expand All @@ -70,6 +88,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
[`${prefix}--link-list__list`]: true,
[listTypeClasses]: true,
[`${ddsPrefix}-ce--link-list__list--split`]: type === LINK_LIST_TYPE.END && useSplitLayoutForEndType,
[`${ddsPrefix}-ce--link-list__list--three-columns`]: type === LINK_LIST_TYPE.END && useThreeColumnLayoutForEndType,
});
return html`
<div class="${headingClasses}"><slot name="heading"></slot></div>
Expand Down