@guardian/stand 0.0.15 → 0.0.17

package/dist/components/topbar/topBarNavigation/styles.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var react = require('@emotion/react');
+var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+var typography = require('../../../styleD/utils/semantic/typography.cjs');
+
+const defaultTopBarNavigationTheme = TopBar.componentTopBar.Navigation;
+const topBarNavigationStyles = (theme, selected) => {
+  return react.css`
+		display: ${theme.shared.display};
+		position: ${theme.shared.position};
+		align-items: ${theme.shared["align-items"]};
+		height: ${theme.shared.height};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		color: ${selected ? `${theme.selected.color}` : `${theme.unselected.color}`};
+		border-top: ${theme.shared["border-top"]};
+		border-bottom: ${theme.unselected["border-bottom"]};
+
+		&[data-hovered],
+		&:hover {
+			border-bottom: ${theme.selected["border-bottom"]};
+			cursor: ${theme.shared.cursor};
+		}
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared[":focus-visible"].outline};
+			border-bottom: ${theme.selected["border-bottom"]};
+			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.shared[":disabled"].cursor};
+			color: ${theme.shared[":disabled"].color};
+		}
+
+		${selected && `border-bottom: ${theme.selected["border-bottom"]};`}
+
+		text-decoration: ${theme.shared["text-decoration"]};
+	`;
+};
+const topBarNavigationDividerStyles = (theme, { alignment }) => react.css`
+	${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+`;
+const topBarNavigationTextStyles = (theme) => react.css`
+	margin-left: ${theme.text.margin.left};
+`;
+const topBarNavigationTypographyStyles = (theme, size) => {
+  return size == "md" ? react.css`
+				${typography.convertTypographyToEmotionStringStyle(theme.md.typography)}
+			` : react.css`
+				${typography.convertTypographyToEmotionStringStyle(theme.sm.typography)}
+			`;
+};
+const topBarMenuIndicatorStyles = (theme) => {
+  return react.css`
+		margin-top: ${theme.menuIndicator.margin.top};
+		margin-left: ${theme.menuIndicator.margin.left};
+	`;
+};
+
+exports.defaultTopBarNavigationTheme = defaultTopBarNavigationTheme;
+exports.topBarMenuIndicatorStyles = topBarMenuIndicatorStyles;
+exports.topBarNavigationDividerStyles = topBarNavigationDividerStyles;
+exports.topBarNavigationStyles = topBarNavigationStyles;
+exports.topBarNavigationTextStyles = topBarNavigationTextStyles;
+exports.topBarNavigationTypographyStyles = topBarNavigationTypographyStyles;

package/dist/components/topbar/topBarNavigation/styles.js

@@ -0,0 +1,61 @@
+import { css } from '@emotion/react';
+import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
+
+const defaultTopBarNavigationTheme = componentTopBar.Navigation;
+const topBarNavigationStyles = (theme, selected) => {
+  return css`
+		display: ${theme.shared.display};
+		position: ${theme.shared.position};
+		align-items: ${theme.shared["align-items"]};
+		height: ${theme.shared.height};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+		color: ${selected ? `${theme.selected.color}` : `${theme.unselected.color}`};
+		border-top: ${theme.shared["border-top"]};
+		border-bottom: ${theme.unselected["border-bottom"]};
+
+		&[data-hovered],
+		&:hover {
+			border-bottom: ${theme.selected["border-bottom"]};
+			cursor: ${theme.shared.cursor};
+		}
+
+		&[data-focus-visible],
+		&:focus-visible {
+			outline: ${theme.shared[":focus-visible"].outline};
+			border-bottom: ${theme.selected["border-bottom"]};
+			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.shared[":disabled"].cursor};
+			color: ${theme.shared[":disabled"].color};
+		}
+
+		${selected && `border-bottom: ${theme.selected["border-bottom"]};`}
+
+		text-decoration: ${theme.shared["text-decoration"]};
+	`;
+};
+const topBarNavigationDividerStyles = (theme, { alignment }) => css`
+	${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+`;
+const topBarNavigationTextStyles = (theme) => css`
+	margin-left: ${theme.text.margin.left};
+`;
+const topBarNavigationTypographyStyles = (theme, size) => {
+  return size == "md" ? css`
+				${convertTypographyToEmotionStringStyle(theme.md.typography)}
+			` : css`
+				${convertTypographyToEmotionStringStyle(theme.sm.typography)}
+			`;
+};
+const topBarMenuIndicatorStyles = (theme) => {
+  return css`
+		margin-top: ${theme.menuIndicator.margin.top};
+		margin-left: ${theme.menuIndicator.margin.left};
+	`;
+};
+
+export { defaultTopBarNavigationTheme, topBarMenuIndicatorStyles, topBarNavigationDividerStyles, topBarNavigationStyles, topBarNavigationTextStyles, topBarNavigationTypographyStyles };

