@guardian/stand 0.0.17 → 0.0.19

package/dist/components/select/styles.js

@@ -0,0 +1,117 @@
+import { css } from '@emotion/react';
+import { componentSelect } from '../../styleD/build/typescript/component/select.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultSelectTheme = componentSelect;
+const selectStyles = (theme) => {
+  return css`
+		display: ${theme.shared.display};
+		flex-direction: ${theme.shared.flexDirection};
+		gap: ${theme.shared.gap};
+
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const popoverStyles = (theme) => {
+  return css`
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+	`;
+};
+const listBoxItemStyles = (theme) => {
+  return css`
+		padding-left: ${theme.option.paddingLeft};
+		padding-right: ${theme.option.paddingRight};
+		padding-top: ${theme.option.paddingTop};
+		padding-bottom: ${theme.option.paddingBottom};
+
+		&[data-hovered] {
+			outline: ${theme.shared.hover.outline};
+		}
+
+		/* Hovering adds data-focused and the item stays focused after hovering away */
+		&[data-focused] {
+			background-color: ${theme.shared.hover.backgroundColor};
+		}
+
+		/* Override default browser focus behaviour */
+		:focus-visible {
+			outline: none;
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.option.focused.outline};
+			outline-offset: ${theme.option.focused["outline-offset"]};
+			background-color: ${theme.option.focused.backgroundColor};
+		}
+
+		/* Must be last to take precedence */
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+	`;
+};
+const listBoxStyles = (theme) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme.listBox.typography)}
+		background-color: ${theme.listBox.backgroundColor};
+		border: ${theme.listBox.border};
+		box-shadow: ${theme.listBox.shadow};
+		max-width: ${theme.shared.maxWidth};
+		width: ${theme.shared.width};
+		outline: none;
+	`;
+};
+const labelStyles = (theme) => {
+  return css`
+		color: ${theme.label.color};
+		${convertTypographyToEmotionStringStyle(theme.label.typography)};
+	`;
+};
+const helpTextStyles = (theme) => {
+  return css`
+		color: ${theme.helpText.color};
+		${convertTypographyToEmotionStringStyle(theme.helpText.typography)}
+	`;
+};
+const buttonStyles = (theme, isInvalid) => {
+  return css`
+		display: ${theme.button.display};
+		justify-content: ${theme.button.justifyContent};
+		align-items: ${theme.button.alignItems};
+		background-color: ${theme.button.backgroundColor};
+		border: ${theme.button.border};
+		border-radius: ${theme.button.borderRadius};
+		height: ${theme.button.height};
+		padding-left: ${theme.button.paddingLeft};
+		padding-right: ${theme.button.paddingRight};
+		margin-top: ${theme.button.marginTop};
+		${convertTypographyToEmotionStringStyle(theme.button.typography)}
+		color: ${theme.button.color};
+
+		&[data-hovered] {
+			background-color: ${theme.shared.hover.backgroundColor};
+		}
+
+		&[data-pressed] {
+			background-color: ${theme.shared.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.button.focused.outline};
+			outline-offset: ${theme.button.focused["outline-offset"]};
+		}
+
+		&[data-disabled] {
+			cursor: ${theme.button.disabled.cursor};
+			background-color: ${theme.button.disabled.backgroundColor};
+			color: ${theme.button.disabled.color};
+			border: ${theme.button.disabled.border};
+		}
+
+		${isInvalid ? `border: ${theme.button.error.border};` : ``}
+	`;
+};
+
+export { buttonStyles, defaultSelectTheme, helpTextStyles, labelStyles, listBoxItemStyles, listBoxStyles, popoverStyles, selectStyles };

package/dist/index.cjs

@@ -9,6 +9,8 @@ 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 inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
+var select = require('./styleD/build/typescript/component/select.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');
@@ -32,6 +34,8 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentInlineMessage = inlineMessage.componentInlineMessage;
+exports.componentSelect = select.componentSelect;
 exports.componentMenu = menu.componentMenu;
 exports.componentTopBar = TopBar.componentTopBar;
 exports.baseColors = colors.baseColors;

package/dist/index.js

