Skip to content

Commit b46da50

Browse files
rezrahrezrah
committed
Merge branch 'main' of github.com:primer/brand into rezrah/subnav-link-variant
2 parents a2eada9 + 00ef069 commit b46da50

File tree

43 files changed

+983
-188
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+983
-188
lines changed

‎.changeset/old-roses-brush.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Added new `Testimonial` variants.
6+
7+
Use `variant="default"` or `variant="subtle"` for an alternative visual appearance. The current design will be referred to as `minimal` going forward.
8+
9+
🔗 [See the documentation for usage examples](https://primer.style/brand/components/Testimonial/react#variants)

‎.changeset/smart-starfishes-lick.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
'@primer/brand-primitives': patch
3+
---
4+
5+
Added new design tokens for `Testimonial` and `FrostedGlassVFX` components
6+
7+
```
8+
:root {
9+
--brand-Testimonial-borderMask-default
10+
--brand-Testimonial-borderMask-subtle
11+
--brand-FrostedGlassVFX-bgColor
12+
--brand-FrostedGlassVFX-boxShadow
13+
--brand-FrostedGlassVFX-borderMask
14+
--brand-FrostedGlassVFX-blurIntensity-high
15+
--brand-FrostedGlassVFX-blurIntensity-medium
16+
--brand-FrostedGlassVFX-blurIntensity-low
17+
}
18+
```

‎.changeset/smooth-ways-retire.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+
Added a new `FrostedGlassVFX` component for applying a frosted glass-effect texture to nested components.
6+
7+
⚠️ This is an experimental component, and not tested for compatibility with other Primer Brand components.
8+
9+
When using this component, ensure there is sufficient contrast between the foreground text and the background imagery, as the frosted glass effect can significantly reduce legibility.
10+
11+
Usage example:
12+
13+
```jsx
14+
<FrostedGlassVFX>
15+
<Testimonial variant="default">
16+
<Testimonial.Quote>
17+
GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
18+
of code we&apos;re writing.
19+
</Testimonial.Quote>
20+
<Testimonial.Name />
21+
<Testimonial.Avatar />
22+
</Testimonial>
23+
</FrostedGlassVFX>
24+
```
25+
26+
🔗 (See Storybook for an example)[https://primer.style/brand/storybook/?path=/story/components-testimonial-examples--with-frosted-glass]

‎apps/docs/content/components/Testimonial/react.mdx‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@ title: Testimonial
33
figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=1852%3A27522'
44
source: https://github.com/primer/brand/blob/main/packages/react/src/Testimonial/Testimonial.tsx
55
storybook: '/brand/storybook/?path=/story/components-testimonial'
6-
description: Use the testimonial component to display a quote from a customer or user.
6+
description: Use testimonial to display a quote from a customer or user.
77
---
88

99
import ComponentLayout from '../../../src/layouts/component-layout'
1010
export default ComponentLayout
1111

12-
import {TestimonialQuoteMarkColors} from '@primer/react-brand'
12+
import {
13+
TestimonialQuoteMarkColors,
14+
TestimonialVariants,
15+
defaultTestimonialVariant,
16+
} from '@primer/react-brand'
1317
import {Box as Container, Label} from '@primer/react'
1418
import {PropTableValues} from '../../../src/components'
1519

@@ -37,6 +41,41 @@ import {Testimonial} from '@primer/react-brand'
3741
</Testimonial>
3842
```
3943

44+
### Variants
45+
46+
For an alternative visual appearance and layout, without altering semantic meaning.
47+
48+
```jsx live
49+
<Stack direction="horizontal" gap="spacious" padding="none">
50+
<Testimonial variant="default">
51+
<Testimonial.Quote>
52+
GitHub helps us ensure that we have our security controls baked into our
53+
pipelines all the way from the first line of code we&apos;re writing.
54+
</Testimonial.Quote>
55+
<Testimonial.Name position="Staff Security Engineer">
56+
David Ross
57+
</Testimonial.Name>
58+
<Testimonial.Avatar
59+
src="/brand/assets/avatar-mona.png"
60+
alt="Circular avatar from David Ross's GitHub profile"
61+
/>
62+
</Testimonial>
63+
<Testimonial variant="subtle">
64+
<Testimonial.Quote>
65+
GitHub helps us ensure that we have our security controls baked into our
66+
pipelines all the way from the first line of code we&apos;re writing.
67+
</Testimonial.Quote>
68+
<Testimonial.Name position="Staff Security Engineer">
69+
David Ross
70+
</Testimonial.Name>
71+
<Testimonial.Avatar
72+
src="/brand/assets/avatar-mona.png"
73+
alt="Circular avatar from David Ross's GitHub profile"
74+
/>
75+
</Testimonial>
76+
</Stack>
77+
```
78+
4079
### Logo
4180

4281
A logo (or similar) visual can be provided as an alternative to avatars.
@@ -129,6 +168,7 @@ Pass additional content about the testimonial provider using `position`.
129168
| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
130169
| `size` | <PropTableValues addLineBreaks values={['small','large']}/> | `'small'` | Set size of quote's text |
131170
| `quoteMarkColor` | <PropTableValues addLineBreaks values={TestimonialQuoteMarkColors}/> | `'default'` | Color or gradient fill of the the quote mark. |
171+
| `variant` | <PropTableValues addLineBreaks values={TestimonialVariants}/> | `'minimal'` | Alternative visual appearance |
132172

133173
<h3 id="Testimonial-name">
134174
Testimonial.Name <Label>Required</Label>

‎packages/design-tokens/scripts/build-tokens.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
272272
`tokens/functional/components/river-story-scroll/colors.js`,
273273
`tokens/functional/components/pricing-options/colors.json`,
274274
`tokens/functional/components/icon/colors.json`,
275+
`tokens/functional/components/frosted-glass-vfx/colors.js`,
275276
]
276277

277278
for (const path of filesForColorModes) {

‎packages/design-tokens/src/tokens/functional/components/frosted-glass-vfx/base.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"FrostedGlassVFX": {
3+
"blurIntensity": {
4+
"low": {
5+
"value": "var(--base-size-12)"
6+
},
7+
"medium": {
8+
"value": "var(--base-size-48)"
9+
},
10+
"high": {
11+
"value": "var(--base-size-80)"
12+
}
13+
}
14+
}
15+
}

‎packages/design-tokens/src/tokens/functional/components/frosted-glass-vfx/colors.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
FrostedGlassVFX: {
3+
bgColor: {
4+
value: 'rgba(255, 255, 255, 0.7)',
5+
dark: 'rgba(156, 156, 156, .1)',
6+
},
7+
boxShadow: {
8+
value: '0 4px 10px 0 rgba(0, 0, 0, 0.02)',
9+
dark: '0 4px 10px 0 rgba(0, 0, 0, 0.02)',
10+
},
11+
borderMask: {
12+
value: 'linear-gradient(to bottom, #D8DEE480, #D8DEE45E 100%)',
13+
dark: 'linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box',
14+
},
15+
},
16+
}

‎packages/design-tokens/src/tokens/functional/components/testimonial/colors.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
{
22
"Testimonial": {
3+
"borderMask": {
4+
"default": {
5+
"value": "linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3))",
6+
"dark": "linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1))"
7+
},
8+
"subtle": {
9+
"value": "linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3))",
10+
"dark": "linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1))"
11+
}
12+
},
313
"quoteMarkColor": {
414
"default": {
515
"value": "var(--brand-color-text-default)",

‎packages/e2e/scripts/playwright/playwright.generate-tests.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@
9494
'components-textrevealanimation-examples--with-hero': 3000, // for the animation
9595
'components-textrevealanimation-features--animation-on-scroll': 3000, // for the animation
9696
'components-footnotes-examples--rivers-with-citations': 3000, // for the images
97+
'components-pillar-features--frosted-glass-effect': 3000, // for image to load
98+
'components-testimonial-examples--with-frosted-glass': 4000, // for animation to complete
99+
'components-testimonial-examples--with-frosted-glass-dark': 4000, // for animation to complete
97100
}
98101

99102
/**

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.FrostedGlassVFX {
2+
position: relative;
3+
background-color: var(--brand-FrostedGlassVFX-bgColor);
4+
}
5+
6+
.FrostedGlassVFX--rounded-corners {
7+
border-radius: var(--brand-borderRadius-xlarge);
8+
}
9+
10+
.FrostedGlassVFX--intensity-low {
11+
backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-low));
12+
}
13+
14+
.FrostedGlassVFX--intensity-medium {
15+
backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-medium));
16+
}
17+
18+
.FrostedGlassVFX--intensity-high {
19+
backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-high));
20+
}
21+
22+
.FrostedGlassVFX::before {
23+
content: '';
24+
position: absolute;
25+
z-index: -1;
26+
inset: 0;
27+
padding: var(--brand-borderWidth-thin);
28+
background: var(--brand-FrostedGlassVFX-borderMask);
29+
mask: linear-gradient(var(--base-color-scale-black-0) 0 0) exclude,
30+
linear-gradient(var(--base-color-scale-black-0) 0 0) content-box;
31+
}
32+
33+
.FrostedGlassVFX--rounded-corners::before {
34+
border-radius: var(--brand-borderRadius-xlarge);
35+
}
36+
37+
.FrostedGlassVFX > * {
38+
background-color: transparent;
39+
}
40+
41+
.FrostedGlassVFX > *,
42+
.FrostedGlassVFX > *::before {
43+
border-color: transparent;
44+
}

0 commit comments

Comments
 (0)