[Feedback] PricingOptions

[simurai]

Here some feedback from using the component in an upcoming project:

Make divider line optional

Feedback

This is probably meant to add some balance when there are not the same amount of buttons, but maybe wouldn't really be needed if both sides only have a single button.

Make "What's included" optional

Feedback

Decrease font-weight of price

Feedback

I think it's already "normal". But it would be from 450 to 400.

Increase space between prices

Feedback

I think in addition to the current 12px gap, have another 8px margin, so 20px in total?

Add an "extra" variant

Currently there is an included and excluded variant. Another variant could be extra or addon with a + icon.

Feedback

Smaller fonts on mobile

Feedback

Reduced font sizes on mobile (👈 left Primer Brand, 👉 right Design)

---

This project also has an additional description for each FeatureListItem, but not sure how common that will be.

---

I haven't tried to customize any of the above, but some might can be considered in Primer Brand.

/cc @natalie-iv @nsolerieu @jesussandreas

[rezrah]

cc. @danielguillan, @jesussandreas and @simmonsjenna for initial feedback on how much of this should upstreamed to the core library.

[nsolerieu]

Considering the context agnostic nature of the Primer Brand component most of the above seem to be edge case that shouldn't be baked in the component.

Mobile font sizes and an additional description for each FeatureListItem are the 2 items that seem to be applicable in 80% of the case and fit in the context agnostic framework.

I think these last two should be upstreamed but the rest should be customized via CSS

[jesussandreas]

I would say that although it shouldn't be upstream immediately, we should explore what these variants look like in design and then come back to it to upstream it.

There are things to consider such as the spacing between discount and price as well as labels.

[ajashams]

Agree with @jesussandreas here on delaying an upstream. We can see it live on GitHubuniverse.com now though for reference.

In addition to what @nsolerieu suggested upstreaming, any reason why we wouldn't push these forward?

• ✅ make divider line optional. Seems relevant when there are some cards with 2 CTAS and another with only 1, but unnecessary when they all have the same amount.
• ✅ increase space between prices. Agree with @simurai, it felt tight when we have a discounted price and also felt like we should reduce the size.

[danielguillan]

✅ make divider line optional. Seems relevant when there are some cards with 2 CTAS and another with only 1, but unnecessary when they all have the same amount.

This makes sense to me too. We can make the component handle this automatically instead of having a dedicated property to configure the visibility.