@guardian/stand 0.0.26 → 0.0.27
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.
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { Select as Select$1, Button, SelectValue, Popover, ListBox as ListBox$1
|
|
3
|
+
import { ListBoxItem, Select as Select$1, Button, SelectValue, Popover, ListBox as ListBox$1 } from 'react-aria-components';
|
|
4
4
|
import { mergeDeep } from '../../util/mergeDeep.js';
|
|
5
5
|
import { FormInputContainer } from '../form/Form.js';
|
|
6
6
|
import { Icon } from '../icon/Icon.js';
|
|
7
|
-
import { buttonStyles, popoverStyles, defaultSelectTheme, listBoxStyles
|
|
7
|
+
import { listBoxItemStyles, buttonStyles, popoverStyles, defaultSelectTheme, listBoxStyles } from './styles.js';
|
|
8
8
|
|
|
9
9
|
function Option({ children, theme = {} }) {
|
|
10
10
|
const mergedTheme = mergeDeep(defaultSelectTheme, theme);
|
package/dist/select.cjs
CHANGED
package/dist/select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Select } from './components/select/Select.js';
|
|
1
|
+
export { Option, Select } from './components/select/Select.js';
|
|
2
2
|
export { componentSelect } from './styleD/build/typescript/component/select.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const componentName = "Select";
|
|
2
|
-
export declare const componentTsx = "import { Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
|
|
3
|
-
export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n\n.stand-select-container {\n\tdisplay: var(--component-
|
|
2
|
+
export declare const componentTsx = "import { Option, Select } from '@guardian/stand/select';\n\nexport const Component = () => (\n\t<Select label=\"Select\">\n\t\t<Option>Option 1</Option>\n\t\t<Option>Option 2</Option>\n\t</Select>\n);\n";
|
|
3
|
+
export declare const componentCss = "\n/* import the select styles */\n@import '@guardian/stand/component/select.css';\n@import '@guardian/stand/component/form.css';\n\n.stand-select-container {\n\tdisplay: var(--component-form-input-shared-container-display);\n\tflex-direction: var(--component-form-input-shared-container-flex-direction);\n\tgap: var(--component-form-input-shared-container-gap);\n\twidth: var(--component-form-input-shared-container-width);\n}\n\n.stand-select-container > label {\n\tcolor: var(--component-form-input-shared-label-color);\n\tfont: var(--component-form-input-md-label-typography-font);\n\tletter-spacing: var(--component-form-input-md-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-md-label-typography-font-width);\n}\n\n.stand-select-container > span.description {\n\tcolor: var(--component-form-input-shared-description-color);\n\tfont: var(--component-form-input-shared-description-typography-font);\n\tletter-spacing: var(--component-form-input-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-form-input-shared-description-typography-font-width);\n}\n\n.stand-select {\n\t\tdisplay: var(--component-select-shared-button-display);\n\t\tjustify-content: var(--component-select-shared-button-justify-content);\n\t\talign-items: var(--component-select-shared-button-align-items);\n\t\tbackground-color: var(--component-select-shared-button-background-color);\n\t\tborder: var(--component-select-shared-button-border);\n\t\tborder-radius: var(--component-select-shared-button-border-radius);\n\t\theight: var(--component-select-shared-button-height);\n\t\tpadding-left: var(--component-select-shared-button-padding-left);\n\t\tpadding-right: var(--component-select-shared-button-padding-right);\n\t\tmargin-top: var(--component-select-shared-button-margin-top);\n\t\tcolor: var(--component-select-shared-button-color);\n\n\t\tfont: var(--component-select-shared-button-body-md-typography-font);\n\t\tletter-spacing: var(--component-select-shared-button-body-md-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-select-shared-button-body-md-typography-font-width);\n\n\n\t\t&:hover {\n\t\t\tbackground: var(--component-select-shared-hover-background-color);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--component-select-shared-active-background-color);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: var(--component-select-button-focused-outline);\n\t\t\toutline-offset: var(--component-select-button-focused-outline-offset);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: var(--component-select-button-disabled-cursor);\n\t\t\tbackground-color: var(--component-select-button-disabled-background-color);\n\t\t\tcolor: var(--component-select-button-disabled-color);\n\t\t\tborder: var(--component-select-button-disabled-border);\n\t\t}\n}\n";
|
|
4
4
|
export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n</div>\n";
|
|
5
|
-
export declare const componentJs = "\nimport { componentSelect } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\n.js-stand-select-container {\n\tdisplay: ${
|
|
5
|
+
export declare const componentJs = "\nimport { componentForm, componentSelect } from \"@guardian/stand\";\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\n.js-stand-select-container {\n\tdisplay: ${componentForm.input.shared.container.display};\n\tflex-direction: ${componentForm.input.shared.container['flex-direction']};\n\tgap: ${componentForm.input.shared.container.gap};\n\twidth: ${componentForm.input.shared.container.width};\n}\n\n.js-stand-select-container > label {\n\tcolor: ${componentForm.input.shared.label.color};\n\tfont: ${componentForm.input.md.label.typography.font};\n\tletter-spacing: ${componentForm.input.md.label.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.md.label.typography.fontWidth};\n}\n\n.js-stand-select-container > span.description {\n\tcolor: ${componentForm.input.shared.description.color};\n\tfont: ${componentForm.input.shared.description.font};\n\tletter-spacing: ${componentForm.input.shared.description.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentForm.input.shared.description.fontWidth};\n}\n\n.js-stand-select {\n\tdisplay: ${componentSelect.shared.button.display};\n\tjustify-content: ${componentSelect.shared.button.justifyContent};\n\talign-items: ${componentSelect.shared.button.alignItems};\n\tbackground-color: ${componentSelect.shared.button.backgroundColor};\n\tborder: ${componentSelect.shared.button.border};\n\tborder-radius: ${componentSelect.shared.button.borderRadius};\n\theight: ${componentSelect.shared.button.height};\n\tpadding-left: ${componentSelect.shared.button.paddingLeft};\n\tpadding-right: ${componentSelect.shared.button.paddingRight};\n\tmargin-top: ${componentSelect.shared.button.marginTop};\n\tcolor: ${componentSelect.shared.button.color};\n\n\tfont: ${componentSelect.shared.button.typography.font};\n\tletter-spacing: ${componentSelect.shared.button.typography.letterSpacing};\n\tfont-variation-settings: \"wdth\" ${componentSelect.shared.button.typography.fontWidth};\n\n\t&:hover {\n\t\tbackground: ${componentSelect.shared.hover.backgroundColor};\n\t}\n\n\t&:active {\n\t\tbackground: ${componentSelect.shared.pressed.backgroundColor};\n\t}\n\n\t&:focus-visible {\n\t\toutline: ${componentSelect.shared.button.focused.outline};\n\t\toutline-offset: ${componentSelect.shared.button.focused['outline-offset']};\n\t}\n\n\t&:disabled {\n\t\tcursor: ${componentSelect.shared.button.disabled.cursor};\n\t\tbackground-color: ${componentSelect.shared.button.disabled.backgroundColor};\n\t\tcolor: ${componentSelect.shared.button.disabled.color};\n\t\tborder: ${componentSelect.shared.button.disabled.border};\n\t}\n}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-select-container\">\n\t\t<label>Select</label>\n\t\t<select class=\"js-stand-select\">\n\t\t\t<option>Option 1</option>\n\t\t\t<option>Option 2</option>\n\t\t</select>\n\t</div>\n`;\n";
|
package/dist/types/select.d.ts
CHANGED
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
* If you only need the built CSS (./component/select.css),
|
|
14
14
|
* you don't need to install these.
|
|
15
15
|
*/
|
|
16
|
-
export { Select } from './components/select/Select';
|
|
17
|
-
export type { SelectProps } from './components/select/types';
|
|
16
|
+
export { Option, Select } from './components/select/Select';
|
|
17
|
+
export type { OptionProps, SelectProps } from './components/select/types';
|
|
18
18
|
export type { PartialSelectTheme as SelectTheme } from './components/select/styles';
|
|
19
19
|
export { componentSelect } from './styleD/build/typescript/component/select';
|
|
20
20
|
export type { ComponentSelect } from './styleD/build/typescript/component/select';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@guardian/stand",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.27",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
|
|
6
6
|
"exports": {
|