Skip to content

Commit

Permalink
Merge branch 'feat/carbon-for-ibm-dotcom-v2' into feat/button-group-v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellalgilmore
ariellalgilmore authored Sep 13, 2023
2 parents c4d1312 + 813474d commit c00f1ef
Show file tree
Hide file tree
Showing 52 changed files with 1,031 additions and 581 deletions.
20 changes: 20 additions & 0 deletions docs/dotcom-v2-migration.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ For Carbon v11 migration guidance, see their
| background-media | No API changes. |
| button | This component is deprecated in v2 in favor for Carbon's core Button |
| button-group | No API changes. |
| callout-quote | View changes [here](#callout-quote) |
| card | View changes [here] (#card) |
| card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item |
| card-link | This component is deprecated in v2 in favor for card (link variant) component |
| card-section-carousel | This component is deprecated in v2 in favor for content-section/block component combined with carousel |
Expand All @@ -35,18 +37,32 @@ For Carbon v11 migration guidance, see their
| 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 |
| hr | View changes [here](#horizontal-rule) |
| image | View changes [here](#image) |
| image-with-caption | Replaced by `image` |
| link-list-section | This component is deprecated in v2 in favor for content-section/block & link-list end of section variant components |
| logo-grid | This component is deprecated in v2 in favor for content-section/block & image-group components |
| pictogram-item | This component is deprecated in v2 in favor for content-item (pictogram variation) componet |
| quote | No API changes. |
| search-with-typeahead | No API changes. |
| tabs-extended-media | This component is deprecated in v2 in favor for tabs-extended component |


### BackToTop

-

### Callout quote

- New options for `color-scheme` property: `REGULAR = 'regular'`, `INVERSE = 'inverse'` `LAYER = 'layer'`, `CYAN = 'cyan'`, `PURPLE = 'purple'`
- New callout style tokens

### Card

- `<dds-card-footer>` has `icon-placement` property has been removed
- Removed `border` property, clickable cards inherit the Carbon v11 experimental tile border style
- New `aspect-ratio` property with '1:1', '2:1', '3:2', '4:3', and '16:9' as options

### CTA

In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have been deprecated in favor of their base components.
Expand All @@ -55,6 +71,10 @@ All of the CTA-like features can now be used natively within Button, Card, Featu
Each new component has a `cta-type` property that can change the icon and click functionality of the component. See the components'
documentations for more information.

### Horizontal rule

- New options for `contrast` property: `SUBTLE = 'subtle' (default)`, `STRONG = 'strong'` instead of `MEDIUM_CONTRAST = 'medium_contrast'`, `LOW_CONTRAST = 'low_contrast'`, `HIGH_CONTRAST = 'high_contrast'`

### Image

- New `lightbox-contrast` property
98 changes: 71 additions & 27 deletions packages/styles/scss/components/callout-quote/_callout-quote.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,18 @@
@use '@carbon/styles/scss/theme' as *;
@use '../../globals/vars' as *;
@use '../../globals/utils/hang' as *;
@use '../../internal/callout/callout';
@use '../quote/quote';
@use '../../globals/utils/flex-grid' as *;
@use '../../internal/callout/callout' as *;
@use '../quote/quote' as *;

@mixin callout-quote {
.#{$prefix}--callout-quote,
:host(#{$c4d-prefix}-callout-quote) {
.#{$prefix}--quote {
background-color: $background-inverse;
.#{$prefix}--link {
color: $link-inverse;
outline-color: $focus-inverse;
&:hover {
color: #a6c8ff;
}
}
}
}

.#{$prefix}--callout-quote .#{$prefix}--callout__container {
padding-left: $spacing-05;
padding-right: $spacing-05;

@include breakpoint(md) {
padding-left: 0;
padding-right: 0;
}
}
@include callout;
@include quote;

@mixin callout-quote {
:host(#{$c4d-prefix}-callout-quote) {
@extend .#{$prefix}--callout__container;
@extend :host(#{$c4d-prefix}-callout);
@extend :host(#{$c4d-prefix}-callout-text);
@include make-row;

@include breakpoint(md) {
@include hang;
Expand All @@ -53,4 +35,66 @@
outline: transparent;
}
}

:host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
}

:host(#{$c4d-prefix}-callout-quote[color-scheme='layer']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
}

:host(#{$c4d-prefix}-callout-quote[color-scheme='purple']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
}
:host(#{$c4d-prefix}-callout-quote[color-scheme='cyan']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
}

:host(#{$c4d-prefix}-callout-link-with-icon) {
@extend .#{$prefix}--link-with-icon;

display: inline-block;
a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
color: $link-primary;
outline-color: $focus-inverse;

&:hover {
color: $link-primary-hover;
}

&:active {
color: $link-primary;
}
}
}

:host(#{$c4d-prefix}-callout-link-with-icon[color-scheme='inverse']) {
a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
color: $link-inverse;

&:hover {
// @carbon/styles has no hover color for $link-inverse.
color: $link-inverse;
}

&:active {
color: $link-inverse;
}
}
}

:host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
margin: $spacing-05;
@include breakpoint(md) {
margin: $spacing-05 0;
}
@include breakpoint(lg) {
margin: $spacing-05 $spacing-03;
}
}
}
106 changes: 86 additions & 20 deletions packages/styles/scss/components/callout-with-media/_callout-with-media.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,54 +11,120 @@
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '../../globals/vars' as *;
@use '../../internal/callout/callout';
@use '../../internal/callout/callout' as *;
@use '../../internal/content-block';
@use '../../internal/content-item/content-item';
@use '../image';
@use '../content-block-simple/content-block-simple';

