Skip to content

Commit d33f300

Browse files
danielguillandanielguillan
authored
Make PricingOptions' "Whats included" title customizable (#978)
1 parent bac4304 commit d33f300

12 files changed

+228
-79
lines changed

‎.changeset/many-rice-begin.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
'@primer/react-brand': minor
3+
---
4+
5+
⚠️ Breaking changes
6+
7+
The `PricingOptions.FeatureListHeading` component has been renamed to `PricingOptions.FeatureListGroupHeading`. `PricingOptions.FeatureListHeading` is now used to optionally customize the heading of the `PricingOptions` feature list accordion.
8+
9+
```diff
10+
- <PricingOptions.FeatureListHeading />
11+
+ <PricingOptions.FeatureListGroupHeading />
12+
```
13+
14+
Full example with customizable accordion heading:,
15+
16+
```jsx
17+
<PricinOptions>
18+
<PricingOptions.FeatureList>
19+
<PricingOptions.FeatureListHeading>My custom title</PricingOptions.FeatureListHeading>
20+
<PricingOptions.FeatureListGroupHeading>Feature set 1</PricingOptions.FeatureListGroupHeading>
21+
<PricingOptions.FeatureListItem>Feature A</PricingOptions.FeatureListItem>
22+
<PricingOptions.FeatureListItem>Feature B</PricingOptions.FeatureListItem>
23+
<PricingOptions.FeatureListItem>Feature C</PricingOptions.FeatureListItem>
24+
</PricingOptions.FeatureList>
25+
</PricinOptions>
26+
```

‎apps/docs/content/components/PricingOptions.mdx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ documentation.
313313

314314
### Feature list sets
315315

316-
Use `PricingOptions.FeatureListHeading` to group feature items together.
316+
Use `PricingOptions.FeatureListGroupHeading` to group feature items together.
317317

