diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
index 70064791175..c7c545f6673 100644
--- a/docs/dotcom-v2-migration.md
+++ b/docs/dotcom-v2-migration.md
@@ -38,6 +38,7 @@ For Carbon v11 migration guidance, see their
| 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 |
@@ -79,6 +80,11 @@ For Carbon v11 migration guidance, see their
options
- New `link` property which takes the place of the deprecated `card-link`
+### Content item horizontal
+
+- `content-item-horizontal` changed names to `content-item-row`
+- All components with `content-item-horizontal-*` also changed to `content-item-row-*`
+
### CTA
In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have
diff --git a/packages/styles/carbon.yml b/packages/styles/carbon.yml
index a46c9f1e841..a31c8dc2955 100644
--- a/packages/styles/carbon.yml
+++ b/packages/styles/carbon.yml
@@ -371,17 +371,17 @@ assets:
thumbnailPath: ../../thumbnails/content-item.svg
tags:
- content-element
- content-item-horizontal:
- name: Content item horizontal
+ content-item-row:
+ name: Content item row
description:
- Content item horizontal component displays information in a horizontal
+ Content item row component displays information in a horizontal
orientation.
- externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
+ externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row
status: stable
type: component
platform: web
noIndex: true
- thumbnailPath: ../../thumbnails/content-item-horizontal.svg
+ thumbnailPath: ../../thumbnails/content-item-row.svg
tags:
- content-block
- content-element
diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
index 4a2ac664dd3..941f7f423e1 100644
--- a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
+++ b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
@@ -9,7 +9,7 @@
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '../../internal/content-block';
-@use '../content-item-horizontal';
+@use '../content-item-row';
@use '../../globals/vars' as *;
@mixin content-block-horizontal {
@@ -44,9 +44,7 @@
margin-bottom: $spacing-07;
}
- :host(#{$c4d-prefix}-content-item-horizontal):last-child,
- .#{$prefix}--content-block-horizontal
- .#{$prefix}--content-item-horizontal__item:last-child {
+ :host(#{$c4d-prefix}-content-item-row):last-child {
@include breakpoint(max) {
padding-bottom: $spacing-13;
}
diff --git a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
similarity index 62%
rename from packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss
rename to packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
index 2efd3d00ee4..5876dcb3886 100644
--- a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss
+++ b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
@@ -10,12 +10,13 @@
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
@use '../../globals/vars' as *;
@use '../link-list';
-@mixin content-item-horizontal-media {
- :host(#{$c4d-prefix}-content-item-horizontal-media) {
- padding: $spacing-07 $spacing-05 $spacing-10;
+@mixin content-item-row-media {
+ :host(#{$c4d-prefix}-content-item-row-media) {
+ padding: $spacing-07 0 $spacing-10;
display: block;
@include breakpoint(md) {
@@ -26,61 +27,61 @@
padding-top: $spacing-07;
padding-bottom: $spacing-10;
}
+
+ ::slotted([slot='media']) {
+ margin-top: $spacing-07;
+
+ @include breakpoint(md) {
+ margin-top: $spacing-09;
+ }
+
+ @include breakpoint(lg) {
+ margin-top: 0;
+ }
+ }
}
- :host(#{$c4d-prefix}-content-item-horizontal-media),
- :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
+ :host(#{$c4d-prefix}-content-item-row-media),
+ :host(#{$c4d-prefix}-content-item-row-media-featured)
::slotted([slot='heading']),
- :host(#{$c4d-prefix}-content-item-horizontal-media-copy)
- ::slotted(:not([slot])),
- :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
- .#{$prefix}--content-item-horizontal__item--eyebrow,
- .#{$prefix}--content-item-horizontal__item--heading,
- .#{$prefix}--content-item-horizontal__item--copy {
+ :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])),
+ :host(#{$c4d-prefix}-content-item-row-eyebrow) {
width: 100%;
max-width: 100%;
min-width: 0;
}
- :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
- .#{$prefix}--content-item-horizontal__item--eyebrow {
+ :host(#{$c4d-prefix}-content-item-row-eyebrow) {
color: $text-helper;
padding-bottom: $spacing-03;
@include type-style('label-01');
}
- :host(#{$c4d-prefix}-content-item-horizontal-media)
- ::slotted([slot='heading']),
- :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
- ::slotted([slot='heading']),
- .#{$prefix}--content-item-horizontal__item--heading {
+ :host(#{$c4d-prefix}-content-item-row-media) ::slotted([slot='heading']),
+ :host(#{$c4d-prefix}-content-item-row-media-featured)
+ ::slotted([slot='heading']) {
display: block;
color: $text-primary;
margin-bottom: $spacing-07;
@include type-style('fluid-heading-03', true);
}
- :host(#{$c4d-prefix}-content-item-horizontal-media-copy)
- ::slotted(:not([slot])) {
- margin-bottom: $spacing-07;
+ :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])) {
max-width: rem(640px);
p {
color: $text-primary;
}
}
- :host(#{$c4d-prefix}-content-item-horizontal-media-video) {
+ :host(#{$c4d-prefix}-content-item-row-media-video) {
position: relative;
text-align: left;
}
- :host(#{$c4d-prefix}-content-item-horizontal-media)
- .#{$prefix}--content-item__cta,
- :host(#{$c4d-prefix}-content-item-horizontal-media-featured)
- .#{$prefix}--content-item__cta,
- .#{$prefix}--content-item-horizontal__item--cta {
+ :host(#{$c4d-prefix}-content-item-row-media) .#{$prefix}--content-item__cta,
+ :host(#{$c4d-prefix}-content-item-row-media-featured)
+ .#{$prefix}--content-item__cta {
margin-top: auto;
- margin-bottom: $spacing-07;
.#{$prefix}--link-list {
padding: 0;
@@ -96,7 +97,7 @@
}
}
- .#{$prefix}--content-item-horizontal__row {
+ .#{$prefix}--content-item-row__row {
width: 100%;
display: grid;
grid-auto-flow: dense;
@@ -107,7 +108,7 @@
grid-template-columns: repeat(12, 1fr);
}
- .#{$prefix}--content-item-horizontal__col {
+ .#{$prefix}--content-item-row__col {
text-align: left;
grid-column: 1 / span 4;
@@ -123,8 +124,8 @@
}
}
- &.#{$prefix}--content-item-horizontal-media__align-left {
- .#{$prefix}--content-item-horizontal__col {
+ &.#{$prefix}--content-item-row-media__align-left {
+ .#{$prefix}--content-item-row__col {
&:first-of-type {
@include breakpoint(lg) {
margin-inline-end: 0;
@@ -142,7 +143,7 @@
}
}
- :host(#{$c4d-prefix}-content-item-horizontal-media-featured) {
+ :host(#{$c4d-prefix}-content-item-row-media-featured) {
display: block;
position: relative;
padding-block-start: $spacing-07;
@@ -158,8 +159,8 @@
background-color: $layer-accent-01;
}
- .#{$prefix}--content-item-horizontal__row {
- .#{$prefix}--content-item-horizontal__col {
+ .#{$prefix}--content-item-row__row {
+ .#{$prefix}--content-item-row__col {
&:last-of-type {
@include breakpoint-down(md) {
margin-block-start: 0;
@@ -170,10 +171,17 @@
::slotted([slot='media']) {
grid-column: 1 / span 4;
+ margin-top: $spacing-07;
+
+ @include breakpoint(md) {
+ margin-top: $spacing-09;
+ }
+
@include breakpoint(lg) {
grid-column: 1 / span 12;
}
}
+
::slotted(#{$c4d-prefix}-image) {
max-width: none;
margin-top: 0;
diff --git a/packages/styles/scss/components/content-item-horizontal/_index.scss b/packages/styles/scss/components/content-item-row-media/_index.scss
similarity index 58%
rename from packages/styles/scss/components/content-item-horizontal/_index.scss
rename to packages/styles/scss/components/content-item-row-media/_index.scss
index c7f9d4f0794..7398bdaa295 100644
--- a/packages/styles/scss/components/content-item-horizontal/_index.scss
+++ b/packages/styles/scss/components/content-item-row-media/_index.scss
@@ -5,7 +5,7 @@
// LICENSE file in the root directory of this source tree.
//
-@forward 'content-item-horizontal';
-@use 'content-item-horizontal';
+@forward 'content-item-row-media';
+@use 'content-item-row-media';
-@include content-item-horizontal.content-item-horizontal;
+@include content-item-row-media.content-item-row-media;
diff --git a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss
similarity index 54%
rename from packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss
rename to packages/styles/scss/components/content-item-row/_content-item-row.scss
index 7a19e83ff29..63613781593 100644
--- a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss
+++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss
@@ -10,20 +10,17 @@
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../link-list';
-@mixin content-item-horizontal {
- // Web component
- :host(#{$c4d-prefix}-content-item-horizontal),
- // React
- .#{$prefix}--content-item-horizontal__item {
+@mixin content-item-row {
+ :host(#{$c4d-prefix}-content-item-row) {
@include make-row;
border-top: 1px solid $layer-accent-01;
- padding-left: $spacing-05;
- padding-right: $spacing-05;
+ margin: 0;
@include breakpoint(sm) {
padding-top: $spacing-07;
@@ -34,27 +31,9 @@
padding-top: $spacing-07;
padding-bottom: $spacing-10;
}
-
- &[thumbnail] {
- @include breakpoint(md) {
- min-height: rem(306px);
- }
-
- @include breakpoint(lg) {
- min-height: rem(272px);
- }
-
- @include breakpoint(xlg) {
- min-height: rem(252px);
- }
- }
}
- :host(#{$c4d-prefix}-content-item-horizontal) {
- margin: 0;
- }
-
- .#{$prefix}--content-item-horizontal__row {
+ .#{$prefix}--content-item-row__row {
min-height: $spacing-13;
width: 100%;
display: flex;
@@ -63,16 +42,13 @@
flex-direction: row;
}
- :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+ :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
justify-content: space-between;
min-height: auto;
}
}
- .#{$prefix}--content-item-horizontal__col {
- // React styles - only accounting for the default variation
- @include make-col-ready;
-
+ .#{$prefix}--content-item-row__col {
// Web component layout styles - accommodating the thumbnail variation
&--1,
&--2 {
@@ -90,7 +66,7 @@
width: auto;
}
- :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+ :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
@include breakpoint(md) {
@include make-col(4, 8);
}
@@ -115,7 +91,7 @@
grid-column: 9 / span 4;
grid-row: 1 / span 1;
}
- :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+ :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
@include breakpoint(md) {
@include make-col(3, 8);
}
@@ -127,13 +103,9 @@
}
}
- // Web component
- .#{$prefix}--content-item-horizontal__heading-wrapper,
- .#{$prefix}--content-item-horizontal__content-wrapper,
- // React
- .#{$prefix}--content-item-horizontal__col:first-of-type,
- .#{$prefix}--content-item-horizontal__col:last-of-type {
- :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] & {
+ .#{$prefix}--content-item-row__heading-wrapper,
+ .#{$prefix}--content-item-row__content-wrapper {
+ :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
@include make-col(4, 4);
@include breakpoint(lg) {
@@ -142,10 +114,11 @@
}
}
- // Web component
- .#{$prefix}--content-item-horizontal__heading-wrapper,
- // React
- .#{$prefix}--content-item-horizontal__col:first-of-type {
+ .#{$prefix}--content-item-row__heading-wrapper {
+ grid-column: 1 / span 4;
+ padding-left: 0;
+ padding-right: 0;
+
@include breakpoint(md) {
@include make-col(6, 12);
}
@@ -154,30 +127,23 @@
}
}
- // Web component
- .#{$prefix}--content-item-horizontal__content-wrapper,
- // React
- .#{$prefix}--content-item-horizontal__col:last-of-type {
+ .#{$prefix}--content-item-row__content-wrapper {
+ box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
+ grid-column: 1 / span 4;
@include breakpoint(lg) {
@include make-col(8, 12);
display: flex;
- }
- }
-
- .#{$prefix}--content-item-horizontal__content-wrapper {
- grid-column: 1 / span 4;
- @include breakpoint(lg) {
grid-column: 5 / span 4;
padding-left: $spacing-04;
}
}
- .#{$prefix}--content-item-horizontal__content-wrapper_with-media {
+ .#{$prefix}--content-item-row__content-wrapper_with-media {
width: 100%;
@include breakpoint(lg) {
@include make-col(8, 12);
@@ -186,35 +152,26 @@
}
}
- :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='media']) {
+ :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='media']) {
display: block;
padding-top: $spacing-07;
- }
-
- :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='heading']),
- :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])),
- :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
- .#{$prefix}--content-item-horizontal__item--eyebrow,
- .#{$prefix}--content-item-horizontal__item--heading,
- .#{$prefix}--content-item-horizontal__item--copy {
@include breakpoint(md) {
- max-width: 90%;
+ padding-top: $spacing-09;
}
}
- :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])) {
+ :host(#{$c4d-prefix}-content-item-row-copy) ::slotted(:not([slot])) {
max-width: rem(640px);
}
- :host(#{$c4d-prefix}-content-item-horizontal-eyebrow),
- .#{$prefix}--content-item-horizontal__item--eyebrow {
+ :host(#{$c4d-prefix}-content-item-row-eyebrow) {
+ display: block;
color: $text-helper;
padding-bottom: $spacing-03;
@include type-style('label-02');
}
- :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='heading']),
- .#{$prefix}--content-item-horizontal__item--heading {
+ :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='heading']) {
display: block;
color: $text-primary;
margin-bottom: $spacing-07;
@@ -230,27 +187,34 @@
}
}
- :host(#{$c4d-prefix}-content-item-horizontal)[thumbnail] {
+ :host(#{$c4d-prefix}-content-item-row)[thumbnail] {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
@include breakpoint(md) {
+ min-height: rem(306px);
grid-template-columns: repeat(8, 1fr);
column-gap: $spacing-07;
}
+
@include breakpoint(lg) {
+ min-height: rem(272px);
grid-template-columns: repeat(12, 1fr);
}
+
+ @include breakpoint(xlg) {
+ min-height: rem(252px);
+ }
}
- :host(#{$c4d-prefix}-content-item-horizontal[thumbnail])
- .#{$prefix}--content-item-horizontal__heading-wrapper {
+ :host(#{$c4d-prefix}-content-item-row[thumbnail])
+ .#{$prefix}--content-item-row__heading-wrapper {
max-width: 100%;
}
- :host(#{$c4d-prefix}-content-item-horizontal[thumbnail])
- .#{$prefix}--content-item-horizontal__content-wrapper {
+ :host(#{$c4d-prefix}-content-item-row[thumbnail])
+ .#{$prefix}--content-item-row__content-wrapper {
@include breakpoint-down(md) {
margin-bottom: $spacing-07;
}
@@ -259,8 +223,8 @@
padding-left: 0;
}
- :host(#{$c4d-prefix}-content-item-horizontal[thumbnail]) {
- .#{$prefix}--content-item-horizontal__body-wrapper {
+ :host(#{$c4d-prefix}-content-item-row[thumbnail]) {
+ .#{$prefix}--content-item-row__body-wrapper {
grid-column: 1 / span 4;
max-width: 100%;
@@ -269,7 +233,7 @@
display: contents;
}
}
- .#{$prefix}--content-item-horizontal__col--2 {
+ .#{$prefix}--content-item-row__col--2 {
max-width: 100%;
grid-column: 1 / span 4;
@include breakpoint(md) {
@@ -281,24 +245,7 @@
}
}
- .#{$prefix}--content-item-horizontal__heading-wrapper {
- grid-column: 1 / span 4;
- padding-left: 0;
- padding-right: 0;
- }
-
- :host(#{$c4d-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])),
- .#{$prefix}--content-item-horizontal__item--copy {
- margin-bottom: $spacing-07;
- }
-
- :host(#{$c4d-prefix}-content-item-horizontal-thumbnail-copy)
- ::slotted(#{$c4d-prefix}-content-item-paragraph) {
- margin-bottom: $spacing-07;
- }
-
- :host(#{$c4d-prefix}-content-item-horizontal) .#{$prefix}--content-item__cta,
- .#{$prefix}--content-item-horizontal__item--cta {
+ :host(#{$c4d-prefix}-content-item-row) .#{$prefix}--content-item__cta {
.#{$prefix}--link-list {
padding: 0;
@@ -312,7 +259,7 @@
}
}
- :host(#{$c4d-prefix}-content-item-horizontal) ::slotted([slot='thumbnail']) {
+ :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='thumbnail']) {
@include breakpoint(md) {
@include make-col(3, 3);
diff --git a/packages/styles/scss/components/content-item-horizontal-media/_index.scss b/packages/styles/scss/components/content-item-row/_index.scss
similarity index 54%
rename from packages/styles/scss/components/content-item-horizontal-media/_index.scss
rename to packages/styles/scss/components/content-item-row/_index.scss
index 78cf2edae1d..1cb41ca9bdc 100644
--- a/packages/styles/scss/components/content-item-horizontal-media/_index.scss
+++ b/packages/styles/scss/components/content-item-row/_index.scss
@@ -5,7 +5,7 @@
// LICENSE file in the root directory of this source tree.
//
-@forward 'content-item-horizontal-media';
-@use 'content-item-horizontal-media';
+@forward 'content-item-row';
+@use 'content-item-row';
-@include content-item-horizontal-media.content-item-horizontal-media;
+@include content-item-row.content-item-row;
diff --git a/packages/styles/scss/ibm-dotcom-styles.scss b/packages/styles/scss/ibm-dotcom-styles.scss
index b154395c8c7..756e579f7db 100644
--- a/packages/styles/scss/ibm-dotcom-styles.scss
+++ b/packages/styles/scss/ibm-dotcom-styles.scss
@@ -30,7 +30,7 @@
@use 'components/content-group-cards';
@use 'components/content-group-pictograms';
@use 'components/content-group-simple';
-@use 'components/content-item-horizontal';
+@use 'components/content-item-row';
@use 'components/cta-section';
@use 'components/dotcom-shell';
@use 'components/expressive-modal';
diff --git a/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss b/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss
deleted file mode 100644
index d01c0a726c4..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/button-group/_button-group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/button-group/button-group"
-
-@warn 'Deprecated scss import for `buttongroup`, remap to `@carbon/ibmdotcom-styles/scss/components/button-group/button-group`';
-@use '../../../components/button-group';
diff --git a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss b/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss
deleted file mode 100644
index a7be8865100..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout/callout"
-
-@warn 'Deprecated scss import for `callout`, remap to `@carbon/ibmdotcom-styles/scss/components/callout/callout`';
-@use '../../../components/callout';
diff --git a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss b/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss
deleted file mode 100644
index 9422df15856..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card-group/card-group"
-
-@warn 'Deprecated scss import for `card-group`, remap to `@carbon/ibmdotcom-styles/scss/components/card-group/card-group`';
-@use '../../../components/card-group';
diff --git a/packages/styles/scss/patterns/sub-patterns/card/index.css b/packages/styles/scss/patterns/sub-patterns/card/index.css
deleted file mode 100644
index a95c660e10c..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card/index.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Error: @use rules must be written before any other rules.
- * ,
- * 11 | @use '../../../components/card';
- * | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- * '
- * scss/patterns/sub-patterns/card/index.scss 11:1 root stylesheet */
-
-body::before {
- font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono',
- 'Droid Sans Mono', monospace;
- white-space: pre;
- display: block;
- padding: 1em;
- margin-bottom: 1em;
- border-bottom: 2px solid #000000;
- content: "Error: @use rules must be written before any other rules.\a \2577 \a 11 \2502 @use '../../../components/card';\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a scss/patterns/sub-patterns/card/index.scss 11:1 root stylesheet";
-}
diff --git a/packages/styles/scss/patterns/sub-patterns/card/index.scss b/packages/styles/scss/patterns/sub-patterns/card/index.scss
deleted file mode 100644
index 7c3ea95c16d..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card/index"
-
-@warn 'Deprecated scss import for `card`, remap to `@carbon/ibmdotcom-styles/scss/components/card/index`';
-@use '../../../components/card';
diff --git a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss
deleted file mode 100644
index 183a523bc7e..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal"
-
-@warn 'Deprecated scss import for `content-item-horizontal`, remap to `@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal`';
-@use '../../../components/content-item-horizontal';
diff --git a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss b/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss
deleted file mode 100644
index f512c3978a8..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card"
-
-@warn 'Deprecated scss import for `feature-card`, remap to `@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card`';
-@use '../../../components/feature-card';
diff --git a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss b/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss
deleted file mode 100644
index 571e7e1be99..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/layout/layout"
-
-@warn 'Deprecated scss import for `layout`, remap to `@carbon/ibmdotcom-styles/scss/components/layout/layout`';
-@use '../../../components/layout';
diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss b/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss
deleted file mode 100644
index b9aa902c4ee..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/link-list/_index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/index"
-
-@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/index`';
-@use '../../../components/link-list';
diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss b/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss
deleted file mode 100644
index 79b1019ecf9..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/link-list"
-
-@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/link-list`';
-@use '../../../components/link-list';
diff --git a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss b/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss
deleted file mode 100644
index b0b03f3040a..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item"
-
-@warn 'Deprecated scss import for `pictogram-item`, remap to `@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item`';
-@use '../../../components/pictogram-item';
diff --git a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss b/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss
deleted file mode 100644
index 88a45096c3b..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/quote/quote"
-
-@warn 'Deprecated scss import for `quote`, remap to `@carbon/ibmdotcom-styles/scss/components/quote/quote`';
-@use '../../../components/quote';
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss
deleted file mode 100644
index 55e7f29d699..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents"
-
-@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents`';
-@use '../../../components/tableofcontents';
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css b/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css
deleted file mode 100644
index 22e6e4b8490..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Error: @use rules must be written before any other rules.
- * ,
- * 11 | @use '../../../components/tableofcontents';
- * | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
- * '
- * scss/patterns/sub-patterns/tableofcontents/index.scss 11:1 root stylesheet */
-
-body::before {
- font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono',
- 'Droid Sans Mono', monospace;
- white-space: pre;
- display: block;
- padding: 1em;
- margin-bottom: 1em;
- border-bottom: 2px solid #000000;
- content: "Error: @use rules must be written before any other rules.\a \2577 \a 11 \2502 @use '../../../components/tableofcontents';\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a scss/patterns/sub-patterns/tableofcontents/index.scss 11:1 root stylesheet";
-}
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss
deleted file mode 100644
index 9466d096c1a..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/index"
-
-@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/index`';
-@use '../../../components/tableofcontents';
diff --git a/packages/web-components/carbon.yml b/packages/web-components/carbon.yml
index 038a73f7b00..dccec94392b 100644
--- a/packages/web-components/carbon.yml
+++ b/packages/web-components/carbon.yml
@@ -231,15 +231,15 @@ assets:
name: Storybook
action: link
url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item
- content-item-horizontal:
- externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
+ content-item-row:
+ externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row
status: stable
framework: web-component
demoLinks:
- type: storybook
name: Storybook
action: link
- url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-horizontal
+ url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-row
content-section:
externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-section
status: stable
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
index 5ce319fb9c9..cf7379a9f70 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
@@ -12,9 +12,9 @@ import { render } from 'react-dom';
import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -24,10 +24,10 @@ import './index.css';
const App = () => (
Lorem ipsum dolor sit amet
-
- Lorem ipsum
+
+ Lorem ipsumAliquam condimentum
- Lorem ipsum dolor sit amet
+ Lorem ipsum dolor sit amet
Link text
@@ -36,7 +36,7 @@ const App = () => (
External link text
-
+
);
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components-react/content-item-row/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
similarity index 92%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
index 6bc3a4895c9..2aad58bdf43 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json
+++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
@@ -1,5 +1,5 @@
{
- "name": "ibmdotcom-web-components-react-content-item-horizontal-example",
+ "name": "ibmdotcom-web-components-react-content-item-row-example",
"version": "0.1.0",
"private": true,
"description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
similarity index 68%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
index 203532008d4..8804b9ac8d5 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
@@ -10,11 +10,11 @@
import React from 'react';
import { render } from 'react-dom';
// eslint-disable-next-line max-len
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
// eslint-disable-next-line max-len
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
// eslint-disable-next-line max-len
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -22,13 +22,13 @@ import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-r
import './index.css';
const App = () => (
-
- Lorem ipsum
+
+ Lorem ipsumAliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
Phasellus at elit sollicitudin.
-
+
Learn more
@@ -37,7 +37,7 @@ const App = () => (
Microservices and containers
-
+
);
render(, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
index e7a677e1b2b..786f14d209b 100644
--- a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
@@ -14,9 +14,9 @@ import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-ex
/* eslint-disable max-len */
import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
/* eslint-disable max-len */
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
/* eslint-disable max-len */
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -28,16 +28,16 @@ const App = () => (
Section heading
-
+ Aliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
hendrerit. Phasellus at elit sollicitudin.
-
+
Learn more
@@ -46,19 +46,19 @@ const App = () => (
Microservices and containers
-
+
-
+ Aliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
hendrerit. Phasellus at elit sollicitudin.
-
+
Learn more
@@ -67,19 +67,19 @@ const App = () => (
Microservices and containers
-
+
-
+ Aliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
hendrerit. Phasellus at elit sollicitudin.
-
+
Learn more
@@ -88,19 +88,19 @@ const App = () => (
Microservices and containers
-
+
-
+ Aliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
hendrerit. Phasellus at elit sollicitudin.
-
+
Learn more
@@ -109,7 +109,7 @@ const App = () => (
Microservices and containers
-
+
);
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc b/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc
rename to packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore
rename to packages/web-components/examples/codesandbox/components/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc b/packages/web-components/examples/codesandbox/components/content-item-row/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc
rename to packages/web-components/examples/codesandbox/components/content-item-row/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
similarity index 53%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html
rename to packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
index 8d26f947b36..7d8b099ea65 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
@@ -13,61 +13,61 @@
-
+
-
- Lorem ipsum
- Aliquam condimentum
-
-
+ Lorem ipsum
+ Aliquam condimentum
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
- dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
+
+
+
-
- Lorem ipsum
- Aliquam condimentum
-
-
+
+ Lorem ipsum
+ Aliquam condimentum
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
-
+
+
+
+
Link text
-
-
+
+
External link text
-
-
-
+
+
-
-
+
+
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-item-row/index.html
similarity index 54%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
rename to packages/web-components/examples/codesandbox/components/content-item-row/index.html
index 745cf96a184..80ae8630bdf 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/index.html
@@ -14,7 +14,7 @@
@@ -25,50 +25,50 @@
-
- Lorem ipsum
- Aliquam condimentum
-
-
+ Lorem ipsum
+ Aliquam condimentum
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
- dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
+
+
+
-
- Lorem ipsum
- Aliquam condimentum
-
-
+
+ Lorem ipsum
+ Aliquam condimentum
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
-
+
+
+
+
Link text
-
-
+
+
External link text
-
-
-
+
+
-
-
+
+
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components/content-item-row/package.json
similarity index 90%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json
rename to packages/web-components/examples/codesandbox/components/content-item-row/package.json
index 2fe46f91812..2b8d3dc18a8 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/package.json
@@ -1,5 +1,5 @@
{
- "name": "ibmdotcom-web-components-content-item-horizontal-example",
+ "name": "ibmdotcom-web-components-content-item-row-example",
"version": "0.1.0",
"private": true,
"description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
similarity index 91%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js
rename to packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
index cba9c470fd0..a7ed26d4367 100644
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
@@ -7,5 +7,5 @@
* LICENSE file in the root directory of this source tree.
*/
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss
rename to packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-item/cdn.html b/packages/web-components/examples/codesandbox/components/content-item/cdn.html
index 1ab27adf701..d8bd3f9a2a4 100644
--- a/packages/web-components/examples/codesandbox/components/content-item/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-item/cdn.html
@@ -13,7 +13,7 @@
@@ -24,11 +24,11 @@
-
- Heading
- Copy
- CTA text
-
+
+ Heading
+ Copy
+ CTA text
+
-
- Section heading
-
-
-
+ Section heading
+
+
+
-
- Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+
+ Aliquam condimentum
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
-
-
-
-
+
+
+
+
+
+
-
- Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+
+ Aliquam condimentum
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
-
-
-
-
+
+
+
+
+
+
-
- Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+
+ Aliquam condimentum
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
-
-
+
+
+
+
+
-
- Section heading
-
-
-
+ Section heading
+
+
+
-
- Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+
+ Aliquam condimentum
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
-
-
-
-
+
+
+
+
+
+
-
- Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+
+ Aliquam condimentum
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
-
-
-
-
+
+
+
+
+
+
-
- Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+
+ Aliquam condimentum
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
-
-
-
-
+
+
+
+
+
+
-
- Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+
+ Aliquam condimentum
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
dolor nec hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
+
Link text
-
-
+
+
External link text
-
-
-
-
-
-
-
+
+
+
+
+
+
- Aliquam condimentum
+ Aliquam condimentum
- Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
hendrerit. Phasellus at elit sollicitudin.
-
-
-
+
+
Link text
-
-
+
External link text
-
-
-
-
-
+
+
+
+
+
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
index 09cf443aff8..c3fc8563ea9 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
@@ -8,6 +8,6 @@
*/
import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index.js';
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
import './index.scss';
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
index b9094f711b7..115d911fdbd 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
@@ -6,7 +6,7 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
# ``
> The Content Block - Horizontal block pattern contains a collection of
-> `` content items.
+> `` content items.
> 💡 Check our
> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-horizontal)
@@ -37,15 +37,15 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-horizontal/
Curabitur malesuada varius mi eu posuere
-
- Lorem ipsum
+ Lorem ipsumAliquam condimentum
- Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
- sollicitudin.
-
+
```
@@ -81,7 +81,7 @@ to see how Web Components selector and `data-autoid` should be used.
| ------------------------------------ | ------------------------------------------------- | ----------- |
| `` | `data-autoid="cds--content-block-simple"` | Component |
| `` | `data-autoid="cds--content-block__heading"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component |
+| `` | `data-autoid="cds--content-item-row"` | Component |
+| `` | `data-autoid="cds--content-item-row-copy"` | Component |
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
index 81ca31960ef..8b958115da5 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
@@ -25,9 +25,9 @@ Here's a quick example to get you started.
import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -38,12 +38,12 @@ function App() {
Lorem ipsum dolor sit amet
-
-
+
+
Lorem ipsum
-
+
Aliquam condimentum
- {copy}
+ {copy}
-
+
);
}
@@ -78,7 +78,7 @@ to see how Web Components selector and `data-autoid` should be used.
| ------------------------------------ | ------------------------------------------------- | ----------- |
| `` | `data-autoid="cds--content-block-simple"` | Component |
| `` | `data-autoid="cds--content-block__heading"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component |
+| `` | `data-autoid="cds--content-item-row"` | Component |
+| `` | `data-autoid="cds--content-item-row-copy"` | Component |
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
index 048a95e6d65..18fe807110b 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
@@ -16,9 +16,9 @@ import React from 'react';
import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -32,12 +32,12 @@ const copy =
'Phasellus at elit sollicitudin.';
const linkListItem = (
-
-
+
+
Lorem ipsum
-
+
Aliquam condimentum
- {copy}
+ {copy}
-
+
);
export const Default = (args) => {
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
index d12fe89c6ff..776b615a804 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
@@ -19,12 +19,10 @@ const copy =
'Phasellus at elit sollicitudin.';
const linkListItem = html`
-
- Lorem ipsum
+
+ Lorem ipsumAliquam condimentum
- ${copy}
+ ${copy}
-
+
`;
export const Default = (args) => {
diff --git a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
index 18b379c3b2c..53a6e189308 100644
--- a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
+++ b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
@@ -8,9 +8,9 @@
*/
import { html, render } from 'lit/html.js';
-import '../../content-item-horizontal/content-item-horizontal';
-import '../../content-item-horizontal/content-item-horizontal-copy';
-import '../../content-item-horizontal/content-item-horizontal-eyebrow';
+import '../../content-item-row/content-item-row';
+import '../../content-item-row/content-item-row-copy';
+import '../../content-item-row/content-item-row-eyebrow';
import '../content-block-horizontal';
import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
import { CTA_TYPE } from '../../cta/defs';
@@ -36,10 +36,10 @@ describe('c4d-content-block-horizontal', function () {
render(
template({
children: html`
-
- eyebrow-foo
+
+ eyebrow-fooheading-foo
- copy-foo
+ copy-foo
-
+
`,
}),
document.body
diff --git a/packages/web-components/src/components/content-block-horizontal/index.ts b/packages/web-components/src/components/content-block-horizontal/index.ts
index 19573b3c64c..e7a8801faeb 100644
--- a/packages/web-components/src/components/content-block-horizontal/index.ts
+++ b/packages/web-components/src/components/content-block-horizontal/index.ts
@@ -10,4 +10,4 @@
import './content-block-horizontal';
import '../content-block/content-block-heading';
import '../content-block/content-block-complementary';
-import '../content-item-horizontal/index';
+import '../content-item-row/index';
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss
deleted file mode 100644
index e2b3a668153..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// 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.
-//
-
-@use '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal';
-@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
-
-:host(#{$c4d-prefix}-content-item-horizontal-eyebrow) {
- display: block;
-}
diff --git a/packages/web-components/src/components/content-item-horizontal/index.ts b/packages/web-components/src/components/content-item-horizontal/index.ts
deleted file mode 100644
index 8a29626cac0..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './content-item-horizontal';
-import './content-item-horizontal-copy';
-import './content-item-horizontal-eyebrow';
-import './content-item-horizontal-media';
-import './content-item-horizontal-media-copy';
-import './content-item-horizontal-media-video';
-import './content-item-horizontal-thumbnail-copy';
-import './content-item-horizontal-media-featured';
-import '../content-item/content-item-heading';
-import '../cta/index';
-import '../link-list/link-list';
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
similarity index 73%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx
rename to packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
index ef15dff2e12..66fe0b1d98f 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
@@ -3,13 +3,13 @@ import markdownContents from '../../../../docs/markdown-contents.md';
import contributing from '../../../../../../docs/contributing-license.md';
import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-# ``
+# ``
> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal)
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row)
> example implementation.
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal)
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row)
## Getting started
@@ -18,11 +18,11 @@ Here's a quick example to get you started.
### JS (via import)
```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
```
@@ -30,15 +30,15 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i
### HTML
```html
-
- Lorem ipsum
+ Lorem ipsumAliquam condimentum
- Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
- sollicitudin.
-
+
```
### HTML (with thumbnail)
```html
-
+ Aliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
sollicitudin.
-
+
-
+
```
## With Media (image)
@@ -93,7 +93,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/i
### JS (via import)
```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
// with Image
import '@carbon/ibmdotcom-web-components/es/components/image/image';
@@ -102,11 +102,11 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
### HTML
```html
-
+Lorem Ipsum
- Lorem IpsumLorem Ipsum
-
+
```
## With Media (video)
@@ -130,21 +130,21 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
### JS (via import)
```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
// with Video
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video';
```
### HTML
```html
-
-
+
+ Lorem Ipsum
- Lorem IpsumLorem Ipsum
-
+
```
## With Featured Media (image)
@@ -168,7 +168,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/c
### JS (via import)
```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
// with Image
import '@carbon/ibmdotcom-web-components/es/components/image/image';
@@ -177,16 +177,16 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
### HTML
```html
-
- Lorem ipsum
+ Lorem ipsumAliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
sollicitudin.
-
+
-
+
```
## With Featured Media (video)
@@ -210,25 +210,25 @@ import '@carbon/ibmdotcom-web-components/es/components/image/image';
### JS (via import)
```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
// with Video
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video';
```
### HTML
```html
-
- Lorem ipsum
+ Lorem ipsumAliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
sollicitudin.
-
+
-
-
+
+
```
## Props
-
+
## Stable selectors
@@ -261,10 +261,10 @@ to see how Web Components selector and `data-autoid` should be used.
| Web Components selector | Compatibility selector | Description |
| ------------------------------------- | -------------------------------------------------- | ----------- |
-| `` | `data-autoid="cds--content-item-horizontal"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-media"` | Component |
+| `` | `data-autoid="cds--content-item-row"` | Component |
+| `` | `data-autoid="cds--content-item-row-media"` | Component |
| `` | `data-autoid="cds--content-item-heading"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component |
+| `` | `data-autoid="cds--content-item-row-copy"` | Component |
| `` | `data-autoid="cds--link-list"` | Component |
| `` | `data-autoid="cds--link-list-item-cta"` | Component |
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
similarity index 60%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx
rename to packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
index 4d07ae92201..33560804674 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
@@ -5,15 +5,15 @@ import {
Story,
} from '@storybook/addon-docs/blocks';
import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
+import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
-# Content Item Horizontal
+# Content Item Row
> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal)
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row)
> example implementation.
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal)
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row)
## Getting started
@@ -22,25 +22,25 @@ Here's a quick example to get you started.
### JS
```javascript
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
function App() {
return (
-
-
+
+
Lorem ipsum
-
+
Aliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
elit sollicitudin.
-
+
-
+
);
}
```
@@ -63,8 +63,8 @@ function App() {
### JS (with thumbnail)
```javascript
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import C4DContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -72,13 +72,13 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image
function App() {
return (
-
+ Aliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
elit sollicitudin.
-
+
-
+
);
}
```
@@ -106,8 +106,8 @@ function App() {
### JS (with media - image)
```javascript
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -115,16 +115,16 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image
function App() {
return (
-
+ Aliquam condimentum
-
+
Lorem Ipsum
-
+
-
+
);
}
```
@@ -147,21 +147,21 @@ function App() {
### JS (with media - video)
```javascript
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
-import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
function App() {
return (
-
-
+
+ Aliquam condimentum
-
+
Lorem Ipsum
-
+
-
+
);
}
```
@@ -184,9 +184,9 @@ function App() {
### JS (with featured media - image)
```javascript
-import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
@@ -194,12 +194,12 @@ import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image
function App() {
return (
-
- Lorem ipsum
+
+ Lorem ipsumAliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-
+
Learn more
@@ -209,7 +209,7 @@ function App() {
-
+
);
}
```
@@ -217,22 +217,22 @@ function App() {
### JS (with featured media - video)
```javascript
-import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
function App() {
return (
-
- Lorem ipsum
+
+ Lorem ipsumAliquam condimentum
-
+
Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-
+
Learn more
@@ -241,8 +241,8 @@ function App() {
Microservices and containers
-
-
+
+
);
}
```
@@ -259,13 +259,13 @@ to see how Web Components selector and `data-autoid` should be used.
| Web Components selector | Compatibility selector | Description |
| ---------------------------------------------- | ----------------------------------------------------------- | ----------- |
-| `` | `data-autoid="cds--content-item-horizontal"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-copy"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-eyebrow"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-media"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-media-copy"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-media-video"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-media-featured"` | Component |
-| `` | `data-autoid="cds--content-item-horizontal-thumbnail-copy"` | Component |
+| `` | `data-autoid="cds--content-item-row"` | Component |
+| `` | `data-autoid="cds--content-item-row-copy"` | Component |
+| `` | `data-autoid="cds--content-item-row-eyebrow"` | Component |
+| `` | `data-autoid="cds--content-item-row-media"` | Component |
+| `` | `data-autoid="cds--content-item-row-media-copy"` | Component |
+| `` | `data-autoid="cds--content-item-row-media-video"` | Component |
+| `` | `data-autoid="cds--content-item-row-media-featured"` | Component |
+| `` | `data-autoid="cds--content-item-row-thumbnail-copy"` | Component |
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
similarity index 68%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx
rename to packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
index adf6d36bd05..a24bf2efd7b 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx
+++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
@@ -12,28 +12,28 @@ import { select } from '@storybook/addon-knobs';
// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
/* eslint-disable max-len */
// @ts-ignore
-import C4DContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy';
+import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy';
// @ts-ignore
import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
// @ts-ignore
@@ -76,15 +76,15 @@ id est laborum.`;
export const Default = (args) => {
const { eyebrow, heading, copy, withMedia } =
- args?.ContentItemHorizontal ?? {};
+ args?.ContentItemRow ?? {};
return (
-
-
+
+
{eyebrow}
-
+
{heading}
- {copy}
+ {copy}
Learn more
@@ -97,19 +97,19 @@ export const Default = (args) => {
''
)}
{withMedia === MEDIA_TYPE.VIDEO ? (
-
+
) : (
''
)}
-
+
);
};
Default.story = {
parameters: {
- gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+ gridContentClasses: 'cds--col-lg-12',
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
withMedia: select('Media type', { ...mediaType, None: null }, null),
@@ -120,13 +120,13 @@ Default.story = {
};
export const withThumbnail = (args) => {
- const { alt, heading, copy } = args?.ContentItemHorizontal ?? {};
+ const { alt, heading, copy } = args?.ContentItemRow ?? {};
return (
-
+ {heading}
-
+
{copy}
-
+
Learn more
@@ -134,16 +134,16 @@ export const withThumbnail = (args) => {
slot="thumbnail"
alt={alt || undefined}
default-src={imgMd4x3}>
-
+
);
};
withThumbnail.story = {
name: 'With thumbnail',
parameters: {
- gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+ gridContentClasses: 'cds--col-lg-12',
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
copy: shortBodyCopy,
alt: textNullable('Image alt text', 'Image alt text'),
@@ -154,9 +154,9 @@ withThumbnail.story = {
export const withMedia = (args) => {
const { align, type, alt, heading, eyebrow, copy } =
- args?.ContentItemHorizontal ?? {};
+ args?.ContentItemRow ?? {};
return (
-
+
{type === MEDIA_TYPE.IMAGE ? (
{
''
)}
{type === MEDIA_TYPE.VIDEO ? (
-
+
) : (
''
)}
-
+
{eyebrow}
-
+
{heading}
-
+
{copy}
-
+
Learn more
-
+
);
};
withMedia.story = {
name: 'With media',
parameters: {
- gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+ gridContentClasses: 'cds--col-lg-12',
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
alt: textNullable('Image alt text', 'Image alt text'),
@@ -202,9 +202,9 @@ withMedia.story = {
};
export const withFeaturedMedia = (args) => {
- const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {};
+ const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {};
return (
-
+
{type === MEDIA_TYPE.IMAGE ? (
{
''
)}
{type === MEDIA_TYPE.VIDEO ? (
-
+
) : (
''
)}
-
+
{eyebrow}
-
+
{heading}
-
+
{copy}
-
+
Learn more
-
+
);
};
@@ -238,7 +238,7 @@ withFeaturedMedia.story = {
parameters: {
gridContentClasses: 'cds--col-lg-12',
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
heading: textNullable('Heading:', 'Aliquam condimentum'),
@@ -249,7 +249,7 @@ withFeaturedMedia.story = {
};
export default {
- title: 'Components/Content item horizontal',
+ title: 'Components/Content item row',
decorators: [
(story, { parameters }) => {
return (
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
similarity index 74%
rename from packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts
rename to packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
index cb29f01d538..46c5aa88341 100644
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts
+++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
@@ -13,7 +13,7 @@ import { select } from '@storybook/addon-knobs';
import readme from './README.stories.mdx';
import textNullable from '../../../../.storybook/knob-text-nullable';
import '../index';
-import '../content-item-horizontal-media-video';
+import '../content-item-row-media-video';
import '../../image/image';
import { MEDIA_ALIGN, MEDIA_TYPE } from '../defs';
import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
@@ -47,17 +47,12 @@ dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
id est laborum.`;
export const Default = (args) => {
- const { eyebrow, heading, copy, withMedia } =
- args?.ContentItemHorizontal ?? {};
+ const { eyebrow, heading, copy, withMedia } = args?.ContentItemRow ?? {};
return html`
-
- ${eyebrow}
+
+ ${eyebrow}${heading}
- ${copy}
+ ${copy}Learn more
@@ -72,21 +67,21 @@ export const Default = (args) => {
: null}
${withMedia === MEDIA_TYPE.VIDEO
? html`
-
+
`
: null}
-
+
`;
};
export const WithThumbnail = (args) => {
- const { alt, heading, copy } = args?.ContentItemHorizontal ?? {};
+ const { alt, heading, copy } = args?.ContentItemRow ?? {};
return html`
-
+ ${heading}
- ${copy}${copy}
Learn more {
slot="thumbnail"
alt="${ifDefined(alt)}"
default-src="${imgMd4x3}">
-
+
`;
};
export const WithMedia = (args) => {
const { align, type, alt, heading, eyebrow, copy } =
- args?.ContentItemHorizontal ?? {};
+ args?.ContentItemRow ?? {};
return html`
-
+
${type === MEDIA_TYPE.IMAGE
? html`
{
: null}
${type === MEDIA_TYPE.VIDEO
? html`
-
+
`
: null}
- ${eyebrow}
+ ${eyebrow}${heading}
- ${copy}
+ ${copy}Learn more
-
+
`;
};
export const WithMediaFeatured = (args) => {
- const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {};
+ const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {};
return html`
-
+
${type === MEDIA_TYPE.IMAGE
? html`
{
: null}
${type === MEDIA_TYPE.VIDEO
? html`
-
+
`
: null}
- ${eyebrow}
+ ${eyebrow}${heading}
- ${copy}
+ ${copy}Learn more
-
+
`;
};
Default.story = {
parameters: {
- gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+ gridContentClasses: 'cds--col-lg-12',
},
};
WithThumbnail.story = {
name: 'With thumbnail',
parameters: {
- gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+ gridContentClasses: 'cds--col-lg-12',
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
copy: shortBodyCopy,
}),
},
propsSet: {
default: {
- ContentItemHorizontal: {
+ ContentItemRow: {
heading: 'Aliquam condimentum',
copy: shortBodyCopy,
},
@@ -196,9 +183,9 @@ WithThumbnail.story = {
WithMedia.story = {
name: 'With media',
parameters: {
- gridContentClasses: 'cds--col-lg-12 cds--no-gutter',
+ gridContentClasses: 'cds--col-lg-12',
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
@@ -208,7 +195,7 @@ WithMedia.story = {
},
propsSet: {
default: {
- ContentItemHorizontal: {
+ ContentItemRow: {
align: 'right',
type: 'image',
alt: 'Image alt text',
@@ -226,7 +213,7 @@ WithMediaFeatured.story = {
parameters: {
gridContentClasses: 'cds--col-lg-12',
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
heading: textNullable('Heading:', 'Aliquam condimentum'),
@@ -235,7 +222,7 @@ WithMediaFeatured.story = {
},
propsSet: {
default: {
- ContentItemHorizontal: {
+ ContentItemRow: {
type: 'image',
alt: 'Image alt text',
heading: 'Aliquam condimentum',
@@ -248,7 +235,7 @@ WithMediaFeatured.story = {
};
export default {
- title: 'Components/Content item horizontal',
+ title: 'Components/Content item row',
decorators: [
(story, { parameters }) => html`
@@ -262,7 +249,7 @@ export default {
...readme.parameters,
hasStoryPadding: true,
knobs: {
- ContentItemHorizontal: () => ({
+ ContentItemRow: () => ({
eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
withMedia: select('Media type', { ...mediaType, None: null }, null),
@@ -271,7 +258,7 @@ export default {
},
propsSet: {
default: {
- ContentItemHorizontal: {
+ ContentItemRow: {
eyebrow: 'Lorem ipsum',
heading: 'Aliquam condimentum',
copy: bodyCopy,
diff --git a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
similarity index 73%
rename from packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts
rename to packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
index 2141601fc31..b291793cf7b 100644
--- a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts
+++ b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
@@ -11,54 +11,48 @@ import { html, render } from 'lit/html.js';
import '../../content-item/content-item-heading';
import '../../link-list/link-list';
import '../../cta/link-list-item-cta';
-import '../content-item-horizontal';
-import '../content-item-horizontal-copy';
-import '../content-item-horizontal-eyebrow';
-import '../content-item-horizontal-thumbnail-copy';
+import '../content-item-row';
+import '../content-item-row-copy';
+import '../content-item-row-eyebrow';
+import '../content-item-row-thumbnail-copy';
import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
import { CTA_TYPE } from '../../cta/defs';
const DefaultTemplate = (props?) => {
const { children } = props ?? {};
- return html`
- ${children}
- `;
+ return html` ${children} `;
};
const WithMediaTemplate = (props?) => {
const { children } = props ?? {};
return html`
-
- ${children}
-
+ ${children}
`;
};
const WithFeaturedMediaTemplate = (props?) => {
const { children } = props ?? {};
return html`
-
+
${children}
-
+
`;
};
const WithThumbnailTemplate = (props?) => {
const { children } = props ?? {};
return html`
-
- ${children}
-
+ ${children}
`;
};
-describe('c4d-content-item-horizontal', function () {
+describe('c4d-content-item-row', function () {
describe('Misc attributes - Default', function () {
it('should render with minimum attributes', async function () {
render(DefaultTemplate(), document.body);
await Promise.resolve();
expect(
- document.body.querySelector('c4d-content-item-horizontal')
+ document.body.querySelector('c4d-content-item-row')
).toMatchSnapshot({ mode: 'shadow' });
});
@@ -67,13 +61,11 @@ describe('c4d-content-item-horizontal', function () {
DefaultTemplate({
copy: 'copy-foo',
children: html`
- eyebrow-fooeyebrow-foo
heading-foo
- copy-foo
+ copy-fooheading-foo
- copy-foocopy-foo
eyebrow-fooeyebrow-foo
heading-foo
- copy-foocopy-foo
heading-foo
- copy-foocopy-foo
`;
}
static get stableSelector() {
- return `${c4dPrefix}--content-item-horizontal-thumbnail-copy`;
+ return `${c4dPrefix}--content-item-row-copy`;
}
static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
}
/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalThumbnailCopy;
+export default C4DContentItemRowCopy;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
similarity index 71%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
index 937d912825a..28afc47219d 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
@@ -9,19 +9,19 @@
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import styles from './content-item-horizontal.scss';
+import styles from './content-item-row.scss';
import StableSelectorMixin from '../../globals/mixins/stable-selector';
import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
const { stablePrefix: c4dPrefix } = settings;
/**
- * The eyebrow content of content item horizontal.
+ * The eyebrow content of content item row.
*
- * @element c4d-content-item-horizontal-eyebrow
+ * @element c4d-content-item-row-eyebrow
*/
-@customElement(`${c4dPrefix}-content-item-horizontal-eyebrow`)
-class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-item-row-eyebrow`)
+class C4DContentItemRowEyebrow extends StableSelectorMixin(LitElement) {
/**
* The shadow slot this eyebrow content should be in.
*/
@@ -33,7 +33,7 @@ class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) {
}
static get stableSelector() {
- return `${c4dPrefix}--content-item-horizontal-eyebrow`;
+ return `${c4dPrefix}--content-item-row-eyebrow`;
}
// `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -41,4 +41,4 @@ class C4DContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) {
}
/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalEyebrow;
+export default C4DContentItemRowEyebrow;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
similarity index 70%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
index 7ed0b63294e..3b334dbeff7 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
@@ -11,18 +11,18 @@ import { html } from 'lit';
import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
import C4DContentItemCopy from '../content-item/content-item-copy';
import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './content-item-horizontal.scss';
+import styles from './content-item-row-media.scss';
import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
const { stablePrefix: c4dPrefix } = settings;
/**
- * The copy content of content item horizontal.
+ * The copy content of content item row with media.
*
- * @element c4d-content-item-horizontal-copy
+ * @element c4d-content-item-row-media-copy
*/
-@customElement(`${c4dPrefix}-content-item-horizontal-copy`)
-class C4DContentItemHorizontalCopy extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-content-item-row-media-copy`)
+class C4DContentItemRowMediaCopy extends StableSelectorMixin(
C4DContentItemCopy
) {
render() {
@@ -30,11 +30,11 @@ class C4DContentItemHorizontalCopy extends StableSelectorMixin(
}
static get stableSelector() {
- return `${c4dPrefix}--content-item-horizontal-copy`;
+ return `${c4dPrefix}--content-item-row-media-copy`;
}
static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
}
/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalCopy;
+export default C4DContentItemRowMediaCopy;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
similarity index 60%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
index 36fbe3fbe7a..ed343121bd1 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
@@ -10,42 +10,42 @@
import { html } from 'lit';
import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
import C4DContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal-media.scss';
+import styles from './content-item-row-media.scss';
import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
const { prefix, stablePrefix: c4dPrefix } = settings;
/**
- * A component to present content in a horizontal orientation with featured
+ * A component to present content in a row orientation with featured
* media beneath.
*
- * @element c4d-content-item-horizontal-media-featured
+ * @element c4d-content-item-row-media-featured
*/
-@customElement(`${c4dPrefix}-content-item-horizontal-media-featured`)
-class C4DContentItemHorizontalMediaFeatured extends C4DContentItem {
+@customElement(`${c4dPrefix}-content-item-row-media-featured`)
+class C4DContentItemRowMediaFeatured extends C4DContentItem {
render() {
return html`
-
-
+
+
-
+
${this._renderBody()} ${this._renderFooter()}
-
+
`;
}
static get stableSelector() {
- return `${c4dPrefix}-content-item-horizontal-media-featured`;
+ return `${c4dPrefix}-content-item-row-media-featured`;
}
static styles = styles;
}
/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalMediaFeatured;
+export default C4DContentItemRowMediaFeatured;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
similarity index 69%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
index 126255080ad..a150f1a9a01 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
@@ -12,17 +12,17 @@ import { property } from 'lit/decorators.js';
import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
import C4DVideoPlayerContainer from '../video-player/video-player-container';
-import styles from './content-item-horizontal-media.scss';
+import styles from './content-item-row-media.scss';
const { stablePrefix: c4dPrefix } = settings;
/**
- * The video content in horizontal content item with media.
+ * The video content in row content item with media.
*
- * @element c4d-content-item-horizontal-media-video
+ * @element c4d-content-item-row-media-video
*/
-@customElement(`${c4dPrefix}-content-item-horizontal-media-video`)
-class C4DContentItemHorizontalMediaVideo extends C4DVideoPlayerContainer {
+@customElement(`${c4dPrefix}-content-item-row-media-video`)
+class C4DContentItemRowMediaVideo extends C4DVideoPlayerContainer {
/**
* The shadow slot this video should be in.
*/
@@ -34,11 +34,11 @@ class C4DContentItemHorizontalMediaVideo extends C4DVideoPlayerContainer {
}
static get stableSelector() {
- return `${c4dPrefix}--content-item-horizontal-media-video`;
+ return `${c4dPrefix}--content-item-row-media-video`;
}
static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
}
/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default C4DContentItemHorizontalMediaVideo;
+export default C4DContentItemRowMediaVideo;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss b/packages/web-components/src/components/content-item-row/content-item-row-media.scss
similarity index 69%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss
rename to packages/web-components/src/components/content-item-row/content-item-row-media.scss
index ba32bc3fd24..cbf48f7c148 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media.scss
@@ -5,4 +5,4 @@
// LICENSE file in the root directory of this source tree.
//
-@use '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal-media';
+@use '@carbon/ibmdotcom-styles/scss/components/content-item-row-media';
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts b/packages/web-components/src/components/content-item-row/content-item-row-media.ts
similarity index 77%
rename from packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts
rename to packages/web-components/src/components/content-item-row/content-item-row-media.ts
index 3a7f2a38fc3..394987bb517 100644
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media.ts
@@ -12,9 +12,9 @@ import { property, state } from 'lit/decorators.js';
import { baseFontSize, breakpoints } from '@carbon/layout';
import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js';
import C4DContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal-media.scss';
+import styles from './content-item-row-media.scss';
import { MEDIA_ALIGN } from './defs';
import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
@@ -24,12 +24,12 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
const breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
/**
- * A component to present content in a horizontal orientation with media.
+ * A component to present content in a row orientation with media.
*
- * @element c4d-content-item-horizontal-media
+ * @element c4d-content-item-row-media
*/
-@customElement(`${c4dPrefix}-content-item-horizontal-media`)
-class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) {
+@customElement(`${c4dPrefix}-content-item-row-media`)
+class C4DContentItemRowMedia extends HostListenerMixin(C4DContentItem) {
/**
* Defines the alignment of the media: `left` or `right`
*/
@@ -53,7 +53,7 @@ class C4DContentItemHorizontalMedia extends HostListenerMixin(C4DContentItem) {
*/
protected _renderTextCol(): TemplateResult | string | void {
return html`
-