Skip to content

Commit 32db92d

Browse files
bennypowersbennypowers
authored
Merge branch 'staging/chansey' into fix/alert-text-color
2 parents 832684e + 3c58a7d commit 32db92d

34 files changed

+905
-18
lines changed

‎.changeset/spicy-cups-fly.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
"@rhds/elements": minor
3+
---
4+
⚛️ Added React wrapper components
5+
6+
You can now more easily integrate RHDS elements into your React apps by importing our wrapper components
7+
8+
First, make sure that you list `@lit/react` as a dependency in your project
9+
10+
```sh
11+
npm install --save @lit/react
12+
```
13+
14+
Then import the element components you need and treat them like any other react component
15+
16+
```js
17+
import { Tabs } from '@rhds/elements/react/rh-tabs/rh-tabs.js';
18+
import { Tab } from '@rhds/elements/react/rh-tabs/rh-tab.js';
19+
import { TabPanel } from '@rhds/elements/react/rh-tabs/rh-tab-panel.js';
20+
21+
import { useState } from 'react';
22+
23+
const tabs = [
24+
{ heading: 'Hello Red Hat', content: 'Let\'s break down silos' },
25+
{ heading: 'Web components', content: 'They work everywhere' }
26+
];
27+
28+
function App() {
29+
const [index, setExpanded] = useState(-1);
30+
return (
31+
<span>expanded {expanded}</span>
32+
<Tabs>{tabs.map(({ heading, content }, i) => (
33+
<Tab slot="tab" onExpand={() => setExpanded(i)}>{heading}</Tab>
34+
<TabPanel>{content}</TabPanel>))}
35+
</Tabs>
36+
);
37+
}
38+
```

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ docs/assets/playgrounds/
1212
# Build artifacts
1313
elements/*/*.js
1414
elements/*/test/*.js
15+
react
1516
lib/**/*.js
1617
!elements/**/demo/*.css
1718
*.map

‎docs/_includes/component/header.njk

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
</details>
4949
</li>
5050

51-
<!-- Get started -->
51+
<!-- Get started (Subitems here use the heading in the frontmatter for the link text.) -->
5252

5353
<li class="item">
5454
<details {{ 'open' if 'get-started/' in page.url }}>
@@ -61,7 +61,7 @@
6161
{%- for link in collections.getstarted -%}
6262
<li class="item">
6363
<a class="link {{ 'active' if page.url === link.url }}"
64-
href="{{ link.url | url }}">{{ link.data.title }}</a>
64+
href="{{ link.url | url }}">{{ link.data.heading }}</a>
6565
</li>
6666
{%- endfor -%}
6767
</ul>

‎docs/_includes/layout-foundations.njk ‎docs/_includes/layout-with-subnav.njk

+9-5
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,24 @@ importElements:
77
- rh-subnav
88
- rh-tag
99
- rh-badge
10+
- rh-code-block
1011
---
1112

1213
{% include 'component/header.njk' %}
1314

1415
<main class="l-main">
1516
<article class="l-main__inner">
1617
<header class="l-main__header l-main__header--palette-lighter">
17-
<div class="container header has-subnav">
18+
<div class="container header {% if subNavCollection %}has-subnav{% endif %}">
1819
<h1 id="{{ heading or title }}" class="page-title">{{ heading or title }}</h1>
19-
<rh-subnav>{% for tab in collections.sortedColor %}
20-
<a {{ 'active' if tab.url == page.url }} href="{{ tab.url }}">
21-
{{ tab.data.title }}
22-
</a>{% endfor %}
20+
{% if subNavCollection %}
21+
<rh-subnav>
22+
{% for tab in collections[subNavCollection] %}
23+
<a {{ 'active' if tab.url == page.url }} href="{{ tab.url }}">
24+
{{ tab.data.title }}</a>
25+
{% endfor %}
2326
</rh-subnav>
27+
{% endif %}
2428
</div>
2529
</header>
2630
<div class="l-main__content">

‎docs/_plugins/rhds.cjs

+7
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,13 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
230230
});
231231
});
232232

233+
eleventyConfig.addCollection('sortedDevelopers', async function(collectionApi) {
234+
const developersCollection = collectionApi.getFilteredByTags('developers');
235+
return developersCollection.sort((a, b) => {
236+
if (a.data.order > b.data.order) { return 1; } else if (a.data.order < b.data.order) { return -1; } else { return 0; }
237+
});
238+
});
239+
233240
eleventyConfig.addCollection('elementDocs', async function(collectionApi) {
234241
const { pfeconfig } = eleventyConfig?.globalData ?? {};
235242
/**

‎docs/foundations/color/accessibility.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
2-
layout: layout-foundations.njk
2+
layout: layout-with-subnav.njk
33
title: Accessibility
44
heading: Color
55
tags:
66
- color
77
permalink: /foundations/color/accessibility/index.html
8+
subNavCollection: sortedColor
89
order: 20
910
bodyClasses: element-docs
1011
---

‎docs/foundations/color/index.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
---
2-
layout: layout-foundations.njk
2+
layout: layout-with-subnav.njk
33
title: Overview
44
heading: Color
55
tags:
66
- foundations
77
- color
88
permalink: /foundations/color/index.html
9+
subNavCollection: sortedColor
910
order: 00
1011
bodyClasses: element-docs
1112
---

‎docs/foundations/color/usage.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
---
2-
layout: layout-foundations.njk
2+
layout: layout-with-subnav.njk
33
title: Usage
44
heading: Color
55
tags:
66
- color
77
permalink: /foundations/color/usage/index.html
8+
subNavCollection: sortedColor
89
order: 10
910
bodyClasses: element-docs
1011
---

‎docs/get-started.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@ The Red Hat Design System for digital experiences gives designers and developers
3737
<figcaption>Designers</figcaption>
3838
</figure>
3939
</a>
40-
<figure>
41-
{% example
42-
palette="descriptive",
43-
alt="Card overlapping code editor user interface",
44-
src="/assets/get-started/developers.png" %}
45-
<figcaption>Developers (Coming soon)</figcaption>
46-
</figure>
40+
<a href="/get-started/developers">
41+
<figure>
42+
{% example
43+
palette="descriptive",
44+
alt="Card overlapping code editor user interface",
45+
src="/assets/get-started/developers.png" %}
46+
<figcaption>Developers</figcaption>
47+
</figure>
48+
</a>
4749
</nav>
4850

4951
{% feedback %}

‎docs/get-started/designers.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
layout: layout-basic.njk
33
title: Designers
4+
heading: Designers
45
order: 2
56
tags:
67
- getstarted

‎docs/get-started/developers/index.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
layout: layout-with-subnav.njk
3+
title: Overview
4+
heading: Developers
5+
tags:
6+
- getstarted
7+
- developers
8+
permalink: /get-started/developers/index.html
9+
subNavCollection: sortedDevelopers
10+
order: 00
11+
bodyClasses: element-docs
12+
---
13+
14+
## Introduction
15+
16+
Welcome to the **Red Hat Design System** (RHDS) for digital experiences. If you need to develop something using our design system, you have come to the right place.
17+
18+
Read this section to get started and e-mail [design-system@redhat.com](mailto:design-system@redhat.com) or connect with us on Slack if you have any questions along the way.
19+
20+
## Learn about our design system
21+
22+
Our design system libraries and the documentation website offer assets and guidance needed to create digital experiences. Please use these resources to have a better understanding of how to use our design system.
23+
24+
<div class="multi-column--min-400-wide">
25+
<div>
26+
<h3>Foundations</h3>
27+
<p><a href="foundations">Foundations</a> are how we express our brand through color, space, typography, etc.</p>
28+
</div>
29+
<div>
30+
<h3>Design tokens</h3>
31+
<p><a href="tokens">Design tokens</a> are how we translate our design language decisions into code.</p>
32+
</div>
33+
<div>
34+
<h3>Documentation</h3>
35+
<p>This website offers guidance about how to use our <a href="elements">elements</a> and <a href="patterns">patterns</a> correctly.</p>
36+
</div>
37+
<div>
38+
<h3>GitHub repositories</h3>
39+
<p>Explore our code, roadmaps, and discussions in the <a href="https://github.com/RedHat-UX/red-hat-design-system">Red Hat Design System repo</a> and the <a href="https://github.com/RedHat-UX/red-hat-design-tokens">Red Hat Design Tokens repo</a>.</p>
40+
</div>
41+
</div>
42+
43+
## About web components
44+
45+
Web components are based on a set of web platform APIs that help to create reusable and encapsulated UI elements. Those standards consist of custom elements, shadow DOM, and HTML Templates.
46+
47+
Because they're able to work with any framework that supports HTML, web components can be used without having to rework all of your code and are less likely to be affected by changes in preferred web stacks. Encapsulation within the shadow DOM prevents a page's code from breaking a component's style and allows for a scalable design system.
48+
49+
{% feedback %}
50+
<h2>Designers</h2>
51+
<p>To get started using our design system as a designer, go to the <a href="get-started/designers">Designers</a> page.</p>
52+
{% endfeedback %}

‎docs/get-started/developers/installation.md

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
layout: layout-with-subnav.njk
3+
title: Installation
4+
heading: Developers
5+
tags:
6+
- developers
7+
permalink: /get-started/developers/installation/index.html
8+
subNavCollection: sortedDevelopers
9+
order: 10
10+
bodyClasses: element-docs
11+
---
12+
13+
## How to install
14+
15+
There are three ways you can install the Red Hat Design System's web components: CDN, NPM, or JSPM. Each element's "Code" page includes the same installation information with code snippets that are specific to that element.
16+
17+
### Red Hat CDN
18+
19+
{% alert title="CDN Prerelease",
20+
state="warning" %}
21+
<p>We are currently working on our CDN, which will be soon moving into beta. This will be the preferred method of installation in the near future. If you are a Red Hat associate and have questions or comments about the CDN or installation process please connect with us on Slack.</p>
22+
{% endalert %}
23+
24+
The recommended way to load RHDS is via the Red Hat Digital Experience CDN, and using an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap).
25+
26+
If you have full control over the page you are using, add an import map to the `<head>`, pointing to the CDN, or update any existing import map. If you are not responsible for the page's `<head>`, request that the page owner makes the change on your behalf.
27+
28+
<rh-code-block>
29+
<script type="text/sample-javascript">
30+
<script type="importmap">
31+
{
32+
"imports": {
33+
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@1.1.0/elements/",
34+
"@patternfly/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@patternfly/elements@2.2.2/"
35+
}
36+
}
37+
<</script><script type="text/sample-javascript">/script>
38+
</script>
39+
</rh-code-block>
40+
41+
Once the import map is established, you can load the element with the following module, containing a [bare module specifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). The example below shows how you'd load in <`rh-button>`.
42+
43+
<rh-code-block>
44+
<script type="text/sample-javascript">
45+
<script type="module">
46+
import '@rhds/elements/rh-button/rh-button.js';
47+
<</script><script type="text/sample-javascript">/script>
48+
</script>
49+
</rh-code-block>
50+
51+
Note that modules may be placed in the `<head>`. Since they are deferred by default, they will not block rendering.
52+
53+
### NPM
54+
55+
Install RHDS using your team's preferred NPM package manager.
56+
57+
<rh-code-block>
58+
<script type="text/sample-javascript">
59+
npm install @rhds/elements
60+
</script>
61+
</rh-code-block>
62+
63+
Once that's been accomplished, you will need to use a bundler to resolve the bare module specifiers and optionally optimize the package for your site's particular use case and needs. Comprehensive guides to bundling are beyond the scope of this page; read more about bundlers on their websites:
64+
65+
- [Rollup](https://rollupjs.org/)
66+
- [esbuild](https://esbuild.github.io/)
67+
- [Parcel](https://parceljs.org/)
68+
- [Webpack](https://webpack.js.org/)
69+
70+
### JSPM
71+
72+
{% alert title="Public CDNs",
73+
state="warning" %}
74+
<p>JSPM and other public CDNs should not be used on corporate domains. Use them for <strong>development purposes only</strong>!</p>
75+
{% endalert %}
76+
77+
Add an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to the `<head>`, pointing to the CDN, or update any existing import map.
78+
79+
<rh-code-block>
80+
<script type="text/sample-javascript">
81+
<script type="importmap">
82+
{
83+
"imports": {
84+
"@rhds/elements/": "https://jspm.dev/@rhds/elements/",
85+
"@patternfly/elements/": "https://jspm.dev/@patternfly/elements/"
86+
}
87+
}
88+
<</script><script type="text/sample-javascript">/script>
89+
</script>
90+
</rh-code-block>
91+
92+
Once the import map is established, you can load the element with the following module, containing a [bare module specifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). The example below shows how you'd load in <`rh-button>`.
93+
94+
<rh-code-block>
95+
<script type="text/sample-javascript">
96+
<script type="module">
97+
import '@rhds/elements/rh-button/rh-button.js';
98+
<</script><script type="text/sample-javascript">/script>
99+
</script>
100+
</rh-code-block>
101+
102+
Note that Modules may be placed in the `<head>`. Since they are deferred by default, they will not block rendering.
103+
104+
{% feedback %}
105+
<h2>Designers</h2>
106+
<p>To get started using our design system as a designer, go to the <a href="get-started/designers">Designers</a> page.</p>
107+
{% endfeedback %}

0 commit comments

Comments
 (0)