@guardian/stand 0.0.16 → 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.
- package/README.md +1 -0
- package/dist/TopBar.cjs +9 -3
- package/dist/TopBar.js +4 -1
- package/dist/components/button/Button.cjs +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/icon-button/IconButton.cjs +1 -1
- package/dist/components/icon-button/IconButton.js +1 -1
- package/dist/components/icon-link-button/IconLinkButton.cjs +1 -1
- package/dist/components/icon-link-button/IconLinkButton.js +1 -1
- package/dist/components/link-button/LinkButton.cjs +1 -1
- package/dist/components/link-button/LinkButton.js +1 -1
- package/dist/components/menu/styles.cjs +1 -0
- package/dist/components/menu/styles.js +1 -0
- package/dist/components/topbar/TopBar.cjs +101 -0
- package/dist/components/topbar/TopBar.js +63 -0
- package/dist/components/topbar/styles.cjs +30 -0
- package/dist/components/topbar/styles.js +25 -0
- package/dist/components/topbar/topBarItem/TopBarItem.cjs +28 -0
- package/dist/components/topbar/topBarItem/TopBarItem.js +10 -0
- package/dist/components/topbar/topBarItem/styles.cjs +20 -0
- package/dist/components/topbar/topBarItem/styles.js +17 -0
- package/dist/components/topbar/topBarNavigation/TopBarNavigation.cjs +70 -0
- package/dist/components/topbar/topBarNavigation/TopBarNavigation.js +23 -0
- package/dist/components/topbar/topBarNavigation/styles.cjs +68 -0
- package/dist/components/topbar/topBarNavigation/styles.js +61 -0
- package/dist/components/topbar/{toolName → topBarToolName}/TopBarToolName.cjs +3 -2
- package/dist/components/topbar/topBarToolName/TopBarToolName.js +13 -0
- package/dist/styleD/build/css/base/typography.css +3 -3
- package/dist/styleD/build/css/component/TopBar.css +55 -1
- package/dist/styleD/build/css/component/avatar.css +1 -1
- package/dist/styleD/build/css/component/button.css +177 -255
- package/dist/styleD/build/css/component/favicon.css +1 -1
- package/dist/styleD/build/css/component/menu.css +5 -4
- package/dist/styleD/build/css/component/tagAutocomplete.css +1 -1
- package/dist/styleD/build/css/component/tagTable.css +1 -1
- package/dist/styleD/build/css/component/topBarItem.css +7 -0
- package/dist/styleD/build/css/component/userMenu.css +6 -6
- package/dist/styleD/build/css/semantic/colors.css +45 -46
- package/dist/styleD/build/css/semantic/sizing.css +1 -0
- package/dist/styleD/build/css/semantic/typography.css +30 -30
- package/dist/styleD/build/typescript/base/typography.cjs +3 -3
- package/dist/styleD/build/typescript/base/typography.js +3 -3
- package/dist/styleD/build/typescript/component/TopBar.cjs +94 -0
- package/dist/styleD/build/typescript/component/TopBar.js +94 -0
- package/dist/styleD/build/typescript/component/button.cjs +5 -130
- package/dist/styleD/build/typescript/component/button.js +5 -130
- package/dist/styleD/build/typescript/component/menu.cjs +2 -1
- package/dist/styleD/build/typescript/component/menu.js +2 -1
- package/dist/styleD/build/typescript/semantic/colors.cjs +47 -52
- package/dist/styleD/build/typescript/semantic/colors.js +47 -52
- package/dist/styleD/build/typescript/semantic/sizing.cjs +1 -0
- package/dist/styleD/build/typescript/semantic/sizing.js +1 -0
- package/dist/types/TopBar.d.ts +12 -3
- package/dist/types/components/button/sandbox.d.ts +4 -4
- package/dist/types/components/button/types.d.ts +1 -1
- package/dist/types/components/icon-button/sandbox.d.ts +4 -4
- package/dist/types/components/icon-button/styles.d.ts +3 -128
- package/dist/types/components/icon-button/types.d.ts +1 -1
- package/dist/types/components/icon-link-button/sandbox.d.ts +4 -4
- package/dist/types/components/icon-link-button/styles.d.ts +3 -128
- package/dist/types/components/icon-link-button/types.d.ts +1 -1
- package/dist/types/components/link-button/sandbox.d.ts +4 -4
- package/dist/types/components/link-button/styles.d.ts +3 -128
- package/dist/types/components/link-button/types.d.ts +1 -1
- package/dist/types/components/topbar/TopBar.d.ts +8 -0
- package/dist/types/components/topbar/sandbox.d.ts +5 -0
- package/dist/types/components/topbar/styles.d.ts +9 -0
- package/dist/types/components/topbar/topBarItem/TopBarItem.d.ts +2 -0
- package/dist/types/components/topbar/topBarItem/sandbox.d.ts +5 -0
- package/dist/types/components/topbar/topBarItem/styles.d.ts +8 -0
- package/dist/types/components/topbar/topBarItem/types.d.ts +14 -0
- package/dist/types/components/topbar/topBarNavigation/TopBarNavigation.d.ts +2 -0
- package/dist/types/components/topbar/topBarNavigation/sandbox.d.ts +5 -0
- package/dist/types/components/topbar/topBarNavigation/styles.d.ts +12 -0
- package/dist/types/components/topbar/topBarNavigation/types.d.ts +44 -0
- package/dist/types/components/topbar/types.d.ts +3 -0
- package/dist/types/styleD/build/typescript/base/typography.d.ts +3 -3
- package/dist/types/styleD/build/typescript/component/TopBar.d.ts +94 -0
- package/dist/types/styleD/build/typescript/component/button.d.ts +3 -128
- package/dist/types/styleD/build/typescript/component/menu.d.ts +1 -0
- package/dist/types/styleD/build/typescript/semantic/colors.d.ts +44 -49
- package/dist/types/styleD/build/typescript/semantic/sizing.d.ts +1 -0
- package/dist/util/css/reset.css +10 -0
- package/dist/util/reset.css.cjs +1 -1
- package/dist/util/reset.css.js +1 -1
- package/package.json +14 -16
- package/dist/components/topbar/toolName/TopBarToolName.js +0 -12
- /package/dist/components/topbar/{toolName → topBarToolName}/styles.cjs +0 -0
- /package/dist/components/topbar/{toolName → topBarToolName}/styles.js +0 -0
- /package/dist/types/components/topbar/{toolName → topBarToolName}/TopBarToolName.d.ts +0 -0
- /package/dist/types/components/topbar/{toolName → topBarToolName}/sandbox.d.ts +0 -0
- /package/dist/types/components/topbar/{toolName → topBarToolName}/styles.d.ts +0 -0
- /package/dist/types/components/topbar/{toolName → topBarToolName}/types.d.ts +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const componentName = "Button";
|
|
2
|
-
export declare const componentTsx = "import { Button } from '@guardian/stand/button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<Button onPress={() => alert('Button Clicked from React')}>Button</Button>\n\t\t\t<Button isDisabled onPress={() => alert('Button Clicked from React')}>\n\t\t\t\tDisabled Button\n\t\t\t</Button>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Button\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"
|
|
3
|
-
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-
|
|
4
|
-
export declare const componentHtml = "<div class=\"container flow-column\">\n <div class=\"container\">\n \t<button class=\"stand-button stand-button-
|
|
5
|
-
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-
|
|
2
|
+
export declare const componentTsx = "import { Button } from '@guardian/stand/button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<Button onPress={() => alert('Button Clicked from React')}>Button</Button>\n\t\t\t<Button isDisabled onPress={() => alert('Button Clicked from React')}>\n\t\t\t\tDisabled Button\n\t\t\t</Button>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Button\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tButton with Icon\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tisDisabled\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled Button with Icon\n\t\t\t</Button>\n\t\t</div>\n\t</>\n);\n\n";
|
|
3
|
+
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 {\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 {\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";
|
|
4
|
+
export declare const componentHtml = "<div class=\"container flow-column\">\n <div class=\"container\">\n \t<button class=\"stand-button stand-button-primary\">Button</button>\n \t<button class=\"stand-button stand-button-primary\" disabled>Disabled Button</button>\n </div>\n\n <div class=\"container\">\n \t<button class=\"stand-button stand-button-tertiary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n \t<button class=\"stand-button stand-button-tertiary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n </div>\n\n</div>\n";
|
|
5
|
+
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 {\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 {\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<button class=\"js-stand-button js-stand-button-primary\">Button</button>\n \t\t<button class=\"js-stand-button js-stand-button-primary\" disabled>Disabled Button</button>\n \t</div>\n \t<div class=\"container\">\n \t\t<button class=\"js-stand-button js-stand-button-tertiary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n \t\t<button class=\"js-stand-button js-stand-button-tertiary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n \t</div>\n </div>`;\n\n";
|
|
@@ -6,7 +6,7 @@ export interface ButtonProps extends DefaultProps<ButtonTheme, RACButtonProps['c
|
|
|
6
6
|
/**
|
|
7
7
|
* Size variant of the button
|
|
8
8
|
*/
|
|
9
|
-
size?: keyof Omit<ButtonTheme['
|
|
9
|
+
size?: keyof Omit<ButtonTheme['primary'], 'shared'>;
|
|
10
10
|
/**
|
|
11
11
|
* Variant of the button
|
|
12
12
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const componentName = "IconButton";
|
|
2
|
-
export declare const componentTsx = "import { IconButton } from \"@guardian/stand/icon-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconButton\n onPress={() => alert(\"You summoned a raven!\")}\n symbol=\"raven\"\n ariaLabel=\"Summon a raven\"\n />\n <IconButton\n isDisabled\n onPress={() => alert(\"You consulted with an owl!\")}\n symbol=\"owl\"\n ariaLabel=\"Consult with an owl\"\n\t\t variant=\"
|
|
3
|
-
export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-
|
|
4
|
-
export declare const componentHtml = "<div class=\"container\">\n <button class=\"stand-icon-button stand-icon-button-
|
|
5
|
-
export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-
|
|
2
|
+
export declare const componentTsx = "import { IconButton } from \"@guardian/stand/icon-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconButton\n onPress={() => alert(\"You summoned a raven!\")}\n symbol=\"raven\"\n ariaLabel=\"Summon a raven\"\n />\n <IconButton\n isDisabled\n onPress={() => alert(\"You consulted with an owl!\")}\n symbol=\"owl\"\n ariaLabel=\"Consult with an owl\"\n\t\t variant=\"tertiary\"\n />\n\t</>\n);\n\n";
|
|
3
|
+
export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-primary {\n\t\tcolor: var(--component-button-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-primary-md-icon-button-width);\n\t\theight: var(--component-button-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-primary-md-typography-font-width);\n\t\tborder: var(--component-button-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-active-border);\n\t}\n\t.stand-icon-button-primary:disabled {\n\t\tcolor: var(--component-button-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-primary > .material-symbols {\n\t\tfont-size: var(--component-button-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-tertiary {\n\t\tcolor: var(--component-button-tertiary-shared-color);\n\t\tbackground: var(--component-button-tertiary-shared-background-color);\n\t\twidth: var(--component-button-tertiary-md-icon-button-width);\n\t\theight: var(--component-button-tertiary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-tertiary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-tertiary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-tertiary-md-typography-font-width);\n\t\tborder: var(--component-button-tertiary-shared-border);\n\t\tborder-radius: var(--component-button-tertiary-shared-border-radius);\n\t}\n\t.stand-icon-button-tertiary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-hover-border);\n\t}\n\t.stand-icon-button-tertiary:active {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-active-border);\n\t}\n\t.stand-icon-button-tertiary:disabled, .stand-icon-button-tertiary[data-disabled] {\n\t\tcolor: var(--component-button-tertiary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-disabled-border);\n\t}\n\t.stand-icon-button-tertiary > .material-symbols {\n\t\tfont-size: var(--component-button-tertiary-md-icon-size);\n\t}\n\n";
|
|
4
|
+
export declare const componentHtml = "<div class=\"container\">\n <button class=\"stand-icon-button stand-icon-button-primary\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></button>\n <button class=\"stand-icon-button stand-icon-button-tertiary\" disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></button>\n</div>\n";
|
|
5
|
+
export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-primary {\n\t\tcolor: ${componentButton[\"primary\"].shared.color};\n\t\tbackground: ${componentButton[\"primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"primary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-primary: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-icon-button-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-tertiary {\n\t\tcolor: ${componentButton[\"tertiary\"].shared.color};\n\t\tbackground: ${componentButton[\"tertiary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"tertiary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"tertiary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-tertiary:disabled, .js-stand-icon-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-icon-button-tertiary > .material-symbols {\n\t\tfont-size: ${componentButton[\"tertiary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-primary\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></button>\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-tertiary\" disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></button>\n\t</div>\n\t`;\n\n";
|
|
@@ -20,7 +20,7 @@ export declare const iconButtonStyles: (theme: {
|
|
|
20
20
|
'outline-offset': string;
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
primary: {
|
|
24
24
|
shared: {
|
|
25
25
|
color: string;
|
|
26
26
|
backgroundColor: string;
|
|
@@ -145,7 +145,7 @@ export declare const iconButtonStyles: (theme: {
|
|
|
145
145
|
};
|
|
146
146
|
};
|
|
147
147
|
};
|
|
148
|
-
|
|
148
|
+
secondary: {
|
|
149
149
|
shared: {
|
|
150
150
|
color: string;
|
|
151
151
|
backgroundColor: string;
|
|
@@ -270,132 +270,7 @@ export declare const iconButtonStyles: (theme: {
|
|
|
270
270
|
};
|
|
271
271
|
};
|
|
272
272
|
};
|
|
273
|
-
|
|
274
|
-
shared: {
|
|
275
|
-
color: string;
|
|
276
|
-
backgroundColor: string;
|
|
277
|
-
borderRadius: string;
|
|
278
|
-
border: string;
|
|
279
|
-
':hover': {
|
|
280
|
-
backgroundColor: string;
|
|
281
|
-
border: string;
|
|
282
|
-
};
|
|
283
|
-
':active': {
|
|
284
|
-
backgroundColor: string;
|
|
285
|
-
border: string;
|
|
286
|
-
};
|
|
287
|
-
':disabled': {
|
|
288
|
-
color: string;
|
|
289
|
-
backgroundColor: string;
|
|
290
|
-
border: string;
|
|
291
|
-
};
|
|
292
|
-
};
|
|
293
|
-
xs: {
|
|
294
|
-
height: string;
|
|
295
|
-
padding: {
|
|
296
|
-
top: string;
|
|
297
|
-
right: string;
|
|
298
|
-
bottom: string;
|
|
299
|
-
left: string;
|
|
300
|
-
withIcon: {
|
|
301
|
-
iconLeft: {
|
|
302
|
-
left: string;
|
|
303
|
-
};
|
|
304
|
-
};
|
|
305
|
-
};
|
|
306
|
-
typography: {
|
|
307
|
-
font: string;
|
|
308
|
-
letterSpacing: string;
|
|
309
|
-
fontWidth: number;
|
|
310
|
-
};
|
|
311
|
-
icon: {
|
|
312
|
-
size: string;
|
|
313
|
-
gap: string;
|
|
314
|
-
};
|
|
315
|
-
iconButton: {
|
|
316
|
-
width: string;
|
|
317
|
-
};
|
|
318
|
-
};
|
|
319
|
-
sm: {
|
|
320
|
-
height: string;
|
|
321
|
-
padding: {
|
|
322
|
-
top: string;
|
|
323
|
-
right: string;
|
|
324
|
-
bottom: string;
|
|
325
|
-
left: string;
|
|
326
|
-
withIcon: {
|
|
327
|
-
iconLeft: {
|
|
328
|
-
left: string;
|
|
329
|
-
};
|
|
330
|
-
};
|
|
331
|
-
};
|
|
332
|
-
typography: {
|
|
333
|
-
font: string;
|
|
334
|
-
letterSpacing: string;
|
|
335
|
-
fontWidth: number;
|
|
336
|
-
};
|
|
337
|
-
icon: {
|
|
338
|
-
size: string;
|
|
339
|
-
gap: string;
|
|
340
|
-
};
|
|
341
|
-
iconButton: {
|
|
342
|
-
width: string;
|
|
343
|
-
};
|
|
344
|
-
};
|
|
345
|
-
md: {
|
|
346
|
-
height: string;
|
|
347
|
-
padding: {
|
|
348
|
-
top: string;
|
|
349
|
-
right: string;
|
|
350
|
-
bottom: string;
|
|
351
|
-
left: string;
|
|
352
|
-
withIcon: {
|
|
353
|
-
iconLeft: {
|
|
354
|
-
left: string;
|
|
355
|
-
};
|
|
356
|
-
};
|
|
357
|
-
};
|
|
358
|
-
typography: {
|
|
359
|
-
font: string;
|
|
360
|
-
letterSpacing: string;
|
|
361
|
-
fontWidth: number;
|
|
362
|
-
};
|
|
363
|
-
icon: {
|
|
364
|
-
size: string;
|
|
365
|
-
gap: string;
|
|
366
|
-
};
|
|
367
|
-
iconButton: {
|
|
368
|
-
width: string;
|
|
369
|
-
};
|
|
370
|
-
};
|
|
371
|
-
lg: {
|
|
372
|
-
height: string;
|
|
373
|
-
padding: {
|
|
374
|
-
top: string;
|
|
375
|
-
right: string;
|
|
376
|
-
bottom: string;
|
|
377
|
-
left: string;
|
|
378
|
-
withIcon: {
|
|
379
|
-
iconLeft: {
|
|
380
|
-
left: string;
|
|
381
|
-
};
|
|
382
|
-
};
|
|
383
|
-
};
|
|
384
|
-
typography: {
|
|
385
|
-
font: string;
|
|
386
|
-
letterSpacing: string;
|
|
387
|
-
fontWidth: number;
|
|
388
|
-
};
|
|
389
|
-
icon: {
|
|
390
|
-
size: string;
|
|
391
|
-
gap: string;
|
|
392
|
-
};
|
|
393
|
-
iconButton: {
|
|
394
|
-
width: string;
|
|
395
|
-
};
|
|
396
|
-
};
|
|
397
|
-
};
|
|
398
|
-
'neutral-secondary': {
|
|
273
|
+
tertiary: {
|
|
399
274
|
shared: {
|
|
400
275
|
color: string;
|
|
401
276
|
backgroundColor: string;
|
|
@@ -6,7 +6,7 @@ export interface IconButtonProps extends DefaultPropsWithChildren<IconButtonThem
|
|
|
6
6
|
/**
|
|
7
7
|
* Size variant of the avatar
|
|
8
8
|
*/
|
|
9
|
-
size?: keyof Omit<IconButtonTheme['
|
|
9
|
+
size?: keyof Omit<IconButtonTheme['primary'], 'shared'>;
|
|
10
10
|
/**
|
|
11
11
|
* Variant of the button
|
|
12
12
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const componentName = "IconLinkButton";
|
|
2
|
-
export declare const componentTsx = "import { IconLinkButton } from \"@guardian/stand/icon-link-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconLinkButton\n href=\"#\"\n symbol=\"raven\"\n ariaLabel=\"Summon a raven\"\n />\n <IconLinkButton\n href=\"#\"\n isDisabled\n variant=\"
|
|
3
|
-
export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-
|
|
4
|
-
export declare const componentHtml = "<div class=\"container\">\n <a class=\"stand-icon-button stand-icon-button-
|
|
5
|
-
export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-
|
|
2
|
+
export declare const componentTsx = "import { IconLinkButton } from \"@guardian/stand/icon-link-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconLinkButton\n href=\"#\"\n symbol=\"raven\"\n ariaLabel=\"Summon a raven\"\n />\n <IconLinkButton\n href=\"#\"\n isDisabled\n variant=\"secondary\"\n symbol=\"owl\"\n ariaLabel=\"Consult with an owl\"\n />\n\t</>\n);\n\n";
|
|
3
|
+
export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-primary {\n\t\tcolor: var(--component-button-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-primary-md-icon-button-width);\n\t\theight: var(--component-button-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-primary-md-typography-font-width);\n\t\tborder: var(--component-button-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-active-border);\n\t}\n\t.stand-icon-button-primary:disabled {\n\t\tcolor: var(--component-button-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-primary > .material-symbols {\n\t\tfont-size: var(--component-button-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-tertiary {\n\t\tcolor: var(--component-button-tertiary-shared-color);\n\t\tbackground: var(--component-button-tertiary-shared-background-color);\n\t\twidth: var(--component-button-tertiary-md-icon-button-width);\n\t\theight: var(--component-button-tertiary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-tertiary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-tertiary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-tertiary-md-typography-font-width);\n\t\tborder: var(--component-button-tertiary-shared-border);\n\t\tborder-radius: var(--component-button-tertiary-shared-border-radius);\n\t}\n\t.stand-icon-button-tertiary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-hover-border);\n\t}\n\t.stand-icon-button-tertiary:active {\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-active-border);\n\t}\n\t.stand-icon-button-tertiary:disabled, .stand-icon-button-tertiary[data-disabled] {\n\t\tcolor: var(--component-button-tertiary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-tertiary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-tertiary-shared-disabled-border);\n\t}\n\t.stand-icon-button-tertiary > .material-symbols {\n\t\tfont-size: var(--component-button-tertiary-md-icon-size);\n\t}\n\n";
|
|
4
|
+
export declare const componentHtml = "<div class=\"container\">\n <a class=\"stand-icon-button stand-icon-button-primary\" href=\"#\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></a>\n <a class=\"stand-icon-button stand-icon-button-tertiary\" data-disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></a>\n</div>\n";
|
|
5
|
+
export declare const componentJs = "\t// for ts/js\n\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-icon-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-icon-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-icon-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-icon-button-primary {\n\t\tcolor: ${componentButton[\"primary\"].shared.color};\n\t\tbackground: ${componentButton[\"primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"primary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-primary:disabled, .js-stand-icon-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-icon-button-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-tertiary {\n\t\tcolor: ${componentButton[\"tertiary\"].shared.color};\n\t\tbackground: ${componentButton[\"tertiary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"tertiary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"tertiary\"].md.height};\n\t\tpadding: 0;\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-icon-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-icon-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-icon-button-tertiary:disabled, .js-stand-icon-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-icon-button-tertiary > .material-symbols {\n\t\tfont-size: ${componentButton[\"tertiary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-primary\" href=\"#\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></a>\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-tertiary\" data-disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></a>\n\t</div>\n\t`;\n\n";
|
|
@@ -20,7 +20,7 @@ export declare const iconLinkButtonStyles: (theme: {
|
|
|
20
20
|
'outline-offset': string;
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
|
-
|
|
23
|
+
primary: {
|
|
24
24
|
shared: {
|
|
25
25
|
color: string;
|
|
26
26
|
backgroundColor: string;
|
|
@@ -145,7 +145,7 @@ export declare const iconLinkButtonStyles: (theme: {
|
|
|
145
145
|
};
|
|
146
146
|
};
|
|
147
147
|
};
|
|
148
|
-
|
|
148
|
+
secondary: {
|
|
149
149
|
shared: {
|
|
150
150
|
color: string;
|
|
151
151
|
backgroundColor: string;
|
|
@@ -270,132 +270,7 @@ export declare const iconLinkButtonStyles: (theme: {
|
|
|
270
270
|
};
|
|
271
271
|
};
|
|
272
272
|
};
|
|
273
|
-
|
|
274
|
-
shared: {
|
|
275
|
-
color: string;
|
|
276
|
-
backgroundColor: string;
|
|
277
|
-
borderRadius: string;
|
|
278
|
-
border: string;
|
|
279
|
-
':hover': {
|
|
280
|
-
backgroundColor: string;
|
|
281
|
-
border: string;
|
|
282
|
-
};
|
|
283
|
-
':active': {
|
|
284
|
-
backgroundColor: string;
|
|
285
|
-
border: string;
|
|
286
|
-
};
|
|
287
|
-
':disabled': {
|
|
288
|
-
color: string;
|
|
289
|
-
backgroundColor: string;
|
|
290
|
-
border: string;
|
|
291
|
-
};
|
|
292
|
-
};
|
|
293
|
-
xs: {
|
|
294
|
-
height: string;
|
|
295
|
-
padding: {
|
|
296
|
-
top: string;
|
|
297
|
-
right: string;
|
|
298
|
-
bottom: string;
|
|
299
|
-
left: string;
|
|
300
|
-
withIcon: {
|
|
301
|
-
iconLeft: {
|
|
302
|
-
left: string;
|
|
303
|
-
};
|
|
304
|
-
};
|
|
305
|
-
};
|
|
306
|
-
typography: {
|
|
307
|
-
font: string;
|
|
308
|
-
letterSpacing: string;
|
|
309
|
-
fontWidth: number;
|
|
310
|
-
};
|
|
311
|
-
icon: {
|
|
312
|
-
size: string;
|
|
313
|
-
gap: string;
|
|
314
|
-
};
|
|
315
|
-
iconButton: {
|
|
316
|
-
width: string;
|
|
317
|
-
};
|
|
318
|
-
};
|
|
319
|
-
sm: {
|
|
320
|
-
height: string;
|
|
321
|
-
padding: {
|
|
322
|
-
top: string;
|
|
323
|
-
right: string;
|
|
324
|
-
bottom: string;
|
|
325
|
-
left: string;
|
|
326
|
-
withIcon: {
|
|
327
|
-
iconLeft: {
|
|
328
|
-
left: string;
|
|
329
|
-
};
|
|
330
|
-
};
|
|
331
|
-
};
|
|
332
|
-
typography: {
|
|
333
|
-
font: string;
|
|
334
|
-
letterSpacing: string;
|
|
335
|
-
fontWidth: number;
|
|
336
|
-
};
|
|
337
|
-
icon: {
|
|
338
|
-
size: string;
|
|
339
|
-
gap: string;
|
|
340
|
-
};
|
|
341
|
-
iconButton: {
|
|
342
|
-
width: string;
|
|
343
|
-
};
|
|
344
|
-
};
|
|
345
|
-
md: {
|
|
346
|
-
height: string;
|
|
347
|
-
padding: {
|
|
348
|
-
top: string;
|
|
349
|
-
right: string;
|
|
350
|
-
bottom: string;
|
|
351
|
-
left: string;
|
|
352
|
-
withIcon: {
|
|
353
|
-
iconLeft: {
|
|
354
|
-
left: string;
|
|
355
|
-
};
|
|
356
|
-
};
|
|
357
|
-
};
|
|
358
|
-
typography: {
|
|
359
|
-
font: string;
|
|
360
|
-
letterSpacing: string;
|
|
361
|
-
fontWidth: number;
|
|
362
|
-
};
|
|
363
|
-
icon: {
|
|
364
|
-
size: string;
|
|
365
|
-
gap: string;
|
|
366
|
-
};
|
|
367
|
-
iconButton: {
|
|
368
|
-
width: string;
|
|
369
|
-
};
|
|
370
|
-
};
|
|
371
|
-
lg: {
|
|
372
|
-
height: string;
|
|
373
|
-
padding: {
|
|
374
|
-
top: string;
|
|
375
|
-
right: string;
|
|
376
|
-
bottom: string;
|
|
377
|
-
left: string;
|
|
378
|
-
withIcon: {
|
|
379
|
-
iconLeft: {
|
|
380
|
-
left: string;
|
|
381
|
-
};
|
|
382
|
-
};
|
|
383
|
-
};
|
|
384
|
-
typography: {
|
|
385
|
-
font: string;
|
|
386
|
-
letterSpacing: string;
|
|
387
|
-
fontWidth: number;
|
|
388
|
-
};
|
|
389
|
-
icon: {
|
|
390
|
-
size: string;
|
|
391
|
-
gap: string;
|
|
392
|
-
};
|
|
393
|
-
iconButton: {
|
|
394
|
-
width: string;
|
|
395
|
-
};
|
|
396
|
-
};
|
|
397
|
-
};
|
|
398
|
-
'neutral-secondary': {
|
|
273
|
+
tertiary: {
|
|
399
274
|
shared: {
|
|
400
275
|
color: string;
|
|
401
276
|
backgroundColor: string;
|
|
@@ -6,7 +6,7 @@ export interface IconLinkButtonProps extends DefaultPropsWithChildren<IconLinkBu
|
|
|
6
6
|
/**
|
|
7
7
|
* Size variant of the avatar
|
|
8
8
|
*/
|
|
9
|
-
size?: keyof Omit<IconLinkButtonTheme['
|
|
9
|
+
size?: keyof Omit<IconLinkButtonTheme['primary'], 'shared'>;
|
|
10
10
|
/**
|
|
11
11
|
* Variant of the button
|
|
12
12
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const componentName = "LinkButton";
|
|
2
|
-
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=\"
|
|
3
|
-
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-
|
|
4
|
-
export declare const componentHtml = "<div class=\"container flow-column\">\n <div class=\"container\">\n \t<a href=\"#\" class=\"stand-button stand-button-
|
|
5
|
-
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-
|
|
2
|
+
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";
|
|
3
|
+
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";
|
|
4
|
+
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";
|
|
5
|
+
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";
|