@guardian/stand 0.0.21 → 0.0.22

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 (17) hide show
  1. package/dist/components/topbar/topBarToolName/TopBarToolName.cjs +21 -2
  2. package/dist/components/topbar/topBarToolName/TopBarToolName.js +11 -3
  3. package/dist/components/topbar/topBarToolName/styles.cjs +39 -0
  4. package/dist/components/topbar/topBarToolName/styles.js +38 -1
  5. package/dist/styleD/build/css/component/TopBar.css +22 -0
  6. package/dist/styleD/build/css/semantic/typography.css +88 -0
  7. package/dist/styleD/build/typescript/component/TopBar.cjs +32 -0
  8. package/dist/styleD/build/typescript/component/TopBar.js +32 -0
  9. package/dist/styleD/build/typescript/semantic/typography.cjs +120 -0
  10. package/dist/styleD/build/typescript/semantic/typography.js +120 -0
  11. package/dist/types/TopBar.d.ts +1 -0
  12. package/dist/types/components/topbar/topBarToolName/TopBarToolName.d.ts +1 -1
  13. package/dist/types/components/topbar/topBarToolName/styles.d.ts +2 -0
  14. package/dist/types/components/topbar/topBarToolName/types.d.ts +7 -1
  15. package/dist/types/styleD/build/typescript/component/TopBar.d.ts +32 -0
  16. package/dist/types/styleD/build/typescript/semantic/typography.d.ts +120 -0
  17. package/package.json +1 -1
package/dist/components/topbar/topBarToolName/TopBarToolName.cjs CHANGED
@@ -1,20 +1,21 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('@emotion/react/jsx-runtime');
4
+ var reactAriaComponents = require('react-aria-components');
4
5
  var mergeDeep = require('../../../util/mergeDeep.cjs');
5
6
  var Favicon = require('../../favicon/Favicon.cjs');
6
7
  var Icon = require('../../icon/Icon.cjs');
7
8
  var TopBarItem = require('../topBarItem/TopBarItem.cjs');
8
9
  var styles = require('./styles.cjs');
9
10
 
10
- const TopBarToolName = ({
11
+ function ToolName({
11
12
  name,
12
13
  favicon,
13
14
  subsection,
14
15
  subsectionIcon,
15
16
  theme = {},
16
17
  cssOverrides
17
- }) => {
18
+ }) {
18
19
  const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
19
20
  return /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "left", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
20
21
  /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
@@ -27,6 +28,24 @@ const TopBarToolName = ({
27
28
  ] })
28
29
  ] })
29
30
  ] }) });
31
+ }
32
+ const TopBarToolName = (props) => {
33
+ const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, props.theme ?? {});
34
+ if (("href" in props || "onPress" in props) && "hoverText" in props) {
35
+ return /* @__PURE__ */ jsxRuntime.jsxs(
36
+ reactAriaComponents.Link,
37
+ {
38
+ css: styles.toolNameLinkStyles(mergedTheme),
39
+ href: props.href,
40
+ onPress: props.onPress,
41
+ children: [
42
+ /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameHoverLinkStyles(mergedTheme)], children: props.hoverText }),
43
+ /* @__PURE__ */ jsxRuntime.jsx(ToolName, { ...props })
44
+ ]
45
+ }
46
+ );
47
+ }
48
+ return /* @__PURE__ */ jsxRuntime.jsx(ToolName, { ...props });
30
49
  };
31
50
 
32
51
  exports.TopBarToolName = TopBarToolName;
package/dist/components/topbar/topBarToolName/TopBarToolName.js CHANGED
@@ -1,13 +1,21 @@
1
- import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
1
+ import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
2
+ import { Link } from 'react-aria-components';
2
3
  import { mergeDeep } from '../../../util/mergeDeep.js';
3
4
  import { Favicon } from '../../favicon/Favicon.js';
4
5
  import { Icon } from '../../icon/Icon.js';
5
6
  import { TopBarItem } from '../topBarItem/TopBarItem.js';
6
- import { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
7
+ import { defaultToolNameTheme, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
7
8
 
8
- const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
9
+ function ToolName({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) {
9
10
  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
10
11
  return jsx(TopBarItem, { alignment: "left", size: "sm", children: 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 })] })] })] }) });
12
+ }
13
+ const TopBarToolName = (props) => {
14
+ const mergedTheme = mergeDeep(defaultToolNameTheme, props.theme ?? {});
15
+ if (("href" in props || "onPress" in props) && "hoverText" in props) {
16
+ return jsxs(Link, { css: toolNameLinkStyles(mergedTheme), href: props.href, onPress: props.onPress, children: [jsx("div", { css: [toolNameHoverLinkStyles(mergedTheme)], children: props.hoverText }), jsx(ToolName, { ...props })] });
17
+ }
18
+ return jsx(ToolName, { ...props });
11
19
  };
12
20
 
13
21
  export { TopBarToolName };
package/dist/components/topbar/topBarToolName/styles.cjs CHANGED
@@ -5,6 +5,43 @@ var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
5
5
  var typography = require('../../../styleD/utils/semantic/typography.cjs');
6
6
 
7
7
  const defaultToolNameTheme = TopBar.componentTopBar.ToolName;
