Skip to content

Commit

Permalink
chore(component): welcome back link-list-section
Browse files Browse the repository at this point in the history
  • Loading branch information
@kennylam
kennylam committed Nov 3, 2023
1 parent 5fa8143 commit 1b307e3
Show file tree
Hide file tree
Showing 9 changed files with 535 additions and 39 deletions.
69 changes: 34 additions & 35 deletions docs/dotcom-v2-migration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,54 +17,53 @@ For Carbon v11 migration guidance, see their
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| back-to-top | No API changes. |
| background-media | No API changes. |
| button | This component is deprecated in v2 in favor for `button-expressive` |
| button | This component is deprecated in v2 in favor for `button-expressive`. |
| button-group | No API changes. |
| callout-with-media | View changes [here](#callout-with-media) |
| callout-quote | View changes [here](#callout-quote) |
| card | View changes [here](#card) |
| card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item |
| callout-with-media | View changes [here](#callout-with-media). |
| callout-quote | View changes [here](#callout-quote). |
| card | View changes [here](#card). |
| card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item. |
| card-in-card | No API changes. |
| card-link | This component is deprecated in v2 in favor for [card](#card) (link variant) component |
| card-section-carousel | This component is deprecated in v2 in favor for content-section/block component combined with carousel |
| card-link | This component is deprecated in v2 in favor for [card](#card) (link variant) component. |
| card-section-carousel | This component is deprecated in v2 in favor for content-section/block component combined with carousel. |
| card-section-images | This component is deprecated in v1 and has been removed in v2 in favor of the card-section component. |
| card-section-simple | This component is deprecated in v2 in facor for content-section/block component combined with card-group |
| content-block-cards | This component is deprecated in v2 in favor for content-section/block & card-group components |
| content-block-horizontal | This component is deprecated in v2 in favor for content-section/block & content-item-horizontal components |
| content-block-media | This component is deprecated in v2 in favor for content-section/block & repeated video-player/image components |
| content-block-mixed | This component is deprecated in v2 in favor for content-section/block, video-player/image, pictogram-items, and other content-group components |
| content-block-segmented | This component is deprecated in v2 in favor for content-section/block component |
| content-block-simple | This component is deprecated in v2 in favor for content-section/block component |
| content-group-banner | View changes [here](#content-group-banner) |
| card-section-simple | This component is deprecated in v2 in facor for content-section/block component combined with card-group. |
| content-block-cards | This component is deprecated in v2 in favor for content-section/block & card-group components. |
| content-block-horizontal | This component is deprecated in v2 in favor for content-section/block & content-item-horizontal components. |
| content-block-media | This component is deprecated in v2 in favor for content-section/block & repeated video-player/image components. |
| content-block-mixed | This component is deprecated in v2 in favor for content-section/block, video-player/image, pictogram-items, and other content-group components.|
| content-block-segmented | This component is deprecated in v2 in favor for content-section/block component. |
| content-block-simple | This component is deprecated in v2 in favor for content-section/block component. |
| content-group-banner | View changes [here](#content-group-banner). |
| content-group-horizontal | This component is deprecated in v1 and has been removed in v2 in favor of the content-block-horizontal component. |
| content-group-cards | This component is deprecated in v2 in favor for content-section/block & card-group components |
| content-group-pictograms | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components |
| content-group-simple | This component is deprecated in v2 in favor for content-group, image, & content-item components |
| content-item-horizontal | View changes [here](#content-item-horizontal) |
| cta | View changes [here](#cta) |
| cta-block | This component is deprecated in v2 in favor for content-section/block & content-item components |
| cta-section | This component is deprecated in v2 in favor for content-section/block & content-item components |
| content-group-cards | This component is deprecated in v2 in favor for content-section/block & card-group components. |
| content-group-pictograms | This component is deprecated in v2 in favor for content-section/block content-item (pictogram variant) components. |
| content-group-simple | This component is deprecated in v2 in favor for content-group, image, & content-item components. |
| content-item-horizontal | View changes [here](#content-item-horizontal). |
| cta | View changes [here](#cta). |
| cta-block | This component is deprecated in v2 in favor for content-section/block & content-item components. |
| cta-section | This component is deprecated in v2 in favor for content-section/block & content-item components. |
| feature-card-block-large | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. |
| feature-card-block-medium | This component is deprecated in v1 and has been removed in v2 in favor of the feature-card component. |
| feature-section | View changes [here](#feature-section) |
| filter-panel | View changes [here](#filter-panel) |
| feature-section | View changes [here](#feature-section). |
| filter-panel | View changes [here](#filter-panel). |
| footer | No API changes. |
| hr | View changes [here](#horizontal-rule) |
| image | View changes [here](#image) |
| image-with-caption | This component is deprecated in v1 and has been removed in v2 in favor of the image component |
| leadspace | View changes [here](#leadspace) |
| leadspace-block | View changes [here](#leadspace-block) |
| leadspace-with-search | View changes [here](#leadspace-with-search) |
| hr | View changes [here](#horizontal-rule). |
| image | View changes [here](#image). |
| image-with-caption | This component is deprecated in v1 and has been removed in v2 in favor of the image component. |
| leadspace | View changes [here](#leadspace). |
| leadspace-block | View changes [here](#leadspace-block). |
| leadspace-with-search | View changes [here](#leadspace-with-search). |
| lightbox-media-viewer | No API changes. |
| link-list | View changes [here](#link-list) |
| link-list-section | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components |
| link-list | View changes [here](#link-list). |
| link-with-icon | No API changes. |
| logo-grid | This component is deprecated in v2 in favor for content-section/block & image-group components |
| pictogram-item | This component is deprecated in v2 in favor for content-item (pictogram variation) componet |
| logo-grid | This component is deprecated in v2 in favor for content-section/block & image-group components. |
| pictogram-item | This component is deprecated in v2 in favor for content-item (pictogram variation) component. |
| quote | No API changes. |
| search-with-typeahead | No API changes. |
| table-of-contents | No API changes. |
| tabs-extended-media | This component is deprecated in v2 in favor for tabs-extended component |
| universal-banner | View changes [here](#universal-banner) |
| universal-banner | View changes [here](#universal-banner). |

### Callout with media

Expand Down
1 change: 1 addition & 0 deletions packages/styles/scss/components/link-list-section/_link-list-section.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/ibmdotcom-styles/scss/internal/content-section';
@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
Expand Down
77 changes: 75 additions & 2 deletions packages/styles/scss/components/link-list/_link-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
margin: 0;
}

.#{$c4d-prefix}--link-list__list--vertical {
.#{$c4d-prefix}--link-list__list--vertical,
.#{$c4d-prefix}-ce--link-list__list--end {
display: grid;
grid-auto-rows: 1fr;

Expand All @@ -42,6 +43,56 @@
.#{$c4d-prefix}-ce--link-list__heading__wrapper {
display: contents;
}

@include breakpoint(md) {
.#{$c4d-prefix}-ce--link-list__heading--split
::slotted(#{$c4d-prefix}-link-list-heading) {
width: 33.3%;
padding-right: 10%;
}
}

.#{$c4d-prefix}-ce--link-list__list--split,
.#{$c4d-prefix}-ce--link-list__list--three-columns {
::slotted(#{$c4d-prefix}-link-list-item) {
display: grid;
align-items: stretch;
// margin-right: -$spacing-05;
}

@include breakpoint(md) {
display: grid;
grid-column-gap: $spacing-07;

::slotted(#{$c4d-prefix}-link-list-item) {
margin-left: -$spacing-05;
margin-right: 0;
}
}
}

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

.#{$c4d-prefix}-ce--link-list__list--three-columns {
@include breakpoint(md) {
grid-template-columns: 1fr 1fr 1fr;
}
}
}

:host(#{$c4d-prefix}-link-list-item) {
.#{$prefix}--link {
align-content: flex-start;

span,
::slotted(svg[slot='icon']) {
align-self: flex-start;
}
}
}

:host(#{$c4d-prefix}-link-list-heading) {
Expand All @@ -54,10 +105,18 @@
}

@include type-style('heading-02');

@include breakpoint(md) {
margin-left: -$spacing-05;
}

@include breakpoint(lg) {
margin-left: 0;
}
}

:host(#{$c4d-prefix}-link-list-item)[type='default'],
:host(#{$c4d-prefix}-link-list-item-cta)[type='default'] {
:host(#{$c4d-prefix}-link-list-item)[type='end'] {
.#{$prefix}--link {
display: flex;
width: 100%;
Expand All @@ -77,6 +136,20 @@
}
}

.#{$c4d-prefix}-ce--link-list__list--end {
::slotted(#{$c4d-prefix}-link-list-item),
::slotted(#{$c4d-prefix}-link-list-item-cta) {
border-top: 1px solid $border-subtle-01;
border-bottom: 1px solid $border-subtle-01;
margin-top: -1px;

@include breakpoint(lg) {
margin-left: -$spacing-05;
margin-right: -$spacing-05;
}
}
}

.#{$c4d-prefix}--link-list__list--horizontal {
::slotted(#{$c4d-prefix}-link-list-item),
::slotted(#{$c4d-prefix}-link-list-item-cta) {
Expand Down
Loading

0 comments on commit 1b307e3

Please sign in to comment.