Skip to content

Commit 30d9f1f

Browse files
danielguillandanielguillan
authored
Update single item PricingOptions layout (#1113)
1 parent 3a62a9e commit 30d9f1f

16 files changed

+53
-85
lines changed

‎.changeset/bright-gifts-cheer.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@primer/brand-primitives': patch
3+
'@primer/react-brand': patch
4+
---
5+
6+
Updated the layout of single item `PricingOptions`

‎packages/design-tokens/src/tokens/functional/components/pricing-options/pricing-options.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
"value": "var(--base-size-24)"
66
}
77
},
8+
"items1": {
9+
"container": {
10+
"paddingInline": {
11+
"value": "var(--base-size-32)"
12+
}
13+
}
14+
},
815
"items2": {
916
"gap": {
1017
"value": "var(--base-size-96)"

‎packages/react/src/PricingOptions/PricingOptions.features.stories.tsx

Lines changed: 27 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'
55
import {PricingOptions} from '.'
66
import {Box, Grid, InlineLink, Stack} from '..'
77
import imageExample from '../fixtures/images/bento/3.png'
8-
import {CopilotIcon, SparkleFillIcon} from '@primer/octicons-react'
8+
import {SparkleFillIcon} from '@primer/octicons-react'
99

1010
const decorators = Story => (
1111
<Box backgroundColor="default" paddingBlockStart="spacious" paddingBlockEnd="spacious" style={{minHeight: '100vh'}}>
@@ -165,39 +165,13 @@ export const CardsGradientVariant: StoryFn<typeof PricingOptions> = () => {
165165
)
166166
}
167167

168-
export const OneOption: StoryFn<typeof PricingOptions> = () => {
169-
return (
170-
<PricingOptions>
171-
<PricingOptions.Item>
172-
<PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
173-
<PricingOptions.Description>
174-
Code completions, Chat, and more for indie developers and freelancers.
175-
</PricingOptions.Description>
176-
<PricingOptions.Price trailingText="per month / $100 per year">10</PricingOptions.Price>
177-
<PricingOptions.PrimaryAction as="a" href="#">
178-
Buy now
179-
</PricingOptions.PrimaryAction>
180-
<PricingOptions.SecondaryAction as="a" href="#">
181-
Contact sales
182-
</PricingOptions.SecondaryAction>
183-
</PricingOptions.Item>
184-
</PricingOptions>
185-
)
186-
}
187-
188168
export const LeadingComponent: StoryFn<typeof PricingOptions> = () => {
189169
const Image = () => (
190170
<Box marginBlockEnd={24}>
191171
<img src={imageExample} alt="Copilot Individual" />
192172
</Box>
193173
)
194174

195-
const IconVisual = () => (
196-
<Box>
197-
<CopilotIcon size={24} />
198-
</Box>
199-
)
200-
201175
return (
202176
<Stack direction="vertical">
203177
<PricingOptions variant="cards">
@@ -237,25 +211,36 @@ export const LeadingComponent: StoryFn<typeof PricingOptions> = () => {
237211
</PricingOptions.PrimaryAction>
238212
</PricingOptions.Item>
239213
</PricingOptions>
240-
<PricingOptions>
241-
<PricingOptions.Item leadingComponent={<IconVisual />}>
242-
<PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
243-
<PricingOptions.Description>
244-
Code completions, Chat, and more for indie developers and freelancers.
245-
</PricingOptions.Description>
246-
<PricingOptions.Price trailingText="per month / $100 per year">10</PricingOptions.Price>
247-
<PricingOptions.PrimaryAction as="a" href="#">
248-
Buy now
249-
</PricingOptions.PrimaryAction>
250-
<PricingOptions.SecondaryAction as="a" href="#">
251-
Contact sales
252-
</PricingOptions.SecondaryAction>
253-
</PricingOptions.Item>
254-
</PricingOptions>
255214
</Stack>
256215
)
257216
}
258217

218+
export const OneOption: StoryFn<typeof PricingOptions> = () => {
219+
return (
220+
<PricingOptions>
221+
<PricingOptions.Item>
222+
<PricingOptions.Heading>Copilot Individual</PricingOptions.Heading>
223+
<PricingOptions.Description>
224+
Code completions, Chat, and more for indie developers and freelancers.
225+
</PricingOptions.Description>
226+
<PricingOptions.Price trailingText="per month / $100 per year">10</PricingOptions.Price>
227+
<PricingOptions.PrimaryAction as="a" href="#">
228+
Buy now
229+
</PricingOptions.PrimaryAction>
230+
<PricingOptions.SecondaryAction as="a" href="#">
231+
Contact sales
232+
</PricingOptions.SecondaryAction>
233+
<PricingOptions.FeatureList>
234+
<PricingOptions.FeatureListItem>Code completions</PricingOptions.FeatureListItem>
235+
<PricingOptions.FeatureListItem>Chat in IDE and Mobile</PricingOptions.FeatureListItem>
236+
<PricingOptions.FeatureListItem>CLI assistance</PricingOptions.FeatureListItem>
237+
<PricingOptions.FeatureListItem>Security vulnerability filter</PricingOptions.FeatureListItem>
238+
</PricingOptions.FeatureList>
239+
</PricingOptions.Item>
240+
</PricingOptions>
241+
)
242+
}
243+
259244
export const TwoOptions: StoryFn<typeof PricingOptions> = () => {
260245
return (
261246
<PricingOptions>

‎packages/react/src/PricingOptions/PricingOptions.module.css

Lines changed: 13 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,8 @@
1717
'footnote'
1818
;
1919

20-
/* prettier-ignore */
21-
--brand-pricing-options-template-areas-single-item:
22-
'leadingComponent actions'
23-
'header actions'
24-
'description actions'
25-
'price actions'
26-
'feature-list actions';
27-
2820
display: grid;
29-
row-gap: var(--brand-pricing-options-item-gap);
21+
row-gap: var(--brand-pricing-options-item-gap, 0);
3022
padding-inline: var(--brand-pricing-options-container-padding-inline);
3123
}
3224

@@ -40,6 +32,9 @@
4032
@media (min-width: 63.25rem) {
4133
.PricingOptions {
4234
grid-template-areas: var(--brand-pricing-options-template-areas);
35+
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
36+
column-gap: var(--brand-pricing-options-item-gap, 0);
37+
row-gap: 0;
4338
}
4439
}
4540

@@ -138,48 +133,23 @@
138133
}
139134

140135
/* ---------------------------------------------------------- */
141-
/* Single item */
142-
/* ---------------------------------------------------------- */
143-
144-
@media (min-width: 63.25rem) {
145-
.PricingOptions--items1 {
146-
--brand-pricing-options-container-padding-inline: var(--base-size-48);
147-
148-
display: block;
149-
}
150-
151-
.PricingOptions--items1 .PricingOptions__item {
152-
display: grid;
153-
grid-template-columns: 1fr 1fr;
154-
column-gap: calc(var(--base-size-96) * 2);
155-
grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
156-
grid-template-areas: var(--brand-pricing-options-template-areas-single-item);
157-
}
158-
159-
.PricingOptions--items1 .PricingOptions__actions {
160-
align-self: center;
161-
}
162-
}
163-
164-
/* ---------------------------------------------------------- */
165-
/* Multiple items */
136+
/* Items */
166137
/* ---------------------------------------------------------- */
167138

168139
@media (min-width: 48rem) {
169-
:where(.PricingOptions--layout-cards).PricingOptions--items4 {
170-
display: grid;
171-
column-gap: var(--brand-pricing-options-item-gap);
140+
:where(.PricingOptions--layout-cards.PricingOptions--items4) {
172141
row-gap: var(--brand-pricing-options-item-gap);
173142
}
174143
}
175144

176145
@media (min-width: 63.25rem) {
177-
.PricingOptions--items2,
178-
.PricingOptions--items3,
179-
.PricingOptions--items4 {
180-
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
181-
column-gap: var(--brand-pricing-options-item-gap);
182-
row-gap: 0;
146+
.PricingOptions--items1 {
147+
width: 50%;
148+
margin-inline: auto;
149+
}
150+
151+
.PricingOptions--layout-default.PricingOptions--items1 {
152+
--brand-pricing-options-container-padding-inline: var(--brand-PricingOptions-items1-container-paddingInline);
183153
}
184154

185155
.PricingOptions--layout-default.PricingOptions--items2 {

‎packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png

-24.3 KB
Loading

‎packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-de-1-linux.png

-24.2 KB
Loading

‎packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-es-1-linux.png

-24.3 KB
Loading

‎packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-fr-1-linux.png

-24.1 KB
Loading

‎packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-ja-1-linux.png

-23.8 KB
Loading

‎packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-pt-BR-1-linux.png

-24.3 KB
Loading

0 commit comments

Comments
 (0)