Update PricingOptions bgColor (#664)

* change default color instead of applying API update * revert to global decorator * update snapshots
primer · Jul 25, 2024 · ccd37a5 · ccd37a5
1 parent 3010db6
commit ccd37a5
Show file tree

Hide file tree

Showing 23 changed files with 89 additions and 15 deletions.
diff --git a/.changeset/speak-wasps-perfectly.md b/.changeset/speak-wasps-perfectly.md
@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': minor
+---
+
+`PricingOptions` now applies the `subtle` background color by default. This is to ensure adequate contrast on a standard `canvas-default` background.
+
+To apply the previous `default` background color (or custom color), you may override a new design token that has been provided for this reason: `--brand-PricingOptions-item-bgColor`.
diff --git a/packages/design-tokens/scripts/build-tokens.js b/packages/design-tokens/scripts/build-tokens.js
@@ -243,6 +243,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
     `tokens/functional/components/breadcrumbs/colors.js`,
     `tokens/functional/components/tooltip/colors.json`,
     `tokens/functional/components/river-story-scroll/colors.js`,
+    `tokens/functional/components/pricing-options/colors.json`,
   ]
 
   for (const path of filesForColorModes) {

diff --git a/packages/design-tokens/src/tokens/functional/components/pricing-options/colors.json b/packages/design-tokens/src/tokens/functional/components/pricing-options/colors.json
@@ -0,0 +1,12 @@
+{
+  "brand": {
+    "PricingOptions": {
+      "item": {
+        "bgColor": {
+          "value": "var(--brand-color-canvas-subtle)",
+          "dark": "var(--brand-color-canvas-subtle)"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx b/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx
@@ -9,7 +9,7 @@ import {CopilotIcon} from '@primer/octicons-react'
 
 const decorators = Story => (
   <Box
-    backgroundColor="subtle"
+    backgroundColor="default"
     paddingBlockStart="spacious"
     paddingBlockEnd="spacious"
     style={{
@@ -556,6 +556,7 @@ export const WithIncludedAndExcludedFeatures: StoryFn<typeof PricingOptions> = (
     </PricingOptions>
   )
 }
+
 export const WithoutFeatures: StoryFn<typeof PricingOptions> = () => {
   return (
     <PricingOptions>

diff --git a/packages/react/src/PricingOptions/PricingOptions.module.css b/packages/react/src/PricingOptions/PricingOptions.module.css
@@ -20,7 +20,7 @@
 .PricingOptions--variant-default {
   border-radius: var(--brand-borderRadius-xlarge);
   border: solid var(--brand-borderWidth-thin) var(--brand-color-border-default);
-  background-color: var(--brand-color-canvas-default);
+  background-color: var(--brand-PricingOptions-item-bgColor);
 }
 
 @media (min-width: 63.25rem) {
@@ -72,7 +72,7 @@
   padding-inline: var(--base-size-32);
   border-radius: var(--brand-borderRadius-xlarge);
   border: solid 1px var(--brand-color-border-default);
-  background-color: var(--brand-color-canvas-default);
+  background-color: var(--brand-PricingOptions-item-bgColor);
   padding-block: var(--base-size-32);
 }
 

diff --git a/packages/react/src/PricingOptions/PricingOptions.stories.tsx b/packages/react/src/PricingOptions/PricingOptions.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 export const Default = () => (
   <Box
-    backgroundColor="subtle"
+    backgroundColor="default"
     paddingBlockStart="spacious"
     paddingBlockEnd="spacious"
     style={{

diff --git a/packages/react/src/PricingOptions/PricingOptions.tsx b/packages/react/src/PricingOptions/PricingOptions.tsx
@@ -20,6 +20,7 @@ import {
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css'
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css'
 
 /**
  * Main stylesheet (as a CSS Module)

diff --git a/...ions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png b/...ions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png
diff --git a/...shots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png b/...shots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png
diff --git a/.../Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png b/.../Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png
diff --git a/...arison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png b/...arison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png
diff --git a/...ots/Visual-Comparison-PricingOptions-PricingOptions-Dark-Color-Mode-1-linux.png b/...ots/Visual-Comparison-PricingOptions-PricingOptions-Dark-Color-Mode-1-linux.png
diff --git a/...s-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png b/...s-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png
diff --git a/...ots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png b/...ots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png
diff --git a/...s/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png b/...s/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png
diff --git a/...napshots/Visual-Comparison-PricingOptions-PricingOptions-One-Option-1-linux.png b/...napshots/Visual-Comparison-PricingOptions-PricingOptions-One-Option-1-linux.png
diff --git a/...shots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png b/...shots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png
diff --git a/...apshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png b/...apshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png
diff --git a/...s/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png b/...s/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png
diff --git a/...n-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png b/...n-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png
diff --git a/...ts/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png b/...ts/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png
diff --git a/packages/react/src/recipes/SolutionTemplates/SolutionPage/Size/OrgSize.stories.tsx b/packages/react/src/recipes/SolutionTemplates/SolutionPage/Size/OrgSize.stories.tsx
@@ -48,6 +48,7 @@ const maximumArgs = {
   variant: 'size',
   logoBarVisible: true,
   testimonialsVisible: true,
+  pricingOptionsVisible: true,
   faqVisible: true,
   jtbd2Visible: true,
   jtbd3Visible: true,

diff --git a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.tsx b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.tsx
@@ -28,6 +28,7 @@ import {
   VideoPlayer,
   Breadcrumbs,
   Statistic,
+  PricingOptions,
 } from '../../..'
 
 import pinterestLogo from '../../../fixtures/images/logos/pinterest.png'
@@ -563,17 +564,67 @@ export function SolutionPage({
                           </Grid.Column>
                         </Grid>
                       )}
-                      <CTABanner hasBorder hasShadow={false} className={styles.ctaBanner} align="center">
-                        <CTABanner.Heading>Get started</CTABanner.Heading>
-                        <CTABanner.Description>
-                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam
-                          luctus sed turpis felis nam pulvinar risus elementum.
-                        </CTABanner.Description>
-                        <CTABanner.ButtonGroup>
-                          <Button>Primary Action</Button>
-                          <Button>Secondary Action</Button>
-                        </CTABanner.ButtonGroup>
-                      </CTABanner>
+                      {variant === 'size' && args.pricingOptionsVisible && (
+                        <PricingOptions variant="cards">
+                          <PricingOptions.Item>
+                            <PricingOptions.Heading>Lorem ipsum</PricingOptions.Heading>
+                            <PricingOptions.Description>Lorem ipsum dolor sit amet</PricingOptions.Description>
+                            <PricingOptions.Price currencySymbol="$" originalPrice="20" trailingText="per user / month">
+                              10
+                            </PricingOptions.Price>
+                            <PricingOptions.FeatureList>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem variant="excluded">
+                                Item not included
+                              </PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem variant="excluded">
+                                Item not included
+                              </PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem variant="excluded">
+                                Item not included
+                              </PricingOptions.FeatureListItem>
+                            </PricingOptions.FeatureList>
+                            <PricingOptions.SecondaryAction as="a" href="/contact">
+                              Contact sales
+                            </PricingOptions.SecondaryAction>
+                          </PricingOptions.Item>
+
+                          <PricingOptions.Item>
+                            <PricingOptions.Label>Recommended</PricingOptions.Label>
+                            <PricingOptions.Heading>Lorem ipsum</PricingOptions.Heading>
+                            <PricingOptions.Description>Lorem ipsum dolor sit amet</PricingOptions.Description>
+                            <PricingOptions.Price currencySymbol="$" trailingText="per user / month" originalPrice="49">
+                              39
+                            </PricingOptions.Price>
+                            <PricingOptions.FeatureList>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                            </PricingOptions.FeatureList>
+                            <PricingOptions.PrimaryAction as="a" href="/buy">
+                              Primary action
+                            </PricingOptions.PrimaryAction>
+                          </PricingOptions.Item>
+                        </PricingOptions>
+                      )}
+                      {variant !== 'size' && args.pricingOptionsVisible && (
+                        <CTABanner hasBorder hasShadow={false} className={styles.ctaBanner} align="center">
+                          <CTABanner.Heading>Get started</CTABanner.Heading>
+                          <CTABanner.Description>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
+                            Aliquam luctus sed turpis felis nam pulvinar risus elementum.
+                          </CTABanner.Description>
+                          <CTABanner.ButtonGroup>
+                            <Button>Primary Action</Button>
+                            <Button>Secondary Action</Button>
+                          </CTABanner.ButtonGroup>
+                        </CTABanner>
+                      )}
                       <Box>
                         <Stack direction="vertical" padding="none" gap={64} alignItems="center">
                           <Heading as="h3" size="3">