@guardian/stand 0.0.11 → 0.0.12

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 (15) hide show
  1. package/README.md +14 -21
  2. package/dist/components/button/Button.cjs +1 -4
  3. package/dist/components/button/Button.js +1 -4
  4. package/dist/components/button/styles.cjs +1 -3
  5. package/dist/components/byline/Byline.cjs +4 -18
  6. package/dist/components/byline/Preview.cjs +1 -8
  7. package/dist/components/byline/plugins.cjs +3 -13
  8. package/dist/components/icon/Icon.cjs +1 -4
  9. package/dist/components/icon/Icon.js +1 -4
  10. package/dist/components/icon-link-button/IconLinkButton.cjs +1 -6
  11. package/dist/components/user-menu/UserMenu.cjs +1 -8
  12. package/dist/fonts/OpenSans.css +64 -68
  13. package/dist/styleD/build/css/component/button.css +15 -16
  14. package/dist/styleD/build/css/semantic/typography.css +5 -10
  15. package/package.json +3 -3
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  _Find what you need on the (news)stand!_
4
4
 
5
- Stand is component library for Guardian editorial tools. It is co-located within flexible-content as Composer is expected to be the main consumer of the UI components within Stand. But any editorial tool should be able to make use of the components as an npm package - `@guardian/stand` - and developers should feel comfortable contributing.
5
+ Stand is component library and design system for internal Guardian tools. Any tool should be able to make use of the components as an npm package - `@guardian/stand` - and developers should feel comfortable contributing.
6
6
 
7
7
  ## Installation
8
8
 
@@ -74,7 +74,7 @@ The Open Sans variable font can also be loaded via Google Fonts, but we recommen
74
74
  3. Click "Change styles" dropdown
75
75
  4. Use "Full axis" for all options (Italic, Weight, Width)
76
76
  5. Copy the relevant `<link>` tag or `@import` code snippet into your project
77
- - You don't need to include the CSS class, as the design system will handle applying the correct font-family via CSS variables or JS/TS tokens.
77
+ - You don't need to include the CSS class, as the design system will handle applying the correct font-family via CSS variables or JS/TS tokens.
78
78
 
79
79
  #### Guardian Fonts
80
80
 
@@ -149,15 +149,12 @@ import '@guardian/stand/semantic/colors.css'; // CSS usage
149
149
 
150
150
  const stringStyle = css`
151
151
  color: ${semanticColors.text.default}; /* JS/TS usage */
152
- background-color: var(
153
- --semantic-colors-bg-default-on-light
154
- ); /* CSS usage */
152
+ background-color: var(--semantic-colors-bg-default-on-light); /* CSS usage */
155
153
  `;
156
154
 
157
155
  const objectStyle = {
158
156
  color: semanticColors.text.default /* JS/TS usage */,
159
- backgroundColor:
160
- 'var(--semantic-colors-bg-default-on-light)' /* CSS usage */,
157
+ backgroundColor: 'var(--semantic-colors-bg-default-on-light)' /* CSS usage */,
161
158
  };
162
159
  ```
163
160
 
@@ -908,9 +905,7 @@ or for scenarios where you have to use relative paths/node_modules directly:
908
905
  /* example setup of button/link button style using md size and neutral secondary variant */
909
906
  .stand-button-neutral-secondary {
910
907
  color: var(--component-button-neutral-secondary-shared-color);
911
- background: var(
912
- --component-button-neutral-secondary-shared-background-color
913
- );
908
+ background: var(--component-button-neutral-secondary-shared-background-color);
914
909
  height: var(--component-button-neutral-secondary-md-height);
915
910
  padding: var(--component-button-neutral-secondary-md-padding-top)
916
911
  var(--component-button-neutral-secondary-md-padding-right)
@@ -923,9 +918,7 @@ or for scenarios where you have to use relative paths/node_modules directly:
923
918
  font-variation-settings: 'wdth'
924
919
  var(--component-button-neutral-secondary-md-typography-font-width);
925
920
  border: var(--component-button-neutral-secondary-shared-border);
926
- border-radius: var(
927
- --component-button-neutral-secondary-shared-border-radius
928
- );
921
+ border-radius: var(--component-button-neutral-secondary-shared-border-radius);
929
922
  }
930
923
  .stand-button-neutral-secondary:hover {
931
924
  background: var(
@@ -1768,9 +1761,9 @@ See the [Contributing to Stand](./CONTRIBUTING.md) documentation for guidelines
1768
1761
  - Run `pnpm test:react-matrix` to run matrix tests (see Compatibility section below)
1769
1762
  - Run `pnpm tsc` to run check TypeScript types
1770
1763
  - Run `pnpm lint` to run the linter
1771
- - Run `pnpm lint:fix` to fix any auto-fixable issues
1764
+ - Run `pnpm lint:fix` to fix any auto-fixable issues
1772
1765
  - Run `pnpm format:check` to check code formatting
1773
- - Run `pnpm format:fix` to fix code formatting issues
1766
+ - Run `pnpm format:fix` to fix code formatting issues
1774
1767
 
1775
1768
  ### Style Dictionary
1776
1769
 
@@ -1807,13 +1800,13 @@ Matrix generation in CI uses the same JSON file in the workflow: `../.github/wor
1807
1800
 
