npm - @guardian/stand - Versions diffs - 0.0.15 → 0.0.17 - Mend

@guardian/stand 0.0.15 → 0.0.17

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 (130) hide show

package/dist/types/components/icon-link-button/styles.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
-import type { ButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
 export type IconLinkButtonTheme = ButtonTheme;
+export type PartialIconLinkButtonTheme = PartialButtonTheme;
 export declare const defaultIconLinkButtonTheme: ButtonTheme;
 export declare const iconLinkButtonStyles: (theme: {
     shared: {
@@ -19,7 +20,7 @@ export declare const iconLinkButtonStyles: (theme: {
             'outline-offset': string;
         };
     };
-    'emphasised-primary': {
+    primary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -144,7 +145,7 @@ export declare const iconLinkButtonStyles: (theme: {
             };
         };
     };
-    'emphasised-secondary': {
+    secondary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -269,132 +270,7 @@ export declare const iconLinkButtonStyles: (theme: {
             };
         };
     };
-    'neutral-primary': {
-        shared: {
-            color: string;
-            backgroundColor: string;
-            borderRadius: string;
-            border: string;
-            ':hover': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':active': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':disabled': {
-                color: string;
-                backgroundColor: string;
-                border: string;
-            };
-        };
-        xs: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        sm: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        md: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        lg: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-    };
-    'neutral-secondary': {
+    tertiary: {
         shared: {
             color: string;
             backgroundColor: string;

package/dist/types/components/icon-link-button/types.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface IconLinkButtonProps extends DefaultPropsWithChildren<IconLinkBu
     /**
      * Size variant of the avatar
      */
-    size?: keyof Omit<IconLinkButtonTheme['emphasised-primary'], 'shared'>;
+    size?: keyof Omit<IconLinkButtonTheme['primary'], 'shared'>;
     /**
      * Variant of the button
      */

package/dist/types/components/link-button/sandbox.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export declare const componentName = "LinkButton";
-export declare const componentTsx = "import { LinkButton } from '@guardian/stand/link-button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton href=\"#\">\n          \t\tLinkButton\n\t\t\t</LinkButton>\n\t\t\t<LinkButton isDisabled variant=\"emphasised-secondary\">\n\t\t\t\tDisabled LinkButton\n\t\t\t</LinkButton>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton\n\t\t\t\thref=\"#\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tLinkButton with Icon\n\t\t\t</LinkButton>\n\t\t\t<LinkButton\n\t\t\t\tisDisabled\n\t\t\t\thref=\"#\"\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled LinkButton with Icon\n\t\t\t</LinkButton>\n\t\t</div>\n\t</>\n);\n\n";
-export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n    .stand-button {\n    \tdisplay: var(--component-button-shared-display);\n    \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n    \ttext-align: var(--component-button-shared-text-align);\n    \tbox-shadow: var(--component-button-shared-box-shadow);\n    \ttext-decoration: var(--component-button-shared-text-decoration);\n    \tcursor: var(--component-button-shared-cursor);\n    \tjustify-content: var(--component-button-shared-justify-content);\n    \talign-items: var(--component-button-shared-align-items);\n    }\n    .stand-button:focus-visible {\n    \toutline: var(--component-button-shared-focus-visible-outline);\n    \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n    }\n    .stand-button:disabled {\n    \tcursor: var(--component-button-shared-disabled-cursor);\n    }\n\n    /* example setup of button/link button style using md size and emphasised primary variant */\n    .stand-button-emphasised-primary {\n    \tcolor: var(--component-button-emphasised-primary-shared-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-background-color\n    \t);\n    \theight: var(--component-button-emphasised-primary-md-height);\n    \tpadding: var(--component-button-emphasised-primary-md-padding-top)\n    \tvar(--component-button-emphasised-primary-md-padding-right)\n    \tvar(--component-button-emphasised-primary-md-padding-bottom)\n    \tvar(--component-button-emphasised-primary-md-padding-left);\n    \tfont: var(--component-button-emphasised-primary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-emphasised-primary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-emphasised-primary-md-typography-font-width);\n    \tborder: var(--component-button-emphasised-primary-shared-border);\n    \tborder-radius: var(\n    \t\t--component-button-emphasised-primary-shared-border-radius\n    \t);\n    }\n    .stand-button-emphasised-primary:hover {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-hover-border);\n    }\n    .stand-button-emphasised-primary:active {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-active-border);\n    }\n    .stand-button-emphasised-primary:disabled, .stand-button-emphasised-primary[data-disabled] {\n    \tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n    \t}\n    \t.stand-button-emphasised-primary > .material-symbols {\n    \tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n    \t}\n    \t.stand-button-emphasised-primary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-emphasised-primary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-emphasised-primary-md-icon-gap);\n    }\n\n    /* example setup of button/link button style using md size and neutral secondary variant */\n    .stand-button-neutral-secondary {\n    \tcolor: var(--component-button-neutral-secondary-shared-color);\n    \tbackground: var(--component-button-neutral-secondary-shared-background-color);\n    \theight: var(--component-button-neutral-secondary-md-height);\n    \tpadding: var(--component-button-neutral-secondary-md-padding-top)\n    \tvar(--component-button-neutral-secondary-md-padding-right)\n    \tvar(--component-button-neutral-secondary-md-padding-bottom)\n    \tvar(--component-button-neutral-secondary-md-padding-left);\n    \tfont: var(--component-button-neutral-secondary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-neutral-secondary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-neutral-secondary-md-typography-font-width);\n    \tborder: var(--component-button-neutral-secondary-shared-border);\n    \tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n    }\n    .stand-button-neutral-secondary:hover {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-hover-border);\n    }\n    .stand-button-neutral-secondary:active {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-active-border);\n    }\n    .stand-button-neutral-secondary:disabled, .stand-button-neutral-secondary[data-disabled] {\n    \tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n    }\n    .stand-button-neutral-secondary > .material-symbols {\n    \tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n    }\n    .stand-button-neutral-secondary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-neutral-secondary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-neutral-secondary-md-icon-gap);\n    }\n\n";
-export declare const componentHtml = "<div class=\"container flow-column\">\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\">LinkButton</a>\n    \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n    </div>\n\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    </div>\n\n</div>\n";
-export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } from \"@guardian/stand\";\n\n    \t// example of creating a stylesheet in js\n    \tconst sheet = new CSSStyleSheet();\n\n    \t// apply the rules to the sheet\n    \tsheet.replaceSync(`\n    \t/* shared button styles for all variants */\n    \t.js-stand-button {\n    \t\tdisplay: ${componentButton.shared.display};\n    \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n    \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n    \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n    \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n    \t\talign-items: ${componentButton.shared[\"align-items\"]};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n    \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n    \t}\n    \t.js-stand-button:disabled {\n    \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n    \t}\n\n    \t/* example setup of button/link button style using md size and emphasised primary variant */\n    \t.js-stand-button-emphasised-primary {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n    \t\tpadding: ${componentButton[\"emphasised-primary\"].md.padding.top}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.right}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.bottom}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-emphasised-primary:hover {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n    \t}\n    \t.js-stand-button-emphasised-primary:active {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary:disabled, .js-stand-button-emphasised-primary[data-disabled] {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-emphasised-primary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"emphasised-primary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"emphasised-primary\"].md.icon.gap};\n    \t}\n\n    \t/* example setup of button/link button style using md size and neutral secondary variant */\n    \t.js-stand-button-neutral-secondary {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n    \t\tpadding: ${componentButton[\"neutral-secondary\"].md.padding.top}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.right}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.bottom}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-neutral-secondary:hover {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:active {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:disabled, .js-stand-button-neutral-secondary[data-disabled] {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-neutral-secondary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"neutral-secondary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"neutral-secondary\"].md.icon.gap};\n    \t}\n\n    `);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the button components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\">LinkButton</a>\n    \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    \t</div>\n    </div>`;\n\n";
+export declare const componentTsx = "import { LinkButton } from '@guardian/stand/link-button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton href=\"#\">\n          \t\tLinkButton\n\t\t\t</LinkButton>\n\t\t\t<LinkButton isDisabled variant=\"secondary\">\n\t\t\t\tDisabled LinkButton\n\t\t\t</LinkButton>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton\n\t\t\t\thref=\"#\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tLinkButton with Icon\n\t\t\t</LinkButton>\n\t\t\t<LinkButton\n\t\t\t\tisDisabled\n\t\t\t\thref=\"#\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled LinkButton with Icon\n\t\t\t</LinkButton>\n\t\t</div>\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n    .stand-button {\n    \tdisplay: var(--component-button-shared-display);\n    \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n    \ttext-align: var(--component-button-shared-text-align);\n    \tbox-shadow: var(--component-button-shared-box-shadow);\n    \ttext-decoration: var(--component-button-shared-text-decoration);\n    \tcursor: var(--component-button-shared-cursor);\n    \tjustify-content: var(--component-button-shared-justify-content);\n    \talign-items: var(--component-button-shared-align-items);\n    }\n    .stand-button:focus-visible {\n    \toutline: var(--component-button-shared-focus-visible-outline);\n    \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n    }\n    .stand-button:disabled {\n    \tcursor: var(--component-button-shared-disabled-cursor);\n    }\n\n    /* example setup of button/link button style using md size and emphasised primary variant */\n    .stand-button-primary {\n    \tcolor: var(--component-button-primary-shared-color);\n    \tbackground: var(\n    \t\t--component-button-primary-shared-background-color\n    \t);\n    \theight: var(--component-button-primary-md-height);\n    \tpadding: var(--component-button-primary-md-padding-top)\n    \tvar(--component-button-primary-md-padding-right)\n    \tvar(--component-button-primary-md-padding-bottom)\n    \tvar(--component-button-primary-md-padding-left);\n    \tfont: var(--component-button-primary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-primary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-primary-md-typography-font-width);\n    \tborder: var(--component-button-primary-shared-border);\n    \tborder-radius: var(\n    \t\t--component-button-primary-shared-border-radius\n    \t);\n    }\n    .stand-button-primary:hover {\n    \tbackground: var(\n    \t\t--component-button-primary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-hover-border);\n    }\n    .stand-button-primary:active {\n    \tbackground: var(\n    \t\t--component-button-primary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-active-border);\n    }\n    .stand-button-primary:disabled, .stand-button-primary[data-disabled] {\n    \tcolor: var(--component-button-primary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-primary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-primary-shared-disabled-border);\n    \t}\n    \t.stand-button-primary > .material-symbols {\n    \tfont-size: var(--component-button-primary-md-icon-size);\n    \t}\n    \t.stand-button-primary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-primary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-primary-md-icon-gap);\n    }\n\n    /* example setup of button/link button style using md size and neutral secondary variant */\n    .stand-button-tertiary {\n    \tcolor: var(--component-button-tertiary-shared-color);\n    \tbackground: var(--component-button-tertiary-shared-background-color);\n    \theight: var(--component-button-tertiary-md-height);\n    \tpadding: var(--component-button-tertiary-md-padding-top)\n    \tvar(--component-button-tertiary-md-padding-right)\n    \tvar(--component-button-tertiary-md-padding-bottom)\n    \tvar(--component-button-tertiary-md-padding-left);\n    \tfont: var(--component-button-tertiary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-tertiary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-tertiary-md-typography-font-width);\n    \tborder: var(--component-button-tertiary-shared-border);\n    \tborder-radius: var(--component-button-tertiary-shared-border-radius);\n    }\n    .stand-button-tertiary:hover {\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-hover-border);\n    }\n    .stand-button-tertiary:active {\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-active-border);\n    }\n    .stand-button-tertiary:disabled, .stand-button-tertiary[data-disabled] {\n    \tcolor: var(--component-button-tertiary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-tertiary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-tertiary-shared-disabled-border);\n    }\n    .stand-button-tertiary > .material-symbols {\n    \tfont-size: var(--component-button-tertiary-md-icon-size);\n    }\n    .stand-button-tertiary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-tertiary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-tertiary-md-icon-gap);\n    }\n\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-primary\">LinkButton</a>\n    \t<a class=\"stand-button stand-button-tertiary\" data-disabled>Disabled LinkButton</a>\n    </div>\n\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t<a class=\"stand-button stand-button-tertiary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    </div>\n\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } from \"@guardian/stand\";\n\n    \t// example of creating a stylesheet in js\n    \tconst sheet = new CSSStyleSheet();\n\n    \t// apply the rules to the sheet\n    \tsheet.replaceSync(`\n    \t/* shared button styles for all variants */\n    \t.js-stand-button {\n    \t\tdisplay: ${componentButton.shared.display};\n    \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n    \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n    \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n    \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n    \t\talign-items: ${componentButton.shared[\"align-items\"]};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n    \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n    \t}\n    \t.js-stand-button:disabled {\n    \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n    \t}\n\n    \t/* example setup of button/link button style using md size and emphasised primary variant */\n    \t.js-stand-button-primary {\n    \t\tcolor: ${componentButton[\"primary\"].shared.color};\n    \t\tbackground: ${componentButton[\"primary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"primary\"].md.height};\n    \t\tpadding: ${componentButton[\"primary\"].md.padding.top}\n    \t\t${componentButton[\"primary\"].md.padding.right}\n    \t\t${componentButton[\"primary\"].md.padding.bottom}\n    \t\t${componentButton[\"primary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"primary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"primary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"primary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"primary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"primary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-primary:hover {\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":hover\"].border}\n    \t}\n    \t.js-stand-button-primary:active {\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-primary:disabled, .js-stand-button-primary[data-disabled] {\n    \t\tcolor: ${componentButton[\"primary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"primary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"primary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-primary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"primary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-primary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"primary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"primary\"].md.icon.gap};\n    \t}\n\n    \t/* example setup of button/link button style using md size and neutral secondary variant */\n    \t.js-stand-button-tertiary {\n    \t\tcolor: ${componentButton[\"tertiary\"].shared.color};\n    \t\tbackground: ${componentButton[\"tertiary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"tertiary\"].md.height};\n    \t\tpadding: ${componentButton[\"tertiary\"].md.padding.top}\n    \t\t${componentButton[\"tertiary\"].md.padding.right}\n    \t\t${componentButton[\"tertiary\"].md.padding.bottom}\n    \t\t${componentButton[\"tertiary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"tertiary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"tertiary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"tertiary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"tertiary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"tertiary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-tertiary:hover {\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":hover\"].border};\n    \t}\n    \t.js-stand-button-tertiary:active {\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-tertiary:disabled, .js-stand-button-tertiary[data-disabled] {\n    \t\tcolor: ${componentButton[\"tertiary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"tertiary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"tertiary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-tertiary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"tertiary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-tertiary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"tertiary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"tertiary\"].md.icon.gap};\n    \t}\n\n    `);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the button components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-primary\">LinkButton</a>\n    \t\t<a class=\"js-stand-button js-stand-button-tertiary\" data-disabled>Disabled LinkButton</a>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t\t<a class=\"js-stand-button js-stand-button-tertiary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    \t</div>\n    </div>`;\n\n";

package/dist/types/components/link-button/styles.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
-import type { ButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
 export type LinkButtonTheme = ButtonTheme;
+export type PartialLinkButtonTheme = PartialButtonTheme;
 export declare const defaultLinkButtonTheme: ButtonTheme;
 export declare const linkButtonStyles: (theme: {
     shared: {
@@ -19,7 +20,7 @@ export declare const linkButtonStyles: (theme: {
             'outline-offset': string;
         };
     };
-    'emphasised-primary': {
+    primary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -144,7 +145,7 @@ export declare const linkButtonStyles: (theme: {
             };
         };
     };
-    'emphasised-secondary': {
+    secondary: {
         shared: {
             color: string;
             backgroundColor: string;
@@ -269,132 +270,7 @@ export declare const linkButtonStyles: (theme: {
             };
         };
     };
-    'neutral-primary': {
-        shared: {
-            color: string;
-            backgroundColor: string;
-            borderRadius: string;
-            border: string;
-            ':hover': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':active': {
-                backgroundColor: string;
-                border: string;
-            };
-            ':disabled': {
-                color: string;
-                backgroundColor: string;
-                border: string;
-            };
-        };
-        xs: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        sm: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        md: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-        lg: {
-            height: string;
-            padding: {
-                top: string;
-                right: string;
-                bottom: string;
-                left: string;
-                withIcon: {
-                    iconLeft: {
-                        left: string;
-                    };
-                };
-            };
-            typography: {
-                font: string;
-                letterSpacing: string;
-                fontWidth: number;
-            };
-            icon: {
-                size: string;
-                gap: string;
-            };
-            iconButton: {
-                width: string;
-            };
-        };
-    };
-    'neutral-secondary': {
+    tertiary: {
         shared: {
             color: string;
             backgroundColor: string;

package/dist/types/components/link-button/types.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface LinkButtonProps extends DefaultProps<LinkButtonTheme, RACLinkPr
     /**
      * Size variant of the link button
      */
-    size?: keyof Omit<LinkButtonTheme['emphasised-primary'], 'shared'>;
+    size?: keyof Omit<LinkButtonTheme['primary'], 'shared'>;
     /**
      * Variant of the button
      */

package/dist/types/components/menu/Menu.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { MenuItemProps, MenuProps, MenuSectionProps, MenuSeparatorProps } from './types';
+export declare function MenuSeparator({ theme, cssOverrides, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuToggle({ children }: DefaultPropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuSection({ name, size, theme, cssOverrides, children, ...props }: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ label, description, aside, icon, size, theme, cssOverrides, ...props }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Menu({ theme, size, popoverProps, menuTriggerProps, children, cssOverrides, ...props }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/menu/sandbox.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const componentName = "Menu";
+export declare const componentTsx = "import {\n\tMenu,\n\tMenuToggle,\n\tMenuSection,\n\tMenuItem,\n\tMenuSeparator,\n} from '@guardian/stand/menu';\nimport { IconButton } from '@guardian/stand/icon-button';\n\nexport const Component = () => (\n\t<Menu>\n\t\t<MenuToggle>\n\t\t\t<IconButton symbol=\"settings\" ariaLabel=\"Open menu\" />\n\t\t</MenuToggle>\n\n\t\t<MenuSection name=\"File actions\">\n\t\t\t<MenuItem\n\t\t\t\ticon=\"open_in_new\"\n\t\t\t\tlabel=\"Open\"\n\t\t\t\tdescription=\"Open in a new tab\"\n\t\t\t\tonAction={() => alert('open')}\n\t\t\t/>\n\t\t\t<MenuItem\n\t\t\t\ticon=\"edit\"\n\t\t\t\tlabel=\"Rename\"\n\t\t\t\tdescription=\"Rename the file\"\n\t\t\t\tonAction={() => alert('rename')}\n\t\t\t/>\n\t\t\t<MenuItem label=\"Delete\" onAction={() => alert('delete')} />\n\t\t</MenuSection>\n\n\t\t<MenuSeparator />\n\n\t\t<MenuSection>\n\t\t\t<MenuItem id=\"files\" label=\"Show files\" />\n\t\t\t<MenuItem id=\"folders\" label=\"Show folders\" />\n\t\t</MenuSection>\n\t</Menu>\n);\n";
+export declare const componentCss = "@import '@guardian/stand/component/menu.css';\n@import \"@guardian/stand/fonts/MaterialSymbolsOutlined.css\";\n\n/* Popover container */\n.stand-popover {\n\toverflow: var(--component-menu-popover-shared-overflow);\n\tmax-width: var(--component-menu-popover-md-max-width);\n\twidth: var(--component-menu-popover-md-width);\n\tbox-shadow: var(--component-menu-popover-shared-shadow);\n}\n\n/* Menu list */\n.stand-menu {\n\tdisplay: var(--component-menu-menu-shared-display);\n\tflex-direction: var(--component-menu-menu-shared-flex-direction);\n\tbackground: var(--component-menu-menu-shared-background-color);\n\tborder: var(--component-menu-menu-shared-border);\n}\n\n/* Menu section header */\n.stand-menu-section-header {\n\tdisplay: var(--component-menu-menu-section-header-shared-display);\n\talign-items: var(--component-menu-menu-section-header-shared-align-items);\n\tpadding: var(--component-menu-menu-section-header-shared-padding-top)\n\t\tvar(--component-menu-menu-section-header-shared-padding-right)\n\t\tvar(--component-menu-menu-section-header-shared-padding-bottom)\n\t\tvar(--component-menu-menu-section-header-shared-padding-left);\n\theight: var(--component-menu-menu-section-header-md-height);\n\tbackground: var(--component-menu-menu-section-header-shared-background-color);\n\tfont: var(--component-menu-menu-section-header-md-typography-font);\n\tletter-spacing: var(--component-menu-menu-section-header-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-section-header-md-typography-font-width);\n}\n\n/* Menu item */\n.stand-menu-item {\n\tdisplay: var(--component-menu-menu-item-shared-display);\n\tgrid-template-columns: var(--component-menu-menu-item-shared-grid-template-columns);\n\tgrid-template-areas: var(--component-menu-menu-item-shared-grid-template-areas);\n\tgap: var(--component-menu-menu-item-shared-gap);\n\talign-items: var(--component-menu-menu-item-shared-align-items);\n\tpadding: var(--component-menu-menu-item-shared-padding-top)\n\t\tvar(--component-menu-menu-item-shared-padding-right)\n\t\tvar(--component-menu-menu-item-shared-padding-bottom)\n\t\tvar(--component-menu-menu-item-shared-padding-left);\n\tborder-bottom: var(--component-menu-menu-item-shared-border-bottom);\n\tcursor: pointer;\n}\n.stand-menu-item-with-description {\n\tgrid-template-areas: var(--component-menu-menu-item-shared-grid-template-areas-with-description);\n}\n.stand-menu-item:last-child {\n\tborder-bottom: var(--component-menu-menu-item-shared-last-child-border-bottom);\n}\n.stand-menu-item:hover {\n\tbackground: var(--component-menu-menu-item-shared-hover-background-color);\n}\n.stand-menu-item:focus-visible {\n\toutline: var(--component-menu-menu-item-shared-focus-visible-outline);\n\toutline-offset: var(--component-menu-menu-item-shared-focus-visible-outline-offset);\n\tbackground: var(--component-menu-menu-item-shared-hover-background-color);\n}\n\n.stand-menu-item-icon {\n\tgrid-area: var(--component-menu-menu-item-shared-icon-grid-area);\n\talign-self: var(--component-menu-menu-item-shared-icon-align-self);\n\tcolor: var(--component-menu-menu-item-shared-icon-color);\n\tfont-size: var(--component-menu-menu-item-md-icon-size);\n\tline-height: var(--component-menu-menu-item-md-icon-line-height);\n}\n.stand-menu-item-label {\n\tgrid-area: var(--component-menu-menu-item-shared-label-grid-area);\n\tcolor: var(--component-menu-menu-item-shared-label-color);\n\tfont: var(--component-menu-menu-item-shared-label-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-label-typography-font-width);\n}\n.stand-menu-item-description {\n\tgrid-area: var(--component-menu-menu-item-shared-description-grid-area);\n\tcolor: var(--component-menu-menu-item-shared-description-color);\n\tfont: var(--component-menu-menu-item-shared-description-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-description-typography-font-width);\n}\n.stand-menu-item-aside {\n\tgrid-area: var(--component-menu-menu-item-shared-aside-grid-area);\n\tjustify-self: var(--component-menu-menu-item-shared-aside-justify-self);\n\tcolor: var(--component-menu-menu-item-shared-aside-color);\n\tfont: var(--component-menu-menu-item-shared-aside-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-aside-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-aside-typography-font-width);\n}\n\n/* Separator */\n.stand-menu-separator {\n\tbackground-color: var(--component-menu-menu-separator-shared-background-color);\n\theight: var(--component-menu-menu-separator-shared-height);\n\twidth: var(--component-menu-menu-separator-shared-width);\n}\n";
+export declare const componentHtml = "<div class=\"stand-popover\">\n\t<div class=\"stand-menu\">\n\t\t<div>\n\t\t\t<div class=\"stand-menu-section-header\">File actions</div>\n\t\t\t<div class=\"stand-menu-item stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-icon material-symbols\">open_in_new</span>\n\t\t\t\t<span class=\"stand-menu-item-label\">Open</span>\n\t\t\t\t<span class=\"stand-menu-item-description\">Open in a new tab</span>\n\t\t\t\t<span class=\"stand-menu-item-aside\">\u2318O</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Rename</span>\n\t\t\t\t<span class=\"stand-menu-item-description\">Rename the file</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Delete</span>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"stand-menu-separator\"></div>\n\t\t<div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Show files</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Show folders</span>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n";
+export declare const componentJs = "import { componentMenu } from \"@guardian/stand\";\n\nconst { menu, menuItem, menuSection, menuSeparator, popover } = componentMenu;\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\t/* Popover container */\n\t.js-stand-popover {\n\t\toverflow: ${popover.shared.overflow};\n\t\tmax-width: ${popover.md['max-width']};\n\t\twidth: ${popover.md.width};\n\t\tbox-shadow: ${popover.shared.shadow};\n\t}\n\n\t/* Menu list */\n\t.js-stand-menu {\n\t\tdisplay: ${menu.shared.display};\n\t\tflex-direction: ${menu.shared['flex-direction']};\n\t\tbackground: ${menu.shared['background-color']};\n\t\tborder: ${menu.shared.border};\n\t}\n\n\t/* Menu section header */\n\t.js-stand-menu-section-header {\n\t\tdisplay: ${menuSection.header.shared.display};\n\t\talign-items: ${menuSection.header.shared['align-items']};\n\t\theight: ${menuSection.header.md.height};\n\t\tbackground: ${menuSection.header.shared['background-color']};\n\t\tpadding: ${menuSection.header.shared.padding.top} ${menuSection.header.shared.padding.right} ${menuSection.header.shared.padding.bottom} ${menuSection.header.shared.padding.left};\n\t\tfont: ${menuSection.header.md.typography.font};\n\t\tletter-spacing: ${menuSection.header.md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuSection.header.md.typography.fontWidth};\n\t}\n\n\t/* Menu item */\n\t.js-stand-menu-item {\n\t\tdisplay: ${menuItem.shared.display};\n\t\tgrid-template-columns: ${menuItem.shared['grid-template-columns']};\n\t\tgrid-template-areas: ${menuItem.shared['grid-template-areas']};\n\t\tgap: ${menuItem.shared.gap};\n\t\talign-items: ${menuItem.shared['align-items']};\n\t\tpadding: ${menuItem.shared.padding.top} ${menuItem.shared.padding.right} ${menuItem.shared.padding.bottom} ${menuItem.shared.padding.left};\n\t\tborder-bottom: ${menuItem.shared['border-bottom']};\n\t\tcursor: pointer;\n\t}\n\t.js-stand-menu-item-with-description {\n\t\tgrid-template-areas: ${menuItem.shared['grid-template-areas-with-description']};\n\t}\n\t.js-stand-menu-item:last-child {\n\t\tborder-bottom: ${menuItem.shared[':last-child']['border-bottom']};\n\t}\n\t.js-stand-menu-item:hover {\n\t\tbackground: ${menuItem.shared[':hover']['background-color']};\n\t}\n\t.js-stand-menu-item:focus-visible {\n\t\toutline: ${menuItem.shared[':focus-visible'].outline};\n\t\toutline-offset: ${menuItem.shared[':focus-visible']['outline-offset']};\n\t\tbackground: ${menuItem.shared[':hover']['background-color']};\n\t}\n\n\t.js-stand-menu-item-icon {\n\t\tgrid-area: ${menuItem.shared.icon['grid-area']};\n\t\talign-self: ${menuItem.shared.icon['align-self']};\n\t\tcolor: ${menuItem.shared.icon.color};\n\t\tfont-size: ${menuItem.md.icon.size};\n\t\tline-height: ${menuItem.md.icon['line-height']};\n\t}\n\t.js-stand-menu-item-label {\n\t\tgrid-area: ${menuItem.shared.label['grid-area']};\n\t\tcolor: ${menuItem.shared.label.color};\n\t\tfont: ${menuItem.shared.label.typography.font};\n\t\tletter-spacing: ${menuItem.shared.label.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.label.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-description {\n\t\tgrid-area: ${menuItem.shared.description['grid-area']};\n\t\tcolor: ${menuItem.shared.description.color};\n\t\tfont: ${menuItem.shared.description.typography.font};\n\t\tletter-spacing: ${menuItem.shared.description.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.description.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-aside {\n\t\tgrid-area: ${menuItem.shared.aside['grid-area']};\n\t\tjustify-self: ${menuItem.shared.aside['justify-self']};\n\t\tcolor: ${menuItem.shared.aside.color};\n\t\tfont: ${menuItem.shared.aside.typography.font};\n\t\tletter-spacing: ${menuItem.shared.aside.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.aside.typography.fontWidth};\n\t}\n\n\t/* Separator */\n\t.js-stand-menu-separator {\n\t\tbackground-color: ${menuSeparator.shared['background-color']};\n\t\theight: ${menuSeparator.shared.height};\n\t\twidth: ${menuSeparator.shared.width};\n\t}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the menu components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-popover\">\n\t\t<div class=\"js-stand-menu\">\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-section-header\">File actions</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-icon material-symbols\">open_in_new</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Open</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Open in a new tab</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-aside\">\u2318O</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Rename</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Rename the file</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Delete</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-menu-separator\"></div>\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show files</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show folders</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/menu/styles.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentMenu } from '../../styleD/build/typescript/component/menu';
+import type { DeepPartial, Prettify } from '../../util/types';
+import type { MenuItemProps, MenuPopoverProps, MenuSectionProps } from './types';
+export type MenuTheme = Prettify<ComponentMenu['menu']>;
+export type PartialMenuTheme = DeepPartial<MenuTheme>;
+export declare const defaultMenuTheme: MenuTheme;
+export declare const menuStyles: (theme: MenuTheme) => SerializedStyles;
+export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
+export type PartialMenuSectionTheme = DeepPartial<MenuSectionTheme>;
+export declare const defaultMenuSectionTheme: MenuSectionTheme;
+export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }: Required<Pick<MenuSectionProps, 'size'>>) => SerializedStyles;
+export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
+export type PartialMenuItemTheme = DeepPartial<MenuItemTheme>;
+export declare const defaultMenuItemTheme: MenuItemTheme;
+export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>, isFocusVisible?: boolean) => SerializedStyles;
+export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
+export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedStyles;
+export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;
+export declare const menuItemAsideStyles: (theme: MenuItemTheme) => SerializedStyles;
+export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
+export type PartialMenuSeparatorTheme = DeepPartial<MenuSeparatorTheme>;
+export declare const defaultMenuSeparatorTheme: MenuSeparatorTheme;
+export declare const menuSeparatorStyles: (theme: MenuSeparatorTheme) => SerializedStyles;
+export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
+export type PartialMenuPopoverTheme = DeepPartial<MenuPopoverTheme>;
+export declare const defaultMenuPopoverTheme: MenuPopoverTheme;
+export declare const menuPopoverStyles: (theme: MenuPopoverTheme, { size }: Required<Pick<MenuPopoverProps, 'size'>>) => SerializedStyles;

package/dist/types/components/menu/types.d.ts ADDED Viewed

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import type { MenuItemProps as RACMenuItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, PopoverProps as RACPopoverProps, SeparatorProps as RACSeparatorProps } from 'react-aria-components';
+import type { DefaultProps, DefaultPropsWithChildren } from '../../util/types';
+import type { IconProps } from '../icon/types';
+import type { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme } from './styles';
+export interface MenuProps extends DefaultPropsWithChildren<MenuTheme, RACMenuProps<object>['className']>, Omit<RACMenuProps<object>, 'children'> {
+    /**
+     * Size variant of the Menu
+     */
+    size?: MenuPopoverProps['size'];
+    /**
+     * Props to pass to the underlying React Aria Popover component
+     */
+    popoverProps?: Omit<MenuPopoverProps, 'children' | 'size'>;
+    /**
+     * Props to pass to the underlying React Aria MenuTrigger component
+     */
+    menuTriggerProps?: Omit<MenuTriggerProps, 'children'>;
+}
+export interface MenuSectionProps extends DefaultPropsWithChildren<MenuSectionTheme, RACMenuSectionProps<object>['className']>, Omit<RACMenuSectionProps<object>, 'children'> {
+    /**
+     * The (optional) name of the section to be displayed in a header
+     */
+    name?: string;
+    /**
+     * Size variant of the MenuSection, this doesn't need to be passed if the MenuSection is a child of Menu, as it will inherit the size of the Menu.
+     */
+    size?: MenuPopoverProps['size'];
+    /**
+     * Disable the selectionMode option for the time being, as we currently don't have a checkbox or radio button component to use for the selectable menu items that this would require. This can be added in the future when we have these components available.
+     */
+    selectionMode?: 'none';
+}
+export interface MenuItemProps extends DefaultProps<MenuItemTheme, RACMenuItemProps['className']>, Omit<RACMenuItemProps, 'children'> {
+    /**
+     * The main label of the menu item, this can be a string or any React node if more complex layout is needed.
+     */
+    label: React.ReactNode;
+    /**
+     * Optional description text for the menu item, this can be a string or any React node if more complex layout is needed. The description will be rendered below the label in a smaller font size.
+     */
+    description?: React.ReactNode;
+    /**
+     * Optional content to be rendered on the right side of the menu item, this can be used for things like keyboard shortcuts or badges. This can be a string or any React node if more complex layout is needed.
+     */
+    aside?: React.ReactNode;
+    /**
+     * Icon to be rendered within the left side of the menu item. Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
+     */
+    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+    /**
+     * Size variant of the MenuItem, this doesn't need to be passed if the MenuItem is a child of Menu, as it will inherit the size of the Menu.
+     */
+    size?: MenuPopoverProps['size'];
+}
+export type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, RACSeparatorProps['className']>;
+export interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, RACPopoverProps['className']>, RACPopoverProps {
+    /**
+     * Size variant of the Popover, this doesn't need to be passed if the Popover is a child of Menu, as it will inherit the size of the Menu.
+     */
+    size?: keyof Omit<MenuPopoverTheme, 'shared'>;
+}
+export type MenuTriggerProps = RACMenuTriggerProps;

package/dist/types/components/topbar/TopBar.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { TopBarProps } from './types';
+export declare function TopBarContainerRight({ children, }: {
+    children: TopBarProps['children'];
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TopBarContainerLeft({ children, }: {
+    children: TopBarProps['children'];
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function TopBar({ children, theme, cssOverrides, className, ...props }: TopBarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/topbar/sandbox.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const componentName = "TopBar";
+export declare const componentTsx = "import { TopBar, TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<TopBar><TopBarToolName name=\"Composer\" favicon={{ letter: \"C\" }} /></TopBar>\n);\n";
+export declare const componentCss = "\n/* import the styles */\n@import '@guardian/stand/component/TopBar.css';\n@import '@guardian/stand/component/favicon.css';\n\n.stand-top-bar {\n\tdisplay: var(--component-top-bar-display);\n\tjustify-content: var(--component-top-bar-justify-content);\n\theight: var(--component-top-bar-height);\n\tborder: var(--component-top-bar-border);\n}\n\n.stand-top-bar-lhs {\n\tdisplay: var(--component-top-bar-display);\n}\n\n.stand-top-bar-tool-name {\n\tdisplay: var(--component-top-bar-tool-name-display);\n\talign-items: var(--component-top-bar-tool-name-align-items);\n\tgap: var(--component-top-bar-tool-name-gap);\n\tfont: var(--component-top-bar-tool-name-typography-font);\n\tletter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-typography-font-width);\n}\n\n.stand-favicon {\n\t\tbackground-color: var(--component-favicon-color-background);\n\t\tdisplay: var(--component-favicon-display);\n\t\talign-items: var(--component-favicon-align-items);\n\t\tjustify-content: var(--component-favicon-justify-content);\n\t\twidth: var(--component-favicon-size);\n\t\theight: var(--component-favicon-size);\n\t\tuser-select: var(--component-favicon-user-select);\n\t\tcolor: var(--component-favicon-color-text);\n\t\tfont: var(--component-favicon-typography-font);\n\t\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n}\n\n.stand-top-bar-item {\n\tdisplay: var(--component-top-bar-item-display);\n\talign-items: var(--component-top-bar-item-align-items);\n\theight: var(--component-top-bar-item-height);\n\tpadding: var(--component-top-bar-item-sm-padding-top) var(--component-top-bar-item-sm-padding-right) var(--component-top-bar-item-sm-padding-bottom) var(--component-top-bar-item-sm-padding-left);\n\tborder-right: var(--component-top-bar-item-border);\n}\n\n";
+export declare const componentHtml = "\n\t<div class=\"stand-top-bar\">\n\t\t<div class=\"stand-top-bar-lhs\">\n\t\t\t<div class=\"stand-top-bar-tool-name stand-top-bar-item\">\n\t\t\t\t<div class=\"stand-favicon\">C</div>\n\t\t\t\t<div>Composer</div>\n\t\t\t</div>\n\t\t\t<div class=\"stand-top-bar-item\">Item 1</div>\n\t\t</div>\n\t</div>\n";
+export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\nimport { componentFavicon } from \"@guardian/stand\";\nconst style = `\n\tdisplay: ${componentTopBar.display};\n\tjustify-content: ${componentTopBar['justify-content']};\n\theight: ${componentTopBar.height};\n\tborder: ${componentTopBar.border};\n`;\n\nconst lhsStyle = `\n\tdisplay: ${componentTopBar.display};\n`;\n\nconst toolNameStyle = `display: ${componentTopBar.ToolName.display};\n\talign-items: ${componentTopBar.ToolName['align-items']};\n\tgap: ${componentTopBar.ToolName.gap};\n\tfont: ${componentTopBar.ToolName.typography.font};\n\tletter-spacing: ${componentTopBar.ToolName.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.typography.fontWidth};\n`;\n\nconst faviconStyle = `\n\tbackground-color: ${componentFavicon.color.background};\n\tdisplay: ${componentFavicon.display};\n\talign-items: ${componentFavicon['align-items']};\n\tjustify-content: ${componentFavicon['justify-content']};\n\twidth: ${componentFavicon.size};\n\theight: ${componentFavicon.size};\n\tuser-select: ${componentFavicon.userSelect};\n\tcolor: ${componentFavicon.color.text};\n\tfont: ${componentFavicon.typography.font};\n\tletter-spacing: ${componentFavicon.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentFavicon.typography['font-width']};\n`;\n\nconst topBarItemStyle = `display: ${componentTopBar.Item.display};\n\talign-items: ${componentTopBar.Item['align-items']};\n\theight: ${componentTopBar.Item.height};\n\tpadding: ${componentTopBar.Item.sm.padding.top} ${componentTopBar.Item.sm.padding.right} ${componentTopBar.Item.sm.padding.bottom} ${componentTopBar.Item.sm.padding.left};\n\tborder-right: ${componentTopBar.Item.border};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div style=\"${style}\">\n\t\t<div style=\"${lhsStyle}\">\n\t\t\t<div style=\"${topBarItemStyle}\">\n\t\t\t\t<div style=\"${toolNameStyle}\">\n\t\t\t\t\t<div style=\"${faviconStyle}\">C</div>\n\t\t\t\t\t<div>Composer</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div style=\"${topBarItemStyle}\">Item 1</div>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/topbar/styles.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentTopBar } from '../../styleD/build/typescript/component/TopBar';
+import type { DeepPartial, Prettify } from '../../util/types';
+export type TopBarTheme = Prettify<ComponentTopBar>;
+export type PartialTopBarTheme = DeepPartial<TopBarTheme>;
+export declare const defaultTopBarTheme: TopBarTheme;
+export declare const topBarStyles: (theme: TopBarTheme) => SerializedStyles;
+export declare const topBarContainerLeftStyles: (theme: TopBarTheme) => SerializedStyles;
+export declare const topBarContainerRightStyles: (theme: TopBarTheme) => SerializedStyles;

package/dist/types/components/topbar/topBarItem/TopBarItem.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { TopBarItemProps } from './types';
2	+ export declare function TopBarItem({ children, alignment, theme, cssOverrides, className, size, ...props }: TopBarItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/topbar/topBarItem/sandbox.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const componentName = "TopBarItem";
+export declare const componentTsx = "import { TopBarItem } from '@guardian/stand/TopBar';\n\nexport const Component = () => (\n\t<TopBarItem>Hello</TopBarItem>\n);\n";
+export declare const componentCss = "\n/* import the topbaritem styles */\n@import '@guardian/stand/component/TopBar.css';\n\n.stand-top-bar-item {\n\tdisplay: var(--component-top-bar-item-display);\n\talign-items: var(--component-top-bar-item-align-items);\n\theight: var(--component-top-bar-item-height);\n\tpadding: var(--component-top-bar-item-sm-padding-top) var(--component-top-bar-item-sm-padding-right) var(--component-top-bar-item-sm-padding-bottom) var(--component-top-bar-item-sm-padding-left);\n\tborder-right: var(--component-top-bar-item-border);\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-top-bar-item\">Hello</div>\n</div>\n";
+export declare const componentJs = "\nimport { componentTopBar } from \"@guardian/stand\";\n\nconst style = `\n\tdisplay: ${componentTopBar.Item.display};\n\talign-items: ${componentTopBar.Item['align-items']};\n\theight: ${componentTopBar.Item.height};\n\tpadding: ${componentTopBar.Item.sm.padding.top} ${componentTopBar.Item.sm.padding.right} ${componentTopBar.Item.sm.padding.bottom} ${componentTopBar.Item.sm.padding.left};\n\tborder-right: ${componentTopBar.Item.border};\n`;\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">Hello</div>\n\t</div>\n`;\n";

package/dist/types/components/topbar/topBarItem/styles.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentTopBar } from '../../../styleD/build/typescript/component/TopBar';
+import type { DeepPartial, Prettify } from '../../../util/types';
+import type { TopBarItemProps } from './types';
+export type TopBarItemTheme = Prettify<ComponentTopBar['Item']>;
+export type PartialTopBarItemTheme = DeepPartial<TopBarItemTheme>;
+export declare const defaultTopBarItemTheme: TopBarItemTheme;
+export declare const topBarItemStyles: (theme: TopBarItemTheme, alignment: 'left' | 'right', { size }: Required<Pick<TopBarItemProps, 'size'>>) => SerializedStyles;

package/dist/types/components/topbar/topBarItem/types.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { DefaultProps } from '../../../util/types';
+import type { TopBarItemTheme } from './styles';
+export interface TopBarItemProps extends DefaultProps<TopBarItemTheme> {
+    children?: React.ReactNode;
+    /**
+     * Determines the alignment of the item within the top bar
+     */
+    alignment?: 'left' | 'right';
+    /**
+     * Determines how much width the item takes up in the top bar, defaults to `'md'`
+     */
+    size?: 'sm' | 'md' | 'lg';
+}

package/dist/types/components/topbar/topBarNavigation/TopBarNavigation.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import type { TopBarNavigationProps } from './types';
2	+ export declare function TopBarNavigation({ text, size, isSelected, icon, menuChildren, href, onPress, isDisabled, alignment, theme, cssOverrides, className, ...props }: TopBarNavigationProps): import("@emotion/react/jsx-runtime").JSX.Element;