package/dist/components/topbar/{toolName → topBarToolName}/TopBarToolName.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var mergeDeep = require('../../../util/mergeDeep.cjs');
 var Favicon = require('../../favicon/Favicon.cjs');
 var Icon = require('../../icon/Icon.cjs');
+var TopBarItem = require('../topBarItem/TopBarItem.cjs');
 var styles = require('./styles.cjs');
 
 const TopBarToolName = ({
@@ -15,7 +16,7 @@ const TopBarToolName = ({
   cssOverrides
 }) => {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "left", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
     /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme)], children: name }),
     subsection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -25,7 +26,7 @@ const TopBarToolName = ({
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.subsectionTypography(mergedTheme), children: subsection })
       ] })
     ] })
-  ] });
+  ] }) });
 };
 
 exports.TopBarToolName = TopBarToolName;

package/dist/components/topbar/topBarToolName/TopBarToolName.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { mergeDeep } from '../../../util/mergeDeep.js';
+import { Favicon } from '../../favicon/Favicon.js';
+import { Icon } from '../../icon/Icon.js';
+import { TopBarItem } from '../topBarItem/TopBarItem.js';
+import { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
+
+const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
+  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
+  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 })] })] })] }) });
+};
+
+export { TopBarToolName };

package/dist/index.cjs

@@ -9,6 +9,7 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var menu = require('./styleD/build/typescript/component/menu.cjs');
 var TopBar = require('./styleD/build/typescript/component/TopBar.cjs');
 var colors = require('./styleD/build/typescript/base/colors.cjs');
 var typography = require('./styleD/build/typescript/base/typography.cjs');
@@ -18,6 +19,7 @@ var radius = require('./styleD/build/typescript/base/radius.cjs');
 var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
 var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
 var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
+var shadow = require('./styleD/build/typescript/semantic/shadow.cjs');
 
 
 
@@ -30,6 +32,7 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentMenu = menu.componentMenu;
 exports.componentTopBar = TopBar.componentTopBar;
 exports.baseColors = colors.baseColors;
 exports.baseTypography = typography.baseTypography;
@@ -39,3 +42,4 @@ exports.baseRadius = radius.baseRadius;
 exports.semanticColors = colors$1.semanticColors;
 exports.semanticTypography = typography$2.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;
+exports.semanticShadow = shadow.semanticShadow;

package/dist/index.js

@@ -7,6 +7,7 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentMenu } from './styleD/build/typescript/component/menu.js';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar.js';
 export { baseColors } from './styleD/build/typescript/base/colors.js';
 export { baseTypography } from './styleD/build/typescript/base/typography.js';
@@ -16,3 +17,4 @@ export { baseRadius } from './styleD/build/typescript/base/radius.js';
 export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
+export { semanticShadow } from './styleD/build/typescript/semantic/shadow.js';

package/dist/menu.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var Menu = require('./components/menu/Menu.cjs');
+var menu = require('./styleD/build/typescript/component/menu.cjs');
+
+
+
+exports.Menu = Menu.Menu;
+exports.MenuItem = Menu.MenuItem;
+exports.MenuSection = Menu.MenuSection;
+exports.MenuSeparator = Menu.MenuSeparator;
+exports.MenuToggle = Menu.MenuToggle;
+exports.componentMenu = menu.componentMenu;

package/dist/menu.js

@@ -0,0 +1,2 @@
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle } from './components/menu/Menu.js';
+export { componentMenu } from './styleD/build/typescript/component/menu.js';

package/dist/styleD/build/css/base/typography.css

@@ -29,9 +29,9 @@
 	--base-typography-size-36-rem: 2.25rem;
 	--base-typography-size-42-rem: 2.625rem;
 	--base-typography-size-48-rem: 3rem;
-	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-guardian-text-egyptian-normal: 400;
 	--base-typography-weight-guardian-text-egyptian-bold: 700;
+	--base-typography-weight-guardian-headline-bold: 700;
 	--base-typography-weight-open-sans-light: 340;
 	--base-typography-weight-open-sans-normal: 460;
 	--base-typography-weight-open-sans-semi-bold: 600;
@@ -51,9 +51,9 @@
 	--base-typography-letter-spacing-densest-px: -1px;
 	--base-typography-letter-spacing-denser-px: -0.5px;
 	--base-typography-letter-spacing-dense-px: -0.2px;
-	--base-typography-letter-spacing-default-px: 0px;
+	--base-typography-letter-spacing-default-px: 0;
 	--base-typography-letter-spacing-densest-rem: -0.0625rem;
 	--base-typography-letter-spacing-denser-rem: -0.03125rem;
 	--base-typography-letter-spacing-dense-rem: -0.0125rem;
