Add pricing theme to Note component #416

HeyStenson · 2021-03-06T00:59:10Z

This PR creates a new theme that we can use for notes that are specifically about pricing topics. @jc-clark lmk what you think - is the shopping cart icon too on the nose? 😆 If so, we could definitely change it to something else from https://labs.mapbox.com/assembly/icons/ (maybe alert?).

How to test

QA checklist

No errors logged to console.
Accessibility score in Chrome DevTools Audit/Lighthouse is 100% with Lighthouse version: #.#.#.
Component is accessible at mobile-size viewport.
Component is accessible at tablet-size viewport.
Component is accessible at laptop-size viewport.
Component is accessible at big-monitor-size viewport.

Open the test cases app locally on:

Chrome, no errors logged to console.
Firefox, no errors logged to console.
Safari, no errors logged to console.
Edge, no errors logged to console.
Mobile Safari, no errors logged to console.
Android Chrome, no errors logged to console.

Before merge

Add entry to CHANGELOG.md to describe changes.
If updating dependencies or creating a release, run npx browserslist@latest --update-db to update the browser data and commit any changes to package-lock.json.

katydecorah

🤑 🤑 🤑 Left a few notes!

katydecorah · 2021-03-08T14:25:50Z

src/components/themes/themes.js

@@ -93,6 +93,15 @@ const themes = {
      color: '#cf1c61',
      borderColor: '#fd8ac0'
    }
