@guardian/stand 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/TopBar.cjs +9 -0
  2. package/dist/TopBar.js +2 -0
  3. package/dist/components/topbar/toolName/TopBarToolName.cjs +31 -0
  4. package/dist/components/topbar/toolName/TopBarToolName.js +12 -0
  5. package/dist/components/topbar/toolName/styles.cjs +44 -0
  6. package/dist/components/topbar/toolName/styles.js +37 -0
  7. package/dist/index.cjs +2 -2
  8. package/dist/index.js +1 -1
  9. package/dist/styleD/build/css/component/TopBar.css +20 -0
  10. package/dist/styleD/build/typescript/component/TopBar.cjs +28 -0
  11. package/dist/styleD/build/typescript/component/TopBar.js +26 -0
  12. package/dist/types/TopBar.d.ts +19 -0
  13. package/dist/types/components/avatar/sandbox.d.ts +5 -0
  14. package/dist/types/components/button/sandbox.d.ts +5 -0
  15. package/dist/types/components/favicon/sandbox.d.ts +5 -0
  16. package/dist/types/components/icon/sandbox.d.ts +5 -0
  17. package/dist/types/components/icon-button/sandbox.d.ts +5 -0
  18. package/dist/types/components/icon-link-button/sandbox.d.ts +5 -0
  19. package/dist/types/components/link-button/sandbox.d.ts +5 -0
  20. package/dist/types/components/topbar/toolName/TopBarToolName.d.ts +2 -0
  21. package/dist/types/components/topbar/toolName/sandbox.d.ts +5 -0
  22. package/dist/types/components/topbar/toolName/styles.d.ts +10 -0
  23. package/dist/types/components/topbar/toolName/types.d.ts +22 -0
  24. package/dist/types/components/typography/sandbox.d.ts +5 -0
  25. package/dist/types/index.d.ts +2 -4
  26. package/dist/types/styleD/build/typescript/component/TopBar.d.ts +28 -0
  27. package/dist/types/util/storybook/sandbox/Sandbox.d.ts +14 -0
  28. package/package.json +19 -9
  29. /package/dist/types/util/{storybookStyles.d.ts → storybook/styles.d.ts} +0 -0
package/dist/TopBar.cjs ADDED
@@ -0,0 +1,9 @@
1
+ 'use strict';
2
+
3
+ var TopBarToolName = require('./components/topbar/toolName/TopBarToolName.cjs');
4
+ var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
5
+
6
+
7
+
8
+ exports.TopBarToolName = TopBarToolName.TopBarToolName;
9
+ exports.componentTopBar = TopBar.componentTopBar;
package/dist/TopBar.js ADDED
@@ -0,0 +1,2 @@
1
+ export { TopBarToolName } from './components/topbar/toolName/TopBarToolName.js';
2
+ export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
package/dist/components/topbar/toolName/TopBarToolName.cjs ADDED
@@ -0,0 +1,31 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('@emotion/react/jsx-runtime');
4
+ var mergeDeep = require('../../../util/mergeDeep.cjs');
5
+ var Favicon = require('../../favicon/Favicon.cjs');
6
+ var Icon = require('../../icon/Icon.cjs');
7
+ var styles = require('./styles.cjs');
8
+
9
+ const TopBarToolName = ({
10
+ name,
11
+ favicon,
12
+ subsection,
13
+ subsectionIcon,
14
+ theme = {},
15
+ cssOverrides
16
+ }) => {
17
+ const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
18
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
19
+ /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
20
+ /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme)], children: name }),
21
+ subsection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
22
+ /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.dividerStyles(mergedTheme), children: "\xA0" }),
23
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.subsectionStyles(mergedTheme), children: [
24
+ subsectionIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "sm", children: subsectionIcon }),
25
+ /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.subsectionTypography(mergedTheme), children: subsection })
26
+ ] })
27
+ ] })
28
+ ] });
29
+ };
30
+
31
+ exports.TopBarToolName = TopBarToolName;
package/dist/components/topbar/toolName/TopBarToolName.js ADDED
@@ -0,0 +1,12 @@
1
+ import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
2
+ import { mergeDeep } from '../../../util/mergeDeep.js';
3
+ import { Favicon } from '../../favicon/Favicon.js';
4
+ import { Icon } from '../../icon/Icon.js';
5
+ import { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
6
+
7
+ const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
8
+ const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
9
+ return jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme)], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] });
10
+ };
11
+
12
+ export { TopBarToolName };
package/dist/components/topbar/toolName/styles.cjs ADDED
@@ -0,0 +1,44 @@
1
+ 'use strict';
2
+
3
+ var react = require('@emotion/react');
4
+ var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
5
+ var typography = require('../../../styleD/utils/semantic/typography.cjs');
6
+
7
+ const defaultToolNameTheme = TopBar.componentTopBar.ToolName;
8
+ const toolNameStyles = (theme) => {
9
+ return react.css`
10
+ display: ${theme.display};
11
+ align-items: ${theme["align-items"]};
12
+ gap: ${theme.gap};
13
+ `;
14
+ };
15
+ const toolNameTypography = (theme) => {
16
+ return react.css`
17
+ ${typography.convertTypographyToEmotionStringStyle(theme.typography)}
18
+ `;
19
+ };
20
+ const dividerStyles = (theme) => {
21
+ return react.css`
22
+ border-right: ${theme.divider.border};
23
+ height: ${theme.divider.height};
24
+ `;
25
+ };
26
+ const subsectionStyles = (theme) => {
27
+ return react.css`
28
+ display: ${theme.display};
29
+ align-items: ${theme["align-items"]};
30
+ gap: ${theme.subsection.gap};
31
+ `;
32
+ };
33
+ const subsectionTypography = (theme) => {
34
+ return react.css`
35
+ ${typography.convertTypographyToEmotionStringStyle(theme.subsection.typography)}
36
+ `;
37
+ };
38
+
39
+ exports.defaultToolNameTheme = defaultToolNameTheme;
40
+ exports.dividerStyles = dividerStyles;
41
+ exports.subsectionStyles = subsectionStyles;
42
+ exports.subsectionTypography = subsectionTypography;
43
+ exports.toolNameStyles = toolNameStyles;
44
+ exports.toolNameTypography = toolNameTypography;
package/dist/components/topbar/toolName/styles.js ADDED
@@ -0,0 +1,37 @@
1
+ import { css } from '@emotion/react';
2
+ import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
3
+ import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
4
+
5
+ const defaultToolNameTheme = componentTopBar.ToolName;
6
+ const toolNameStyles = (theme) => {
7
+ return css`
8
+ display: ${theme.display};
9
+ align-items: ${theme["align-items"]};
10
+ gap: ${theme.gap};
11
+ `;
12
+ };
13
+ const toolNameTypography = (theme) => {
14
+ return css`
15
+ ${convertTypographyToEmotionStringStyle(theme.typography)}
16
+ `;
17
+ };
18
+ const dividerStyles = (theme) => {
19
+ return css`
20
+ border-right: ${theme.divider.border};
21
+ height: ${theme.divider.height};
22
+ `;
23
+ };
24
+ const subsectionStyles = (theme) => {
25
+ return css`
26
+ display: ${theme.display};
27
+ align-items: ${theme["align-items"]};
28
+ gap: ${theme.subsection.gap};
29
+ `;
30
+ };
31
+ const subsectionTypography = (theme) => {
32
+ return css`
33
+ ${convertTypographyToEmotionStringStyle(theme.subsection.typography)}
34
+ `;
35
+ };
36
+
37
+ export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameStyles, toolNameTypography };
package/dist/index.cjs CHANGED
@@ -9,6 +9,7 @@ var button = require('./styleD/build/typescript/component/button.cjs');
9
9
  var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
10
10
  var icon = require('./styleD/build/typescript/component/icon.cjs');
11
11
  var favicon = require('./styleD/build/typescript/component/favicon.cjs');
12
+ var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
12
13
  var colors = require('./styleD/build/typescript/base/colors.cjs');
13
14
  var typography = require('./styleD/build/typescript/base/typography.cjs');
14
15
  var spacing = require('./styleD/build/typescript/base/spacing.cjs');