@include callout;

@mixin callout-with-media {
:host(#{$c4d-prefix}-callout-with-media),
.#{$prefix}--callout-with-media {
:host(#{$c4d-prefix}-callout-with-media) {
@extend :host(#{$c4d-prefix}-callout);

display: block;
background-color: $background-inverse;

::slotted([slot='heading']),
.#{$prefix}--content-block__heading {
::slotted([slot='heading']) {
margin-bottom: $spacing-07;
}

::slotted([slot='copy']) {
margin-bottom: $spacing-07;
color: $icon-inverse;
}
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='layer']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='purple']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan']) {
@extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
}

:host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
.#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
:host(#{$c4d-prefix}-callout-with-media-copy)
::slotted(#{$c4d-prefix}-content-block-paragraph),
.#{$prefix}--callout-with-media .#{$prefix}--content-item__copy p,
::slotted(#{$c4d-prefix}-content-block-paragraph) {
@extend :host(#{$c4d-prefix}-callout-text);
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse'])
::slotted([slot='heading']),
:host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='inverse'])
::slotted(#{$c4d-prefix}-content-block-paragraph) {
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='layer'])
::slotted([slot='heading']),
:host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='layer'])
::slotted(#{$c4d-prefix}-content-block-paragraph) {
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='purple'])
::slotted([slot='heading']),
:host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='purple'])
::slotted(#{$c4d-prefix}-content-block-paragraph) {
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
}

:host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan'])
::slotted([slot='heading']),
:host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='cyan'])
::slotted(#{$c4d-prefix}-content-block-paragraph) {
@extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
}

:host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__caption,
:host(#{$c4d-prefix}-callout-with-media-video)
::slotted(#{$c4d-prefix}-video-player),
.#{$prefix}--callout-with-media .#{$prefix}--video-player__video-caption,
.#{$prefix}--callout-with-media .#{$prefix}--image__caption {
color: $icon-inverse;
::slotted(#{$c4d-prefix}-video-player) {
@extend :host(#{$c4d-prefix}-callout-caption);
}

:host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse'])
.#{$prefix}--image__caption,
:host(#{$c4d-prefix}-callout-with-media-video[color-scheme='inverse'])
::slotted(#{$c4d-prefix}-video-player) {
@extend :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']);
}

:host(#{$c4d-prefix}-callout-with-media-image[color-scheme='layer'])
.#{$prefix}--image__caption,
:host(#{$c4d-prefix}-callout-with-media-video[color-scheme='layer'])
::slotted(#{$c4d-prefix}-video-player) {
@extend :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']);
}

:host(#{$c4d-prefix}-callout-with-media-image[color-scheme='purple'])
.#{$prefix}--image__caption,
:host(#{$c4d-prefix}-callout-with-media-video[color-scheme='purple'])
::slotted(#{$c4d-prefix}-video-player) {
@extend :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']);
}

:host(#{$c4d-prefix}-callout-with-media-image[color-scheme='cyan'])
.#{$prefix}--image__caption,
:host(#{$c4d-prefix}-callout-with-media-video[color-scheme='cyan'])
::slotted(#{$c4d-prefix}-video-player) {
@extend :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']);
}

:host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
.#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
:host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']),
.#{$prefix}--callout-with-media .#{$prefix}--callout-with-media-copy {
:host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']) {
padding-right: $spacing-07;
max-width: rem(640px);
width: auto;
}

.#{$prefix}--callout-with-media .#{$prefix}--callout__content {
padding-top: 0;
}
:host(#{$c4d-prefix}-callout-with-media-video),
.#{$prefix}--callout-with-media
.#{$prefix}--callout__content
Expand Down
Loading

0 comments on commit c00f1ef

Please sign in to comment.