+  },
+  pricing: {
+    image: <Image icon="cart" color="green" />,


@HeyStenson What do you think about creditcard?

Much better! I didn't see that one, probably bc I was too fixated on finding 💸 😆

wow this is so great!

katydecorah · 2021-03-08T14:26:27Z

src/components/themes/themes.js

+  },
+  pricing: {
+    image: <Image icon="cart" color="green" />,
+    label: 'Download',


@HeyStenson This will be the default title for the Note so you'll want to switch this label to "Pricing" or something similar.

Eep, copy-paste fail. Thanks for catching this!

katydecorah · 2021-03-08T14:27:38Z

src/components/themes/__tests__/themes-test-cases.js

+    <div>
+      {' '}
+      <Note theme="pricing">pricing note</Note>
+      <Tag theme="pricing" />


@HeyStenson do you think you'll be using a pricing Tag? Just checking since some themes have a tag, other don't. If you do have use for a pricing tag, you'll also want to update the Tag component's propTypes to include "pricing" as a theme option.

Oh hmmm, I hadn't considered this! But I think it could be useful - we could use it to differentiate pricing pages in the list of guides. I'll add this in!

HeyStenson · 2021-03-08T22:44:34Z

Thanks @katydecorah! I updated the icon for the note theme from 🛒 to 💳 , and added a tag.

|

jc-clark

thank you for this awesome follow up, @HeyStenson! Your last screenshot still has the shopping cart. Did it change?

and for helping out, @katydecorah!

katydecorah

💸 💸 💸

katydecorah · 2021-03-09T13:17:13Z

src/components/themes/themes.js

+  pricing: {
+    image: <Image icon="creditcard" color="green" />,
+    label: 'Pricing',
+    tooltipText: 'This contains information about product pricing.',


HeyStenson · 2021-03-09T19:49:20Z

@jc-clark loool, apparently I just pasted the old screenshot 😅 here's the new screenshot with the creditcard icon:

HeyStenson · 2021-03-09T19:55:14Z

@katydecorah are there any other changes coming up to wait for, or should we cut a new release for this change only?

katydecorah · 2021-03-09T20:00:26Z

@HeyStenson Nothing else! You can cut a release for this change only.

* main: (24 commits) 3.3.1 Prepare 3.3.1 The `edit.css` prop is optional when displaying `Edit` in `CodeSnippet` (#421) 3.3.0 Prepare 3.3.0 Bump elliptic from 6.5.3 to 6.5.4 (#417) When `maxHeight` is set, move `Edit` buttons in `CodeSnippet` above the code (#420) Update CONTRIBUTING.md (#418) 3.2.0 update version number in changelog Add pricing theme to Note component (#416) 3.1.0 Prepare 3.1.0 Make `filename` required for `CodeSnippetTitle` (#413) Update package-lock.json (#412) Make `css` optional in Edit and CodeSnippet components (#293) Remove HelpPage, NavigationDropdown, SectionedNavigation, TopbarSticker, Topbar components (#407) Update prism (#411) 3.0.1 Fix CSS for code elements in headings (#409) ...

* main: 3.3.1 Prepare 3.3.1 The `edit.css` prop is optional when displaying `Edit` in `CodeSnippet` (#421) 3.3.0 Prepare 3.3.0 Bump elliptic from 6.5.3 to 6.5.4 (#417) When `maxHeight` is set, move `Edit` buttons in `CodeSnippet` above the code (#420) Update CONTRIBUTING.md (#418) 3.2.0 update version number in changelog Add pricing theme to Note component (#416)

* main: (93 commits) Enforces where React component static properties should be positioned (#429) Node 12 (#428) 3.3.1 Prepare 3.3.1 The `edit.css` prop is optional when displaying `Edit` in `CodeSnippet` (#421) 3.3.0 Prepare 3.3.0 Bump elliptic from 6.5.3 to 6.5.4 (#417) When `maxHeight` is set, move `Edit` buttons in `CodeSnippet` above the code (#420) Update CONTRIBUTING.md (#418) 3.2.0 update version number in changelog Add pricing theme to Note component (#416) 3.1.0 Prepare 3.1.0 Make `filename` required for `CodeSnippetTitle` (#413) Update package-lock.json (#412) Make `css` optional in Edit and CodeSnippet components (#293) Remove HelpPage, NavigationDropdown, SectionedNavigation, TopbarSticker, Topbar components (#407) Update prism (#411) ...

add pricing note theme

fbd9604

HeyStenson requested review from katydecorah and jc-clark March 6, 2021 00:59

katydecorah reviewed Mar 8, 2021

View reviewed changes

HeyStenson added 3 commits March 8, 2021 14:22

update icon and label for pricing note theme

84c896e

missing comma

6ae5f67

small edits

a42f765

HeyStenson added 2 commits March 8, 2021 14:57

Merge branch 'main' into pricing-note

6718ff7

fix test???

07f192c

jc-clark approved these changes Mar 9, 2021

View reviewed changes

katydecorah approved these changes Mar 9, 2021

View reviewed changes

HeyStenson added 2 commits March 9, 2021 13:03

update changelog

575c1d8

ran command to update browser data since I'm cutting a new release

23d7dd0

HeyStenson merged commit a21d1c9 into main Mar 9, 2021

HeyStenson deleted the pricing-note branch March 9, 2021 21:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add pricing theme to Note component #416

Add pricing theme to Note component #416

HeyStenson commented Mar 6, 2021

katydecorah left a comment

katydecorah Mar 8, 2021

HeyStenson Mar 8, 2021

jc-clark Mar 9, 2021

katydecorah Mar 8, 2021

HeyStenson Mar 8, 2021

katydecorah Mar 8, 2021

HeyStenson Mar 8, 2021

HeyStenson commented Mar 8, 2021

jc-clark left a comment •

edited

Loading

katydecorah left a comment

katydecorah Mar 9, 2021

HeyStenson commented Mar 9, 2021

HeyStenson commented Mar 9, 2021

katydecorah commented Mar 9, 2021

Add pricing theme to Note component #416

Add pricing theme to Note component #416

Conversation

HeyStenson commented Mar 6, 2021

How to test

QA checklist

Before merge

katydecorah left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HeyStenson commented Mar 8, 2021

jc-clark left a comment • edited Loading

Choose a reason for hiding this comment

katydecorah left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HeyStenson commented Mar 9, 2021

HeyStenson commented Mar 9, 2021

katydecorah commented Mar 9, 2021

jc-clark left a comment •

edited

Loading