318318
```jsx live
319319
<PricingOptions>
@@ -329,9 +329,9 @@ Use `PricingOptions.FeatureListHeading` to group feature items together.
329329
10
330330
</PricingOptions.Price>
331331
<PricingOptions.FeatureList>
332-
<PricingOptions.FeatureListHeading>
332+
<PricingOptions.FeatureListGroupHeading>
333333
Base features
334-
</PricingOptions.FeatureListHeading>
334+
</PricingOptions.FeatureListGroupHeading>
335335
<PricingOptions.FeatureListItem>
336336
Code completions
337337
</PricingOptions.FeatureListItem>
@@ -342,9 +342,9 @@ Use `PricingOptions.FeatureListHeading` to group feature items together.
342342
CLI assistance
343343
</PricingOptions.FeatureListItem>
344344

345-
<PricingOptions.FeatureListHeading>
345+
<PricingOptions.FeatureListGroupHeading>
346346
Security
347-
</PricingOptions.FeatureListHeading>
347+
</PricingOptions.FeatureListGroupHeading>
348348
<PricingOptions.FeatureListItem>
349349
Security vulnerability filter
350350
</PricingOptions.FeatureListItem>
@@ -376,19 +376,19 @@ Use `PricingOptions.FeatureListHeading` to group feature items together.
376376
Contact sales
377377
</PricingOptions.SecondaryAction>
378378
<PricingOptions.FeatureList>
379-
<PricingOptions.FeatureListHeading>
379+
<PricingOptions.FeatureListGroupHeading>
380380
Base features
381-
</PricingOptions.FeatureListHeading>
381+
</PricingOptions.FeatureListGroupHeading>
382382
<PricingOptions.FeatureListItem>
383383
Everything in Copilot Individual
384384
</PricingOptions.FeatureListItem>
385385
<PricingOptions.FeatureListItem>
386386
Code referencing
387387
</PricingOptions.FeatureListItem>
388388

389-
<PricingOptions.FeatureListHeading>
389+
<PricingOptions.FeatureListGroupHeading>
390390
Security
391-
</PricingOptions.FeatureListHeading>
391+
</PricingOptions.FeatureListGroupHeading>
392392
<PricingOptions.FeatureListItem>
393393
Security vulnerability filter
394394
</PricingOptions.FeatureListItem>
@@ -424,9 +424,9 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
424424
10
425425
</PricingOptions.Price>
426426
<PricingOptions.FeatureList>
427-
<PricingOptions.FeatureListHeading>
427+
<PricingOptions.FeatureListGroupHeading>
428428
Chat
429-
</PricingOptions.FeatureListHeading>
429+
</PricingOptions.FeatureListGroupHeading>
430430
<PricingOptions.FeatureListItem>
431431
Unlimited messages, interactions, and history
432432
</PricingOptions.FeatureListItem>
@@ -442,9 +442,9 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
442442
<PricingOptions.FeatureListItem variant="excluded">
443443
Access your knowledge base
444444
</PricingOptions.FeatureListItem>
445-
<PricingOptions.FeatureListHeading>
445+
<PricingOptions.FeatureListGroupHeading>
446446
Code completion
447-
</PricingOptions.FeatureListHeading>
447+
</PricingOptions.FeatureListGroupHeading>
448448
<PricingOptions.FeatureListItem>
449449
Code suggestions as you type
450450
</PricingOptions.FeatureListItem>
@@ -477,9 +477,9 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
477477
39
478478
</PricingOptions.Price>
479479
<PricingOptions.FeatureList>
480-
<PricingOptions.FeatureListHeading>
480+
<PricingOptions.FeatureListGroupHeading>
481481
Chat
482-
</PricingOptions.FeatureListHeading>
482+
</PricingOptions.FeatureListGroupHeading>
483483
<PricingOptions.FeatureListItem>
484484
Unlimited messages, interactions, and history
485485
</PricingOptions.FeatureListItem>
@@ -495,9 +495,9 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
495495
<PricingOptions.FeatureListItem>
496496
Access your knowledge base
497497
</PricingOptions.FeatureListItem>
498-
<PricingOptions.FeatureListHeading>
498+
<PricingOptions.FeatureListGroupHeading>
499499
Code completion
500-
</PricingOptions.FeatureListHeading>
500+
</PricingOptions.FeatureListGroupHeading>
501501
<PricingOptions.FeatureListItem>
502502
Code suggestions as you type
503503
</PricingOptions.FeatureListItem>
@@ -573,7 +573,13 @@ Forwards all props from the [Label component](/components/Label).
573573
| `expanded` | `boolean` | `true` | `false` | Controls visibility of feature items. Accepts Object type for granular control at different viewport sizes. |
574574
| `hasDivider` | `boolean` | `true` | `false` | Controls visibility of a visual border between feature lists and adjacent actions |
575575

576-
### PricingOptions.FeatureListHeading
576+
### PricingOptions.FeatureListGroupHeading
577+
578+
| Name | Type | Default | required | Description |
579+
| :--------- | :---------- | :-----------------: | :------: | :---------------------------------- |
580+
| `children` | `ReactNode` | `"What's included"` | `false` | A custom title for the feature list |
581+
582+
### PricingOptions.FeatureListGroupHeading
577583

578584
| Name | Type | Default | required | Description |
579585
| :--------- | :----------- | :---------: | :------: | :------------------------------------------------ |

‎apps/next-docs/content/components/PricingOptions/index.mdx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ This is the two-item layout for the pricing options component.
203203

204204
### Three and four options
205205

206-
PricingOptions`supports a maximum of four items in both`default`and`card` layouts.
206+
`PricingOptions` supports a maximum of four items in both `default` and `card` layouts.
207207

