From c4ebf0a501775fc0c7e44a9502af8d65d93a46ff Mon Sep 17 00:00:00 2001 From: Ariella Gilmore Date: Tue, 14 Nov 2023 10:07:26 -0800 Subject: [PATCH] feat(quote): remove color-scheme (#11120) Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- docs/dotcom-v2-migration.md | 5 ++- .../styles/scss/components/quote/_quote.scss | 33 ------------------- .../__stories__/README.stories.react.mdx | 2 +- .../quote/__stories__/quote.stories.react.tsx | 17 ++-------- .../quote/__stories__/quote.stories.ts | 18 ++-------- .../src/components/quote/defs.ts | 12 ------- .../src/components/quote/quote.ts | 24 ++------------ 7 files changed, 13 insertions(+), 98 deletions(-) diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md index 10efb469cb1..bf28df92e4b 100644 --- a/docs/dotcom-v2-migration.md +++ b/docs/dotcom-v2-migration.md @@ -67,7 +67,7 @@ For Carbon v11 migration guidance, see their | link-with-icon | No API changes. | | logo-grid | Deprecated in favor of `content-section` or `content-block` combined with `image-group`. | | pictogram-item | Deprecated in favor of `content-item` (pictogram variation). | -| quote | No API changes. | +| quote | View [changes](#quote). | | scroll-animations | No API changes. | | search-with-typeahead | No API changes. | | table-of-contents | No API changes. | @@ -180,6 +180,9 @@ information. - `link-list-item-card` has been replaced with `link-list-item` - `link-list-item-card-cta` has been replaced with `link-list-item-cta` +### Quote +- Removed `color-scheme` `inverse` option in favor of `callout-quote (inverse)` + ### Universal banner - `universal-banner` renamed to `global-banner` diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss index e309b9175e2..d38fe8fdaff 100644 --- a/packages/styles/scss/components/quote/_quote.scss +++ b/packages/styles/scss/components/quote/_quote.scss @@ -137,26 +137,6 @@ } } - :host(#{$c4d-prefix}-quote)[color-scheme='inverse'] { - background: $background-inverse; - color: $icon-inverse; - - .#{$prefix}--quote__mark { - color: $icon-inverse; - } - - .#{$prefix}--quote__footer { - padding-left: 0; - padding-right: 0; - - ::slotted(#{$c4d-prefix}-quote-link-with-icon) { - margin-left: 0; - padding-left: $spacing-07; - outline: transparent; - } - } - } - .#{$prefix}--callout__container, :host(#{$c4d-prefix}-callout) { @include make-row; @@ -203,17 +183,4 @@ display: inline-block; } - - :host-context(#{$c4d-prefix}-quote[color-scheme='inverse']) - a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right { - color: $link-inverse; - outline-color: $focus-inverse; - &:hover { - color: $link-inverse; - text-decoration: underline; - } - &:active { - color: $link-inverse; - } - } } diff --git a/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx b/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx index 9d2499592c2..e329eefa908 100644 --- a/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx +++ b/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx @@ -31,7 +31,7 @@ import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/compon function App() { return ( - + Bringing together the technology and expertise for a new way to create John Doe Senior Vice President diff --git a/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx b/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx index 45ebd8bfba0..1d7fbc6c79c 100644 --- a/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx +++ b/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx @@ -18,7 +18,7 @@ import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/component import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy'; import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy'; import textNullable from '../../../../.storybook/knob-text-nullable'; -import { QUOTE_TYPES, QUOTE_COLOR_SCHEMES } from '../quote'; +import { QUOTE_TYPES } from '../quote'; import readme from './README.stories.react.mdx'; const types = { @@ -31,22 +31,16 @@ const types = { [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET, }; -const colorSchemes = { - [`${QUOTE_COLOR_SCHEMES.REGULAR}`]: QUOTE_COLOR_SCHEMES.REGULAR, - [`${QUOTE_COLOR_SCHEMES.INVERSE}`]: QUOTE_COLOR_SCHEMES.INVERSE, -}; - export const Default = (args) => { const { copy, quoteMark, sourceHeading, sourceCopy, - sourceBottomCopy, - colorScheme, + sourceBottomCopy } = args?.Quote ?? {}; return ( - + {copy} {sourceHeading} {sourceCopy} @@ -83,11 +77,6 @@ Default.story = { 'Source bottom copy (source-bottom-copy slot)', 'IBM Cloud' ), - colorScheme: select( - 'Color Scheme (color-scheme)', - colorSchemes, - colorSchemes.regular - ), }), }, propsSet: { diff --git a/packages/web-components/src/components/quote/__stories__/quote.stories.ts b/packages/web-components/src/components/quote/__stories__/quote.stories.ts index 9329c7a6c78..f89e7390c25 100644 --- a/packages/web-components/src/components/quote/__stories__/quote.stories.ts +++ b/packages/web-components/src/components/quote/__stories__/quote.stories.ts @@ -10,7 +10,7 @@ import { select } from '@storybook/addon-knobs'; import { html } from 'lit'; import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js'; -import { QUOTE_TYPES, QUOTE_COLOR_SCHEMES } from '../quote'; +import { QUOTE_TYPES } from '../quote'; import '../index'; import '../quote-link-with-icon'; import textNullable from '../../../../.storybook/knob-text-nullable'; @@ -23,11 +23,10 @@ export const Default = (args) => { quoteMark, sourceHeading, sourceCopy, - sourceBottomCopy, - colorScheme, + sourceBottomCopy } = args?.Quote ?? {}; return html` - + ${copy} ${sourceHeading} ${sourceCopy} @@ -51,11 +50,6 @@ const types = { [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET, }; -const colorSchemes = { - [`${QUOTE_COLOR_SCHEMES.REGULAR}`]: QUOTE_COLOR_SCHEMES.REGULAR, - [`${QUOTE_COLOR_SCHEMES.INVERSE}`]: QUOTE_COLOR_SCHEMES.INVERSE, -}; - export default { title: 'Components/Quote', decorators: [ @@ -94,11 +88,6 @@ export default { 'Source bottom copy (source-bottom-copy slot)', 'IBM Cloud' ), - colorScheme: select( - 'Color Scheme (color-scheme)', - colorSchemes, - colorSchemes.regular - ), }), }, propsSet: { @@ -111,7 +100,6 @@ export default { sourceHeading: 'Lorem ipsum dolor sit amet', sourceCopy: 'consectetur adipiscing elit', sourceBottomCopy: 'IBM Cloud', - colorScheme: 'regular', }, }, }, diff --git a/packages/web-components/src/components/quote/defs.ts b/packages/web-components/src/components/quote/defs.ts index 1a62e9fa7af..c274d838a78 100644 --- a/packages/web-components/src/components/quote/defs.ts +++ b/packages/web-components/src/components/quote/defs.ts @@ -38,15 +38,3 @@ export enum QUOTE_TYPES { */ CORNER_BRACKET = 'corner-bracket', } - -export enum QUOTE_COLOR_SCHEMES { - /** - * Regular Scheme - */ - REGULAR = 'regular', - - /** - * Inverse Scheme - */ - INVERSE = 'inverse', -} diff --git a/packages/web-components/src/components/quote/quote.ts b/packages/web-components/src/components/quote/quote.ts index f8683a5d36c..35c11c4eeae 100644 --- a/packages/web-components/src/components/quote/quote.ts +++ b/packages/web-components/src/components/quote/quote.ts @@ -11,11 +11,11 @@ import { property } from 'lit/decorators.js'; import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import styles from './quote.scss'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import { QUOTE_TYPES, QUOTE_COLOR_SCHEMES } from './defs'; +import { QUOTE_TYPES } from './defs'; import '../horizontal-rule/horizontal-rule'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; -export { QUOTE_TYPES, QUOTE_COLOR_SCHEMES }; +export { QUOTE_TYPES }; const { prefix, stablePrefix: c4dPrefix } = settings; @@ -51,12 +51,6 @@ class C4DQuote extends StableSelectorMixin(LitElement) { @property({ reflect: true, attribute: 'mark-type' }) markType = QUOTE_TYPES.DEFAULT; - /** - * Defines if the inverse class is included - */ - @property({ reflect: true, attribute: 'color-scheme' }) - colorScheme = ''; - /** * `true` if there is source heading. */ @@ -171,20 +165,6 @@ class C4DQuote extends StableSelectorMixin(LitElement) { } render() { - if (this.colorScheme === QUOTE_COLOR_SCHEMES.INVERSE) { - return html` -
-
-
-
- ${this._renderQuote()}${this._renderSource()}${this._renderFooter()} -
-
-
-
- `; - } - return html`