-	--base-typography-letter-spacing-default-rem: 0rem;
+	--base-typography-letter-spacing-default-rem: 0;
 }

package/dist/styleD/build/css/component/TopBar.css

@@ -3,12 +3,66 @@
  */
 
 :root {
+	--component-top-bar-background-color: #f6f6f6;
+	--component-top-bar-display: flex;
+	--component-top-bar-height: 4rem;
+	--component-top-bar-justify-content: space-between;
+	--component-top-bar-border: 0.0625rem solid #cccccc;
+	--component-top-bar-item-display: flex;
+	--component-top-bar-item-align-items: center;
+	--component-top-bar-item-height: 100%;
+	--component-top-bar-item-sm-padding-top: 0;
+	--component-top-bar-item-sm-padding-right: 0.75rem;
+	--component-top-bar-item-sm-padding-bottom: 0;
+	--component-top-bar-item-sm-padding-left: 0.75rem;
+	--component-top-bar-item-md-padding-top: 0;
+	--component-top-bar-item-md-padding-right: 1rem;
+	--component-top-bar-item-md-padding-bottom: 0;
+	--component-top-bar-item-md-padding-left: 1rem;
+	--component-top-bar-item-lg-padding-top: 0;
+	--component-top-bar-item-lg-padding-right: 1.5rem;
+	--component-top-bar-item-lg-padding-bottom: 0;
+	--component-top-bar-item-lg-padding-left: 1.5rem;
+	--component-top-bar-item-border: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-shared-display: inline-flex;
+	--component-top-bar-navigation-shared-position: relative;
+	--component-top-bar-navigation-shared-align-items: center;
+	--component-top-bar-navigation-shared-cursor: pointer;
+	--component-top-bar-navigation-shared-text-decoration: none;
+	--component-top-bar-navigation-shared-height: 100%;
+	--component-top-bar-navigation-shared-disabled-cursor: not-allowed;
+	--component-top-bar-navigation-shared-disabled-color: #999999;
+	--component-top-bar-navigation-shared-padding-top: 0;
+	--component-top-bar-navigation-shared-padding-right: 1rem;
+	--component-top-bar-navigation-shared-padding-bottom: 0;
+	--component-top-bar-navigation-shared-padding-left: 1rem;
+	--component-top-bar-navigation-shared-focus-visible-outline: 0.125rem solid
+		#0072a9;
+	--component-top-bar-navigation-shared-focus-visible-outline-offset: -0.0625rem;
+	--component-top-bar-navigation-shared-border-top: 0.5rem solid transparent;
+	--component-top-bar-navigation-shared-divider: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-text-margin-left: 0.375rem;
+	--component-top-bar-navigation-menu-indicator-margin-top: 0.375rem;
+	--component-top-bar-navigation-menu-indicator-margin-left: 0.125rem;
+	--component-top-bar-navigation-selected-color: #000000;
+	--component-top-bar-navigation-selected-border-bottom: 0.5rem solid #0072a9;
+	--component-top-bar-navigation-unselected-color: #545454;
+	--component-top-bar-navigation-unselected-border-bottom: 0.5rem solid
+		transparent;
+	--component-top-bar-navigation-md-typography-font: normal 700 1rem/1.15
+		'Open Sans';
+	--component-top-bar-navigation-md-typography-letter-spacing: -0.03125rem;
+	--component-top-bar-navigation-md-typography-font-width: 95;
+	--component-top-bar-navigation-sm-typography-font: normal 700 0.875rem/1.15
+		'Open Sans';
+	--component-top-bar-navigation-sm-typography-letter-spacing: -0.0125rem;
+	--component-top-bar-navigation-sm-typography-font-width: 95;
 	--component-top-bar-tool-name-display: flex;
 	--component-top-bar-tool-name-align-items: center;
 	--component-top-bar-tool-name-gap: 8px;
 	--component-top-bar-tool-name-typography-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--component-top-bar-tool-name-typography-letter-spacing: 0rem;
+	--component-top-bar-tool-name-typography-letter-spacing: 0;
 	--component-top-bar-tool-name-typography-font-width: 100;
 	--component-top-bar-tool-name-divider-border: 0.0625rem solid #cccccc;
 	--component-top-bar-tool-name-divider-height: 2rem;

package/dist/styleD/build/css/component/avatar.css

@@ -45,7 +45,7 @@
 	--component-avatar-shared-user-select: none;
 	--component-avatar-sm-size: 2rem;
 	--component-avatar-sm-typography-font: normal 700 0.75rem/1 'Open Sans';
-	--component-avatar-sm-typography-letter-spacing: 0rem;
+	--component-avatar-sm-typography-letter-spacing: 0;
 	--component-avatar-sm-typography-font-width: 95;
 	--component-avatar-md-size: 2.5rem;
 	--component-avatar-md-typography-font: normal 700 0.875rem/1 'Open Sans';