@@ -7,6 +7,8 @@ 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 { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
+export { componentSelect } from './styleD/build/typescript/component/select.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';

package/dist/inline-message.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var InlineMessage = require('./components/inline-message/InlineMessage.cjs');
+var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
+
+
+
+exports.InlineMessage = InlineMessage.InlineMessage;
+exports.componentInlineMessage = inlineMessage.componentInlineMessage;

package/dist/inline-message.js

@@ -0,0 +1,2 @@
+export { InlineMessage } from './components/inline-message/InlineMessage.js';
+export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';

package/dist/select.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+var Select = require('./components/select/Select.cjs');
+var select = require('./styleD/build/typescript/component/select.cjs');
+
+
+
+exports.Select = Select.Select;
+exports.componentSelect = select.componentSelect;

package/dist/select.js

@@ -0,0 +1,2 @@
+export { Select } from './components/select/Select.js';
+export { componentSelect } from './styleD/build/typescript/component/select.js';

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

@@ -6,36 +6,58 @@
 	--component-avatar-shared-color-green-text: #24491d;
 	--component-avatar-shared-color-green-background: #cde4c9;
 	--component-avatar-shared-color-green-border: unset;
+	--component-avatar-shared-color-green-hover-background: #aed2a6;
+	--component-avatar-shared-color-green-active-background: #8ec183;
 	--component-avatar-shared-color-blue-text: #092f62;
 	--component-avatar-shared-color-blue-background: #c5d9f4;
 	--component-avatar-shared-color-blue-border: unset;
+	--component-avatar-shared-color-blue-hover-background: #93b9ec;
+	--component-avatar-shared-color-blue-active-background: #699ee5;
 	--component-avatar-shared-color-red-text: #65170e;
 	--component-avatar-shared-color-red-background: #f5c6c0;
 	--component-avatar-shared-color-red-border: unset;
+	--component-avatar-shared-color-red-hover-background: #eea198;
+	--component-avatar-shared-color-red-active-background: #e87c6f;
 	--component-avatar-shared-color-cyan-text: #00344e;
 	--component-avatar-shared-color-cyan-background: #b8d8e7;
 	--component-avatar-shared-color-cyan-border: unset;
+	--component-avatar-shared-color-cyan-hover-background: #8abed7;
+	--component-avatar-shared-color-cyan-active-background: #5ca5c8;
 	--component-avatar-shared-color-teal-text: #0e2729;
 	--component-avatar-shared-color-teal-background: #c5dfe1;
 	--component-avatar-shared-color-teal-border: unset;
+	--component-avatar-shared-color-teal-hover-background: #a0cace;
+	--component-avatar-shared-color-teal-active-background: #7bb5bb;
 	--component-avatar-shared-color-cool-purple-text: #394069;
 	--component-avatar-shared-color-cool-purple-background: #dbdff7;
 	--component-avatar-shared-color-cool-purple-border: unset;
+	--component-avatar-shared-color-cool-purple-hover-background: #c3caf3;
+	--component-avatar-shared-color-cool-purple-active-background: #acb5ee;
 	--component-avatar-shared-color-warm-purple-text: #381350;
 	--component-avatar-shared-color-warm-purple-background: #dac3e8;
 	--component-avatar-shared-color-warm-purple-border: unset;
+	--component-avatar-shared-color-warm-purple-hover-background: #c29dd9;
+	--component-avatar-shared-color-warm-purple-active-background: #aa76cb;
 	--component-avatar-shared-color-magenta-text: #581734;
 	--component-avatar-shared-color-magenta-background: #edc6d7;
 	--component-avatar-shared-color-magenta-border: unset;
+	--component-avatar-shared-color-magenta-hover-background: #e2a1be;
+	--component-avatar-shared-color-magenta-active-background: #d67ca4;
 	--component-avatar-shared-color-orange-text: #693c16;
 	--component-avatar-shared-color-orange-background: #fcddc6;
 	--component-avatar-shared-color-orange-border: unset;
+	--component-avatar-shared-color-orange-hover-background: #fac7a1;
+	--component-avatar-shared-color-orange-active-background: #f9b27c;
 	--component-avatar-shared-color-yellow-text: #5b4a0b;
 	--component-avatar-shared-color-yellow-background: #fbeebf;
 	--component-avatar-shared-color-yellow-border: unset;
+	--component-avatar-shared-color-yellow-hover-background: #f9e396;
+	--component-avatar-shared-color-yellow-active-background: #f6d86d;
 	--component-avatar-shared-color-outlined-text: #000000;
 	--component-avatar-shared-color-outlined-background: none;
 	--component-avatar-shared-color-outlined-border: 0.0625rem solid #8d8d8d;
+	--component-avatar-shared-color-outlined-hover-background: #ededed;
+	--component-avatar-shared-color-outlined-active-background: #dcdcdc;
 	--component-avatar-shared-display: inline-flex;
 	--component-avatar-shared-align-items: center;
 	--component-avatar-shared-justify-content: center;
@@ -43,6 +65,15 @@
 	--component-avatar-shared-flex-shrink: 0;
 	--component-avatar-shared-border-radius: 50%;
 	--component-avatar-shared-user-select: none;
+	--component-avatar-shared-link-width: fit-content;
+	--component-avatar-shared-link-focus-visible-outline: 0.125rem solid #0072a9;
+	--component-avatar-shared-link-focus-visible-outline-offset: 0.125rem;
+	--component-avatar-shared-link-text-decoration: none;
+	--component-avatar-shared-button-background: none;
+	--component-avatar-shared-button-border: none;
+	--component-avatar-shared-button-padding: 0;
+	--component-avatar-shared-button-cursor: pointer;
+	--component-avatar-shared-button-disabled-cursor: not-allowed;
 	--component-avatar-sm-size: 2rem;
 	--component-avatar-sm-typography-font: normal 700 0.75rem/1 'Open Sans';
 	--component-avatar-sm-typography-letter-spacing: 0;

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

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-inline-message-shared-display: inline-flex;
+	--component-inline-message-shared-gap: 0.25rem;
+	--component-inline-message-shared-align-items: center;
+	--component-inline-message-shared-icon-size: 1.25rem;
+	--component-inline-message-shared-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-inline-message-shared-typography-letter-spacing: 0;
+	--component-inline-message-shared-typography-font-width: 95;
+	--component-inline-message-error-color: #8c2113;
+	--component-inline-message-success-color: #326528;
+	--component-inline-message-information-color: #00344e;
+}

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

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-select-shared-display: flex;
+	--component-select-shared-flex-direction: column;
+	--component-select-shared-gap: 0.25rem;
+	--component-select-shared-max-width: 333px;
+	--component-select-shared-width: 100%;
+	--component-select-shared-hover-background-color: #f6f6f6;
+	--component-select-shared-hover-outline: none; /** Override outline focus styles on hover */
+	--component-select-shared-pressed-background-color: #ededed;
+	--component-select-label-color: #000000;
+	--component-select-label-typography-font: normal 700 1rem/1.15 'Open Sans';
+	--component-select-label-typography-letter-spacing: -0.03125rem;
+	--component-select-label-typography-font-width: 95;
+	--component-select-help-text-color: #545454;
+	--component-select-help-text-typography-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--component-select-help-text-typography-letter-spacing: 0;
+	--component-select-help-text-typography-font-width: 95;
+	--component-select-button-display: flex;
+	--component-select-button-justify-content: space-between;
+	--component-select-button-align-items: center;
+	--component-select-button-margin-top: 0.25rem;
+	--component-select-button-background-color: #ffffff;
+	--component-select-button-border: 0.0625rem solid #545454;
+	--component-select-button-border-radius: 0.25rem;
+	--component-select-button-height: 2.5rem;
+	--component-select-button-padding-left: 0.75rem;
+	--component-select-button-padding-right: 0.25rem;
+	--component-select-button-color: #545454;
+	--component-select-button-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-select-button-typography-letter-spacing: 0;
+	--component-select-button-typography-font-width: 95;
+	--component-select-button-focused-outline: 0.125rem solid #0072a9;
+	--component-select-button-focused-outline-offset: 0.125rem;
+	--component-select-button-disabled-background-color: #ffffff;
+	--component-select-button-disabled-cursor: not-allowed;
+	--component-select-button-disabled-color: #999999;
+	--component-select-button-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-select-button-error-border: 0.0625rem solid #b42a19;
+	--component-select-option-padding-left: 1rem;
+	--component-select-option-padding-right: 1rem;
+	--component-select-option-padding-top: 0.75rem;
+	--component-select-option-padding-bottom: 0.75rem;
+	--component-select-option-focused-outline: 0.125rem solid #0072a9;
+	--component-select-option-focused-outline-offset: 0;
+	--component-select-option-focused-background-color: inherit;
+	--component-select-list-box-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-select-list-box-typography-letter-spacing: 0;
+	--component-select-list-box-typography-font-width: 95;
+	--component-select-list-box-border: 0.0625rem solid #cccccc;
+	--component-select-list-box-background-color: #ffffff;
+	--component-select-list-box-shadow: 0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3);
+}

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

