feat(quote): remove color-scheme (#11120)

Co-authored-by: kennylam <[email protected]>
carbon-design-system · Nov 14, 2023 · c4ebf0a · c4ebf0a
1 parent 45a8eb4
commit c4ebf0a
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 98 deletions.
diff --git 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
@@ -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
@@ -31,7 +31,7 @@ import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/compon
 
 function App() {
   return (
-    <C4DQuote color-scheme="regular" mark-type="double-curved">
+    <C4DQuote mark-type="double-curved">
       Bringing together the technology and expertise for a new way to create
       <C4DQuoteSourceHeading>John Doe</C4DQuoteSourceHeading>
       <C4DQuoteSourceCopy>Senior Vice President</C4DQuoteSourceCopy>

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
@@ -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 (
-    <C4DQuote color-scheme={colorScheme} mark-type={quoteMark}>
+    <C4DQuote mark-type={quoteMark}>
       {copy}
       <C4DQuoteSourceHeading>{sourceHeading}</C4DQuoteSourceHeading>
       <C4DQuoteSourceCopy>{sourceCopy}</C4DQuoteSourceCopy>
@@ -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
@@ -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`
-    <c4d-quote color-scheme="${colorScheme}" mark-type="${quoteMark}">
+    <c4d-quote mark-type="${quoteMark}">
       ${copy}
       <c4d-quote-source-heading> ${sourceHeading} </c4d-quote-source-heading>
       <c4d-quote-source-copy> ${sourceCopy} </c4d-quote-source-copy>
@@ -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
@@ -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
@@ -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`
-        <div class="${prefix}--callout__column">
-          <div class="${prefix}--callout__content">
-            <div class="${prefix}--quote__container">
-              <div class="${prefix}--quote__wrapper">
-                ${this._renderQuote()}${this._renderSource()}${this._renderFooter()}
-              </div>
-            </div>
-          </div>
-        </div>
-      `;
-    }
-
     return html`
       <div class="${prefix}--quote__container">
         <div class="${prefix}--quote__wrapper">