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. ![image](https://user-images.githubusercontent.com/30945011/105411394-21baf780-5c12-11eb-95b7-2c488694fc3e.png)
carbon-design-system · Jan 27, 2021 · 736fbe9 · 736fbe9
1 parent 656b3d0
commit 736fbe9
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 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
@@ -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`
+        <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: {

diff --git 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 `<dds-link-list>`.
+ */
+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
@@ -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
@@ -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
@@ -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`
       <div class="${headingClasses}"><slot name="heading"></slot></div>
@@ -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.
    */