@@ -146,4 +146,42 @@
 	--semantic-typography-interactive-md-font: normal 700 1rem/1 'Open Sans';
 	--semantic-typography-interactive-md-letter-spacing: -0.0125rem;
 	--semantic-typography-interactive-md-font-width: 95;
+	--semantic-typography-label-form-sm-font: normal 700 0.875rem/1.15 'Open Sans';
+	--semantic-typography-label-form-sm-letter-spacing: -0.0125rem;
+	--semantic-typography-label-form-sm-font-width: 95;
+	--semantic-typography-label-form-md-font: normal 700 1rem/1.15 'Open Sans';
+	--semantic-typography-label-form-md-letter-spacing: -0.03125rem;
+	--semantic-typography-label-form-md-font-width: 95;
+	--semantic-typography-label-form-inline-sm-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--semantic-typography-label-form-inline-sm-letter-spacing: 0;
+	--semantic-typography-label-form-inline-sm-font-width: 95;
+	--semantic-typography-label-form-inline-md-font: normal 460 1rem/1.3
+		'Open Sans';
+	--semantic-typography-label-form-inline-md-letter-spacing: 0;
+	--semantic-typography-label-form-inline-md-font-width: 95;
+	--semantic-typography-label-form-compact-sm-font: normal 700 0.875rem/1.15
+		'Open Sans';
+	--semantic-typography-label-form-compact-sm-letter-spacing: 0;
+	--semantic-typography-label-form-compact-sm-font-width: 88;
+	--semantic-typography-label-form-compact-md-font: normal 700 1rem/1.15
+		'Open Sans';
+	--semantic-typography-label-form-compact-md-letter-spacing: -0.0125rem;
+	--semantic-typography-label-form-compact-md-font-width: 88;
+	--semantic-typography-label-form-inline-compact-sm-font: normal 460
+		0.875rem/1.3 'Open Sans';
+	--semantic-typography-label-form-inline-compact-sm-letter-spacing: 0;
+	--semantic-typography-label-form-inline-compact-sm-font-width: 88;
+	--semantic-typography-label-form-inline-compact-md-font: normal 460 1rem/1.3
+		'Open Sans';
+	--semantic-typography-label-form-inline-compact-md-letter-spacing: 0;
+	--semantic-typography-label-form-inline-compact-md-font-width: 88;
+	--semantic-typography-help-text-form-md-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--semantic-typography-help-text-form-md-letter-spacing: 0;
+	--semantic-typography-help-text-form-md-font-width: 95;
+	--semantic-typography-help-text-form-compact-md-font: normal 460 0.875rem/1.3
+		'Open Sans';
+	--semantic-typography-help-text-form-compact-md-letter-spacing: 0;
+	--semantic-typography-help-text-form-compact-md-font-width: 88;
 }