8
+ const toolNameHoverLinkStyles = (theme) => {
9
+ return react.css`
10
+ ${typography.convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
11
+ background-color: ${theme.hoverLink.backgroundColor};
12
+ color: ${theme.hoverLink.color};
13
+ align-items: ${theme["align-items"]};
14
+ padding-left: ${theme.hoverLink.paddingLeft};
15
+ padding-right: ${theme.hoverLink.paddingRight};
16
+ display: ${theme.display};
17
+ opacity: ${theme.hoverLink.opacity};
18
+
19
+ position: ${theme.hoverLink.position};
20
+ width: ${theme.hoverLink.width};
21
+ height: ${theme.hoverLink.height};
22
+ `;
23
+ };
24
+ const toolNameLinkStyles = (theme) => {
25
+ return react.css`
26
+ text-decoration: ${theme.link.textDecoration};
27
+ color: ${theme.link.color};
28
+ position: ${theme.link.position};
29
+
30
+ /* Show the first element - the hover text */
31
+ &[data-hovered] :first-of-type {
32
+ opacity: ${theme.hoverLink.hover.opacity};
33
+ }
34
+
35
+ &[data-pressed] :first-of-type {
36
+ background-color: ${theme.hoverLink.pressed.backgroundColor};
37
+ }
38
+
39
+ &[data-focus-visible] {
40
+ outline: ${theme.hoverLink.focused.outline};
41
+ outline-offset: ${theme.hoverLink.focused["outline-offset"]};
42
+ }
43
+ `;
44
+ };
8
45
  const toolNameStyles = (theme) => {
9
46
  return react.css`
10
47
  display: ${theme.display};
@@ -40,5 +77,7 @@ exports.defaultToolNameTheme = defaultToolNameTheme;
40
77
  exports.dividerStyles = dividerStyles;
41
78
  exports.subsectionStyles = subsectionStyles;
42
79
  exports.subsectionTypography = subsectionTypography;
80
+ exports.toolNameHoverLinkStyles = toolNameHoverLinkStyles;
81
+ exports.toolNameLinkStyles = toolNameLinkStyles;
43
82
  exports.toolNameStyles = toolNameStyles;
44
83
  exports.toolNameTypography = toolNameTypography;
package/dist/components/topbar/topBarToolName/styles.js CHANGED
@@ -3,6 +3,43 @@ import { componentTopBar } from '../../../styleD/build/typescript/component/TopB
3
3
  import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
4
4
 
5
5
  const defaultToolNameTheme = componentTopBar.ToolName;
6
+ const toolNameHoverLinkStyles = (theme) => {
7
+ return css`
8
+ ${convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
9
+ background-color: ${theme.hoverLink.backgroundColor};
10
+ color: ${theme.hoverLink.color};
11
+ align-items: ${theme["align-items"]};
12
+ padding-left: ${theme.hoverLink.paddingLeft};
13
+ padding-right: ${theme.hoverLink.paddingRight};
14
+ display: ${theme.display};
15
+ opacity: ${theme.hoverLink.opacity};
16
+
17
+ position: ${theme.hoverLink.position};
18
+ width: ${theme.hoverLink.width};
19
+ height: ${theme.hoverLink.height};
20
+ `;
21
+ };
22
+ const toolNameLinkStyles = (theme) => {
23
+ return css`
24
+ text-decoration: ${theme.link.textDecoration};
25
+ color: ${theme.link.color};
26
+ position: ${theme.link.position};
27
+
28
+ /* Show the first element - the hover text */
29
+ &[data-hovered] :first-of-type {
30
+ opacity: ${theme.hoverLink.hover.opacity};
31
+ }
32
+
33
+ &[data-pressed] :first-of-type {
34
+ background-color: ${theme.hoverLink.pressed.backgroundColor};
35
+ }
36
+
37
+ &[data-focus-visible] {
38
+ outline: ${theme.hoverLink.focused.outline};
39
+ outline-offset: ${theme.hoverLink.focused["outline-offset"]};
40
+ }
41
+ `;
42
+ };
6
43
  const toolNameStyles = (theme) => {
7
44
  return css`
8
45
  display: ${theme.display};
@@ -34,4 +71,4 @@ const subsectionTypography = (theme) => {
34
71
  `;
35
72
  };
36
73
 
37
- export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameStyles, toolNameTypography };
74
+ export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameStyles, toolNameTypography };
package/dist/styleD/build/css/component/TopBar.css CHANGED
@@ -71,4 +71,26 @@
71
71
  'Open Sans';
72
72
  --component-top-bar-tool-name-subsection-typography-letter-spacing: -0.0125rem;
73
73
  --component-top-bar-tool-name-subsection-typography-font-width: 88;
74
+ --component-top-bar-tool-name-link-text-decoration: none;
75
+ --component-top-bar-tool-name-link-color: unset;
76
+ --component-top-bar-tool-name-link-position: relative;
77
+ --component-top-bar-tool-name-link-width: 100%;
78
+ --component-top-bar-tool-name-link-height: 100%;
79
+ --component-top-bar-tool-name-hover-link-color: #ffffff;
80
+ --component-top-bar-tool-name-hover-link-padding-left: 1.25rem;
81
+ --component-top-bar-tool-name-hover-link-padding-right: 1.25rem;
82
+ --component-top-bar-tool-name-hover-link-background-color: #092f62;
83
+ --component-top-bar-tool-name-hover-link-opacity: 0;
84
+ --component-top-bar-tool-name-hover-link-typography-font: normal 700
85
+ 0.875rem/1.3 'Open Sans';
86
+ --component-top-bar-tool-name-hover-link-typography-letter-spacing: 0;
87
+ --component-top-bar-tool-name-hover-link-typography-font-width: 95;
88
+ --component-top-bar-tool-name-hover-link-position: absolute;
89
+ --component-top-bar-tool-name-hover-link-width: 100%;
90
+ --component-top-bar-tool-name-hover-link-height: 100%;
91
+ --component-top-bar-tool-name-hover-link-hover-opacity: 1;
92
+ --component-top-bar-tool-name-hover-link-pressed-background-color: #061d3c;
93
+ --component-top-bar-tool-name-hover-link-focused-outline: 0.125rem solid
94
+ #0072a9;
95
+ --component-top-bar-tool-name-hover-link-focused-outline-offset: -0.125rem;
74
96
  }
package/dist/styleD/build/css/semantic/typography.css CHANGED
@@ -61,6 +61,9 @@
61
61
  'Open Sans';
62
62
  --semantic-typography-heading-compact-2xl-letter-spacing: -0.03125rem;
63
63
  --semantic-typography-heading-compact-2xl-font-width: 88;
64
+ --semantic-typography-body-xs-font: normal 460 0.75rem/1.3 'Open Sans';
65
+ --semantic-typography-body-xs-letter-spacing: 0;
66
+ --semantic-typography-body-xs-font-width: 95;
64
67
  --semantic-typography-body-sm-font: normal 460 0.875rem/1.3 'Open Sans';
65
68
  --semantic-typography-body-sm-letter-spacing: 0;
66
69
  --semantic-typography-body-sm-font-width: 95;
@@ -73,6 +76,24 @@
73
76
  --semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
74
77
  --semantic-typography-body-xl-letter-spacing: 0;
75
78
  --semantic-typography-body-xl-font-width: 95;
79
+ --semantic-typography-body-bold-xs-font: normal 700 0.75rem/1.3 'Open Sans';
80
+ --semantic-typography-body-bold-xs-letter-spacing: 0;
81
+ --semantic-typography-body-bold-xs-font-width: 95;
82
+ --semantic-typography-body-bold-sm-font: normal 700 0.875rem/1.3 'Open Sans';
83
+ --semantic-typography-body-bold-sm-letter-spacing: 0;
84
+ --semantic-typography-body-bold-sm-font-width: 95;
85
+ --semantic-typography-body-bold-md-font: normal 700 1rem/1.3 'Open Sans';
86
+ --semantic-typography-body-bold-md-letter-spacing: 0;
87
+ --semantic-typography-body-bold-md-font-width: 95;
88
+ --semantic-typography-body-bold-lg-font: normal 700 1.125rem/1.3 'Open Sans';
89
+ --semantic-typography-body-bold-lg-letter-spacing: 0;
90
+ --semantic-typography-body-bold-lg-font-width: 95;
91
+ --semantic-typography-body-bold-xl-font: normal 700 1.25rem/1.3 'Open Sans';
92
+ --semantic-typography-body-bold-xl-letter-spacing: 0;
93
+ --semantic-typography-body-bold-xl-font-width: 95;
94
+ --semantic-typography-body-italic-xs-font: italic 460 0.75rem/1.3 'Open Sans';
95
+ --semantic-typography-body-italic-xs-letter-spacing: 0;
96
+ --semantic-typography-body-italic-xs-font-width: 95;
76
97
  --semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
77
98
  --semantic-typography-body-italic-sm-letter-spacing: 0;
78
99
  --semantic-typography-body-italic-sm-font-width: 95;
@@ -85,6 +106,29 @@
85
106
  --semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
86
107
  --semantic-typography-body-italic-xl-letter-spacing: 0;
87
108
  --semantic-typography-body-italic-xl-font-width: 95;
109
+ --semantic-typography-body-italic-bold-xs-font: italic 700 0.75rem/1.3
110
+ 'Open Sans';
111
+ --semantic-typography-body-italic-bold-xs-letter-spacing: 0;
112
+ --semantic-typography-body-italic-bold-xs-font-width: 95;
113
+ --semantic-typography-body-italic-bold-sm-font: italic 700 0.875rem/1.3
114
+ 'Open Sans';
115
+ --semantic-typography-body-italic-bold-sm-letter-spacing: 0;
116
+ --semantic-typography-body-italic-bold-sm-font-width: 95;
117
+ --semantic-typography-body-italic-bold-md-font: italic 700 1rem/1.3
118
+ 'Open Sans';
119
+ --semantic-typography-body-italic-bold-md-letter-spacing: 0;
120
+ --semantic-typography-body-italic-bold-md-font-width: 95;
121
+ --semantic-typography-body-italic-bold-lg-font: italic 700 1.125rem/1.3
122
+ 'Open Sans';
123
+ --semantic-typography-body-italic-bold-lg-letter-spacing: 0;
124
+ --semantic-typography-body-italic-bold-lg-font-width: 95;
125
+ --semantic-typography-body-italic-bold-xl-font: italic 700 1.25rem/1.3
126
+ 'Open Sans';
127
+ --semantic-typography-body-italic-bold-xl-letter-spacing: 0;
128
+ --semantic-typography-body-italic-bold-xl-font-width: 95;
129
+ --semantic-typography-body-compact-xs-font: normal 460 0.75rem/1.3 'Open Sans';
130
+ --semantic-typography-body-compact-xs-letter-spacing: 0;
131
+ --semantic-typography-body-compact-xs-font-width: 88;
88
132
  --semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
89
133
  'Open Sans';
90
134
  --semantic-typography-body-compact-sm-letter-spacing: 0;
@@ -99,6 +143,30 @@
99
143
  --semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
100
144
  --semantic-typography-body-compact-xl-letter-spacing: 0;
101
145
  --semantic-typography-body-compact-xl-font-width: 88;
146
+ --semantic-typography-body-compact-bold-xs-font: normal 700 0.75rem/1.3
147
+ 'Open Sans';
148
+ --semantic-typography-body-compact-bold-xs-letter-spacing: 0;
149
+ --semantic-typography-body-compact-bold-xs-font-width: 88;
150
+ --semantic-typography-body-compact-bold-sm-font: normal 700 0.875rem/1.3
151
+ 'Open Sans';
152
+ --semantic-typography-body-compact-bold-sm-letter-spacing: 0;
153
+ --semantic-typography-body-compact-bold-sm-font-width: 88;
154
+ --semantic-typography-body-compact-bold-md-font: normal 700 1rem/1.3
155
+ 'Open Sans';
156
+ --semantic-typography-body-compact-bold-md-letter-spacing: 0;
157
+ --semantic-typography-body-compact-bold-md-font-width: 88;
158
+ --semantic-typography-body-compact-bold-lg-font: normal 700 1.125rem/1.3
159
+ 'Open Sans';
160
+ --semantic-typography-body-compact-bold-lg-letter-spacing: 0;
161
+ --semantic-typography-body-compact-bold-lg-font-width: 88;
162
+ --semantic-typography-body-compact-bold-xl-font: normal 700 1.25rem/1.3
163
+ 'Open Sans';
164
+ --semantic-typography-body-compact-bold-xl-letter-spacing: 0;
165
+ --semantic-typography-body-compact-bold-xl-font-width: 88;
166
+ --semantic-typography-body-compact-italic-xs-font: italic 460 0.75rem/1.3
167
+ 'Open Sans';
168
+ --semantic-typography-body-compact-italic-xs-letter-spacing: 0;
169
+ --semantic-typography-body-compact-italic-xs-font-width: 88;
102
170
  --semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
103
171
  'Open Sans';
104
172
  --semantic-typography-body-compact-italic-sm-letter-spacing: 0;
@@ -115,6 +183,26 @@
115
183
  'Open Sans';
116
184
  --semantic-typography-body-compact-italic-xl-letter-spacing: 0;
117
185
  --semantic-typography-body-compact-italic-xl-font-width: 88;
186
+ --semantic-typography-body-compact-italic-bold-xs-font: italic 700 0.75rem/1.3
187
+ 'Open Sans';
188
+ --semantic-typography-body-compact-italic-bold-xs-letter-spacing: 0;
189
+ --semantic-typography-body-compact-italic-bold-xs-font-width: 88;
190
+ --semantic-typography-body-compact-italic-bold-sm-font: italic 700
191
+ 0.875rem/1.3 'Open Sans';
192
+ --semantic-typography-body-compact-italic-bold-sm-letter-spacing: 0;
193
+ --semantic-typography-body-compact-italic-bold-sm-font-width: 88;
194
+ --semantic-typography-body-compact-italic-bold-md-font: italic 700 1rem/1.3
195
+ 'Open Sans';
196
+ --semantic-typography-body-compact-italic-bold-md-letter-spacing: 0;
197
+ --semantic-typography-body-compact-italic-bold-md-font-width: 88;
198
+ --semantic-typography-body-compact-italic-bold-lg-font: italic 700
199
+ 1.125rem/1.3 'Open Sans';
200
+ --semantic-typography-body-compact-italic-bold-lg-letter-spacing: 0;
201
+ --semantic-typography-body-compact-italic-bold-lg-font-width: 88;
202
+ --semantic-typography-body-compact-italic-bold-xl-font: italic 700 1.25rem/1.3
203
+ 'Open Sans';
204
+ --semantic-typography-body-compact-italic-bold-xl-letter-spacing: 0;
205
+ --semantic-typography-body-compact-italic-bold-xl-font-width: 88;
118
206
  --semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
119
207
  --semantic-typography-meta-md-letter-spacing: 0;
120
208
  --semantic-typography-meta-md-font-width: 95;
package/dist/styleD/build/typescript/component/TopBar.cjs CHANGED
@@ -115,6 +115,38 @@ const componentTopBar = {
115
115
  letterSpacing: "-0.0125rem",
116
116
  fontWidth: 88
117
117
  }
118
+ },
119
+ link: {
120
+ textDecoration: "none",
121
+ color: "unset",
122
+ position: "relative",
123
+ width: "100%",
124
+ height: "100%"
125
+ },
126
+ hoverLink: {
127
+ color: "#ffffff",
128
+ paddingLeft: "1.25rem",
129
+ paddingRight: "1.25rem",
130
+ backgroundColor: "#092f62",
131
+ opacity: "0",
132
+ typography: {
133
+ font: "normal 700 0.875rem/1.3 Open Sans",
134
+ letterSpacing: "0rem",
135
+ fontWidth: 95
136
+ },
137
+ position: "absolute",
138
+ width: "100%",
139
+ height: "100%",
140
+ hover: {
141
+ opacity: "1"
142
+ },
143
+ pressed: {
144
+ backgroundColor: "#061d3c"
145
+ },
146
+ focused: {
147
+ outline: "0.125rem solid #0072a9",
148
+ "outline-offset": "-0.125rem"
149
+ }
118
150
  }
119
151
  }
120
152
  };
package/dist/styleD/build/typescript/component/TopBar.js CHANGED
@@ -113,6 +113,38 @@ const componentTopBar = {
113
113
  letterSpacing: "-0.0125rem",
114
114
  fontWidth: 88
115
115
  }
116
+ },
117
+ link: {
118
+ textDecoration: "none",
119
+ color: "unset",
120
+ position: "relative",
121
+ width: "100%",
122
+ height: "100%"
123
+ },
124
+ hoverLink: {
125
+ color: "#ffffff",
126
+ paddingLeft: "1.25rem",
127
+ paddingRight: "1.25rem",
128
+ backgroundColor: "#092f62",
129
+ opacity: "0",
130
+ typography: {
131
+ font: "normal 700 0.875rem/1.3 Open Sans",
132
+ letterSpacing: "0rem",
133
+ fontWidth: 95
134
+ },
135
+ position: "absolute",
136
+ width: "100%",
137
+ height: "100%",
138
+ hover: {
139
+ opacity: "1"
140
+ },
141
+ pressed: {
142
+ backgroundColor: "#061d3c"
143
+ },
144
+ focused: {
145
+ outline: "0.125rem solid #0072a9",
146
+ "outline-offset": "-0.125rem"
147
+ }
116
148
  }
117
149
  }
118
150
  };
package/dist/styleD/build/typescript/semantic/typography.cjs CHANGED
@@ -81,6 +81,11 @@ const semanticTypography = {
81
81
  letterSpacing: "-0.03125rem",
82
82
  fontWidth: 88
83
83
  },
84
+ "body-xs": {
85
+ font: "normal 460 0.75rem/1.3 Open Sans",
86
+ letterSpacing: "0rem",
87
+ fontWidth: 95
88
+ },
84
89
  "body-sm": {
85
90
  font: "normal 460 0.875rem/1.3 Open Sans",
86
91
  letterSpacing: "0rem",
@@ -101,6 +106,36 @@ const semanticTypography = {
101
106
  letterSpacing: "0rem",
102
107
  fontWidth: 95
103
108
  },
109
+ "body-bold-xs": {
110
+ font: "normal 700 0.75rem/1.3 Open Sans",
111
+ letterSpacing: "0rem",
112
+ fontWidth: 95
113
+ },
114
+ "body-bold-sm": {
115
+ font: "normal 700 0.875rem/1.3 Open Sans",
116
+ letterSpacing: "0rem",
117
+ fontWidth: 95
118
+ },
119
+ "body-bold-md": {
120
+ font: "normal 700 1rem/1.3 Open Sans",
121
+ letterSpacing: "0rem",
122
+ fontWidth: 95
123
+ },
124
+ "body-bold-lg": {
125
+ font: "normal 700 1.125rem/1.3 Open Sans",
126
+ letterSpacing: "0rem",
127
+ fontWidth: 95
128
+ },
129
+ "body-bold-xl": {
130
+ font: "normal 700 1.25rem/1.3 Open Sans",
131
+ letterSpacing: "0rem",
132
+ fontWidth: 95
133
+ },
134
+ "body-italic-xs": {
135
+ font: "italic 460 0.75rem/1.3 Open Sans",
136
+ letterSpacing: "0rem",
137
+ fontWidth: 95
138
+ },
104
139
  "body-italic-sm": {
105
140
  font: "italic 460 0.875rem/1.3 Open Sans",
106
141
  letterSpacing: "0rem",
@@ -121,6 +156,36 @@ const semanticTypography = {
121
156
  letterSpacing: "0rem",
122
157
  fontWidth: 95
123
158
  },
159
+ "body-italic-bold-xs": {
160
+ font: "italic 700 0.75rem/1.3 Open Sans",
161
+ letterSpacing: "0rem",
162
+ fontWidth: 95
163
+ },
164
+ "body-italic-bold-sm": {
165
+ font: "italic 700 0.875rem/1.3 Open Sans",
166
+ letterSpacing: "0rem",
167
+ fontWidth: 95
168
+ },
169
+ "body-italic-bold-md": {
170
+ font: "italic 700 1rem/1.3 Open Sans",
171
+ letterSpacing: "0rem",
172
+ fontWidth: 95
173
+ },
174
+ "body-italic-bold-lg": {
175
+ font: "italic 700 1.125rem/1.3 Open Sans",
176
+ letterSpacing: "0rem",
177
+ fontWidth: 95
178
+ },
179
+ "body-italic-bold-xl": {
180
+ font: "italic 700 1.25rem/1.3 Open Sans",
181
+ letterSpacing: "0rem",
182
+ fontWidth: 95
183
+ },
184
+ "body-compact-xs": {
185
+ font: "normal 460 0.75rem/1.3 Open Sans",
186
+ letterSpacing: "0rem",
187
+ fontWidth: 88
188
+ },
124
189
  "body-compact-sm": {
125
190
  font: "normal 460 0.875rem/1.3 Open Sans",
126
191
  letterSpacing: "0rem",
@@ -141,6 +206,36 @@ const semanticTypography = {
141
206
  letterSpacing: "0rem",
142
207
  fontWidth: 88
143
208
  },
209
+ "body-compact-bold-xs": {
210
+ font: "normal 700 0.75rem/1.3 Open Sans",
211
+ letterSpacing: "0rem",
212
+ fontWidth: 88
213
+ },
214
+ "body-compact-bold-sm": {
215
+ font: "normal 700 0.875rem/1.3 Open Sans",
216
+ letterSpacing: "0rem",
217
+ fontWidth: 88
218
+ },
219
+ "body-compact-bold-md": {
220
+ font: "normal 700 1rem/1.3 Open Sans",
221
+ letterSpacing: "0rem",
222
+ fontWidth: 88
223
+ },
224
+ "body-compact-bold-lg": {
225
+ font: "normal 700 1.125rem/1.3 Open Sans",
226
+ letterSpacing: "0rem",
227
+ fontWidth: 88
228
+ },
229
+ "body-compact-bold-xl": {
230
+ font: "normal 700 1.25rem/1.3 Open Sans",
231
+ letterSpacing: "0rem",
232
+ fontWidth: 88
233
+ },
234
+ "body-compact-italic-xs": {
235
+ font: "italic 460 0.75rem/1.3 Open Sans",
236
+ letterSpacing: "0rem",
237
+ fontWidth: 88
238
+ },
144
239
  "body-compact-italic-sm": {
145
240
  font: "italic 460 0.875rem/1.3 Open Sans",
146
241
  letterSpacing: "0rem",
@@ -161,6 +256,31 @@ const semanticTypography = {
161
256
  letterSpacing: "0rem",
162
257
  fontWidth: 88
163
258
  },
259
+ "body-compact-italic-bold-xs": {
260
+ font: "italic 700 0.75rem/1.3 Open Sans",
261
+ letterSpacing: "0rem",
262
+ fontWidth: 88
263
+ },
264
+ "body-compact-italic-bold-sm": {
265
+ font: "italic 700 0.875rem/1.3 Open Sans",
266
+ letterSpacing: "0rem",
267
+ fontWidth: 88
268
+ },
269
+ "body-compact-italic-bold-md": {
270
+ font: "italic 700 1rem/1.3 Open Sans",
271
+ letterSpacing: "0rem",
272
+ fontWidth: 88
273
+ },
274
+ "body-compact-italic-bold-lg": {
275
+ font: "italic 700 1.125rem/1.3 Open Sans",
276
+ letterSpacing: "0rem",
277
+ fontWidth: 88
278
+ },
279
+ "body-compact-italic-bold-xl": {
280
+ font: "italic 700 1.25rem/1.3 Open Sans",
281
+ letterSpacing: "0rem",
282
+ fontWidth: 88
283
+ },
164
284
  "meta-md": {
165
285
  font: "normal 460 0.75rem/1.3 Open Sans",
166
286
  letterSpacing: "0rem",
package/dist/styleD/build/typescript/semantic/typography.js CHANGED
@@ -79,6 +79,11 @@ const semanticTypography = {
79
79
  letterSpacing: "-0.03125rem",
80
80
  fontWidth: 88
81
81
  },
82
+ "body-xs": {
83
+ font: "normal 460 0.75rem/1.3 Open Sans",
84
+ letterSpacing: "0rem",
85
+ fontWidth: 95
86
+ },
82
87
  "body-sm": {
83
88
  font: "normal 460 0.875rem/1.3 Open Sans",
84
89
  letterSpacing: "0rem",
@@ -99,6 +104,36 @@ const semanticTypography = {
99
104
  letterSpacing: "0rem",
100
105
  fontWidth: 95
101
106
  },
107
+ "body-bold-xs": {
108
+ font: "normal 700 0.75rem/1.3 Open Sans",
109
+ letterSpacing: "0rem",
110
+ fontWidth: 95
111
+ },
112
+ "body-bold-sm": {
113
+ font: "normal 700 0.875rem/1.3 Open Sans",
114
+ letterSpacing: "0rem",
115
+ fontWidth: 95
116
+ },
117
+ "body-bold-md": {
118
+ font: "normal 700 1rem/1.3 Open Sans",
119
+ letterSpacing: "0rem",
120
+ fontWidth: 95
121
+ },
122
+ "body-bold-lg": {
123
+ font: "normal 700 1.125rem/1.3 Open Sans",
124
+ letterSpacing: "0rem",
125
+ fontWidth: 95
126
+ },
127
+ "body-bold-xl": {
128
+ font: "normal 700 1.25rem/1.3 Open Sans",
129
+ letterSpacing: "0rem",
130
+ fontWidth: 95
131
+ },
132
+ "body-italic-xs": {
133
+ font: "italic 460 0.75rem/1.3 Open Sans",
134
+ letterSpacing: "0rem",
135
+ fontWidth: 95
136
+ },
102
137
  "body-italic-sm": {
103
138
  font: "italic 460 0.875rem/1.3 Open Sans",
104
139
  letterSpacing: "0rem",
@@ -119,6 +154,36 @@ const semanticTypography = {
119
154
  letterSpacing: "0rem",
120
155
  fontWidth: 95
121
156
  },
157
+ "body-italic-bold-xs": {
158
+ font: "italic 700 0.75rem/1.3 Open Sans",
159
+ letterSpacing: "0rem",
160
+ fontWidth: 95
161
+ },
162
+ "body-italic-bold-sm": {
163
+ font: "italic 700 0.875rem/1.3 Open Sans",
164
+ letterSpacing: "0rem",
165
+ fontWidth: 95
166
+ },
167
+ "body-italic-bold-md": {
168
+ font: "italic 700 1rem/1.3 Open Sans",
169
+ letterSpacing: "0rem",
170
+ fontWidth: 95
171
+ },
172
+ "body-italic-bold-lg": {
173
+ font: "italic 700 1.125rem/1.3 Open Sans",
174
+ letterSpacing: "0rem",
175
+ fontWidth: 95
176
+ },
177
+ "body-italic-bold-xl": {
178
+ font: "italic 700 1.25rem/1.3 Open Sans",
179
+ letterSpacing: "0rem",
180
+ fontWidth: 95
181
+ },
182
+ "body-compact-xs": {
183
+ font: "normal 460 0.75rem/1.3 Open Sans",
184
+ letterSpacing: "0rem",
185
+ fontWidth: 88
186
+ },
122
187
  "body-compact-sm": {
123
188
  font: "normal 460 0.875rem/1.3 Open Sans",
124
189
  letterSpacing: "0rem",
@@ -139,6 +204,36 @@ const semanticTypography = {
139
204
  letterSpacing: "0rem",
140
205
  fontWidth: 88
141
206
  },
207
+ "body-compact-bold-xs": {
208
+ font: "normal 700 0.75rem/1.3 Open Sans",
209
+ letterSpacing: "0rem",
210
+ fontWidth: 88
211
+ },
212
+ "body-compact-bold-sm": {
213
+ font: "normal 700 0.875rem/1.3 Open Sans",
214
+ letterSpacing: "0rem",
215
+ fontWidth: 88
216
+ },
217
+ "body-compact-bold-md": {
218
+ font: "normal 700 1rem/1.3 Open Sans",
219
+ letterSpacing: "0rem",
220
+ fontWidth: 88
221
+ },
222
+ "body-compact-bold-lg": {
223
+ font: "normal 700 1.125rem/1.3 Open Sans",
224
+ letterSpacing: "0rem",
225
+ fontWidth: 88
226
+ },
227
+ "body-compact-bold-xl": {
228
+ font: "normal 700 1.25rem/1.3 Open Sans",
229
+ letterSpacing: "0rem",
230
+ fontWidth: 88
231
+ },
232
+ "body-compact-italic-xs": {
233
+ font: "italic 460 0.75rem/1.3 Open Sans",
234
+ letterSpacing: "0rem",
235
+ fontWidth: 88
236
+ },
142
237
  "body-compact-italic-sm": {
143
238
  font: "italic 460 0.875rem/1.3 Open Sans",
144
239
  letterSpacing: "0rem",
@@ -159,6 +254,31 @@ const semanticTypography = {
159
254
  letterSpacing: "0rem",
160
255
  fontWidth: 88
161
256
  },
257
+ "body-compact-italic-bold-xs": {
258
+ font: "italic 700 0.75rem/1.3 Open Sans",
259
+ letterSpacing: "0rem",
260
+ fontWidth: 88
261
+ },
262
+ "body-compact-italic-bold-sm": {
263
+ font: "italic 700 0.875rem/1.3 Open Sans",
264
+ letterSpacing: "0rem",
265
+ fontWidth: 88
266
+ },
267
+ "body-compact-italic-bold-md": {
268
+ font: "italic 700 1rem/1.3 Open Sans",
269
+ letterSpacing: "0rem",
270
+ fontWidth: 88
271
+ },
272
+ "body-compact-italic-bold-lg": {
273
+ font: "italic 700 1.125rem/1.3 Open Sans",
274
+ letterSpacing: "0rem",
275
+ fontWidth: 88
276
+ },
277
+ "body-compact-italic-bold-xl": {
278
+ font: "italic 700 1.25rem/1.3 Open Sans",
279
+ letterSpacing: "0rem",
280
+ fontWidth: 88
281
+ },
162
282
  "meta-md": {
163
283
  font: "normal 460 0.75rem/1.3 Open Sans",
164
284
  letterSpacing: "0rem",
package/dist/types/TopBar.d.ts CHANGED
@@ -5,6 +5,7 @@
5
5
  * - `@emotion/react`
6
6
  * - `react`
7
7
  * - `react-dom`
8
+ * - `react-aria-components`
8
9
  * - `typescript`
9
10
  *
10
11
  * See the `peerDependencies` section of package.json for compatible versions.
package/dist/types/components/topbar/topBarToolName/TopBarToolName.d.ts CHANGED
@@ -1,2 +1,2 @@
1
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;
2
+ export declare const TopBarToolName: (props: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;
package/dist/types/components/topbar/topBarToolName/styles.d.ts CHANGED
@@ -4,6 +4,8 @@ import type { DeepPartial, Prettify } from '../../../util/types';
4
4
  export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
5
5
  export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
6
6
  export declare const defaultToolNameTheme: TopBarToolNameTheme;
7
+ export declare const toolNameHoverLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
8
+ export declare const toolNameLinkStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
7
9
  export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
8
10
  export declare const toolNameTypography: (theme: TopBarToolNameTheme) => SerializedStyles;
9
11
  export declare const dividerStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
package/dist/types/components/topbar/topBarToolName/types.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ import type { LinkProps as RACLinkProps } from 'react-aria-components';
1
2
  import type { DefaultProps } from '../../../util/types';
2
3
  import type { FaviconProps } from '../../favicon/types';
3
4
  import type { IconProps } from '../../icon/types';
4
5
  import type { TopBarToolNameTheme } from './styles';
5
- export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme> {
6
+ export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme, RACLinkProps['className']>, Omit<RACLinkProps, 'children'> {
6
7
  /**
7
8
  * Name of the tool to display
8
9
  */
@@ -19,4 +20,9 @@ export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme> {
19
20
  * Icon that represents the content type (optional)
20
21
  * */
21
22
  subsectionIcon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
23
+ /**
24
+ * Text to display on hover, labels the link
25
+ * e.g. 'Back to dashboard'
26
+ */
27
+ hoverText?: string;
22
28
  }
package/dist/types/styleD/build/typescript/component/TopBar.d.ts CHANGED
@@ -117,6 +117,38 @@ export declare const componentTopBar: {
117
117
  fontWidth: number;
118
118
  };
119
119
  };
120
+ link: {
121
+ textDecoration: string;
122
+ color: string;
123
+ position: string;
124
+ width: string;
125
+ height: string;
126
+ };
127
+ hoverLink: {
128
+ color: string;
129
+ paddingLeft: string;
130
+ paddingRight: string;
131
+ backgroundColor: string;
132
+ opacity: string;
133
+ typography: {
134
+ font: string;
135
+ letterSpacing: string;
136
+ fontWidth: number;
137
+ };
138
+ position: string;
139
+ width: string;
140
+ height: string;
141
+ hover: {
142
+ opacity: string;
143
+ };
144
+ pressed: {
145
+ backgroundColor: string;
146
+ };
147
+ focused: {
148
+ outline: string;
149
+ 'outline-offset': string;
150
+ };
151
+ };
120
152
  };
121
153
  };
122
154
  export type ComponentTopBar = typeof componentTopBar;
package/dist/types/styleD/build/typescript/semantic/typography.d.ts CHANGED
@@ -82,6 +82,11 @@ export declare const semanticTypography: {
82
82
  letterSpacing: string;
83
83
  fontWidth: number;
84
84
  };
85
+ 'body-xs': {
86
+ font: string;
87
+ letterSpacing: string;
88
+ fontWidth: number;
89
+ };
85
90
  'body-sm': {
86
91
  font: string;
87
92
  letterSpacing: string;
@@ -102,6 +107,36 @@ export declare const semanticTypography: {
102
107
  letterSpacing: string;
103
108
  fontWidth: number;
104
109
  };
110
+ 'body-bold-xs': {
111
+ font: string;
112
+ letterSpacing: string;
113
+ fontWidth: number;
114
+ };
115
+ 'body-bold-sm': {
116
+ font: string;
117
+ letterSpacing: string;
118
+ fontWidth: number;
119
+ };
120
+ 'body-bold-md': {
121
+ font: string;
122
+ letterSpacing: string;
123
+ fontWidth: number;
124
+ };
125
+ 'body-bold-lg': {
126
+ font: string;
127
+ letterSpacing: string;
128
+ fontWidth: number;
129
+ };
130
+ 'body-bold-xl': {
131
+ font: string;
132
+ letterSpacing: string;
133
+ fontWidth: number;
134
+ };
135
+ 'body-italic-xs': {
136
+ font: string;
137
+ letterSpacing: string;
138
+ fontWidth: number;
139
+ };
105
140
  'body-italic-sm': {
106
141
  font: string;
107
142
  letterSpacing: string;
@@ -122,6 +157,36 @@ export declare const semanticTypography: {
122
157
  letterSpacing: string;
123
158
  fontWidth: number;
124
159
  };
160
+ 'body-italic-bold-xs': {
161
+ font: string;
162
+ letterSpacing: string;
163
+ fontWidth: number;
164
+ };
165
+ 'body-italic-bold-sm': {
166
+ font: string;
167
+ letterSpacing: string;
168
+ fontWidth: number;
169
+ };
170
+ 'body-italic-bold-md': {
171
+ font: string;
172
+ letterSpacing: string;
173
+ fontWidth: number;
174
+ };
175
+ 'body-italic-bold-lg': {
176
+ font: string;
177
+ letterSpacing: string;
178
+ fontWidth: number;
179
+ };
180
+ 'body-italic-bold-xl': {
181
+ font: string;
182
+ letterSpacing: string;
183
+ fontWidth: number;
184
+ };
185
+ 'body-compact-xs': {
186
+ font: string;
187
+ letterSpacing: string;
188
+ fontWidth: number;
189
+ };
125
190
  'body-compact-sm': {
126
191
  font: string;
127
192
  letterSpacing: string;
@@ -142,6 +207,36 @@ export declare const semanticTypography: {
142
207
  letterSpacing: string;
143
208
  fontWidth: number;
144
209
  };
210
+ 'body-compact-bold-xs': {
211
+ font: string;
212
+ letterSpacing: string;
213
+ fontWidth: number;
214
+ };
215
+ 'body-compact-bold-sm': {
216
+ font: string;
217
+ letterSpacing: string;
218
+ fontWidth: number;
219
+ };
220
+ 'body-compact-bold-md': {
221
+ font: string;
222
+ letterSpacing: string;
223
+ fontWidth: number;
224
+ };
225
+ 'body-compact-bold-lg': {
226
+ font: string;
227
+ letterSpacing: string;
228
+ fontWidth: number;
229
+ };
230
+ 'body-compact-bold-xl': {
231
+ font: string;
232
+ letterSpacing: string;
233
+ fontWidth: number;
234
+ };
235
+ 'body-compact-italic-xs': {
236
+ font: string;
237
+ letterSpacing: string;
238
+ fontWidth: number;
239
+ };
145
240
  'body-compact-italic-sm': {
146
241
  font: string;
147
242
  letterSpacing: string;
@@ -162,6 +257,31 @@ export declare const semanticTypography: {
162
257
  letterSpacing: string;
163
258
  fontWidth: number;
164
259
  };
260
+ 'body-compact-italic-bold-xs': {
261
+ font: string;
262
+ letterSpacing: string;
263
+ fontWidth: number;
264
+ };
265
+ 'body-compact-italic-bold-sm': {
266
+ font: string;
267
+ letterSpacing: string;
268
+ fontWidth: number;
269
+ };
270
+ 'body-compact-italic-bold-md': {
271
+ font: string;
272
+ letterSpacing: string;
273
+ fontWidth: number;
274
+ };
275
+ 'body-compact-italic-bold-lg': {
276
+ font: string;
277
+ letterSpacing: string;
278
+ fontWidth: number;
279
+ };
280
+ 'body-compact-italic-bold-xl': {
281
+ font: string;
282
+ letterSpacing: string;
283
+ fontWidth: number;
284
+ };
165
285
  'meta-md': {
166
286
  font: string;
167
287
  letterSpacing: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@guardian/stand",
3
- "version": "0.0.21",
3
+ "version": "0.0.22",
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": {