Skip to content

Commit 45a90c3

Browse files
adamjohnsonbennypowers
adamjohnson
and
bennypowers
committed
feat(announcement): add <rh-announcement> v2 (#2153)
* feat(announcement): add `<rh-announcement>` Continuation on PR #1722. * fix(announcement): fix lint error from font stack * fix(announcement): remove unused variable * fix(announcement): dismissible button location * fix(announcement): fix dismissible demo spelling * refactor(announcement): alphabetize `#container` properties * fix(announcement): use appropriate token values for bkg color * feat(announcement): enable theming of the background of the `#container` * fix(announcement): remove content, body and cta parts * fix(announcement): rename attr `imgleft` to `image-position` * docs(announcement): add explainer text to image position demo * refactor(announcement): nest CSS selectors * fix(announcement): center align image on tablet+ viewports * feat(announcement): add lightdom CSS / improve FOUC * fix(announcement): proper rh-button a11y label attribute * docs(announcement): remove outdated docs files * fix(announcement): remove unneeded demo styles for `<main>` * fix(announcement): center image + content on mobile viewports * feat(announcement): add `block-start` to `image-position` property * docs(announcement): remove docs related to outdated CSS parts * docs(announcement): add docs for the close event * docs(announcement): add `image-position` examples to Dismissible demo * fix(announcement): increase close / dismiss button size * fix(announcement): spacing tweaks * fix(announcement): reference surface var for `.dark` bkg color * chore(announcement): normalize spacing in `calc` * refactor(announcement): nest css * fix(announcement): remove left padding from CTA * fix(announcement): restore padding to `inline-start` CTA on mobile viewports * chore(announcement): add announcement to repo status file * docs(announcement): add content to overview page * docs(announcement): add content to style page * docs(announcement): add content to guidelines page * docs(announcement): add content to accessibility page * docs(announcement): alt first * docs(announcement): move href to CTA host, no lightdom HTML * docs(announcement): remove fallbacks from vars in demo SVGs * docs(announcement): spelling fix, update attributes in announcement README * fix(announcement): rename lightdom.css to lightdom-shim.css * fix(announcement): remove lightdom shim dark color palette slotted content color definitions * test(announcement): add tests for close / dismiss functionality * fix(announcement): remove `--rh-color-surface-dark-alt` * docs(announcement): add note about personalization to Overview * test(announcement): nest actions in describe blocks * refactor(announcement): spelling for dismissible 👉 dismissABLE --------- Co-authored-by: Benny Powers <[email protected]>
1 parent 5fe7c43 commit 45a90c3

Some content is hidden

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

42 files changed

+3383
-0
lines changed

‎.changeset/proud-trees-exercise.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
"@rhds/elements": minor
3+
---
4+
5+
✨ Added `<rh-announcement>`.
6+
7+
`<rh-announcement>` is a short banner that conveys an important message, such as
8+
promoting an event or advertising an organizational or product announcement.
9+
10+
```html
11+
<rh-announcement>
12+
<img slot="image"
13+
alt="summit logo"
14+
src="/images/summit.png">
15+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
16+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
17+
</rh-announcement>
18+
```

‎docs/_data/repoStatus.ts

+12
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,18 @@ export default [
6767
docs: 'ready',
6868
},
6969
},
70+
{
71+
tagName: 'rh-announcement',
72+
name: 'Announcement',
73+
type: 'element',
74+
overallStatus: 'new',
75+
libraries: {
76+
figma: 'ready',
77+
rhds: 'ready',
78+
shared: 'planned',
79+
docs: 'ready',
80+
},
81+
},
7082
{
7183
tagName: 'rh-audio-player',
7284
name: 'Audio player',

‎elements/rh-announcement/README.md

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Announcement
2+
3+
Announcement is a short banner that conveys an important message, such as
4+
promoting an event or advertising an organizational or product announcement.
5+
6+
## Usage
7+
8+
### Slots
9+
10+
`image`
11+
12+
- This slot can be used to add an image element such as a logo
13+
14+
`cta`
15+
16+
- This slot expects a rh-cta component
17+
18+
`Anonymous Slot`
19+
20+
- Any text content to be displayed in the banner will go in this slot, generally
21+
within a p tag.
22+
23+
### Attributes
24+
25+
`dismissable`
26+
27+
- If this attribute is added, a close button will appear in the top right
28+
corner. Clicking this will hide the banner.
29+
30+
`image-position`
31+
32+
- Change the position of the image on mobile viewports. Possible values are:
33+
* `inline-start`
34+
* `block-start`
35+
36+
37+
### Basic Announcement Banner
38+
39+
```html
40+
<rh-announcement>
41+
<img slot="image"
42+
alt="summit logo"
43+
src="/images/summit.png">
44+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
45+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
46+
</rh-announcement>
47+
```
48+
49+
### Announcement Banner using attributes
50+
51+
- `dismissable`
52+
- `image-position="inline-start"`
53+
- dark color palette
54+
55+
```html
56+
<rh-announcement dismissable image-position="inline-start" color-palette="dark">
57+
<img slot="image"
58+
alt="summit logo"
59+
src="/images/summit.png">
60+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
61+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
62+
</rh-announcement>
63+
```

‎elements/rh-announcement/demo/color-context.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<rh-context-demo>
2+
<rh-announcement>
3+
<svg slot="image"
4+
width="80"
5+
height="48"
6+
role="img"
7+
aria-label="Sample image">
8+
<rect fill="var(--rh-color-gray-60, #4D4D4D)"
9+
stroke="var(--rh-color-border-subtle)"
10+
stroke-width="2px"
11+
width="100%"
12+
height="100%"
13+
stroke-dasharray="4 4">
14+
</rect>
15+
<text x="17"
16+
y="30"
17+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
18+
fill="var(--rh-color-text-secondary)">
19+
Image
20+
</text>
21+
</svg>
22+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
23+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
24+
</rh-announcement>
25+
</rh-context-demo>
26+
27+
<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
28+
29+
<script type="module">
30+
import '@rhds/elements/rh-cta/rh-cta.js';
31+
import '@rhds/elements/rh-announcement/rh-announcement.js';
32+
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
33+
</script>

‎elements/rh-announcement/demo/dismissable.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<rh-announcement dismissable>
2+
<svg slot="image"
3+
width="80"
4+
height="48"
5+
role="img"
6+
aria-label="Sample image">
7+
<rect fill="var(--rh-color-border-interactive)"
8+
fill-opacity="0.1"
9+
stroke="var(--rh-color-border-interactive)"
10+
stroke-width="2px"
11+
width="100%"
12+
height="100%"
13+
stroke-dasharray="4 4">
14+
</rect>
15+
<text x="17"
16+
y="30"
17+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
18+
fill="var(--rh-color-blue-50, #0066CC)">
19+
Image
20+
</text>
21+
</svg>
22+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit ipsum dolor sit.</p>
23+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
24+
</rh-announcement>
25+
26+
<rh-announcement dismissable color-palette="dark" image-position="inline-start">
27+
<svg slot="image"
28+
width="80"
29+
height="48"
30+
role="img"
31+
aria-label="Sample image">
32+
<rect fill="var(--rh-color-gray-60, #4D4D4D)"
33+
stroke="var(--rh-color-border-subtle)"
34+
stroke-width="2px"
35+
width="100%"
36+
height="100%"
37+
stroke-dasharray="4 4">
38+
</rect>
39+
<text x="17"
40+
y="30"
41+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
42+
fill="var(--rh-color-text-secondary)">
43+
Image
44+
</text>
45+
</svg>
46+
<p>An announcement with <code>inline-start</code> for the value of <code>image position</code>.</p>
47+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
48+
</rh-announcement>
49+
50+
<rh-announcement dismissable image-position="block-start">
51+
<svg slot="image"
52+
width="80"
53+
height="48"
54+
role="img"
55+
aria-label="Sample image">
56+
<rect fill="var(--rh-color-border-interactive)"
57+
fill-opacity="0.1"
58+
stroke="var(--rh-color-border-interactive)"
59+
stroke-width="2px"
60+
width="100%"
61+
height="100%"
62+
stroke-dasharray="4 4">
63+
</rect>
64+
<text x="17"
65+
y="30"
66+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
67+
fill="var(--rh-color-blue-50, #0066CC)">
68+
Image
69+
</text>
70+
</svg>
71+
<p>An announcement with <code>block-start</code> for the value of <code>image position</code>.</p>
72+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
73+
</rh-announcement>
74+
75+
<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
76+
77+
<script type="module">
78+
import '@rhds/elements/rh-cta/rh-cta.js';
79+
import '@rhds/elements/rh-announcement/rh-announcement.js';
80+
</script>

‎elements/rh-announcement/demo/events.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<rh-announcement dismissable>
2+
<svg slot="image"
3+
width="80"
4+
height="48"
5+
role="img"
6+
aria-label="Sample image">
7+
<rect fill="var(--rh-color-border-interactive)"
8+
fill-opacity="0.1"
9+
stroke="var(--rh-color-border-interactive)"
10+
stroke-width="2px"
11+
width="100%"
12+
height="100%"
13+
stroke-dasharray="4 4">
14+
</rect>
15+
<text x="17"
16+
y="30"
17+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
18+
fill="var(--rh-color-blue-50, #0066CC)">
19+
Image
20+
</text>
21+
</svg>
22+
<p>Click the close button to fire the <code>close</code> event.</p>
23+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
24+
</rh-announcement>
25+
26+
<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
27+
28+
<script type="module">
29+
import '@rhds/elements/rh-cta/rh-cta.js';
30+
import '@rhds/elements/rh-announcement/rh-announcement.js';
31+
32+
const getAnnouncement = document.querySelector('rh-announcement');
33+
getAnnouncement.addEventListener('close', closeEvent);
34+
35+
// Replace with custom close event logic:
36+
function closeEvent() {
37+
window.alert('Close event fired.')
38+
}
39+
</script>

‎elements/rh-announcement/demo/image-position.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<rh-announcement image-position="inline-start">
2+
<svg slot="image"
3+
width="80"
4+
height="48"
5+
role="img"
6+
aria-label="Sample image">
7+
<rect fill="var(--rh-color-border-interactive)"
8+
fill-opacity="0.1"
9+
stroke="var(--rh-color-border-interactive)"
10+
stroke-width="2px"
11+
width="100%"
12+
height="100%"
13+
stroke-dasharray="4 4">
14+
</rect>
15+
<text x="17"
16+
y="30"
17+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
18+
fill="var(--rh-color-blue-50, #0066CC)">
19+
Image
20+
</text>
21+
</svg>
22+
<p>On mobile viewports, the image will stay to the left (inline-start) of this main body content.</p>
23+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
24+
</rh-announcement>
25+
26+
<rh-announcement image-position="block-start" color-palette="dark">
27+
<svg slot="image"
28+
width="80"
29+
height="48"
30+
role="img"
31+
aria-label="Sample image">
32+
<rect fill="var(--rh-color-gray-60, #4D4D4D)"
33+
stroke="var(--rh-color-border-subtle)"
34+
stroke-width="2px"
35+
width="100%"
36+
height="100%"
37+
stroke-dasharray="4 4">
38+
</rect>
39+
<text x="17"
40+
y="30"
41+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
42+
fill="var(--rh-color-text-secondary)">
43+
Image
44+
</text>
45+
</svg>
46+
<p>In this <code>block-start</code> version, the image stays on top of the body content on mobile viewports.</p>
47+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
48+
</rh-announcement>
49+
50+
<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
51+
52+
<script type="module">
53+
import '@rhds/elements/rh-cta/rh-cta.js';
54+
import '@rhds/elements/rh-announcement/rh-announcement.js';
55+
</script>

‎elements/rh-announcement/demo/rh-announcement.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<rh-announcement>
2+
<svg slot="image"
3+
width="80"
4+
height="48"
5+
role="img"
6+
aria-label="Sample image">
7+
<rect fill="var(--rh-color-border-interactive)"
8+
fill-opacity="0.1"
9+
stroke="var(--rh-color-border-interactive)"
10+
stroke-width="2px"
11+
width="100%"
12+
height="100%"
13+
stroke-dasharray="4 4">
14+
</rect>
15+
<text x="17"
16+
y="30"
17+
style="font-family: var(--rh-font-family-code, RedHatMono, 'Red Hat Mono', 'Courier New', Courier, monospace); font-size: var(--rh-font-size-body-text-md, 1rem);"
18+
fill="var(--rh-color-blue-50, #0066CC)">
19+
Image
20+
</text>
21+
</svg>
22+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
23+
<rh-cta slot="cta" href="#">Learn More</rh-cta>
24+
</rh-announcement>
25+
26+
<link rel="stylesheet" href="../rh-announcement-lightdom-shim.css">
27+
28+
<script type="module">
29+
import '@rhds/elements/rh-cta/rh-cta.js';
30+
import '@rhds/elements/rh-announcement/rh-announcement.js';
31+
</script>

‎elements/rh-announcement/docs/00-overview.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## When to use
2+
3+
- Display an important message across many pages or page types
4+
- Only to be implemented through the personalization program
5+
6+
<div id="overview-image-description" class="visually-hidden">
7+
Example of a announcement banner
8+
</div>
9+
10+
## Benefits
11+
12+
- **Profile** - thin design that does not push content down too much
13+
- **Lots of eyes** - has the potential to be seen across many pages or page types
14+
- **Minimal elements** - only body text and a call to action are required at a minimum
15+
- **Maximum visibility** - spans the entire width of the browser window
16+
- **Customization** - includes slots for further customization like inline or background images
17+
- **Control** - if included, a close button offers a way for users to close the pattern

0 commit comments

Comments
 (0)