package/dist/styleD/build/typescript/component/avatar.cjs

@@ -6,57 +6,123 @@ const componentAvatar = {
       green: {
         text: "#24491d",
         background: "#cde4c9",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#aed2a6"
+        },
+        ":active": {
+          background: "#8ec183"
+        }
       },
       blue: {
         text: "#092f62",
         background: "#c5d9f4",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#93b9ec"
+        },
+        ":active": {
+          background: "#699ee5"
+        }
       },
       red: {
         text: "#65170e",
         background: "#f5c6c0",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#eea198"
+        },
+        ":active": {
+          background: "#e87c6f"
+        }
       },
       cyan: {
         text: "#00344e",
         background: "#b8d8e7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#8abed7"
+        },
+        ":active": {
+          background: "#5ca5c8"
+        }
       },
       teal: {
         text: "#0e2729",
         background: "#c5dfe1",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#a0cace"
+        },
+        ":active": {
+          background: "#7bb5bb"
+        }
       },
       "cool-purple": {
         text: "#394069",
         background: "#dbdff7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c3caf3"
+        },
+        ":active": {
+          background: "#acb5ee"
+        }
       },
       "warm-purple": {
         text: "#381350",
         background: "#dac3e8",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c29dd9"
+        },
+        ":active": {
+          background: "#aa76cb"
+        }
       },
       magenta: {
         text: "#581734",
         background: "#edc6d7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#e2a1be"
+        },
+        ":active": {
+          background: "#d67ca4"
+        }
       },
       orange: {
         text: "#693c16",
         background: "#fcddc6",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#fac7a1"
+        },
+        ":active": {
+          background: "#f9b27c"
+        }
       },
       yellow: {
         text: "#5b4a0b",
         background: "#fbeebf",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#f9e396"
+        },
+        ":active": {
+          background: "#f6d86d"
+        }
       },
       outlined: {
         text: "#000000",
         background: "none",
-        border: "0.0625rem solid #8d8d8d"
+        border: "0.0625rem solid #8d8d8d",
+        ":hover": {
+          background: "#ededed"
+        },
+        ":active": {
+          background: "#dcdcdc"
+        }
       }
     },
     display: "inline-flex",
@@ -65,7 +131,24 @@ const componentAvatar = {
     overflow: "hidden",
     "flex-shrink": "0",
     "border-radius": "50%",
-    "user-select": "none"
+    "user-select": "none",
+    link: {
+      width: "fit-content",
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      "text-decoration": "none"
+    },
+    button: {
+      background: "none",
+      border: "none",
+      padding: "0",
+      cursor: "pointer",
+      ":disabled": {
+        cursor: "not-allowed"
+      }
+    }
   },
   sm: {
     size: "2rem",