@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.
@@ -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(Icon.Icon, { size: "lg", children: menuOpen ? "close" : "menu" })
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.border};
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.border};
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.30",
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": {