208208
Please refer to our [Storybook
209209
examples](https://primer.style/brand/storybook/?path=/story/components-pricingoptions-features--three-options)
@@ -219,7 +219,7 @@ documentation.
219219

220220
### Feature list sets
221221

222-
Use `PricingOptions.FeatureListHeading` to group feature items together.
222+
Use `PricingOptions.FeatureListGroupHeading` to group feature items together.
223223

224224
```jsx live
225225
<PricingOptions>
@@ -232,12 +232,12 @@ Use `PricingOptions.FeatureListHeading` to group feature items together.
232232
10
233233
</PricingOptions.Price>
234234
<PricingOptions.FeatureList>
235-
<PricingOptions.FeatureListHeading>Base features</PricingOptions.FeatureListHeading>
235+
<PricingOptions.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading>
236236
<PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
237237
<PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
238238
<PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
239239

240-
<PricingOptions.FeatureListHeading>Security</PricingOptions.FeatureListHeading>
240+
<PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading>
241241
<PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
242242
</PricingOptions.FeatureList>
243243

@@ -258,11 +258,11 @@ Use `PricingOptions.FeatureListHeading` to group feature items together.
258258
<PricingOptions.PrimaryAction href="/buy">Buy now</PricingOptions.PrimaryAction>
259259
<PricingOptions.SecondaryAction href="/contact">Contact sales</PricingOptions.SecondaryAction>
260260
<PricingOptions.FeatureList>
261-
<PricingOptions.FeatureListHeading>Base features</PricingOptions.FeatureListHeading>
261+
<PricingOptions.FeatureListGroupHeading>Base features</PricingOptions.FeatureListGroupHeading>
262262
<PricingOptions.FeatureListItem>Everything in Copilot Individual</PricingOptions.FeatureListItem>
263263
<PricingOptions.FeatureListItem>Code referencing</PricingOptions.FeatureListItem>
264264

265-
<PricingOptions.FeatureListHeading>Security</PricingOptions.FeatureListHeading>
265+
<PricingOptions.FeatureListGroupHeading>Security</PricingOptions.FeatureListGroupHeading>
266266
<PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
267267
<PricingOptions.FeatureListItem>Public code filter</PricingOptions.FeatureListItem>
268268
<PricingOptions.FeatureListItem>IP indemnity</PricingOptions.FeatureListItem>
@@ -287,7 +287,7 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
287287
10
288288
</PricingOptions.Price>
289289
<PricingOptions.FeatureList>
290-
<PricingOptions.FeatureListHeading>Chat</PricingOptions.FeatureListHeading>
290+
<PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading>
291291
<PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem>
292292
<PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem>
293293
<PricingOptions.FeatureListItem variant="excluded">
@@ -297,7 +297,7 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
297297
Repository-based semantic search
298298
</PricingOptions.FeatureListItem>
299299
<PricingOptions.FeatureListItem variant="excluded">Access your knowledge base</PricingOptions.FeatureListItem>
300-
<PricingOptions.FeatureListHeading>Code completion</PricingOptions.FeatureListHeading>
300+
<PricingOptions.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading>
301301
<PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem>
302302
<PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem>
303303
<PricingOptions.FeatureListItem variant="excluded">
@@ -323,13 +323,13 @@ Use `PricingOptions.FeatureListItem` with `variant="included"` and `variant="exc
323323
39
324324
</PricingOptions.Price>
325325
<PricingOptions.FeatureList>
326-
<PricingOptions.FeatureListHeading>Chat</PricingOptions.FeatureListHeading>
326+
<PricingOptions.FeatureListGroupHeading>Chat</PricingOptions.FeatureListGroupHeading>
327327
<PricingOptions.FeatureListItem>Unlimited messages, interactions, and history</PricingOptions.FeatureListItem>
328328
<PricingOptions.FeatureListItem>Context-aware coding support and explanations</PricingOptions.FeatureListItem>
329329
<PricingOptions.FeatureListItem>Debugging and security remediation assistance</PricingOptions.FeatureListItem>
330330
<PricingOptions.FeatureListItem>Repository-based semantic search</PricingOptions.FeatureListItem>
331331
<PricingOptions.FeatureListItem>Access your knowledge base</PricingOptions.FeatureListItem>
332-
<PricingOptions.FeatureListHeading>Code completion</PricingOptions.FeatureListHeading>
332+
<PricingOptions.FeatureListGroupHeading>Code completion</PricingOptions.FeatureListGroupHeading>
333333
<PricingOptions.FeatureListItem>Code suggestions as you type</PricingOptions.FeatureListItem>
334334
<PricingOptions.FeatureListItem>Comments to code</PricingOptions.FeatureListItem>
335335
<PricingOptions.FeatureListItem>Fine-tuned models (coming soon)</PricingOptions.FeatureListItem>
@@ -395,7 +395,13 @@ One item per pricing plan to be displayed. Maximum of 3 items.
395395
| `expanded` | `boolean` | `true` | `false` | Controls visibility of feature items. Accepts Object type for granular control at different viewport sizes. |
396396
| `hasDivider` | `boolean` | `true` | `false` | Controls visibility of a visual border between feature lists and adjacent actions |
397397

398-
### PricingOptions.FeatureListHeading
398+
### PricingOptions.FeatureListGroupHeading
399+
400+
| Name | Type | Default | required | Description |
401+
| :--------- | :---------- | :-----------------: | :------: | :---------------------------------- |
402+
| `children` | `ReactNode` | `"What's included"` | `false` | A custom title for the feature list |
403+
404+
### PricingOptions.FeatureListGroupHeading
399405

400406
| Name | Type | Default | required | Description |
401407
| :--------- | :----------- | :---------: | :------: | :------------------------------------------------ |

0 commit comments

Comments
 (0)