1808
1801
  1. Edit `./scripts/deps-matrix-versions.json` with new versions
1809
1802
  2. Run the matrix test locally:
1810
- ```bash
1811
- ./scripts/test-deps-matrix.sh
1812
- ```
1803
+ ```bash
1804
+ ./scripts/test-deps-matrix.sh
1805
+ ```
1813
1806
  3. (Optional) Narrow the matrix with overrides:
1814
- ```bash
1815
- REACT_VERSIONS="18.0.0" EMOTION_VERSIONS="11.14.0" TS_VERSIONS="5.1" ./scripts/test-deps-matrix.sh
1816
- ```
1807
+ ```bash
1808
+ REACT_VERSIONS="18.0.0" EMOTION_VERSIONS="11.14.0" TS_VERSIONS="5.1" ./scripts/test-deps-matrix.sh
1809
+ ```
1817
1810
  4. Review results (table output and any failures). Fix issues or adjust code
1818
1811
  5. Update `peerDependencies` in `package.json` to reflect the new minimum / tested range
1819
1812
  6. Open a PR, the CI pipeline will comment with the compatibility matrix
package/dist/components/button/Button.cjs CHANGED
@@ -20,10 +20,7 @@ function Button({
20
20
  reactAriaComponents.Button,
21
21
  {
22
22
  ...props,
23
- css: [
24
- styles.buttonStyles(mergedTheme, { variant, size }, !!icon),
25
- cssOverrides
26
- ],
23
+ css: [styles.buttonStyles(mergedTheme, { variant, size }, !!icon), cssOverrides],
27
24
  children: reactAriaComponents.composeRenderProps(props.children, (children) => (
28
25
  // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
29
26
  /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
package/dist/components/button/Button.js CHANGED
@@ -7,10 +7,7 @@ import { buttonStyles, defaultButtonTheme } from './styles.js';
7
7
  function Button({ variant = "emphasised-primary", size = "md", theme = {}, cssOverrides, icon, ...props }) {
8
8
  const mergedTheme = mergeDeep(defaultButtonTheme, theme);
9
9
  const iconSize = size === "xs" ? "sm" : size;
10
- return jsx(Button$1, { ...props, css: [
11
- buttonStyles(mergedTheme, { variant, size }, !!icon),
12
- cssOverrides
13
- ], children: composeRenderProps(props.children, (children) => (
10
+ return jsx(Button$1, { ...props, css: [buttonStyles(mergedTheme, { variant, size }, !!icon), cssOverrides], children: composeRenderProps(props.children, (children) => (
14
11
  // TODO: isPending (loading) state - see https://react-aria.adobe.com/Button
15
12
  jsxs(Fragment, { children: [icon && jsx(Icon, { size: iconSize, children: icon }), children] })
16
13
  )) });
package/dist/components/button/styles.cjs CHANGED
@@ -24,9 +24,7 @@ const buttonStyles = (theme, { size, variant }, hasIcon = false, isIconButton =
24
24
  ${theme[variant][size].padding.right}
25
25
  ${theme[variant][size].padding.bottom}
26
26
  ${theme[variant][size].padding.left};
27
- ${typography.convertTypographyToEmotionStringStyle(
28
- theme[variant][size].typography
29
- )}
27
+ ${typography.convertTypographyToEmotionStringStyle(theme[variant][size].typography)}
30
28
  border: ${theme[variant].shared.border};
31
29
  border-radius: ${theme[variant].shared.borderRadius};
32
30
 
package/dist/components/byline/Byline.cjs CHANGED
@@ -165,9 +165,7 @@ const Byline = ({
165
165
  if (readOnly) {
166
166
  return false;
167
167
  }
168
- if (!dropdownRef.current?.contains(
169
- event.relatedTarget
170
- )) {
168
+ if (!dropdownRef.current?.contains(event.relatedTarget)) {
171
169
  setShowDropdown(false);
172
170
  }
173
171
  return false;
@@ -203,10 +201,7 @@ const Byline = ({
203
201
  void searchContributors(selectedText).then((contributors) => {
204
202
  setTaggedContributors(contributors);
205
203
  }).catch((error) => {
206
- console.error(
207
- "Error fetching tagged contributors:",
208
- error
209
- );
204
+ console.error("Error fetching tagged contributors:", error);
210
205
  setTaggedContributors([]);
211
206
  });
212
207
  } else {
@@ -291,14 +286,7 @@ const Byline = ({
291
286
  allowUntaggedContributors
292
287
  ]);
293
288
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.bylineContainerStyles, children: [
294
- /* @__PURE__ */ jsxRuntime.jsx(
295
- "div",
296
- {
297
- css: styles.bylineEditorStyles(theme),
298
- ref: editorRef,
299
- onBlur
300
- }
301
- ),
289
+ /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.bylineEditorStyles(theme), ref: editorRef, onBlur }),
302
290
  /* @__PURE__ */ jsxRuntime.jsx(
303
291
  "div",
304
292
  {
@@ -351,9 +339,7 @@ const Byline = ({
351
339
  ],
352
340
  onMouseMove: () => {
353
341
  if (currentOptionIndex !== taggedContributors.length) {
354
- setCurrentOptionIndex(
355
- taggedContributors.length
356
- );
342
+ setCurrentOptionIndex(taggedContributors.length);
357
343
  }
358
344
  },
359
345
  onMouseDown: (e) => {
package/dist/components/byline/Preview.cjs CHANGED
@@ -13,14 +13,7 @@ const Preview = ({ doc }) => {
13
13
  });
14
14
  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.previewStyles, "data-testid": "byline-preview", children: parts.map((node, i) => {
15
15
  if (node.isText) {
16
- return /* @__PURE__ */ jsxRuntime.jsx(
17
- "span",
18
- {
19
- css: styles.previewFreeTextStyles,
20
- children: node.text
21
- },
22
- `${node.text}${i}`
23
- );
16
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.previewFreeTextStyles, children: node.text }, `${node.text}${i}`);
24
17
  } else if (node.type.name === "chip") {
25
18
  if (node.attrs.path) {
26
19
  return /* @__PURE__ */ jsxRuntime.jsx(
package/dist/components/byline/plugins.cjs CHANGED
@@ -70,11 +70,7 @@ const clipboardPlugin = (allowUntaggedContributors, contributorLimit) => {
70
70
  {},
71
71
  transformedNodes
72
72
  ).content;
73
- return new prosemirrorModel.Slice(
74
- newFragment,
75
- slice.openStart,
76
- slice.openEnd
77
- );
73
+ return new prosemirrorModel.Slice(newFragment, slice.openStart, slice.openEnd);
78
74
  }
79
75
  return slice;
80
76
  }
@@ -110,10 +106,7 @@ const bylinePlugin = () => {
110
106
  dom.setAttribute("data-tag-id", node.attrs.tagId);
111
107
  dom.setAttribute("data-path", node.attrs.path);
112
108
  if (node.attrs.meta) {
113
- dom.setAttribute(
114
- "data-meta",
115
- JSON.stringify(node.attrs.meta)
116
- );
109
+ dom.setAttribute("data-meta", JSON.stringify(node.attrs.meta));
117
110
  }
118
111
  dom.textContent = node.attrs.label;
119
112
  const deleteHandle = document.createElement("span");
@@ -125,10 +118,7 @@ const bylinePlugin = () => {
125
118
  if (pos === void 0) {
126
119
  return;
127
120
  }
128
- const tr = view.state.tr.deleteRange(
129
- pos,
130
- pos + node.nodeSize
131
- );
121
+ const tr = view.state.tr.deleteRange(pos, pos + node.nodeSize);
132
122
  view.dispatch(tr);
133
123
  });
134
124
  dom.appendChild(deleteHandle);
package/dist/components/icon/Icon.cjs CHANGED
@@ -33,10 +33,7 @@ function Icon({
33
33
  "span",
34
34
  {
35
35
  className,
36
- css: [
37
- styles.iconStyles(mergedTheme, { size, fill, mode: "svg" }),
38
- cssOverrides
39
- ],
36
+ css: [styles.iconStyles(mergedTheme, { size, fill, mode: "svg" }), cssOverrides],
40
37
  ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
41
38
  children
42
39
  }
package/dist/components/icon/Icon.js CHANGED
@@ -10,10 +10,7 @@ function Icon({ children, size = "md", fill, alt, symbol, theme = {}, cssOverrid
10
10
  cssOverrides
11
11
  ], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children: symbol ?? children });
12
12
  }
13
- return jsx("span", { className, css: [
14
- iconStyles(mergedTheme, { size, fill, mode: "svg" }),
15
- cssOverrides
16
- ], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children });
13
+ return jsx("span", { className, css: [iconStyles(mergedTheme, { size, fill, mode: "svg" }), cssOverrides], ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true }, children });
17
14
  }
18
15
 
19
16
  export { Icon };
package/dist/components/icon-link-button/IconLinkButton.cjs CHANGED
@@ -31,12 +31,7 @@ function IconLinkButton({
31
31
  ref: linkRef,
32
32
  "aria-label": ariaLabel,
33
33
  css: [
34
- styles.iconLinkButtonStyles(
35
- mergedTheme,
36
- { variant, size },
37
- false,
38
- true
39
- ),
34
+ styles.iconLinkButtonStyles(mergedTheme, { variant, size }, false, true),
40
35
  cssOverrides
41
36
  ],
42
37
  children: reactAriaComponents.composeRenderProps(props.children, (children) => /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, symbol, children }))
package/dist/components/user-menu/UserMenu.cjs CHANGED
@@ -17,14 +17,7 @@ function UserMenu({
17
17
  headingLevel
18
18
  }) {
19
19
  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { css: styles.userMenuStyles(theme), children: [
20
- /* @__PURE__ */ jsxRuntime.jsx(
21
- TitleText.TitleText,
22
- {
23
- headingLevel,
24
- css: styles.userMenuHeadingStyles(theme),
25
- children: "Accessibility Settings"
26
- }
27
- ),
20
+ /* @__PURE__ */ jsxRuntime.jsx(TitleText.TitleText, { headingLevel, css: styles.userMenuHeadingStyles(theme), children: "Accessibility Settings" }),
28
21
  /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
29
22
  "Customise your reading & writing experience.",
30
23
  " ",
package/dist/fonts/OpenSans.css CHANGED
@@ -78,16 +78,15 @@
78
78
  U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A,
79
79
  U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346,
80
80
  U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6,
81
- U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040,
82
- U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
83
- U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
84
- U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
85
- U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
86
- U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
87
- U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1,
88
- U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF,
89
- U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
90
- U+1EE00-1EEFF;
81
+ U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043,
82
+ U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C,
83
+ U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121,
84
+ U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2,
85
+ U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319,
86
+ U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1,
87
+ U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB,
88
+ U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE,
89
+ U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
91
90
  }
92
91
  /* symbols */
93
92
  @font-face {
@@ -102,26 +101,25 @@
102
101
  U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4,
103
102
  U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3,
104
103
  U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF,
105
- U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB,
106
- U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C,
107
- U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3,
108
- U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF,
109
- U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336,
110
- U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF,
111
- U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED,
112
- U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426,
113
- U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453,
114
- U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF,
115
- U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED,
116
- U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D,
117
- U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F,
118
- U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2,
119
- U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA,
120
- U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B,
121
- U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD,
122
- U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984,
123
- U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89,
124
- U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8,
104
+ U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF,
105
+ U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0,
106
+ U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F,
107
+ U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315,
108
+ U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382,
109
+ U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6,
110
+ U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7,
111
+ U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444,
112
+ U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0,
113
+ U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA,
114
+ U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB,
115
+ U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513,
116
+ U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D,
117
+ U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC,
118
+ U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC,
119
+ U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
120
+ U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
121
+ U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
122
+ U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8,
125
123
  U+1FB00-1FBFF;
126
124
  }
127
125
  /* vietnamese */
@@ -149,8 +147,8 @@
149
147
  format('woff2');
150
148
  unicode-range:
151
149
  U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
152
- U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
153
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
150
+ U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
151
+ U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
154
152
  }
155
153
  /* latin */
156
154
  @font-face {
@@ -163,8 +161,8 @@
163
161
  format('woff2');
164
162
  unicode-range:
165
163
  U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
166
- U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
167
- U+2212, U+2215, U+FEFF, U+FFFD;
164
+ U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
165
+ U+2215, U+FEFF, U+FFFD;
168
166
  }
169
167
  /* cyrillic-ext */
170
168
  @font-face {
@@ -237,16 +235,15 @@
237
235
  U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A,
238
236
  U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346,
239
237
  U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6,
240
- U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040,
241
- U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E,
242
- U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115,
243
- U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5,
244
- U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310,
245
- U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0,
246
- U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1,
247
- U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF,
248
- U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF,
249
- U+1EE00-1EEFF;
238
+ U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043,
239
+ U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C,
240
+ U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121,
241
+ U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2,
242
+ U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319,
243
+ U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1,
244
+ U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB,
245
+ U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE,
246
+ U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
250
247
  }
251
248
  /* symbols */
252
249
  @font-face {
@@ -261,26 +258,25 @@
261
258
  U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4,
262
259
  U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3,
263
260
  U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF,
264
- U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB,
265
- U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C,
266
- U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3,
267
- U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF,
268
- U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336,
269
- U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF,
270
- U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED,
271
- U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426,
272
- U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453,
273
- U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF,
274
- U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED,
275
- U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D,
276
- U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F,
277
- U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2,
278
- U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA,
279
- U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B,
280
- U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD,
281
- U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984,
282
- U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89,
283
- U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8,
261
+ U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF,
262
+ U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0,
263
+ U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F,
264
+ U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315,
265
+ U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382,
266
+ U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6,
267
+ U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7,
268
+ U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444,
269
+ U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0,
270
+ U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA,
271
+ U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB,
272
+ U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513,
273
+ U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D,
274
+ U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC,
275
+ U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC,
276
+ U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887,
277
+ U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B,
278
+ U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C,
279
+ U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8,
284
280
  U+1FB00-1FBFF;
285
281
  }
286
282
  /* vietnamese */
@@ -308,8 +304,8 @@
308
304
  format('woff2');
309
305
  unicode-range:
310
306
  U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
311
- U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
312
- U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
307
+ U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
308
+ U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
313
309
  }
314
310
  /* latin */
315
311
  @font-face {
@@ -322,6 +318,6 @@
322
318
  format('woff2');
323
319
  unicode-range:
324
320
  U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
325
- U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
326
- U+2212, U+2215, U+FEFF, U+FFFD;
321
+ U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
322
+ U+2215, U+FEFF, U+FFFD;
327
323
  }
package/dist/styleD/build/css/component/button.css CHANGED
@@ -26,16 +26,16 @@
26
26
  #061d3c;
27
27
  --component-button-emphasised-primary-shared-disabled-color: #999999;
28
28
  --component-button-emphasised-primary-shared-disabled-background-color: #dcdcdc;
29
- --component-button-emphasised-primary-shared-disabled-border: 0.0625rem
30
- solid #dcdcdc;
29
+ --component-button-emphasised-primary-shared-disabled-border: 0.0625rem solid
30
+ #dcdcdc;
31
31
  --component-button-emphasised-primary-xs-height: 1.5rem;
32
32
  --component-button-emphasised-primary-xs-padding-top: 0.25rem;
33
33
  --component-button-emphasised-primary-xs-padding-right: 0.5rem;
34
34
  --component-button-emphasised-primary-xs-padding-bottom: 0.25rem;
35
35
  --component-button-emphasised-primary-xs-padding-left: 0.5rem;
36
36
  --component-button-emphasised-primary-xs-padding-with-icon-icon-left-left: 0.25rem;
37
- --component-button-emphasised-primary-xs-typography-font: normal 700
38
- 0.75rem/1 'Open Sans';
37
+ --component-button-emphasised-primary-xs-typography-font: normal 700 0.75rem/1
38
+ 'Open Sans';
39
39
  --component-button-emphasised-primary-xs-typography-letter-spacing: 0rem;
40
40
  --component-button-emphasised-primary-xs-typography-font-width: 95;
41
41
  --component-button-emphasised-primary-xs-icon-size: 1.125rem;
@@ -83,14 +83,13 @@
83
83
  --component-button-emphasised-secondary-shared-color: #000000;
84
84
  --component-button-emphasised-secondary-shared-background-color: none;
85
85
  --component-button-emphasised-secondary-shared-border-radius: 0.25rem;
86
- --component-button-emphasised-secondary-shared-border: 0.0625rem solid
87
- #0d4289;
86
+ --component-button-emphasised-secondary-shared-border: 0.0625rem solid #0d4289;
88
87
  --component-button-emphasised-secondary-shared-hover-background-color: #e8f0fb;
89
88
  --component-button-emphasised-secondary-shared-hover-border: 0.0625rem solid
90
89
  #0d4289;
91
90
  --component-button-emphasised-secondary-shared-active-background-color: #c5d9f4;
92
- --component-button-emphasised-secondary-shared-active-border: 0.0625rem
93
- solid #0d4289;
91
+ --component-button-emphasised-secondary-shared-active-border: 0.0625rem solid
92
+ #0d4289;
94
93
  --component-button-emphasised-secondary-shared-disabled-color: #999999;
95
94
  --component-button-emphasised-secondary-shared-disabled-background-color: none;
96
95
  --component-button-emphasised-secondary-shared-disabled-border: 0.0625rem
@@ -140,8 +139,8 @@
140
139
  --component-button-emphasised-secondary-lg-padding-bottom: 0.25rem;
141
140
  --component-button-emphasised-secondary-lg-padding-left: 1rem;
142
141
  --component-button-emphasised-secondary-lg-padding-with-icon-icon-left-left: 0.75rem;
143
- --component-button-emphasised-secondary-lg-typography-font: normal 700
144
- 1rem/1 'Open Sans';
142
+ --component-button-emphasised-secondary-lg-typography-font: normal 700 1rem/1
143
+ 'Open Sans';
145
144
  --component-button-emphasised-secondary-lg-typography-letter-spacing: -0.0125rem;
146
145
  --component-button-emphasised-secondary-lg-typography-font-width: 95;
147
146
  --component-button-emphasised-secondary-lg-icon-size: 1.5rem;
@@ -233,8 +232,8 @@
233
232
  --component-button-neutral-secondary-xs-padding-bottom: 0.25rem;
234
233
  --component-button-neutral-secondary-xs-padding-left: 0.5rem;
235
234
  --component-button-neutral-secondary-xs-padding-with-icon-icon-left-left: 0.25rem;
236
- --component-button-neutral-secondary-xs-typography-font: normal 700
237
- 0.75rem/1 'Open Sans';
235
+ --component-button-neutral-secondary-xs-typography-font: normal 700 0.75rem/1
236
+ 'Open Sans';
238
237
  --component-button-neutral-secondary-xs-typography-letter-spacing: 0rem;
239
238
  --component-button-neutral-secondary-xs-typography-font-width: 95;
240
239
  --component-button-neutral-secondary-xs-icon-size: 1.125rem;
@@ -246,8 +245,8 @@
246
245
  --component-button-neutral-secondary-sm-padding-bottom: 0.25rem;
247
246
  --component-button-neutral-secondary-sm-padding-left: 0.625rem;
248
247
  --component-button-neutral-secondary-sm-padding-with-icon-icon-left-left: 0.5rem;
249
- --component-button-neutral-secondary-sm-typography-font: normal 700
250
- 0.875rem/1 'Open Sans';
248
+ --component-button-neutral-secondary-sm-typography-font: normal 700 0.875rem/1
249
+ 'Open Sans';
251
250
  --component-button-neutral-secondary-sm-typography-letter-spacing: -0.0125rem;
252
251
  --component-button-neutral-secondary-sm-typography-font-width: 95;
253
252
  --component-button-neutral-secondary-sm-icon-size: 1.125rem;
@@ -259,8 +258,8 @@
259
258
  --component-button-neutral-secondary-md-padding-bottom: 0.25rem;
260
259
  --component-button-neutral-secondary-md-padding-left: 0.75rem;
261
260
  --component-button-neutral-secondary-md-padding-with-icon-icon-left-left: 0.5rem;
262
- --component-button-neutral-secondary-md-typography-font: normal 700
263
- 0.875rem/1 'Open Sans';
261
+ --component-button-neutral-secondary-md-typography-font: normal 700 0.875rem/1
262
+ 'Open Sans';
264
263
  --component-button-neutral-secondary-md-typography-letter-spacing: -0.0125rem;
265
264
  --component-button-neutral-secondary-md-typography-font-width: 95;
266
265
  --component-button-neutral-secondary-md-icon-size: 1.25rem;
package/dist/styleD/build/css/semantic/typography.css CHANGED
@@ -73,19 +73,16 @@
73
73
  --semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
74
74
  --semantic-typography-body-xl-letter-spacing: 0rem;
75
75
  --semantic-typography-body-xl-font-width: 95;
76
- --semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3
77
- 'Open Sans';
76
+ --semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
78
77
  --semantic-typography-body-italic-sm-letter-spacing: 0rem;
79
78
  --semantic-typography-body-italic-sm-font-width: 95;
80
79
  --semantic-typography-body-italic-md-font: italic 460 1rem/1.3 'Open Sans';
81
80
  --semantic-typography-body-italic-md-letter-spacing: 0rem;
82
81
  --semantic-typography-body-italic-md-font-width: 95;
83
- --semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3
84
- 'Open Sans';
82
+ --semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3 'Open Sans';
85
83
  --semantic-typography-body-italic-lg-letter-spacing: 0rem;
86
84
  --semantic-typography-body-italic-lg-font-width: 95;
87
- --semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3
88
- 'Open Sans';
85
+ --semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
89
86
  --semantic-typography-body-italic-xl-letter-spacing: 0rem;
90
87
  --semantic-typography-body-italic-xl-font-width: 95;
91
88
  --semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
@@ -99,8 +96,7 @@
99
96
  'Open Sans';
100
97
  --semantic-typography-body-compact-lg-letter-spacing: 0rem;
101
98
  --semantic-typography-body-compact-lg-font-width: 88;
102
- --semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3
103
- 'Open Sans';
99
+ --semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
104
100
  --semantic-typography-body-compact-xl-letter-spacing: 0rem;
105
101
  --semantic-typography-body-compact-xl-font-width: 88;
106
102
  --semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
@@ -122,8 +118,7 @@
122
118
  --semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
123
119
  --semantic-typography-meta-md-letter-spacing: 0rem;
124
120
  --semantic-typography-meta-md-font-width: 95;
125
- --semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3
126
- 'Open Sans';
121
+ --semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3 'Open Sans';
127
122
  --semantic-typography-meta-compact-md-letter-spacing: 0rem;
128
123
  --semantic-typography-meta-compact-md-font-width: 88;
129
124
  --semantic-typography-article-body-md-font: normal 400 1rem/1.4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
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": {
@@ -128,8 +128,7 @@
128
128
  "dist"
129
129
  ],
130
130
  "repository": {
131
- "url": "https://github.com/guardian/flexible-content",
132
- "directory": "stand-component-library"
131
+ "url": "https://github.com/guardian/stand"
133
132
  },
134
133
  "main": "./dist/index.cjs",
135
134
  "module": "./dist/index.js",
@@ -251,6 +250,7 @@
251
250
  "format:fix": "prettier --write .",
252
251
  "tsc": "tsc",
253
252
  "test": "jest",
253
+ "test:setup-e2e": "playwright install --with-deps",
254
254
  "test:e2e": "playwright test -c playwright-ct.config.ts",
255
255
  "test:react-matrix": "./scripts/test-react-matrix.sh"
256
256
  }