@guardian/stand 0.0.30 → 0.0.31
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.
- package/dist/components/topbar/TopBar.cjs +8 -1
- package/dist/components/topbar/TopBar.js +1 -1
- package/dist/components/topbar/styles.cjs +4 -1
- package/dist/components/topbar/styles.js +4 -1
- package/dist/styleD/build/css/component/TopBar.css +5 -1
- package/dist/styleD/build/typescript/component/TopBar.cjs +5 -1
- package/dist/styleD/build/typescript/component/TopBar.js +5 -1
- package/dist/types/styleD/build/typescript/component/TopBar.d.ts +5 -1
- package/package.json +1 -1
|
@@ -172,7 +172,14 @@ function TopBar({
|
|
|
172
172
|
size: "sm",
|
|
173
173
|
theme: mergedTheme.Item,
|
|
174
174
|
"aria-label": "Navigation Menu",
|
|
175
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
175
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
176
|
+
Icon.Icon,
|
|
177
|
+
{
|
|
178
|
+
fill: mergedTheme.collapsedNavMenu.button.color,
|
|
179
|
+
size: "lg",
|
|
180
|
+
children: menuOpen ? "close" : "menu"
|
|
181
|
+
}
|
|
182
|
+
)
|
|
176
183
|
}
|
|
177
184
|
)
|
|
178
185
|
}
|
|
@@ -100,7 +100,7 @@ function TopBar({ children, collapseBelow = {
|
|
|
100
100
|
showUntil: collapseBelow.containerLeft
|
|
101
101
|
}), children: jsxs(DialogTrigger, { isOpen: menuOpen, onOpenChange: (isOpen) => {
|
|
102
102
|
setMenuOpen(isOpen);
|
|
103
|
-
}, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
|
|
103
|
+
}, children: [jsx(Button, { "aria-label": "Navigation Menu", ref: buttonRef, css: topBarCollapsedNavMenuButtonStyles(mergedTheme, menuOpen), children: jsx(TopBarItem, { alignment: "left", size: "sm", theme: mergedTheme.Item, "aria-label": "Navigation Menu", children: jsx(Icon, { fill: mergedTheme.collapsedNavMenu.button.color, size: "lg", children: menuOpen ? "close" : "menu" }) }) }), jsx(Popover, { css: topBarCollapsedNavMenuPopoverStyles(mergedTheme), offset: mergedTheme.collapsedNavMenu.popover.offset, containerPadding: mergedTheme.collapsedNavMenu.popover.containerPadding, shouldFlip: false, children: leftSideMenuItems })] }) }), jsx("div", { css: topBarContainerStyles(mergedTheme), children: toolName }), jsx("div", { css: topBarContainerStyles(mergedTheme, {
|
|
104
104
|
collapseBelow: collapseBelow.containerLeft
|
|
105
105
|
}), children: leftSide }), jsx("div", { css: [
|
|
106
106
|
topBarSpacerStyles(mergedTheme),
|
|
@@ -9,7 +9,10 @@ const topBarStyles = (theme) => {
|
|
|
9
9
|
return react.css`
|
|
10
10
|
background-color: ${theme["background-color"]};
|
|
11
11
|
height: ${theme.height};
|
|
12
|
-
border: ${theme
|
|
12
|
+
border-top: ${theme["border-top"]};
|
|
13
|
+
border-right: ${theme["border-right"]};
|
|
14
|
+
border-bottom: ${theme["border-bottom"]};
|
|
15
|
+
border-left: ${theme["border-left"]};
|
|
13
16
|
display: ${theme.display};
|
|
14
17
|
justify-content: ${theme["justify-content"]};
|
|
15
18
|
`;
|
|
@@ -7,7 +7,10 @@ const topBarStyles = (theme) => {
|
|
|
7
7
|
return css`
|
|
8
8
|
background-color: ${theme["background-color"]};
|
|
9
9
|
height: ${theme.height};
|
|
10
|
-
border: ${theme
|
|
10
|
+
border-top: ${theme["border-top"]};
|
|
11
|
+
border-right: ${theme["border-right"]};
|
|
12
|
+
border-bottom: ${theme["border-bottom"]};
|
|
13
|
+
border-left: ${theme["border-left"]};
|
|
11
14
|
display: ${theme.display};
|
|
12
15
|
justify-content: ${theme["justify-content"]};
|
|
13
16
|
`;
|
|
@@ -7,8 +7,12 @@
|
|
|
7
7
|
--component-top-bar-display: flex;
|
|
8
8
|
--component-top-bar-height: 4rem;
|
|
9
9
|
--component-top-bar-justify-content: flex-start;
|
|
10
|
-
--component-top-bar-border: 0.0625rem solid #cccccc;
|
|
10
|
+
--component-top-bar-border-right: 0.0625rem solid #cccccc;
|
|
11
|
+
--component-top-bar-border-top: 0.0625rem solid #cccccc;
|
|
12
|
+
--component-top-bar-border-bottom: 0.0625rem solid #cccccc;
|
|
13
|
+
--component-top-bar-border-left: 0.0625rem solid #cccccc;
|
|
11
14
|
--component-top-bar-spacer-margin-left: auto;
|
|
15
|
+
--component-top-bar-collapsed-nav-menu-button-color: #000000;
|
|
12
16
|
--component-top-bar-collapsed-nav-menu-button-margin: 0;
|
|
13
17
|
--component-top-bar-collapsed-nav-menu-button-padding: 0;
|
|
14
18
|
--component-top-bar-collapsed-nav-menu-button-background: none;
|
|
@@ -5,12 +5,16 @@ const componentTopBar = {
|
|
|
5
5
|
display: "flex",
|
|
6
6
|
height: "4rem",
|
|
7
7
|
"justify-content": "flex-start",
|
|
8
|
-
border: "0.0625rem solid #cccccc",
|
|
8
|
+
"border-right": "0.0625rem solid #cccccc",
|
|
9
|
+
"border-top": "0.0625rem solid #cccccc",
|
|
10
|
+
"border-bottom": "0.0625rem solid #cccccc",
|
|
11
|
+
"border-left": "0.0625rem solid #cccccc",
|
|
9
12
|
spacer: {
|
|
10
13
|
"margin-left": "auto"
|
|
11
14
|
},
|
|
12
15
|
collapsedNavMenu: {
|
|
13
16
|
button: {
|
|
17
|
+
color: "#000000",
|
|
14
18
|
margin: "0",
|
|
15
19
|
padding: "0",
|
|
16
20
|
background: "none",
|
|
@@ -3,12 +3,16 @@ const componentTopBar = {
|
|
|
3
3
|
display: "flex",
|
|
4
4
|
height: "4rem",
|
|
5
5
|
"justify-content": "flex-start",
|
|
6
|
-
border: "0.0625rem solid #cccccc",
|
|
6
|
+
"border-right": "0.0625rem solid #cccccc",
|
|
7
|
+
"border-top": "0.0625rem solid #cccccc",
|
|
8
|
+
"border-bottom": "0.0625rem solid #cccccc",
|
|
9
|
+
"border-left": "0.0625rem solid #cccccc",
|
|
7
10
|
spacer: {
|
|
8
11
|
"margin-left": "auto"
|
|
9
12
|
},
|
|
10
13
|
collapsedNavMenu: {
|
|
11
14
|
button: {
|
|
15
|
+
color: "#000000",
|
|
12
16
|
margin: "0",
|
|
13
17
|
padding: "0",
|
|
14
18
|
background: "none",
|
|
@@ -6,12 +6,16 @@ export declare const componentTopBar: {
|
|
|
6
6
|
display: string;
|
|
7
7
|
height: string;
|
|
8
8
|
'justify-content': string;
|
|
9
|
-
border: string;
|
|
9
|
+
'border-right': string;
|
|
10
|
+
'border-top': string;
|
|
11
|
+
'border-bottom': string;
|
|
12
|
+
'border-left': string;
|
|
10
13
|
spacer: {
|
|
11
14
|
'margin-left': string;
|
|
12
15
|
};
|
|
13
16
|
collapsedNavMenu: {
|
|
14
17
|
button: {
|
|
18
|
+
color: string;
|
|
15
19
|
margin: string;
|
|
16
20
|
padding: string;
|
|
17
21
|
background: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@guardian/stand",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.31",
|
|
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": {
|