Skip to content

Commit 606ffe7

Browse files
tamara-corbalttamara-corbalt
authored
[CMSDS-3602] Updates 'for-developers' page to display themed code blocks with latest version numbers (#3807)
Adds dynamic code block component for themed links with latest version
1 parent 9ef8323 commit 606ffe7

File tree

4 files changed

+126
-86
lines changed

4 files changed

+126
-86
lines changed

‎packages/docs/content/getting-started/for-developers.mdx‎

Lines changed: 61 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -100,82 +100,74 @@ A content delivery network (CDN) is a collection of servers that dynamically all
100100
#### Example loading CSS via CDN
101101

102102
<ThemeContent onlyThemes={['core']}>
103-
104-
```html
105-
<link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/13.0.0/css/index.css" />
106-
<link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/13.0.0/css/core-theme.css" />
107-
```
108-
103+
<ThemeCodeBlock
104+
theme="core"
105+
type="css"
106+
files={['css/index.css', 'css/core-theme.css']}
107+
/>
109108
</ThemeContent>
110-
111109
<ThemeContent onlyThemes={['healthcare']}>
112110

113-
```html
114-
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-healthcare-gov/17.0.0/css/index.css" />
115-
<link
116-
rel="stylesheet"
117-
href="https://design.cms.gov/cdn/ds-healthcare-gov/17.0.0/css/healthcare-theme.css"
118-
/>
119-
```
111+
<ThemeCodeBlock
112+
theme="healthcare"
113+
type="css"
114+
files={['css/index.css', 'css/healthcare-theme.css']}
115+
/>
120116

121117
</ThemeContent>
122118

123119
<ThemeContent onlyThemes={['medicare']}>
124120

125-
```html
126-
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-medicare-gov/15.0.0/css/index.css" />
127-
<link
128-
rel="stylesheet"
129-
href="https://design.cms.gov/cdn/ds-medicare-gov/15.0.0/css/medicare-theme.css"
130-
/>
131-
```
121+
<ThemeCodeBlock
122+
theme="medicare"
123+
type="css"
124+
files={['css/index.css', 'css/medicare-theme.css']}
125+
/>
132126

133127
</ThemeContent>
134128

135129
<ThemeContent onlyThemes={['cmsgov']}>
136130

137-
```html
138-
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-cms-gov/13.0.0/css/index.css" />
139-
<link
140-
rel="stylesheet"
141-
href="https://design.cms.gov/cdn/ds-cms-gov/13.0.0/css/cmsgov-theme.css"
142-
/>
143-
```
131+
<ThemeCodeBlock
132+
theme="cmsgov"
133+
type="css"
134+
files={['css/index.css', 'css/cmsgov-theme.css']}
135+
/>
144136

145137
</ThemeContent>
146138

147139
#### Example loading web components via CDN
148140

149141
<ThemeContent onlyThemes={['core']}>
150-
151-
```html
152-
<script src="https://design.cms.gov/cdn/design-system/13.0.0/web-components/bundle/web-components.js"></script>
153-
```
154-
142+
<ThemeCodeBlock
143+
theme="core"
144+
type="script"
145+
files={['web-components/bundle/web-components.js']}
146+
/>
155147
</ThemeContent>
156148

157149
<ThemeContent onlyThemes={['healthcare']}>
158-
159-
```html
160-
<script src="https://design.cms.gov/cdn/ds-healthcare-gov/17.0.0/web-components/bundle/web-components.js"></script>
161-
```
162-
150+
<ThemeCodeBlock
151+
theme="healthcare"
152+
type="script"
153+
files={['web-components/bundle/web-components.js']}
154+
/>
163155
</ThemeContent>
164156

165157
<ThemeContent onlyThemes={['medicare']}>
166-
167-
```html
168-
<script src="https://design.cms.gov/cdn/ds-medicare-gov/15.0.0/web-components/bundle/web-components.js"></script>
169-
```
170-
158+
<ThemeCodeBlock
159+
theme="medicare"
160+
type="script"
161+
files={['web-components/bundle/web-components.js']}
162+
/>
171163
</ThemeContent>
172164

173165
<ThemeContent onlyThemes={['cmsgov']}>
174-
175-
```html
176-
<script src="https://design.cms.gov/cdn/ds-cms-gov/13.0.0/web-components/bundle/web-components.js"></script>
177-
```
178-
166+
<ThemeCodeBlock
167+
theme="cmsgov"
168+
type="script"
169+
files={['web-components/bundle/web-components.js']}
170+
/>
179171
</ThemeContent>
180172

181173
### Option 3: Download assets directly
@@ -191,56 +183,39 @@ No matter what framework you use to build your application, you will need to inc
191183
You will need to include both the main `index.css` along with a theme file which contains all of the CSS variables needed by the main stylesheet. The simplest way to do that is to include resource link elements in your HTML document, like this:
192184

193185
<ThemeContent onlyThemes={['core']}>
194-
195-
```html
196-
<head>
197-
<link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/13.0.0/css/index.css" />
198-
<link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/13.0.0/css/core-theme.css" />
199-
</head>
200-
```
201-
186+
<ThemeCodeBlock
187+
theme="core"
188+
type="css"
189+
wrapper="head"
190+
files={['css/index.css', 'css/core-theme.css']}
191+
/>
202192
</ThemeContent>
203193

204194
<ThemeContent onlyThemes={['healthcare']}>
205-
206-
```html
207-
<head>
208-
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-healthcare-gov/17.0.0/css/index.css" />
209-
<link
210-
rel="stylesheet"
211-
href="https://design.cms.gov/cdn/ds-healthcare-gov/17.0.0/css/healthcare-theme.css"
195+
<ThemeCodeBlock
196+
theme="healthcare"
197+
type="css"
198+
wrapper="head"
199+
files={['css/index.css', 'css/healthcare-theme.css']}
212200
/>
213-
</head>
214-
```
215-
216201
</ThemeContent>
217202

218203
<ThemeContent onlyThemes={['medicare']}>
219-
220-
```html
221-
<head>
222-
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-medicare-gov/15.0.0/css/index.css" />
223-
<link
224-
rel="stylesheet"
225-
href="https://design.cms.gov/cdn/ds-medicare-gov/15.0.0/css/medicare-theme.css"
204+
<ThemeCodeBlock
205+
theme="medicare"
206+
type="css"
207+
wrapper="head"
208+
files={['css/index.css', 'css/medicare-theme.css']}
226209
/>
227-
</head>
228-
```
229-
230210
</ThemeContent>
231211

232212
<ThemeContent onlyThemes={['cmsgov']}>
233-
234-
```html
235-
<head>
236-
<link rel="stylesheet" href="https://design.cms.gov/cdn/ds-cms-gov/13.0.0/css/index.css" />
237-
<link
238-
rel="stylesheet"
239-
href="https://design.cms.gov/cdn/ds-cms-gov/13.0.0/css/cmsgov-theme.css"
213+
<ThemeCodeBlock
214+
theme="cmsgov"
215+
type="css"
216+
wrapper="head"
217+
files={['css/index.css', 'css/cmsgov-theme.css']}
240218
/>
241-
</head>
242-
```
243-
244219
</ThemeContent>
245220

246221
If you are getting the files from npm, you will want to change the `href` to reference the files from your local `node_modules` folder. Likewise if you've downloaded the files directly, the `href` will point to wherever you've put your files.

‎packages/docs/src/components/content/ContentRenderer.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import StorybookExample from './StorybookExample';
2020
import TextColorList from './TextColorList';
2121
import ThemeContent from './ThemeContent';
2222
import ThemeLabel from './ThemeLabel';
23+
import ThemeCodeBlock from './ThemeCodeBlock';
2324
import StorybookDocLinks from './StorybookDocLinks';
2425
import StorybookDocLink from './StorybookDocLink';
2526
import { linkAnalytics } from '../../helpers/analytics';
@@ -138,6 +139,7 @@ const customComponents = ({ location, theme }: { location: LocationInterface; th
138139
TextColorList: (props) => <TextColorList theme={theme} {...props} />,
139140
ThemeContent: (props) => <ThemeContent theme={theme} {...props} />,
140141
ThemeLabel: (props) => <ThemeLabel {...props} />,
142+
ThemeCodeBlock: (props) => <ThemeCodeBlock {...props} />,
141143
TypographyUsageTable: (props) => <TypographyUsageTable theme={theme} {...props} />,
142144
ul: (props) => TextWithMaxWidth(props, 'ul'),
143145
});

‎packages/docs/src/components/content/ThemeCodeBlock.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { getLatestThemeVersion } from '../layout/SideNav/themeVersionData';
2+
3+
interface ThemeCodeBlockProps {
4+
theme: 'core' | 'healthcare' | 'medicare' | 'cmsgov';
5+
files: string[];
6+
type?: 'css' | 'script';
7+
wrapper?: 'head' | 'body' | 'none';
8+
}
9+
10+
/**
11+
* Displays an HTML code block (<pre><code>) with versioned CDN links.
12+
*
13+
* Example:
14+
* <ThemeCodeBlock
15+
* theme="core"
16+
* type="css"
17+
* wrapper="head"
18+
* files={['css/index.css', 'css/core-theme.css']}
19+
* />
20+
*/
21+
function ThemeCodeBlock({ theme, files, type = 'css', wrapper = 'none' }: ThemeCodeBlockProps) {
22+
const version = getLatestThemeVersion(theme);
23+
let base = '';
24+
25+
if (theme === 'core') {
26+
base = 'design-system';
27+
} else if (theme === 'cmsgov') {
28+
base = 'ds-cms-gov';
29+
} else {
30+
base = `ds-${theme}-gov`;
31+
}
32+
33+
const lines =
34+
type === 'script'
35+
? files.map(
36+
(path) => `<script src="https://design.cms.gov/cdn/${base}/${version}/${path}"></script>`
37+
)
38+
: files.map(
39+
(path) =>
40+
`<link rel="stylesheet" href="https://design.cms.gov/cdn/${base}/${version}/${path}" />`
41+
);
42+
43+
const wrapped =
44+
wrapper === 'head'
45+
? [`<head>`, ...lines.map((l) => ` ${l}`), `</head>`]
46+
: wrapper === 'body'
47+
? [`<body>`, ...lines.map((l) => ` ${l}`), `</body>`]
48+
: lines;
49+
50+
const code = wrapped.join('\n');
51+
52+
return (
53+
<pre>
54+
<code className="language-html">{code}</code>
55+
</pre>
56+
);
57+
}
58+
59+
export default ThemeCodeBlock;

‎packages/docs/src/components/layout/SideNav/themeVersionData.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ export function getThemeVersions(theme: string) {
2222
return versions[themes[theme].packageName];
2323
}
2424

25+
export function getLatestThemeVersion(theme: string) {
26+
return versions[themes[theme].packageName][0];
27+
}
28+
2529
export function getVersionOptions(theme: string) {
2630
return getThemeVersions(theme).map((version) => ({
2731
label: version,

0 commit comments

Comments
 (0)