@@ -17,7 +18,6 @@ var radius = require('./styleD/build/typescript/base/radius.cjs');
17
18
  var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
18
19
  var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
19
20
  var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
20
- var reset = require('./util/reset.css.cjs');
21
21
 
22
22
 
23
23
 
@@ -30,6 +30,7 @@ exports.componentButton = button.componentButton;
30
30
  exports.componentTypography = typography$1.componentTypography;
31
31
  exports.componentIcon = icon.componentIcon;
32
32
  exports.componentFavicon = favicon.componentFavicon;
33
+ exports.componentTopBar = TopBar.componentTopBar;
33
34
  exports.baseColors = colors.baseColors;
34
35
  exports.baseTypography = typography.baseTypography;
35
36
  exports.baseSpacing = spacing.baseSpacing;
@@ -38,4 +39,3 @@ exports.baseRadius = radius.baseRadius;
38
39
  exports.semanticColors = colors$1.semanticColors;
39
40
  exports.semanticTypography = typography$2.semanticTypography;
40
41
  exports.semanticSizing = sizing$1.semanticSizing;
41
- exports.GlobalResetStyles = reset;
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
7
7
  export { componentTypography } from './styleD/build/typescript/component/typography.js';
8
8
  export { componentIcon } from './styleD/build/typescript/component/icon.js';
9
9
  export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
10
+ export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
10
11
  export { baseColors } from './styleD/build/typescript/base/colors.js';
11
12
  export { baseTypography } from './styleD/build/typescript/base/typography.js';
12
13
  export { baseSpacing } from './styleD/build/typescript/base/spacing.js';
@@ -15,4 +16,3 @@ export { baseRadius } from './styleD/build/typescript/base/radius.js';
15
16
  export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
16
17
  export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
17
18
  export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
