Skip to content

Commit 738510b

Browse files
martenbjorkchloerice
martenbjork
and
chloerice
authored
[polaris.shopify.com] Include HTML source for examples (#6688)
* Improve examples browsing experience * Design tweaks * Remove unused import * Make button text strong * Show HTML source next to React source * Use the same Code component to render any code block on the site * Add changeset * Fix border color * Fix link color * Add missing alt attribute * Remove code formatting from longform component * Remove console log * Use implicit returns * Remove wrapper * Rename Examples component * Implement copy code button * Remove import * Fix typing * Update .changeset/nine-goats-leave.md Co-authored-by: Chloe Rice <[email protected]> * Update polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.tsx Co-authored-by: Chloe Rice <[email protected]> * Refactor code component * Use more semantic tags for code Co-authored-by: Chloe Rice <[email protected]>
1 parent 765f51a commit 738510b

File tree

21 files changed

+886
-331
lines changed

21 files changed

+886
-331
lines changed

‎.changeset/nine-goats-leave.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': minor
3+
---
4+
5+
Simplified rendering of code blocks on site by using the same component for every code example. This makes the experience more consistent and ensures that every code block has features like copy/paste.

‎polaris.shopify.com/src/components/Code/Code.module.scss‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@import "../../styles/mixins.scss";
2+
3+
.Code {
4+
border-radius: var(--border-radius-400);
5+
max-width: calc(100vw - 1.5rem);
6+
cursor: text;
7+
background: var(--surface);
8+
color: var(--text-strong);
9+
box-shadow: var(--card-shadow);
10+
}
11+
12+
.TopBar {
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
border-bottom: 1px solid var(--border-color-light);
17+
}
18+
19+
.Tabs {
20+
padding-left: 1rem;
21+
display: flex;
22+
23+
.Tab {
24+
padding-top: 0.66rem;
25+
padding-bottom: 0.66rem;
26+
border-radius: var(--border-radius-300);
27+
background: transparent;
28+
font-size: var(--font-size-100);
29+
color: var(--text-subdued);
30+
}
31+
32+
button.Tab {
33+
padding-left: 0.5rem;
34+
padding-right: 0.5rem;
35+
color: var(--text-strong);
36+
37+
&[aria-selected="true"] {
38+
position: relative;
39+
40+
&:not(:focus-visible) {
41+
&:after {
42+
content: "";
43+
display: block;
44+
position: absolute;
45+
right: 0;
46+
bottom: 0;
47+
left: 0;
48+
background: var(--text-strong);
49+
height: 3px;
50+
border-radius: var(--border-radius-200) var(--border-radius-200) 0 0;
51+
}
52+
}
53+
}
54+
}
55+
56+
&:focus-visible {
57+
box-shadow: var(--focus-outline);
58+
}
59+
}
60+
61+
.CopyButton {
62+
padding: 0.5rem 1rem;
63+
background: transparent;
64+
border-radius: var(--border-radius-200);
65+
opacity: 0.5;
66+
display: flex;
67+
align-items: center;
68+
69+
&:hover,
70+
&:focus {
71+
opacity: 1;
72+
}
73+
74+
svg {
75+
width: 16px;
76+
height: 16px;
77+
}
78+
79+
&:focus-visible {
80+
box-shadow: none;
81+
opacity: 1;
82+
}
83+
}
84+
85+
.ActualCode {
86+
display: block;
87+
font-family: var(--font-family-mono);
88+
white-space: pre-wrap;
89+
padding: 0.85rem 1rem;
90+
font-size: 14px;
91+
line-height: 1.6;
92+
overflow: auto;
93+
max-height: 50vh;
94+
95+
@include custom-scrollbars;
96+
}
97+
98+
.LineNumber {
99+
display: none;
100+
opacity: 0.5;
101+
margin-right: 0.5rem;
102+
user-select: none;
103+
}

‎polaris.shopify.com/src/components/Code/Code.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import Tooltip from "../Tooltip";
2+
import Prism from "prismjs";
3+
import { useCopyToClipboard } from "../../utils/hooks";
4+
import styles from "./Code.module.scss";
5+
import { Tab } from "@headlessui/react";
6+
import Image from "../Image";
7+
import { useState } from "react";
8+
9+
interface Props {
10+
code:
11+
| {
12+
title: string;
13+
code: string;
14+
}
15+
| {
16+
title: string;
17+
code: string;
18+
}[];
19+
}
20+
21+
function Code({ code }: Props) {
22+
const [selectedIndex, setSelectedIndex] = useState(0);
23+
24+
return (
25+
<div className={styles.Code}>
26+
{Array.isArray(code) ? (
27+
<Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
28+
<div className={styles.TopBar}>
29+
<Tab.List className={styles.Tabs}>
30+
{code.map(({ title }) => (
31+
<Tab key={title} className={styles.Tab}>
32+
{title}
33+
</Tab>
34+
))}
35+
</Tab.List>
36+
{code[selectedIndex] && (
37+
<CopyButton code={code[selectedIndex].code} />
38+
)}
39+
</div>
40+
41+
<Tab.Panels>
42+
{code.map(({ title, code }) => (
43+
<Tab.Panel key={title}>
44+
<HighlightedCode code={code} />
45+
</Tab.Panel>
46+
))}
47+
</Tab.Panels>
48+
</Tab.Group>
49+
) : (
50+
<>
51+
<div className={styles.TopBar}>
52+
<div className={styles.Tabs}>
53+
<div className={styles.Tab}>{code.title}</div>
54+
</div>
55+
<CopyButton code={code.code} />
56+
</div>
57+
<HighlightedCode code={code.code} />
58+
</>
59+
)}
60+
</div>
61+
);
62+
}
63+
64+
function HighlightedCode({ code }: { code: string }) {
65+
return (
66+
<pre>
67+
<code
68+
className={styles.ActualCode}
69+
dangerouslySetInnerHTML={{
70+
__html: Prism.highlight(
71+
code,
72+
Prism.languages.javascript,
73+
"javasript"
74+
),
75+
}}
76+
></code>
77+
</pre>
78+
);
79+
}
80+
81+
function CopyButton({ code }: { code: string }) {
82+
const [copy, didJustCopy] = useCopyToClipboard(code);
83+
84+
return (
85+
<div className={styles.CopyButtonWrapper}>
86+
<Tooltip
87+
ariaLabel="Copy to clipboard"
88+
renderContent={() => <p>{didJustCopy ? "Copied" : "Copy"}</p>}
89+
>
90+
<button
91+
type="button"
92+
className={styles.CopyButton}
93+
onClick={copy}
94+
aria-label="Copy to clipboard"
95+
>
96+
<Image
97+
src="/icons/ClipboardMinor.svg"
98+
alt="Clipboard icon"
99+
width={16}
100+
height={16}
101+
icon
102+
/>
103+
</button>
104+
</Tooltip>
105+
</div>
106+
);
107+
}
108+
109+
export default Code;

‎polaris.shopify.com/src/components/Code/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import Code from "./Code";
2+
3+
export default Code;

‎polaris.shopify.com/src/components/CodeExample/CodeExample.module.scss‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎polaris.shopify.com/src/components/CodeExample/CodeExample.tsx‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎polaris.shopify.com/src/components/CodeExample/index.ts‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)