Skip to content

Commit f35e589

Browse files
andrewHEguardianandrewHEguardian
committed
add standbox
1 parent 1ea34c0 commit f35e589

File tree

2 files changed

+155
-37
lines changed

2 files changed

+155
-37
lines changed

‎src/components/topbar/toolName/TopBarToolName.mdx‎

Lines changed: 20 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@ import ToolNameStories, {
55
CustomTheme,
66
CssOverrides,
77
} from './TopBarToolName.stories';
8+
import {
9+
SandboxReact,
10+
SandboxCss,
11+
SandboxJs,
12+
} from '../../../util/storybook/sandbox/Sandbox';
13+
import {
14+
componentCss,
15+
componentHtml,
16+
componentJs,
17+
componentName,
18+
componentTsx,
19+
} from './sandbox';
820

921
<Meta of={ToolNameStories} />
1022

@@ -31,7 +43,7 @@ See [Icon component](?path=/docs/stand-editorial-design-system-components-icon--
3143

3244
## Example usage
3345

34-
See "Emotion/React" heading under the `TopBarToolName` component on [codesandbox.io]().
46+
<SandboxReact componentName={componentName} componentTsx={componentTsx} />
3547

3648
```tsx
3749
import { TopBarToolName } from '@guardian/stand/TopBarToolName';
@@ -150,48 +162,19 @@ If you're not using React/Emotion, or `@guardian/stand` is not compatible with y
150162

151163
You will however be responsible for any additional functionality on top of the styles, for example icon loading, accessibility, etc.
152164

153-
TODO in sandbox
154-
155165
**`css`**
156166

157167
You can import the TopBarToolName styles as CSS from the package, make sure that your build process supports importing CSS from `node_modules`/`package.json`:
158168

159-
```css
160-
/* import the tool name font and tool name styles */
161-
@import '@guardian/stand/fonts/MaterialSymbolsOutlined.css';
162-
@import '@guardian/stand/component/TopBarToolName.css';
163-
164-
/*
165-
or for scenarios where you have to use relative paths/node_modules directly:
166-
167-
@import 'node_modules/@guardian/stand/dist/fonts/MaterialSymbolsOutlined.css';
168-
@import 'node_modules/@guardian/stand/dist/styleD/build/css/component/TopBarToolName.css';
169-
*/
170-
171-
@import '@guardian/stand/base/spacing.css';
172-
@import '@guardian/stand/base/colors.css';
173-
174-
.stand-tool-name {
175-
}
176-
```
169+
<SandboxCss
170+
componentName={componentName}
171+
componentHtml={componentHtml}
172+
componentCss={componentCss}
177173

178-
```html
179-
180-
```
174+
/>
181175

182176
**TypeScript/JavaScript**
183177

184-
Use the `componentTopBarToolName` variable and the `ComponentTopBarToolName` type to define your custom styles in TypeScript/JavaScript:
185-
186-
```ts
187-
import type { ComponentTopBarToolName } from '@guardian/stand'; // if types required
188-
import { componentTopBarToolName, baseColors } from '@guardian/stand';
178+
Use the `componentTopBar` variable and the `componentTopBar` type to define your custom styles in TypeScript/JavaScript:
189179

190-
// e.g. adding to DOM using vanilla JS styles
191-
document.getElementById('app')!.innerHTML = `
192-
<h3>
193-
Using <code>typescript</code>/<code>javascript</code>
194-
</h3>
195-
<div>see <code>src/TopBarToolName/custom.ts</code><div>
196-
`;
197-
```
180+
<SandboxJs componentName={componentName} componentJs={componentJs} />

‎src/components/topbar/toolName/sandbox.ts‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
// Component Name
2+
export const componentName = 'TopBarToolName';
3+
4+
// TopBarToolName - React sandbox example
5+
export const componentTsx = /* javascript */ `import { TopBarToolName } from '@guardian/stand/TopBar';
6+
7+
export const Component = () => {
8+
return (
9+
<>
10+
<TopBarToolName
11+
name="Songwriter"
12+
favicon={{ type: 'letter', letter: 'S' }}
13+
subsection="Article"
14+
subsectionIcon="menu"
15+
/>
16+
</>
17+
);
18+
};
19+
`;
20+
21+
// Toolname - Custom component - CSS example
22+
export const componentCss = /* css */ `@import "@guardian/stand/component/TopBar.css";
23+
/* import the favicon styles */
24+
@import '@guardian/stand/component/favicon.css';
25+
26+
/* example setup of tool name */
27+
.stand-topbar-toolname {
28+
display: var(--component-top-bar-tool-name-display);
29+
align-items: var(--component-top-bar-tool-name-align-items);
30+
gap: var(--component-top-bar-tool-name-gap);
31+
font: var(--component-top-bar-tool-name-typography-font);
32+
letter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);
33+
font-variation-settings: "wdth" var(--component-top-bar-tool-name-typography-font-width);
34+
}
35+
36+
.stand-topbar-toolname-divider {
37+
border-right: var(--component-top-bar-tool-name-divider-border);
38+
height: var(--component-top-bar-tool-name-divider-height);
39+
}
40+
41+
.stand-topbar-toolname-subsection {
42+
display: var(--component-top-bar-tool-name-display);
43+
align-items: var(--component-top-bar-tool-name-align-items);
44+
gap: var(--component-top-bar-tool-name-subsection-gap);
45+
font: var(--component-top-bar-tool-name-subsection-typography-font);
46+
letter-spacing: var(--component-top-bar-tool-name-subsection-typography-letter-spacing);
47+
font-variation-settings: "wdth" var(--component-top-bar-tool-name-subsection-typography-font-width)
48+
}
49+
50+
.stand-favicon {
51+
background-color: var(--component-favicon-color-background);
52+
display: var(--component-favicon-display);
53+
align-items: var(--component-favicon-align-items);
54+
justify-content: var(--component-favicon-justify-content);
55+
width: var(--component-favicon-size);
56+
height: var(--component-favicon-size);
57+
user-select: var(--component-favicon-user-select);
58+
color: var(--component-favicon-color-text);
59+
font: var(--component-favicon-typography-font);
60+
letter-spacing: var(--component-favicon-typography-letter-spacing);
61+
font-variation-settings: "wdth" var(--component-favicon-typography-font-width);
62+
}
63+
64+
`;
65+
66+
export const componentHtml = /* html */ `<div class="container">
67+
<div class="stand-topbar-toolname">
68+
<div class="stand-favicon">S</div>
69+
<div>Songwriter</div>
70+
<div class="stand-topbar-toolname-divider">&nbsp;</div>
71+
<div class="stand-topbar-toolname-subsection">
72+
<div><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"></path></svg></div>
73+
<div>Article</div>
74+
</div>
75+
</div>
76+
</div>`;
77+
78+
// Tool name - Custom component - JS example
79+
export const componentJs = /* javascript */ `
80+
// for ts/js
81+
import { componentFavicon, componentTopBar, baseColors } from '@guardian/stand';
82+
83+
const style = \`
84+
display: \${componentTopBar.ToolName.display};
85+
align-items: \${componentTopBar.ToolName["align-items"]};
86+
gap: \${componentTopBar.ToolName.gap};
87+
font: \${componentTopBar.ToolName.typography.font};
88+
letter-spacing: \${componentTopBar.ToolName.typography.letterSpacing};
89+
font-variation-settings: "wdth" \${componentTopBar.ToolName.typography.fontWidth};
90+
\`;
91+
92+
const dividerStyle = \`
93+
border-right: \${componentTopBar.ToolName.divider.border};
94+
height: \${componentTopBar.ToolName.divider.height};
95+
\`;
96+
97+
const subsectionStyle = \`
98+
display: \${componentTopBar.ToolName.display};
99+
align-items: \${componentTopBar.ToolName["align-items"]};
100+
gap: \${componentTopBar.ToolName.subsection.gap};
101+
font: \${componentTopBar.ToolName.subsection.typography.font};
102+
letter-spacing: \${componentTopBar.ToolName.subsection.typography.letterSpacing};
103+
font-variation-settings: "wdth" \${componentTopBar.ToolName.subsection.typography.fontWidth};
104+
\`;
105+
106+
const faviconStyle = \`
107+
background-color: \${componentFavicon.color.background};
108+
display: \${componentFavicon.display};
109+
align-items: \${componentFavicon["align-items"]};
110+
justify-content: \${componentFavicon["justify-content"]};
111+
width: \${componentFavicon.size};
112+
height: \${componentFavicon.size};
113+
user-select: \${componentFavicon["user-select"]};
114+
color: \${componentFavicon.color.text};
115+
font: \${componentFavicon.typography.font};
116+
letter-spacing: \${componentFavicon.typography.letterSpacing};
117+
font-variation-settings: "wdth" \${componentFavicon.typography.fontWidth};
118+
\`;
119+
120+
// e.g. adding to DOM using vanilla JS styles
121+
document.getElementById("app").innerHTML = \`
122+
123+
<div class="container">
124+
<div style="\${style}">
125+
<div style="\${faviconStyle}>S</div>
126+
<div>Songwriter</div>
127+
<div style="\${dividerStyle}">&nbsp;</div>
128+
<div style="\${subsectionStyle}">
129+
<div><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"></path></svg></div>
130+
<div>Article</div>
131+
</div>
132+
</div>
133+
</div>
134+
\`;
135+
`;

0 commit comments

Comments
 (0)