18
- export { default as GlobalResetStyles } from './util/reset.css.js';
package/dist/styleD/build/css/component/TopBar.css ADDED
@@ -0,0 +1,20 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --component-top-bar-tool-name-display: flex;
7
+ --component-top-bar-tool-name-align-items: center;
8
+ --component-top-bar-tool-name-gap: 8px;
9
+ --component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
10
+ 'GH Guardian Headline';
11
+ --component-top-bar-tool-name-typography-letter-spacing: 0rem;
12
+ --component-top-bar-tool-name-typography-font-width: 100;
13
+ --component-top-bar-tool-name-divider-border: 0.0625rem solid #cccccc;
14
+ --component-top-bar-tool-name-divider-height: 2rem;
15
+ --component-top-bar-tool-name-subsection-gap: 2px;
16
+ --component-top-bar-tool-name-subsection-typography-font: normal 700 1rem/1.15
17
+ 'Open Sans';
18
+ --component-top-bar-tool-name-subsection-typography-letter-spacing: -0.0125rem;
19
+ --component-top-bar-tool-name-subsection-typography-font-width: 88;
20
+ }
package/dist/styleD/build/typescript/component/TopBar.cjs ADDED
@@ -0,0 +1,28 @@
1
+ 'use strict';
2
+
3
+ const componentTopBar = {
4
+ ToolName: {
5
+ display: "flex",
6
+ "align-items": "center",
7
+ gap: "8px",
8
+ typography: {
9
+ font: "normal 700 1.25rem/1.15 GH Guardian Headline",
10
+ letterSpacing: "0rem",
11
+ fontWidth: 100
12
+ },
13
+ divider: {
14
+ border: "0.0625rem solid #cccccc",
15
+ height: "2rem"
16
+ },
17
+ subsection: {
18
+ gap: "2px",
19
+ typography: {
20
+ font: "normal 700 1rem/1.15 Open Sans",
21
+ letterSpacing: "-0.0125rem",
22
+ fontWidth: 88
23
+ }
24
+ }
25
+ }
26
+ };
27
+
28
+ exports.componentTopBar = componentTopBar;
package/dist/styleD/build/typescript/component/TopBar.js ADDED
@@ -0,0 +1,26 @@
1
+ const componentTopBar = {
2
+ ToolName: {
3
+ display: "flex",
4
+ "align-items": "center",
5
+ gap: "8px",
6
+ typography: {
7
+ font: "normal 700 1.25rem/1.15 GH Guardian Headline",
8
+ letterSpacing: "0rem",
9
+ fontWidth: 100
10
+ },
11
+ divider: {
12
+ border: "0.0625rem solid #cccccc",
13
+ height: "2rem"
14
+ },
15
+ subsection: {
16
+ gap: "2px",
17
+ typography: {
18
+ font: "normal 700 1rem/1.15 Open Sans",
19
+ letterSpacing: "-0.0125rem",
20
+ fontWidth: 88
21
+ }
22
+ }
23
+ }
24
+ };
25
+
26
+ export { componentTopBar };
package/dist/types/TopBar.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Top Bar components entry point
3
+ *
4
+ * Peer dependencies required to use these components:
5
+ * - `@emotion/react`
6
+ * - `react`
7
+ * - `react-dom`
8
+ * - `typescript`
9
+ *
10
+ * See the `peerDependencies` section of package.json for compatible versions.
11
+ *
12
+ * If you only need the built CSS (./component/TopBar.css),
13
+ * you don't need to install these.
14
+ */
15
+ export { TopBarToolName } from './components/topbar/toolName/TopBarToolName';
16
+ export type { TopBarToolNameProps } from './components/topbar/toolName/types';
17
+ export type { TopBarToolNameTheme } from './components/topbar/toolName/styles';
18
+ export { componentTopBar } from './styleD/build/typescript/component/TopBar';
19
+ export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
package/dist/types/components/avatar/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "Avatar";
2
+ export declare const componentTsx = "import { Avatar } from '@guardian/stand/avatar';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<Avatar initials=\"AB\" color=\"blue\" />\n\t\t\t<Avatar\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t\tinitials=\"MM\"\n\t\t\t\tcolor=\"blue\"\n\t\t\t\tsize=\"md\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
3
+ export declare const componentCss = "@import \"@guardian/stand/component/avatar.css\";\n\n /* example setup of avatar style using md size and blue color */\n .stand-avatar {\n \tdisplay: var(--component-avatar-shared-display);\n \talign-items: var(--component-avatar-shared-align-items);\n \tjustify-content: var(--component-avatar-shared-justify-content);\n \toverflow: var(--component-avatar-shared-overflow);\n \tflex-shrink: var(--component-avatar-shared-flex-shrink);\n \tborder-radius: var(--component-avatar-shared-border-radius);\n \tbackground-color: var(--component-avatar-shared-color-blue-background);\n \twidth: var(--component-avatar-md-size);\n \theight: var(--component-avatar-md-size);\n \tborder: var(--component-avatar-shared-color-blue-border);\n \tcolor: var(--component-avatar-shared-color-blue-text);\n \tfont: var(--component-avatar-md-typography-font);\n \tletter-spacing: var(--component-avatar-md-typography-letter-spacing);\n \tfont-variation-settings: \"wdth\"\n \tvar(--component-avatar-md-typography-font-width);\n }\n\n /* example setup for avatar image */\n .stand-avatar > img {\n \twidth: 100%;\n \theight: 100%;\n \tobject-fit: cover;\n }";
4
+ export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-avatar\">AB</div>\n\t<div class=\"stand-avatar\">\n\t\t<img\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t</div>\n</div>";
5
+ export declare const componentJs = "\n\t// for ts/js\n\timport { componentAvatar } from \"@guardian/stand\";\n\n\tconst style = `\n\tdisplay: ${componentAvatar.shared.display};\n\talign-items: ${componentAvatar.shared[\"align-items\"]};\n\tjustify-content: ${componentAvatar.shared[\"justify-content\"]};\n\toverflow: ${componentAvatar.shared.overflow};\n\tflex-shrink: ${componentAvatar.shared[\"flex-shrink\"]};\n\tborder-radius: ${componentAvatar.shared[\"border-radius\"]};\n\tbackground-color: ${componentAvatar.shared.color.blue.background};\n\twidth: ${componentAvatar.md.size};\n\theight: ${componentAvatar.md.size};\n\tborder: ${componentAvatar.shared.color.blue.border};\n\tcolor: ${componentAvatar.shared.color.blue.text};\n\tfont: ${componentAvatar.md.typography.font};\n\tletter-spacing: ${componentAvatar.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth' ${componentAvatar.md.typography.fontWidth};\n\t`;\n\n\tconst imgStyle = `\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">AB</div>\n\t\t<div style=\"${style}\">\n\t\t<img\n\t\t\tstyle=\"${imgStyle}\"\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t\t</div>\n\t</div>\n`;\n";
package/dist/types/components/button/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "Button";
2
+ export declare const componentTsx = "import { Button } from '@guardian/stand/button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<Button onPress={() => alert('Button Clicked from React')}>Button</Button>\n\t\t\t<Button isDisabled onPress={() => alert('Button Clicked from React')}>\n\t\t\t\tDisabled Button\n\t\t\t</Button>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Button\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tButton with Icon\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tisDisabled\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled Button with Icon\n\t\t\t</Button>\n\t\t</div>\n\t</>\n);\n\n";
3
+ export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n .stand-button {\n \tdisplay: var(--component-button-shared-display);\n \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n \ttext-align: var(--component-button-shared-text-align);\n \tbox-shadow: var(--component-button-shared-box-shadow);\n \ttext-decoration: var(--component-button-shared-text-decoration);\n \tcursor: var(--component-button-shared-cursor);\n \tjustify-content: var(--component-button-shared-justify-content);\n \talign-items: var(--component-button-shared-align-items);\n }\n .stand-button:focus-visible {\n \toutline: var(--component-button-shared-focus-visible-outline);\n \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n }\n .stand-button:disabled {\n \tcursor: var(--component-button-shared-disabled-cursor);\n }\n\n /* example setup of button/link button style using md size and emphasised primary variant */\n .stand-button-emphasised-primary {\n \tcolor: var(--component-button-emphasised-primary-shared-color);\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-background-color\n \t);\n \theight: var(--component-button-emphasised-primary-md-height);\n \tpadding: var(--component-button-emphasised-primary-md-padding-top)\n \tvar(--component-button-emphasised-primary-md-padding-right)\n \tvar(--component-button-emphasised-primary-md-padding-bottom)\n \tvar(--component-button-emphasised-primary-md-padding-left);\n \tfont: var(--component-button-emphasised-primary-md-typography-font);\n \tletter-spacing: var(\n \t\t--component-button-emphasised-primary-md-typography-letter-spacing\n \t);\n \tfont-variation-settings: \"wdth\"\n \tvar(--component-button-emphasised-primary-md-typography-font-width);\n \tborder: var(--component-button-emphasised-primary-shared-border);\n \tborder-radius: var(\n \t\t--component-button-emphasised-primary-shared-border-radius\n \t);\n }\n .stand-button-emphasised-primary:hover {\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-hover-background-color\n \t);\n \tborder: var(--component-button-emphasised-primary-shared-hover-border);\n }\n .stand-button-emphasised-primary:active {\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-active-background-color\n \t);\n \tborder: var(--component-button-emphasised-primary-shared-active-border);\n }\n .stand-button-emphasised-primary:disabled {\n \tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-disabled-background-color\n \t);\n \tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n \t}\n \t.stand-button-emphasised-primary > .material-symbols {\n \tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n \t}\n \t.stand-button-emphasised-primary:has(> .material-symbols) {\n \tpadding-left: var(\n \t\t--component-button-emphasised-primary-md-padding-with-icon-icon-left-left\n \t);\n \tgap: var(--component-button-emphasised-primary-md-icon-gap);\n }\n\n /* example setup of button/link button style using md size and neutral secondary variant */\n .stand-button-neutral-secondary {\n \tcolor: var(--component-button-neutral-secondary-shared-color);\n \tbackground: var(--component-button-neutral-secondary-shared-background-color);\n \theight: var(--component-button-neutral-secondary-md-height);\n \tpadding: var(--component-button-neutral-secondary-md-padding-top)\n \tvar(--component-button-neutral-secondary-md-padding-right)\n \tvar(--component-button-neutral-secondary-md-padding-bottom)\n \tvar(--component-button-neutral-secondary-md-padding-left);\n \tfont: var(--component-button-neutral-secondary-md-typography-font);\n \tletter-spacing: var(\n \t\t--component-button-neutral-secondary-md-typography-letter-spacing\n \t);\n \tfont-variation-settings: \"wdth\"\n \tvar(--component-button-neutral-secondary-md-typography-font-width);\n \tborder: var(--component-button-neutral-secondary-shared-border);\n \tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n }\n .stand-button-neutral-secondary:hover {\n \tbackground: var(\n \t\t--component-button-neutral-secondary-shared-hover-background-color\n \t);\n \tborder: var(--component-button-neutral-secondary-shared-hover-border);\n }\n .stand-button-neutral-secondary:active {\n \tbackground: var(\n \t\t--component-button-neutral-secondary-shared-active-background-color\n \t);\n \tborder: var(--component-button-neutral-secondary-shared-active-border);\n }\n .stand-button-neutral-secondary:disabled {\n \tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n \tbackground: var(\n \t\t--component-button-neutral-secondary-shared-disabled-background-color\n \t);\n \tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n }\n .stand-button-neutral-secondary > .material-symbols {\n \tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n }\n .stand-button-neutral-secondary:has(> .material-symbols) {\n \tpadding-left: var(\n \t\t--component-button-neutral-secondary-md-padding-with-icon-icon-left-left\n \t);\n \tgap: var(--component-button-neutral-secondary-md-icon-gap);\n }\n\n";
4
+ export declare const componentHtml = "<div class=\"container flow-column\">\n <div class=\"container\">\n \t<button class=\"stand-button stand-button-emphasised-primary\">Button</button>\n \t<button class=\"stand-button stand-button-emphasised-primary\" disabled>Disabled Button</button>\n </div>\n\n <div class=\"container\">\n \t<button class=\"stand-button stand-button-neutral-secondary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n \t<button class=\"stand-button stand-button-neutral-secondary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n </div>\n\n</div>\n";
5
+ export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } from \"@guardian/stand\";\n\n \t// example of creating a stylesheet in js\n \tconst sheet = new CSSStyleSheet();\n\n \t// apply the rules to the sheet\n \tsheet.replaceSync(`\n \t/* shared button styles for all variants */\n \t.js-stand-button {\n \t\tdisplay: ${componentButton.shared.display};\n \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n \t\tcursor: ${componentButton.shared.cursor};\n \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n \t\talign-items: ${componentButton.shared[\"align-items\"]};\n \t}\n \t.js-stand-button:focus-visible {\n \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n \t}\n \t.js-stand-button:disabled {\n \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n \t}\n\n \t/* example setup of button/link button style using md size and emphasised primary variant */\n \t.js-stand-button-emphasised-primary {\n \t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n \t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n \t\tpadding: ${componentButton[\"emphasised-primary\"].md.padding.top}\n \t\t${componentButton[\"emphasised-primary\"].md.padding.right}\n \t\t${componentButton[\"emphasised-primary\"].md.padding.bottom}\n \t\t${componentButton[\"emphasised-primary\"].md.padding.left};\n \t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n \t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n \t\tfont-variation-settings: 'wdth'\n \t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n \t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n \t}\n \t.js-stand-button-emphasised-primary:hover {\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n \t}\n \t.js-stand-button-emphasised-primary:active {\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n \t}\n \t.js-stand-button-emphasised-primary:disabled {\n \t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n \t}\n \t.js-stand-button-emphasised-primary > .material-symbols {\n \t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n \t}\n \t.js-stand-button-emphasised-primary:has(> .material-symbols) {\n \t\tpadding-left: ${componentButton[\"emphasised-primary\"].md.padding.withIcon.iconLeft.left};\n \t\tgap: ${componentButton[\"emphasised-primary\"].md.icon.gap};\n \t}\n\n \t/* example setup of button/link button style using md size and neutral secondary variant */\n \t.js-stand-button-neutral-secondary {\n \t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n \t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n \t\tpadding: ${componentButton[\"neutral-secondary\"].md.padding.top}\n \t\t${componentButton[\"neutral-secondary\"].md.padding.right}\n \t\t${componentButton[\"neutral-secondary\"].md.padding.bottom}\n \t\t${componentButton[\"neutral-secondary\"].md.padding.left};\n \t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n \t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n \t\tfont-variation-settings: 'wdth'\n \t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n \t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n \t}\n \t.js-stand-button-neutral-secondary:hover {\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n \t}\n \t.js-stand-button-neutral-secondary:active {\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n \t}\n \t.js-stand-button-neutral-secondary:disabled {\n \t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n \t}\n \t.js-stand-button-neutral-secondary > .material-symbols {\n \t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n \t}\n \t.js-stand-button-neutral-secondary:has(> .material-symbols) {\n \t\tpadding-left: ${componentButton[\"neutral-secondary\"].md.padding.withIcon.iconLeft.left};\n \t\tgap: ${componentButton[\"neutral-secondary\"].md.icon.gap};\n \t}\n\n `);\n\n // update the document with the sheet\n document.adoptedStyleSheets.push(sheet);\n\n // modify the dom with the button components using the generated stylesheet\n document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n \t<div class=\"container\">\n \t\t<button class=\"js-stand-button js-stand-button-emphasised-primary\">Button</button>\n \t\t<button class=\"js-stand-button js-stand-button-emphasised-primary\" disabled>Disabled Button</button>\n \t</div>\n \t<div class=\"container\">\n \t\t<button class=\"js-stand-button js-stand-button-neutral-secondary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n \t\t<button class=\"js-stand-button js-stand-button-neutral-secondary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n \t</div>\n </div>`;\n\n";
package/dist/types/components/favicon/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "Favicon";
2
+ export declare const componentTsx = "import { Favicon } from '@guardian/stand/favicon';\n\nexport const Component = () => (\n\t<>\n\t\t{/* letter example */}\n\t\t<Favicon letter=\"C\" />\n\n\t\t{/* icon example */}\n\t\t<Favicon icon=\"raven\" />\n\n\t\t{/* svg icon example */}\n\t\t<Favicon\n icon={\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24px\"\n viewBox=\"0 -960 960 960\"\n width=\"24px\"\n fill=\"#1f1f1f\"\n >\n <path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\" />\n </svg>\n }\n />\n\n\t\t{/* image example */}\n\t\t<Favicon\n src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n alt=\"Mahesh Makani\"\n />\n\t</>\n);\n\n";
3
+ export declare const componentCss = "\n/* import the favicon styles */\n@import '@guardian/stand/component/favicon.css';\n/* import the icon styles if using the icon variant of the favicon component */\n@import \"@guardian/stand/component/icon.css\";\n\n/* example setup of favicon style */\n.stand-favicon {\n\tbackground-color: var(--component-favicon-color-background);\n\tdisplay: var(--component-favicon-display);\n\talign-items: var(--component-favicon-align-items);\n\tjustify-content: var(--component-favicon-justify-content);\n\twidth: var(--component-favicon-size);\n\theight: var(--component-favicon-size);\n\tuser-select: var(--component-favicon-user-select);\n\tcolor: var(--component-favicon-color-text);\n\tfont: var(--component-favicon-typography-font);\n\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n}\n\n.stand-favicon-icon {\n\tdisplay: var(--component-icon-shared-display);\n\tuser-select: var(--component-icon-shared-user-select);\n\tfont-size: var(--component-icon-md-size);\n}\n\n.stand-favicon-icon-color-svg > svg {\n\twidth: var(--component-icon-md-size);\n\theight: var(--component-icon-md-size);\n\tfill: var(--component-favicon-color-text);\n}\n\n/* example setup for favicon image */\n.stand-favicon > img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n";
4
+ export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-favicon\">C</div>\n <div class=\"stand-favicon\">\n\t\t<span class=\"material-symbols stand-favicon-icon\">raven</span>\n </div>\n <div class=\"stand-favicon\">\n <span class=\"stand-favicon-icon stand-favicon-icon-color-svg\"><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\"/></svg></span>\n </div>\n <div class=\"stand-favicon\">\n \t<img src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n </div>\n</div>\n";
5
+ export declare const componentJs = "\t// for ts/js\n\t\timport { componentFavicon, componentIcon } from \"@guardian/stand\";\n\nconst faviconStyles = `\n background-color: ${componentFavicon.color.background};\n display: ${componentFavicon.display};\n align-items: ${componentFavicon[\"align-items\"]};\n justify-content: ${componentFavicon[\"justify-content\"]};\n width: ${componentFavicon.size};\n height: ${componentFavicon.size};\n user-select: ${componentFavicon[\"user-select\"]};\n`;\n\nconst typographyStyle = `\n color: ${componentFavicon.color.text};\n font: ${componentFavicon.typography.font};\n letter-spacing: ${componentFavicon.typography.letterSpacing};\n font-variation-settings: 'wdth' ${componentFavicon.typography.fontWidth};\n`;\n\nconst imgStyle = `\n width: 100%;\n height: 100%;\n object-fit: cover;\n`;\n\nconst iconStyles = `\n display: ${componentIcon.shared.display};\n user-select: ${componentIcon.shared[\"user-select\"]};\n font-size: ${componentIcon.md.size};\n color: ${componentFavicon.color.text};\n`;\n\nconst iconSvgStyles = `\n width: ${componentIcon.md.size};\n height: ${componentIcon.md.size};\n fill: ${componentFavicon.color.text};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n <div style=\"${faviconStyles}${typographyStyle}\">C</div>\n <div style=\"${faviconStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n </div>\n <div style=\"${faviconStyles}\">\n <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgStyles}\" 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\"/></svg></span>\n </div>\n <div style=\"${faviconStyles}\">\n <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n </div>\n`;\n";
package/dist/types/components/icon/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "Icon";
2
+ export declare const componentTsx = "import { Icon } from '@guardian/stand/icon';\nimport { baseColors } from '@guardian/stand';\n\nexport const Component = () => (\n\t<>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tMaterial Symbols\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\" symbol=\"raven\" />\n\t\t\t<Icon size=\"lg\" symbol=\"owl\" fill={baseColors['warm-purple'][400]} />\n\t\t</div>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tSVGs\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg>\n\t\t\t</Icon>\n\t\t\t<Icon size=\"lg\" fill={baseColors['warm-purple'][400]}>\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg>\n\t\t\t</Icon>\n\t\t</div>\n\t</>\n);\n\n";
3
+ export declare const componentCss = "\n/* import the icon styles */\n@import '@guardian/stand/component/icon.css';\n/* color styles for customisation */\n@import \"@guardian/stand/base/colors.css\";\n\n.container {\n display: flex;\n gap: var(--base-spacing-4-rem);\n margin-top: var(--base-spacing-4-rem);\n}\n\n.stand-icon {\n display: var(--component-icon-shared-display);\n user-select: var(--component-icon-shared-user-select);\n font-size: var(--component-icon-lg-size);\n}\n\n.stand-icon-font-color {\n color: var(--base-colors-warm-purple-400);\n}\n\n.stand-icon-svg > svg {\n width: var(--component-icon-lg-size);\n height: var(--component-icon-lg-size);\n}\n\n.stand-icon-svg-color > svg {\n fill: var(--base-colors-warm-purple-400);\n}\n\n";
4
+ export declare const componentHtml = "<div class=\"container\">Material Symbols</div>\n <div class=\"container\">\n <span class=\"material-symbols stand-icon\">raven</span>\n <span class=\"material-symbols stand-icon stand-icon-font-color\">owl</span>\n </div>\n <div class=\"container\">SVGs</div>\n <div class=\"container\">\n <span class=\"material-symbols stand-icon stand-icon-svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n <span class=\"material-symbols stand-icon stand-icon-svg stand-icon-svg-color\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n </div>";
5
+ export declare const componentJs = "// for ts/js\nimport { componentIcon, baseColors } from \"@guardian/stand\";\n\nconst iconStyles = `\n display: ${componentIcon.shared.display};\n user-select: ${componentIcon.shared[\"user-select\"]};\n font-size: ${componentIcon.lg.size};\n`;\n\nconst iconFontColorStyles = `\n ${iconStyles}\n color: ${baseColors['warm-purple'][400]};\n`;\n\nconst iconSvgStyles = `\n width: ${componentIcon.lg.size};\n height: ${componentIcon.lg.size};\n`;\n\nconst iconSvgColorStyles = `\n ${iconSvgStyles}\n fill: ${baseColors['warm-purple'][400]};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n <div style=\"margin-top: 4px;\">Material Symbols</div>\n <div class=\"container\">\n <span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n <span class=\"material-symbols\" style=\"${iconFontColorStyles}\">owl</span>\n </div>\n <div style=\"margin-top: 4px;\">SVGs</div>\n <div class=\"container\">\n <span class=\"material-symbols\" style=\"${iconStyles}\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgColorStyles}\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n </div>\n`;\n";
package/dist/types/components/icon-button/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "IconButton";
2
+ export declare const componentTsx = "import { IconButton } from \"@guardian/stand/icon-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconButton\n onPress={() => alert(\"You summoned a raven!\")}\n symbol=\"raven\"\n ariaLabel=\"Summon a raven\"\n />\n <IconButton\n isDisabled\n onPress={() => alert(\"You consulted with an owl!\")}\n symbol=\"owl\"\n ariaLabel=\"Consult with an owl\"\n\t\t variant=\"neutral-secondary\"\n />\n\t</>\n);\n\n";
3
+ export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-emphasised-primary {\n\t\tcolor: var(--component-button-emphasised-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-emphasised-primary-md-icon-button-width);\n\t\theight: var(--component-button-emphasised-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-emphasised-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-emphasised-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-emphasised-primary-md-typography-font-width);\n\t\tborder: var(--component-button-emphasised-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-emphasised-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-emphasised-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-emphasised-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-active-border);\n\t}\n\t.stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-neutral-secondary {\n\t\tcolor: var(--component-button-neutral-secondary-shared-color);\n\t\tbackground: var(--component-button-neutral-secondary-shared-background-color);\n\t\twidth: var(--component-button-neutral-secondary-md-icon-button-width);\n\t\theight: var(--component-button-neutral-secondary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-neutral-secondary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-neutral-secondary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-neutral-secondary-md-typography-font-width);\n\t\tborder: var(--component-button-neutral-secondary-shared-border);\n\t\tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n\t}\n\t.stand-icon-button-neutral-secondary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-hover-border);\n\t}\n\t.stand-icon-button-neutral-secondary:active {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-active-border);\n\t}\n\t.stand-icon-button-neutral-secondary:disabled, .stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n\t}\n\t.stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n\t}\n\n";
4
+ export declare const componentHtml = "<div class=\"container\">\n <button class=\"stand-icon-button stand-icon-button-emphasised-primary\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></button>\n <button class=\"stand-icon-button stand-icon-button-neutral-secondary\" disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></button>\n</div>\n";
5
+ export declare const componentJs = "\t// for ts/js\n\timport { componentButton } from \"@guardian/stand\";\n\n\t// example of creating a stylesheet in js\n\tconst sheet = new CSSStyleSheet();\n\n\t// apply the rules to the sheet\n\tsheet.replaceSync(`\n\t/* shared button styles for all variants */\n\t.js-stand-icon-button {\n\t\tdisplay: ${componentButton.shared.display};\n\t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n\t\ttext-align: ${componentButton.shared[\"text-align\"]};\n\t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n\t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n\t\tcursor: ${componentButton.shared.cursor};\n\t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n\t\talign-items: ${componentButton.shared[\"align-items\"]};\n\t}\n\t.js-stand-icon-button:focus-visible {\n\t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n\t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n\t}\n\t.js-stand-icon-button:disabled {\n\t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.js-stand-icon-button-emphasised-primary {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"emphasised-primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-emphasised-primary:hover {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n\t}\n\t.js-stand-icon-button-emphasised-primary:active {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-neutral-secondary {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"neutral-secondary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-neutral-secondary:hover {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:active {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:disabled, .js-stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-emphasised-primary\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></button>\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-neutral-secondary\" disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></button>\n\t</div>\n\t`;\n\n";
package/dist/types/components/icon-link-button/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "IconLinkButton";
2
+ export declare const componentTsx = "import { IconLinkButton } from \"@guardian/stand/icon-link-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconLinkButton\n href=\"#\"\n symbol=\"raven\"\n ariaLabel=\"Summon a raven\"\n />\n <IconLinkButton\n href=\"#\"\n isDisabled\n variant=\"emphasised-secondary\"\n symbol=\"owl\"\n ariaLabel=\"Consult with an owl\"\n />\n\t</>\n);\n\n";
3
+ export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-emphasised-primary {\n\t\tcolor: var(--component-button-emphasised-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-emphasised-primary-md-icon-button-width);\n\t\theight: var(--component-button-emphasised-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-emphasised-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-emphasised-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-emphasised-primary-md-typography-font-width);\n\t\tborder: var(--component-button-emphasised-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-emphasised-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-emphasised-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-emphasised-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-active-border);\n\t}\n\t.stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-neutral-secondary {\n\t\tcolor: var(--component-button-neutral-secondary-shared-color);\n\t\tbackground: var(--component-button-neutral-secondary-shared-background-color);\n\t\twidth: var(--component-button-neutral-secondary-md-icon-button-width);\n\t\theight: var(--component-button-neutral-secondary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-neutral-secondary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-neutral-secondary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-neutral-secondary-md-typography-font-width);\n\t\tborder: var(--component-button-neutral-secondary-shared-border);\n\t\tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n\t}\n\t.stand-icon-button-neutral-secondary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-hover-border);\n\t}\n\t.stand-icon-button-neutral-secondary:active {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-active-border);\n\t}\n\t.stand-icon-button-neutral-secondary:disabled, .stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n\t}\n\t.stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n\t}\n\n";
4
+ export declare const componentHtml = "<div class=\"container\">\n <a class=\"stand-icon-button stand-icon-button-emphasised-primary\" href=\"#\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></a>\n <a class=\"stand-icon-button stand-icon-button-neutral-secondary\" data-disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></a>\n</div>\n";
5
+ export declare const componentJs = "\t// for ts/js\n\timport { componentButton } from \"@guardian/stand\";\n\n\t// example of creating a stylesheet in js\n\tconst sheet = new CSSStyleSheet();\n\n\t// apply the rules to the sheet\n\tsheet.replaceSync(`\n\t/* shared button styles for all variants */\n\t.js-stand-icon-button {\n\t\tdisplay: ${componentButton.shared.display};\n\t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n\t\ttext-align: ${componentButton.shared[\"text-align\"]};\n\t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n\t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n\t\tcursor: ${componentButton.shared.cursor};\n\t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n\t\talign-items: ${componentButton.shared[\"align-items\"]};\n\t}\n\t.js-stand-icon-button:focus-visible {\n\t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n\t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n\t}\n\t.js-stand-icon-button:disabled {\n\t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.js-stand-icon-button-emphasised-primary {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"emphasised-primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-emphasised-primary:hover {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n\t}\n\t.js-stand-icon-button-emphasised-primary:active {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary:disabled, .js-stand-icon-button-emphasised-primary[data-disabled] {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-neutral-secondary {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"neutral-secondary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-neutral-secondary:hover {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:active {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:disabled, .js-stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-emphasised-primary\" href=\"#\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></a>\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-neutral-secondary\" data-disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></a>\n\t</div>\n\t`;\n\n";
package/dist/types/components/link-button/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "LinkButton";
2
+ export declare const componentTsx = "import { LinkButton } from '@guardian/stand/link-button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton href=\"#\">\n \t\tLinkButton\n\t\t\t</LinkButton>\n\t\t\t<LinkButton isDisabled variant=\"emphasised-secondary\">\n\t\t\t\tDisabled LinkButton\n\t\t\t</LinkButton>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton\n\t\t\t\thref=\"#\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tLinkButton with Icon\n\t\t\t</LinkButton>\n\t\t\t<LinkButton\n\t\t\t\tisDisabled\n\t\t\t\thref=\"#\"\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled LinkButton with Icon\n\t\t\t</LinkButton>\n\t\t</div>\n\t</>\n);\n\n";
3
+ export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n .stand-button {\n \tdisplay: var(--component-button-shared-display);\n \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n \ttext-align: var(--component-button-shared-text-align);\n \tbox-shadow: var(--component-button-shared-box-shadow);\n \ttext-decoration: var(--component-button-shared-text-decoration);\n \tcursor: var(--component-button-shared-cursor);\n \tjustify-content: var(--component-button-shared-justify-content);\n \talign-items: var(--component-button-shared-align-items);\n }\n .stand-button:focus-visible {\n \toutline: var(--component-button-shared-focus-visible-outline);\n \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n }\n .stand-button:disabled {\n \tcursor: var(--component-button-shared-disabled-cursor);\n }\n\n /* example setup of button/link button style using md size and emphasised primary variant */\n .stand-button-emphasised-primary {\n \tcolor: var(--component-button-emphasised-primary-shared-color);\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-background-color\n \t);\n \theight: var(--component-button-emphasised-primary-md-height);\n \tpadding: var(--component-button-emphasised-primary-md-padding-top)\n \tvar(--component-button-emphasised-primary-md-padding-right)\n \tvar(--component-button-emphasised-primary-md-padding-bottom)\n \tvar(--component-button-emphasised-primary-md-padding-left);\n \tfont: var(--component-button-emphasised-primary-md-typography-font);\n \tletter-spacing: var(\n \t\t--component-button-emphasised-primary-md-typography-letter-spacing\n \t);\n \tfont-variation-settings: \"wdth\"\n \tvar(--component-button-emphasised-primary-md-typography-font-width);\n \tborder: var(--component-button-emphasised-primary-shared-border);\n \tborder-radius: var(\n \t\t--component-button-emphasised-primary-shared-border-radius\n \t);\n }\n .stand-button-emphasised-primary:hover {\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-hover-background-color\n \t);\n \tborder: var(--component-button-emphasised-primary-shared-hover-border);\n }\n .stand-button-emphasised-primary:active {\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-active-background-color\n \t);\n \tborder: var(--component-button-emphasised-primary-shared-active-border);\n }\n .stand-button-emphasised-primary:disabled, .stand-button-emphasised-primary[data-disabled] {\n \tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n \tbackground: var(\n \t\t--component-button-emphasised-primary-shared-disabled-background-color\n \t);\n \tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n \t}\n \t.stand-button-emphasised-primary > .material-symbols {\n \tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n \t}\n \t.stand-button-emphasised-primary:has(> .material-symbols) {\n \tpadding-left: var(\n \t\t--component-button-emphasised-primary-md-padding-with-icon-icon-left-left\n \t);\n \tgap: var(--component-button-emphasised-primary-md-icon-gap);\n }\n\n /* example setup of button/link button style using md size and neutral secondary variant */\n .stand-button-neutral-secondary {\n \tcolor: var(--component-button-neutral-secondary-shared-color);\n \tbackground: var(--component-button-neutral-secondary-shared-background-color);\n \theight: var(--component-button-neutral-secondary-md-height);\n \tpadding: var(--component-button-neutral-secondary-md-padding-top)\n \tvar(--component-button-neutral-secondary-md-padding-right)\n \tvar(--component-button-neutral-secondary-md-padding-bottom)\n \tvar(--component-button-neutral-secondary-md-padding-left);\n \tfont: var(--component-button-neutral-secondary-md-typography-font);\n \tletter-spacing: var(\n \t\t--component-button-neutral-secondary-md-typography-letter-spacing\n \t);\n \tfont-variation-settings: \"wdth\"\n \tvar(--component-button-neutral-secondary-md-typography-font-width);\n \tborder: var(--component-button-neutral-secondary-shared-border);\n \tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n }\n .stand-button-neutral-secondary:hover {\n \tbackground: var(\n \t\t--component-button-neutral-secondary-shared-hover-background-color\n \t);\n \tborder: var(--component-button-neutral-secondary-shared-hover-border);\n }\n .stand-button-neutral-secondary:active {\n \tbackground: var(\n \t\t--component-button-neutral-secondary-shared-active-background-color\n \t);\n \tborder: var(--component-button-neutral-secondary-shared-active-border);\n }\n .stand-button-neutral-secondary:disabled, .stand-button-neutral-secondary[data-disabled] {\n \tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n \tbackground: var(\n \t\t--component-button-neutral-secondary-shared-disabled-background-color\n \t);\n \tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n }\n .stand-button-neutral-secondary > .material-symbols {\n \tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n }\n .stand-button-neutral-secondary:has(> .material-symbols) {\n \tpadding-left: var(\n \t\t--component-button-neutral-secondary-md-padding-with-icon-icon-left-left\n \t);\n \tgap: var(--component-button-neutral-secondary-md-icon-gap);\n }\n\n";
4
+ export declare const componentHtml = "<div class=\"container flow-column\">\n <div class=\"container\">\n \t<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\">LinkButton</a>\n \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n </div>\n\n <div class=\"container\">\n \t<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n </div>\n\n</div>\n";
5
+ export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } from \"@guardian/stand\";\n\n \t// example of creating a stylesheet in js\n \tconst sheet = new CSSStyleSheet();\n\n \t// apply the rules to the sheet\n \tsheet.replaceSync(`\n \t/* shared button styles for all variants */\n \t.js-stand-button {\n \t\tdisplay: ${componentButton.shared.display};\n \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n \t\tcursor: ${componentButton.shared.cursor};\n \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n \t\talign-items: ${componentButton.shared[\"align-items\"]};\n \t}\n \t.js-stand-button:focus-visible {\n \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n \t}\n \t.js-stand-button:disabled {\n \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n \t}\n\n \t/* example setup of button/link button style using md size and emphasised primary variant */\n \t.js-stand-button-emphasised-primary {\n \t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n \t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n \t\tpadding: ${componentButton[\"emphasised-primary\"].md.padding.top}\n \t\t${componentButton[\"emphasised-primary\"].md.padding.right}\n \t\t${componentButton[\"emphasised-primary\"].md.padding.bottom}\n \t\t${componentButton[\"emphasised-primary\"].md.padding.left};\n \t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n \t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n \t\tfont-variation-settings: 'wdth'\n \t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n \t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n \t}\n \t.js-stand-button-emphasised-primary:hover {\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n \t}\n \t.js-stand-button-emphasised-primary:active {\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n \t}\n \t.js-stand-button-emphasised-primary:disabled, .js-stand-button-emphasised-primary[data-disabled] {\n \t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n \t}\n \t.js-stand-button-emphasised-primary > .material-symbols {\n \t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n \t}\n \t.js-stand-button-emphasised-primary:has(> .material-symbols) {\n \t\tpadding-left: ${componentButton[\"emphasised-primary\"].md.padding.withIcon.iconLeft.left};\n \t\tgap: ${componentButton[\"emphasised-primary\"].md.icon.gap};\n \t}\n\n \t/* example setup of button/link button style using md size and neutral secondary variant */\n \t.js-stand-button-neutral-secondary {\n \t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n \t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n \t\tpadding: ${componentButton[\"neutral-secondary\"].md.padding.top}\n \t\t${componentButton[\"neutral-secondary\"].md.padding.right}\n \t\t${componentButton[\"neutral-secondary\"].md.padding.bottom}\n \t\t${componentButton[\"neutral-secondary\"].md.padding.left};\n \t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n \t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n \t\tfont-variation-settings: 'wdth'\n \t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n \t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n \t}\n \t.js-stand-button-neutral-secondary:hover {\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n \t}\n \t.js-stand-button-neutral-secondary:active {\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n \t}\n \t.js-stand-button-neutral-secondary:disabled, .js-stand-button-neutral-secondary[data-disabled] {\n \t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n \t}\n \t.js-stand-button-neutral-secondary > .material-symbols {\n \t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n \t}\n \t.js-stand-button-neutral-secondary:has(> .material-symbols) {\n \t\tpadding-left: ${componentButton[\"neutral-secondary\"].md.padding.withIcon.iconLeft.left};\n \t\tgap: ${componentButton[\"neutral-secondary\"].md.icon.gap};\n \t}\n\n `);\n\n // update the document with the sheet\n document.adoptedStyleSheets.push(sheet);\n\n // modify the dom with the button components using the generated stylesheet\n document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n \t<div class=\"container\">\n \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\">LinkButton</a>\n \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n \t</div>\n \t<div class=\"container\">\n \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n \t</div>\n </div>`;\n\n";
package/dist/types/components/topbar/toolName/TopBarToolName.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { TopBarToolNameProps } from './types';
2
+ export declare const TopBarToolName: ({ name, favicon, subsection, subsectionIcon, theme, cssOverrides, }: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/types/components/topbar/toolName/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "TopBarToolName";
2
+ export declare const componentTsx = "import { TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<TopBarToolName\n\t\t\t\tname=\"Songwriter\"\n\t\t\t\tfavicon={{ type: 'letter', letter: 'S' }}\n\t\t\t\tsubsection=\"Article\"\n\t\t\t\tsubsectionIcon=\"menu\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
3
+ export declare const componentCss = "@import \"@guardian/stand/component/TopBar.css\";\n\t/* import the favicon styles */\n\t@import '@guardian/stand/component/favicon.css';\n\n /* example setup of tool name */\n .stand-topbar-toolname {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-gap);\n\t\tfont: var(--component-top-bar-tool-name-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-typography-font-width);\n }\n\n\t.stand-topbar-toolname-divider {\n\t\tborder-right: var(--component-top-bar-tool-name-divider-border);\n\t\theight: var(--component-top-bar-tool-name-divider-height);\n\t}\n\n\t.stand-topbar-toolname-subsection {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-subsection-gap);\n\t\tfont: var(--component-top-bar-tool-name-subsection-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-subsection-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-subsection-typography-font-width)\n\t}\n\n\t.stand-favicon {\n\t\tbackground-color: var(--component-favicon-color-background);\n\t\tdisplay: var(--component-favicon-display);\n\t\talign-items: var(--component-favicon-align-items);\n\t\tjustify-content: var(--component-favicon-justify-content);\n\t\twidth: var(--component-favicon-size);\n\t\theight: var(--component-favicon-size);\n\t\tuser-select: var(--component-favicon-user-select);\n\t\tcolor: var(--component-favicon-color-text);\n\t\tfont: var(--component-favicon-typography-font);\n\t\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n\t}\n\n";
4
+ export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-topbar-toolname\">\n\t\t<div class=\"stand-favicon\">S</div>\n\t\t<div>Songwriter</div>\n\t\t<div class=\"stand-topbar-toolname-divider\">&nbsp;</div>\n\t\t <div class=\"stand-topbar-toolname-subsection\">\n\t\t\t <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>\n\t\t\t <div>Article</div>\n\t\t</div>\n\t</div>\n</div>";
5
+ export declare const componentJs = "\n\t// for ts/js\n\timport { componentFavicon, componentTopBar, baseColors } from '@guardian/stand';\n\n\tconst style = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName[\"align-items\"]};\n\t\tgap: ${componentTopBar.ToolName.gap};\n\t\tfont: ${componentTopBar.ToolName.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.typography.fontWidth};\n\t`;\n\n\tconst dividerStyle = `\n\t\tborder-right: ${componentTopBar.ToolName.divider.border};\n\t\theight: ${componentTopBar.ToolName.divider.height};\n\t`;\n\n\tconst subsectionStyle = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName[\"align-items\"]};\n\t\tgap: ${componentTopBar.ToolName.subsection.gap};\n\t\tfont: ${componentTopBar.ToolName.subsection.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.subsection.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.subsection.typography.fontWidth};\n\t`;\n\n\tconst faviconStyle = `\n\t\tbackground-color: ${componentFavicon.color.background};\n\t\tdisplay: ${componentFavicon.display};\n\t\talign-items: ${componentFavicon[\"align-items\"]};\n\t\tjustify-content: ${componentFavicon[\"justify-content\"]};\n\t\twidth: ${componentFavicon.size};\n\t\theight: ${componentFavicon.size};\n\t\tuser-select: ${componentFavicon[\"user-select\"]};\n\t\tcolor: ${componentFavicon.color.text};\n\t\tfont: ${componentFavicon.typography.font};\n\t\tletter-spacing: ${componentFavicon.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentFavicon.typography.fontWidth};\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">\n\t\t\t<div style=\"${faviconStyle}>S</div>\n\t\t\t<div>Songwriter</div>\n\t\t\t<div style=\"${dividerStyle}\">&nbsp;</div>\n\t\t\t<div style=\"${subsectionStyle}\">\n\t\t\t\t<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>\n\t\t\t\t<div>Article</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";
package/dist/types/components/topbar/toolName/styles.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { SerializedStyles } from '@emotion/react';
2
+ import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
3
+ import type { Prettify } from '../../../util/types';
4
+ export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
5
+ export declare const defaultToolNameTheme: TopBarToolNameTheme;
6
+ export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
7
+ export declare const toolNameTypography: (theme: TopBarToolNameTheme) => SerializedStyles;
8
+ export declare const dividerStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
9
+ export declare const subsectionStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
10
+ export declare const subsectionTypography: (theme: TopBarToolNameTheme) => SerializedStyles;
package/dist/types/components/topbar/toolName/types.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import type { DefaultProps } from '../../../util/types';
2
+ import type { FaviconProps } from '../../favicon/types';
3
+ import type { IconProps } from '../../icon/types';
4
+ import type { TopBarToolNameTheme } from './styles';
5
+ export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme> {
6
+ /**
7
+ * Name of the tool to display
8
+ */
9
+ name: string;
10
+ /**
11
+ * Icon to display
12
+ */
13
+ favicon: FaviconProps;
14
+ /**
15
+ * The subsection or type of content that is represented on the page (optional)
16
+ * */
17
+ subsection?: string;
18
+ /**
19
+ * Icon that represents the content type (optional)
20
+ * */
21
+ subsectionIcon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
22
+ }
package/dist/types/components/typography/sandbox.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const componentName = "Typography";
2
+ export declare const componentTsx = "import { Typography } from '@guardian/stand/typography';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography element=\"h2\" variant=\"heading-compact-xl\">Wow! A heading!</Typography>\n\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography>Body text here</Typography>\n\n\t\t{/* Div with an italic text wrapped inside */}\n\t\t<Typography element=\"div\" variant=\"body-md\">Some text, with <Typography element=\"i\" variant=\"body-italic-md\">even more text</Typography></Typography>\n\t</>\n);\n\n";
3
+ export declare const componentCss = "@import '@guardian/stand/component/typography.css';\n\t@import '@guardian/stand/semantic/typography.css';\n\n /* shared typography styles for all variants */\n .stand-typography {\n \tcolor: var(--component-typography-color);\n }\n\n /* example setup of heading-compact-xl */\n .stand-typography-heading-compact-xl {\n\t\tfont: var(--semantic-typography-heading-compact-xl-font);\n\t\tletter-spacing: var(--semantic-typography-heading-compact-xl-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-heading-compact-xl-font-width);\n\t}\n\n /* example setup of standard body text */\n .stand-typography-body-md {\n\t\tfont: var(--semantic-typography-body-md-font);\n\t\tletter-spacing: var(--semantic-typography-body-md-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-md-font-width);\n\t}\n\n\t/* example setup of italic body text */\n\t.stand-typography-body-italic-md {\n\t\tfont: var(--semantic-typography-body-italic-md-font);\n\t\tletter-spacing: var(--semantic-typography-body-italic-md-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-italic-md-font-width);\n\t}\n";
4
+ export declare const componentHtml = "<div class=\"container flow-column\">\n <h2 class=\"stand-typography stand-typography-heading-compact-xl\">Wow! A heading!</h2>\n\n\t<p class=\"stand-typography stand-typography-body-md\">Body text here</p>\n\n\t<div class=\"stand-typography stand-typography-body-md\">Some text, with <i class=\"stand-typography stand-typography-body-italic-md\">even more text</i></div>\n</div>\n";
5
+ export declare const componentJs = "\t// for ts/js\n\t\timport { componentTypography, semanticTypography } from \"@guardian/stand\";\n\n \t// example of creating a stylesheet in js\n \tconst sheet = new CSSStyleSheet();\n\n \t// apply the rules to the sheet\n \tsheet.replaceSync(`\n\t\t\t.js-stand-typography {\n\t\t\t\tcolor: ${componentTypography.color};\n\t\t\t}\n\t\t\t.js-stand-typography-heading-compact-xl {\n\t\t\t\tfont: ${semanticTypography['heading-compact-xl'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['heading-compact-xl'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['heading-compact-xl'].fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-md {\n\t\t\t\tfont: ${semanticTypography['body-md'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['body-md'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-md'].fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-italic-md {\n\t\t\t\tfont: ${semanticTypography['body-italic-md'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['body-italic-md'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-italic-md'].fontWidth};\n\t\t\t}\n \t`);\n\n // update the document with the sheet\n document.adoptedStyleSheets.push(sheet);\n\n // modify the dom with the typography components using the generated stylesheet\n document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n\t\t<h2 class=\"js-stand-typography js-stand-typography-heading-compact-xl\">Wow! A heading!</h2>\n\t\t<p class=\"js-stand-typography js-stand-typography-body-md\">Body text here</p>\n\t\t<div class=\"js-stand-typography js-stand-typography-body-md\">Some text, with <i class=\"js-stand-typography js-stand-typography-body-italic-md\">even more text</i></div>\n </div>`;\n\n";
package/dist/types/index.d.ts CHANGED
@@ -26,6 +26,8 @@ export { componentIcon } from './styleD/build/typescript/component/icon';
26
26
  export type { ComponentIcon } from './styleD/build/typescript/component/icon';
27
27
  export { componentFavicon } from './styleD/build/typescript/component/favicon';
28
28
  export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
29
+ export { componentTopBar } from './styleD/build/typescript/component/TopBar';
30
+ export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
29
31
  /**
30
32
  * style dictionary exports - base
31
33
  */
@@ -48,7 +50,3 @@ export { semanticTypography } from './styleD/build/typescript/semantic/typograph
48
50
  export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
49
51
  export { semanticSizing } from './styleD/build/typescript/semantic/sizing';
50
52
  export type { SemanticSizing } from './styleD/build/typescript/semantic/sizing';
51
- /**
52
- * utils exports
53
- */
54
- export { default as GlobalResetStyles } from './util/reset.css?inline';
package/dist/types/styleD/build/typescript/component/TopBar.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ export declare const componentTopBar: {
5
+ ToolName: {
6
+ display: string;
7
+ 'align-items': string;
8
+ gap: string;
9
+ typography: {
10
+ font: string;
11
+ letterSpacing: string;
12
+ fontWidth: number;
13
+ };
14
+ divider: {
15
+ border: string;
16
+ height: string;
17
+ };
18
+ subsection: {
19
+ gap: string;
20
+ typography: {
21
+ font: string;
22
+ letterSpacing: string;
23
+ fontWidth: number;
24
+ };
25
+ };
26
+ };
27
+ };
28
+ export type ComponentTopBar = typeof componentTopBar;
package/dist/types/util/storybook/sandbox/Sandbox.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export declare const SandboxReact: ({ componentTsx, componentName, flowColumn, }: {
2
+ componentTsx: string;
3
+ componentName: string;
4
+ flowColumn?: boolean | undefined;
5
+ }) => import("@emotion/react/jsx-runtime").JSX.Element;
6
+ export declare const SandboxCss: ({ componentCss, componentHtml, componentName, }: {
7
+ componentCss: string;
8
+ componentHtml: string;
9
+ componentName: string;
10
+ }) => import("@emotion/react/jsx-runtime").JSX.Element;
11
+ export declare const SandboxJs: ({ componentJs, componentName, }: {
12
+ componentJs: string;
13
+ componentName: string;
14
+ }) => import("@emotion/react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.13",
3
+ "version": "0.0.15",
4
4
  "type": "module",
5
5
  "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
6
6
  "exports": {
@@ -49,6 +49,11 @@
49
49
  "import": "./dist/favicon.js",
50
50
  "require": "./dist/favicon.cjs"
51
51
  },
52
+ "./TopBar": {
53
+ "types": "./dist/types/TopBar.d.ts",
54
+ "import": "./dist/TopBar.js",
55
+ "require": "./dist/TopBar.cjs"
56
+ },
52
57
  "./byline": {
53
58
  "types": "./dist/types/byline.d.ts",
54
59
  "import": "./dist/byline.js",
@@ -90,7 +95,8 @@
90
95
  "./component/button.css": "./dist/styleD/build/css/component/button.css",
91
96
  "./component/typography.css": "./dist/styleD/build/css/component/typography.css",
92
97
  "./component/icon.css": "./dist/styleD/build/css/component/icon.css",
93
- "./component/favicon.css": "./dist/styleD/build/css/component/favicon.css"
98
+ "./component/favicon.css": "./dist/styleD/build/css/component/favicon.css",
99
+ "./component/TopBar.css": "./dist/styleD/build/css/component/TopBar.css"
94
100
  },
95
101
  "//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
96
102
  "typesVersions": {
@@ -119,6 +125,9 @@
119
125
  "favicon": [
120
126
  "./dist/types/favicon.d.ts"
121
127
  ],
128
+ "TopBar": [
129
+ "./dist/types/TopBar.d.ts"
130
+ ],
122
131
  "byline": [
123
132
  "./dist/types/byline.d.ts"
124
133
  ],
@@ -145,9 +154,10 @@
145
154
  "sideEffects": false,
146
155
  "devDependencies": {
147
156
  "@changesets/cli": "^2.29.8",
157
+ "@codesandbox/sandpack-react": "^2.20.0",
148
158
  "@emotion/react": "11.11.4",
149
159
  "@figma/rest-api-spec": "^0.36.0",
150
- "@guardian/eslint-config": "13.0.6",
160
+ "@guardian/eslint-config": "14.0.0",
151
161
  "@guardian/prettier": "10.0.0",
152
162
  "@guardian/prosemirror-invisibles": "3.1.1",
153
163
  "@guardian/tsconfig": "1.0.1",
@@ -156,9 +166,9 @@
156
166
  "@rollup/plugin-commonjs": "29.0.0",
157
167
  "@rollup/plugin-node-resolve": "16.0.3",
158
168
  "@rollup/plugin-typescript": "12.3.0",
159
- "@storybook/addon-docs": "^10.2.11",
160
- "@storybook/addon-themes": "^10.2.11",
161
- "@storybook/react-vite": "^10.2.11",
169
+ "@storybook/addon-docs": "^10.2.14",
170
+ "@storybook/addon-themes": "^10.2.14",
171
+ "@storybook/react-vite": "^10.2.14",
162
172
  "@terrazzo/cli": "^0.10.5",
163
173
  "@testing-library/jest-dom": "^6.9.1",
164
174
  "@types/jest": "30.0.0",
@@ -167,7 +177,7 @@
167
177
  "@types/react-dom": "17.0.25",
168
178
  "change-case": "^5.4.4",
169
179
  "eslint": "9.39.3",
170
- "eslint-plugin-storybook": "^10.2.11",
180
+ "eslint-plugin-storybook": "^10.2.14",
171
181
  "husky": "^9.1.7",
172
182
  "jest": "30.2.0",
173
183
  "jest-environment-jsdom": "^30.1.2",
@@ -188,7 +198,7 @@
188
198
  "rollup-plugin-esbuild": "6.2.1",
189
199
  "rollup-plugin-import-css": "^4.2.0",
190
200
  "rollup-plugin-node-externals": "8.1.2",
191
- "storybook": "^10.2.11",
201
+ "storybook": "^10.2.14",
192
202
  "style-dictionary": "^5.3.2",
193
203
  "ts-jest": "29.4.6",
194
204
  "tslib": "2.8.1",
@@ -206,7 +216,7 @@
206
216
  "prosemirror-state": "1.4.3",
207
217
  "prosemirror-view": "1.37.2",
208
218
  "react": "^17.0.2 || ^18.0.0 || ^19.0.0",
209
- "react-aria-components": "1.13.0",
219
+ "react-aria-components": ">= 1.13.0 <= 1.15.1",
210
220
  "react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
211
221
  "typescript": ">=5.0.0 <=5.9.3"
212
222
  },