@cloudscape-design/components 3.0.307 → 3.0.308
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/column-layout/interfaces.d.ts +1 -3
- package/column-layout/interfaces.d.ts.map +1 -1
- package/column-layout/interfaces.js.map +1 -1
- package/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/expandable-section/expandable-section-header.js +6 -7
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/styles.css.js +27 -26
- package/expandable-section/styles.scoped.css +51 -47
- package/expandable-section/styles.selectors.js +27 -26
- package/i18n/messages/all.all.d.ts +1 -1
- package/i18n/messages/all.de.d.ts +1 -1
- package/i18n/messages/all.en-GB.d.ts +1 -1
- package/i18n/messages/all.en.d.ts +1 -1
- package/i18n/messages/all.es.d.ts +1 -1
- package/i18n/messages/all.fr.d.ts +1 -1
- package/i18n/messages/all.id.d.ts +1 -1
- package/i18n/messages/all.it.d.ts +1 -1
- package/i18n/messages/all.ja.d.ts +1 -1
- package/i18n/messages/all.ko.d.ts +1 -1
- package/i18n/messages/all.pt-BR.d.ts +1 -1
- package/i18n/messages/all.zh-CN.d.ts +1 -1
- package/i18n/messages/all.zh-TW.d.ts +1 -1
- package/internal/environment.js +1 -1
- package/internal/i18n/messages/all.all.d.ts +1 -1
- package/internal/i18n/messages/all.de.d.ts +1 -1
- package/internal/i18n/messages/all.en-GB.d.ts +1 -1
- package/internal/i18n/messages/all.en.d.ts +1 -1
- package/internal/i18n/messages/all.es.d.ts +1 -1
- package/internal/i18n/messages/all.fr.d.ts +1 -1
- package/internal/i18n/messages/all.id.d.ts +1 -1
- package/internal/i18n/messages/all.it.d.ts +1 -1
- package/internal/i18n/messages/all.ja.d.ts +1 -1
- package/internal/i18n/messages/all.ko.d.ts +1 -1
- package/internal/i18n/messages/all.pt-BR.d.ts +1 -1
- package/internal/i18n/messages/all.zh-CN.d.ts +1 -1
- package/internal/i18n/messages/all.zh-TW.d.ts +1 -1
- package/internal/manifest.json +1 -1
- package/modal/styles.css.js +23 -23
- package/modal/styles.scoped.css +39 -38
- package/modal/styles.selectors.js +23 -23
- package/package.json +1 -1
- package/test-utils/dom/expandable-section/index.d.ts +1 -0
- package/test-utils/dom/expandable-section/index.js +6 -0
- package/test-utils/dom/expandable-section/index.js.map +1 -1
- package/test-utils/selectors/expandable-section/index.d.ts +1 -0
- package/test-utils/selectors/expandable-section/index.js +6 -0
- package/test-utils/selectors/expandable-section/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -5,9 +5,7 @@ import { ColumnLayoutBreakpoint } from './internal';
|
|
|
5
5
|
export interface ColumnLayoutProps extends BaseComponentProps {
|
|
6
6
|
/**
|
|
7
7
|
* Specifies the number of columns in each grid row.
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* Note that there is no upper limit when used in combination with `minColumnWidth`.
|
|
8
|
+
* When `minColumnWidth` is not set, only up to 4 columns are supported.
|
|
11
9
|
*/
|
|
12
10
|
columns?: number;
|
|
13
11
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;;;OAIG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC;IAEpC;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,iBAAiB,CAAC;IACjC,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9C,KAAY,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,KAAK,CAAC;CAClE;AAED,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,EAAE,0BAA0B;IAC9F,YAAY,CAAC,EAAE,sBAAsB,CAAC;CACvC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ColumnLayoutBreakpoint } from './internal';\n\nexport interface ColumnLayoutProps extends BaseComponentProps {\n /**\n * Specifies the number of columns in each grid row.\n *
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["column-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport React from 'react';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ColumnLayoutBreakpoint } from './internal';\n\nexport interface ColumnLayoutProps extends BaseComponentProps {\n /**\n * Specifies the number of columns in each grid row.\n * When `minColumnWidth` is not set, only up to 4 columns are supported.\n */\n columns?: number;\n\n /**\n * Specifies the content type. This determines the spacing of the grid.\n */\n variant?: ColumnLayoutProps.Variant;\n\n /**\n * Controls whether dividers are placed between rows and columns.\n *\n * Note: This is not supported when used with `minColumnWidth`.\n */\n borders?: ColumnLayoutProps.Borders;\n\n /**\n * Determines whether the default gutters between columns are removed.\n */\n disableGutters?: boolean;\n\n /**\n * Use together with `columns` to specify the desired minimum width for each column in pixels.\n *\n * The number of columns is determined by the value of this property, the available space,\n * and the maximum number of columns as defined by the `columns` property.\n */\n minColumnWidth?: number;\n\n /**\n * The columns to render.\n */\n children?: React.ReactNode;\n}\n\nexport namespace ColumnLayoutProps {\n export type Variant = 'default' | 'text-grid';\n export type Borders = 'none' | 'vertical' | 'horizontal' | 'all';\n}\n\nexport interface InternalColumnLayoutProps extends ColumnLayoutProps, InternalBaseComponentProps {\n __breakpoint?: ColumnLayoutBreakpoint;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlF,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;
|
|
1
|
+
{"version":3,"file":"expandable-section-header.d.ts","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAc,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlF,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,UAAU,4BAA4B;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,EAAE,oBAAoB,CAAC;IAChC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;IAClB,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;CACzC;AAcD,UAAU,4BAA6B,SAAQ,IAAI,CAAC,4BAA4B,EAAE,UAAU,GAAG,MAAM,CAAC;IACpG,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACvD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAwID,eAAO,MAAM,uBAAuB,qNAkBjC,4BAA4B,gBAsE9B,CAAC"}
|
|
@@ -9,27 +9,27 @@ import { isDevelopment } from '../internal/is-development';
|
|
|
9
9
|
import { warnOnce } from '../internal/logging';
|
|
10
10
|
export const componentName = 'ExpandableSection';
|
|
11
11
|
const ExpandableDefaultHeader = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, onKeyUp, onKeyDown, variant, }) => {
|
|
12
|
-
return (React.createElement("div", { id: id, role: "button", className: className, tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
|
|
12
|
+
return (React.createElement("div", { id: id, role: "button", className: clsx(className, styles['expand-button']), tabIndex: 0, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onClick: onClick, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded },
|
|
13
13
|
React.createElement("div", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
|
|
14
14
|
children));
|
|
15
15
|
};
|
|
16
16
|
const ExpandableNavigationHeader = ({ id, className, onClick, ariaLabelledBy, ariaLabel, ariaControls, expanded, children, icon, }) => {
|
|
17
17
|
return (React.createElement("div", { id: id, className: className, onClick: onClick },
|
|
18
|
-
React.createElement("button", { className: styles['icon-container'], "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded, type: "button" }, icon),
|
|
18
|
+
React.createElement("button", { className: clsx(styles['icon-container'], styles['expand-button']), "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-controls": ariaControls, "aria-expanded": expanded, type: "button" }, icon),
|
|
19
19
|
children));
|
|
20
20
|
};
|
|
21
21
|
const ExpandableHeaderTextWrapper = ({ id, className, onClick, ariaLabel, ariaControls, expanded, children, icon, headerDescription, headerCounter, headerInfo, headerActions, variant, headingTagOverride, onKeyUp, onKeyDown, }) => {
|
|
22
22
|
const screenreaderContentId = useUniqueId('expandable-section-header-content-');
|
|
23
23
|
const isContainer = variant === 'container';
|
|
24
24
|
const HeadingTag = headingTagOverride || 'div';
|
|
25
|
-
const hasInteractiveElements = headerInfo || headerActions;
|
|
25
|
+
const hasInteractiveElements = isContainer && (headerInfo || headerActions);
|
|
26
26
|
const listeners = { onClick, onKeyDown, onKeyUp };
|
|
27
27
|
const wrapperListeners = hasInteractiveElements ? undefined : listeners;
|
|
28
28
|
const headerButtonListeners = hasInteractiveElements ? listeners : undefined;
|
|
29
|
-
const headerButton = (React.createElement("span", Object.assign({ className: isContainer ? styles['header-container-button'] : styles['header-button'], role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded }, headerButtonListeners),
|
|
29
|
+
const headerButton = (React.createElement("span", Object.assign({ className: clsx(styles['expand-button'], isContainer ? styles['header-container-button'] : styles['header-button']), role: "button", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabel || !isContainer ? undefined : screenreaderContentId, "aria-controls": ariaControls, "aria-expanded": expanded }, headerButtonListeners),
|
|
30
30
|
React.createElement("span", { className: clsx(styles['icon-container'], styles[`icon-container-${variant}`]) }, icon),
|
|
31
31
|
React.createElement("span", null, children)));
|
|
32
|
-
return (React.createElement("div", Object.assign({ id: id, className: className }, wrapperListeners),
|
|
32
|
+
return (React.createElement("div", Object.assign({ id: id, className: clsx(className, hasInteractiveElements && styles['with-interactive-elements']) }, wrapperListeners),
|
|
33
33
|
isContainer ? (React.createElement(InternalHeader, { variant: "h2", description: headerDescription, counter: headerCounter, info: headerInfo, actions: headerActions, headingTagOverride: headingTagOverride }, headerButton)) : (React.createElement(HeadingTag, { className: styles['header-wrapper'] }, headerButton)),
|
|
34
34
|
isContainer && (React.createElement(ScreenreaderOnly, { id: screenreaderContentId },
|
|
35
35
|
children,
|
|
@@ -57,8 +57,7 @@ export const ExpandableSectionHeader = ({ id, className, variant, header, header
|
|
|
57
57
|
return (React.createElement(ExpandableNavigationHeader, Object.assign({ className: clsx(className, wrapperClassName), ariaLabelledBy: ariaLabelledBy }, defaultHeaderProps), headerText !== null && headerText !== void 0 ? headerText : header));
|
|
58
58
|
}
|
|
59
59
|
if (headerText) {
|
|
60
|
-
|
|
61
|
-
return (React.createElement(ExpandableHeaderTextWrapper, Object.assign({ className: clsx(className, wrapperClassName, hasInteractiveElements && styles['with-interactive-elements'], expanded && styles.expanded), headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), headerText));
|
|
60
|
+
return (React.createElement(ExpandableHeaderTextWrapper, Object.assign({ className: clsx(className, wrapperClassName, expanded && styles.expanded), headerDescription: headerDescription, headerCounter: headerCounter, headerInfo: headerInfo, headerActions: headerActions, headingTagOverride: headingTagOverride, onKeyUp: onKeyUp, onKeyDown: onKeyDown }, defaultHeaderProps), headerText));
|
|
62
61
|
}
|
|
63
62
|
if (variant === 'container' && header && isDevelopment) {
|
|
64
63
|
warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\nexport const componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n id: string;\n className?: string;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n icon: JSX.Element;\n variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n variant: ExpandableSectionProps.Variant;\n header?: ReactNode;\n headerText?: ReactNode;\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n onKeyUp,\n onKeyDown,\n variant,\n}: ExpandableDefaultHeaderProps) => {\n return (\n <div\n id={id}\n role=\"button\"\n className={className}\n tabIndex={0}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onClick={onClick}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n >\n <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n {children}\n </div>\n );\n};\n\nconst ExpandableNavigationHeader = ({\n id,\n className,\n onClick,\n ariaLabelledBy,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n}: ExpandableNavigationHeaderProps) => {\n return (\n <div id={id} className={className} onClick={onClick}>\n <button\n className={styles['icon-container']}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n type=\"button\"\n >\n {icon}\n </button>\n {children}\n </div>\n );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n variant,\n headingTagOverride,\n onKeyUp,\n onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n const isContainer = variant === 'container';\n const HeadingTag = headingTagOverride || 'div';\n const hasInteractiveElements = headerInfo || headerActions;\n const listeners = { onClick, onKeyDown, onKeyUp };\n const wrapperListeners = hasInteractiveElements ? undefined : listeners;\n const headerButtonListeners = hasInteractiveElements ? listeners : undefined;\n const headerButton = (\n <span\n className={isContainer ? styles['header-container-button'] : styles['header-button']}\n role=\"button\"\n tabIndex={0}\n aria-label={ariaLabel}\n // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n {...headerButtonListeners}\n >\n <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n <span>{children}</span>\n </span>\n );\n\n return (\n <div id={id} className={className} {...wrapperListeners}>\n {isContainer ? (\n <InternalHeader\n variant=\"h2\"\n description={headerDescription}\n counter={headerCounter}\n info={headerInfo}\n actions={headerActions}\n headingTagOverride={headingTagOverride}\n >\n {headerButton}\n </InternalHeader>\n ) : (\n <HeadingTag className={styles['header-wrapper']}>{headerButton}</HeadingTag>\n )}\n {isContainer && (\n <ScreenreaderOnly id={screenreaderContentId}>\n {children} {headerCounter} {headerDescription}\n </ScreenreaderOnly>\n )}\n </div>\n );\n};\n\nexport const ExpandableSectionHeader = ({\n id,\n className,\n variant,\n header,\n headerText,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n headingTagOverride,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const icon = (\n <InternalIcon\n size={variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name=\"caret-down-filled\"\n />\n );\n const defaultHeaderProps = {\n id: id,\n icon: icon,\n expanded: expanded,\n ariaControls: ariaControls,\n ariaLabel: ariaLabel,\n onClick: onClick,\n variant,\n };\n\n if ((headerDescription || headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the \"container\" variant.'\n );\n }\n\n const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);\n if (variant === 'navigation') {\n return (\n <ExpandableNavigationHeader\n className={clsx(className, wrapperClassName)}\n ariaLabelledBy={ariaLabelledBy}\n {...defaultHeaderProps}\n >\n {headerText ?? header}\n </ExpandableNavigationHeader>\n );\n }\n\n if (headerText) {\n const hasInteractiveElements = headerInfo || headerActions;\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(\n className,\n wrapperClassName,\n hasInteractiveElements && styles['with-interactive-elements'],\n expanded && styles.expanded\n )}\n headerDescription={headerDescription}\n headerCounter={headerCounter}\n headerInfo={headerInfo}\n headerActions={headerActions}\n headingTagOverride={headingTagOverride}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {headerText}\n </ExpandableHeaderTextWrapper>\n );\n }\n\n if (variant === 'container' && header && isDevelopment) {\n warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n }\n\n return (\n <ExpandableDefaultHeader\n className={clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded)}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {header}\n </ExpandableDefaultHeader>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"expandable-section-header.js","sourceRoot":"lib/default/","sources":["expandable-section/expandable-section-header.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ExpandableSectionProps } from './interfaces';\nimport React, { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport InternalHeader from '../header/internal';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { isDevelopment } from '../internal/is-development';\nimport { warnOnce } from '../internal/logging';\n\nexport const componentName = 'ExpandableSection';\n\ninterface ExpandableDefaultHeaderProps {\n id: string;\n className?: string;\n children?: ReactNode;\n expanded: boolean;\n ariaControls: string;\n ariaLabel?: string;\n onKeyUp: KeyboardEventHandler;\n onKeyDown: KeyboardEventHandler;\n onClick: MouseEventHandler;\n icon: JSX.Element;\n variant: ExpandableSectionProps.Variant;\n}\n\ninterface ExpandableNavigationHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'onKeyUp' | 'onKeyDown'> {\n ariaLabelledBy?: string;\n}\n\ninterface ExpandableHeaderTextWrapperProps extends ExpandableDefaultHeaderProps {\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n}\n\ninterface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps, 'children' | 'icon'> {\n variant: ExpandableSectionProps.Variant;\n header?: ReactNode;\n headerText?: ReactNode;\n headerDescription?: ReactNode;\n headerCounter?: string;\n headerInfo?: ReactNode;\n headerActions?: ReactNode;\n headingTagOverride?: ExpandableSectionProps.HeadingTag;\n ariaLabelledBy?: string;\n}\n\nconst ExpandableDefaultHeader = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n onKeyUp,\n onKeyDown,\n variant,\n}: ExpandableDefaultHeaderProps) => {\n return (\n <div\n id={id}\n role=\"button\"\n className={clsx(className, styles['expand-button'])}\n tabIndex={0}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n onClick={onClick}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n >\n <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>\n {children}\n </div>\n );\n};\n\nconst ExpandableNavigationHeader = ({\n id,\n className,\n onClick,\n ariaLabelledBy,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n}: ExpandableNavigationHeaderProps) => {\n return (\n <div id={id} className={className} onClick={onClick}>\n <button\n className={clsx(styles['icon-container'], styles['expand-button'])}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n type=\"button\"\n >\n {icon}\n </button>\n {children}\n </div>\n );\n};\n\nconst ExpandableHeaderTextWrapper = ({\n id,\n className,\n onClick,\n ariaLabel,\n ariaControls,\n expanded,\n children,\n icon,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n variant,\n headingTagOverride,\n onKeyUp,\n onKeyDown,\n}: ExpandableHeaderTextWrapperProps) => {\n const screenreaderContentId = useUniqueId('expandable-section-header-content-');\n const isContainer = variant === 'container';\n const HeadingTag = headingTagOverride || 'div';\n const hasInteractiveElements = isContainer && (headerInfo || headerActions);\n const listeners = { onClick, onKeyDown, onKeyUp };\n const wrapperListeners = hasInteractiveElements ? undefined : listeners;\n const headerButtonListeners = hasInteractiveElements ? listeners : undefined;\n const headerButton = (\n <span\n className={clsx(\n styles['expand-button'],\n isContainer ? styles['header-container-button'] : styles['header-button']\n )}\n role=\"button\"\n tabIndex={0}\n aria-label={ariaLabel}\n // Do not use aria-labelledby={id} but ScreenreaderOnly because safari+VO does not read headerText in this case.\n aria-labelledby={ariaLabel || !isContainer ? undefined : screenreaderContentId}\n aria-controls={ariaControls}\n aria-expanded={expanded}\n {...headerButtonListeners}\n >\n <span className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</span>\n <span>{children}</span>\n </span>\n );\n\n return (\n <div\n id={id}\n className={clsx(className, hasInteractiveElements && styles['with-interactive-elements'])}\n {...wrapperListeners}\n >\n {isContainer ? (\n <InternalHeader\n variant=\"h2\"\n description={headerDescription}\n counter={headerCounter}\n info={headerInfo}\n actions={headerActions}\n headingTagOverride={headingTagOverride}\n >\n {headerButton}\n </InternalHeader>\n ) : (\n <HeadingTag className={styles['header-wrapper']}>{headerButton}</HeadingTag>\n )}\n {isContainer && (\n <ScreenreaderOnly id={screenreaderContentId}>\n {children} {headerCounter} {headerDescription}\n </ScreenreaderOnly>\n )}\n </div>\n );\n};\n\nexport const ExpandableSectionHeader = ({\n id,\n className,\n variant,\n header,\n headerText,\n headerDescription,\n headerCounter,\n headerInfo,\n headerActions,\n headingTagOverride,\n expanded,\n ariaControls,\n ariaLabel,\n ariaLabelledBy,\n onKeyUp,\n onKeyDown,\n onClick,\n}: ExpandableSectionHeaderProps) => {\n const icon = (\n <InternalIcon\n size={variant === 'container' ? 'medium' : 'normal'}\n className={clsx(styles.icon, expanded && styles.expanded)}\n name=\"caret-down-filled\"\n />\n );\n const defaultHeaderProps = {\n id: id,\n icon: icon,\n expanded: expanded,\n ariaControls: ariaControls,\n ariaLabel: ariaLabel,\n onClick: onClick,\n variant,\n };\n\n if ((headerDescription || headerCounter || headerInfo || headerActions) && variant !== 'container' && isDevelopment) {\n warnOnce(\n componentName,\n 'The `headerCounter`, `headerDescription`, `headerInfo` and `headerActions` props are only supported for the \"container\" variant.'\n );\n }\n\n const wrapperClassName = clsx(styles.wrapper, styles[`wrapper-${variant}`], expanded && styles['wrapper-expanded']);\n if (variant === 'navigation') {\n return (\n <ExpandableNavigationHeader\n className={clsx(className, wrapperClassName)}\n ariaLabelledBy={ariaLabelledBy}\n {...defaultHeaderProps}\n >\n {headerText ?? header}\n </ExpandableNavigationHeader>\n );\n }\n\n if (headerText) {\n return (\n <ExpandableHeaderTextWrapper\n className={clsx(className, wrapperClassName, expanded && styles.expanded)}\n headerDescription={headerDescription}\n headerCounter={headerCounter}\n headerInfo={headerInfo}\n headerActions={headerActions}\n headingTagOverride={headingTagOverride}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {headerText}\n </ExpandableHeaderTextWrapper>\n );\n }\n\n if (variant === 'container' && header && isDevelopment) {\n warnOnce(componentName, 'Use `headerText` instead of `header` to provide the button within the heading for a11y.');\n }\n\n return (\n <ExpandableDefaultHeader\n className={clsx(className, wrapperClassName, styles.focusable, expanded && styles.expanded)}\n onKeyUp={onKeyUp}\n onKeyDown={onKeyDown}\n {...defaultHeaderProps}\n >\n {header}\n </ExpandableDefaultHeader>\n );\n};\n"]}
|
|
@@ -1,31 +1,32 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"content-enter": "awsui_content-
|
|
5
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
6
|
-
"trigger-expanded": "awsui_trigger-
|
|
7
|
-
"icon": "
|
|
8
|
-
"root": "
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"icon-container
|
|
12
|
-
"
|
|
13
|
-
"wrapper
|
|
14
|
-
"wrapper-
|
|
15
|
-
"wrapper-
|
|
16
|
-
"wrapper-
|
|
17
|
-
"wrapper-
|
|
18
|
-
"
|
|
19
|
-
"header
|
|
20
|
-
"header-
|
|
21
|
-
"header-
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"header-
|
|
25
|
-
"
|
|
26
|
-
"content
|
|
27
|
-
"content-
|
|
28
|
-
"content-
|
|
29
|
-
"
|
|
4
|
+
"content-enter": "awsui_content-enter_gwq0h_ohtdp_97",
|
|
5
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_ohtdp_1",
|
|
6
|
+
"trigger-expanded": "awsui_trigger-expanded_gwq0h_ohtdp_119",
|
|
7
|
+
"icon": "awsui_icon_gwq0h_ohtdp_133",
|
|
8
|
+
"root": "awsui_root_gwq0h_ohtdp_151",
|
|
9
|
+
"expand-button": "awsui_expand-button_gwq0h_ohtdp_168",
|
|
10
|
+
"expanded": "awsui_expanded_gwq0h_ohtdp_175",
|
|
11
|
+
"icon-container": "awsui_icon-container_gwq0h_ohtdp_179",
|
|
12
|
+
"icon-container-container": "awsui_icon-container-container_gwq0h_ohtdp_184",
|
|
13
|
+
"wrapper": "awsui_wrapper_gwq0h_ohtdp_188",
|
|
14
|
+
"wrapper-default": "awsui_wrapper-default_gwq0h_ohtdp_196",
|
|
15
|
+
"wrapper-footer": "awsui_wrapper-footer_gwq0h_ohtdp_199",
|
|
16
|
+
"wrapper-navigation": "awsui_wrapper-navigation_gwq0h_ohtdp_205",
|
|
17
|
+
"wrapper-container": "awsui_wrapper-container_gwq0h_ohtdp_219",
|
|
18
|
+
"wrapper-expanded": "awsui_wrapper-expanded_gwq0h_ohtdp_225",
|
|
19
|
+
"header": "awsui_header_gwq0h_ohtdp_229",
|
|
20
|
+
"header-wrapper": "awsui_header-wrapper_gwq0h_ohtdp_232",
|
|
21
|
+
"header-button": "awsui_header-button_gwq0h_ohtdp_239",
|
|
22
|
+
"header-container-button": "awsui_header-container-button_gwq0h_ohtdp_243",
|
|
23
|
+
"with-interactive-elements": "awsui_with-interactive-elements_gwq0h_ohtdp_261",
|
|
24
|
+
"header-container": "awsui_header-container_gwq0h_ohtdp_243",
|
|
25
|
+
"header-navigation": "awsui_header-navigation_gwq0h_ohtdp_273",
|
|
26
|
+
"content": "awsui_content_gwq0h_ohtdp_97",
|
|
27
|
+
"content-default": "awsui_content-default_gwq0h_ohtdp_309",
|
|
28
|
+
"content-footer": "awsui_content-footer_gwq0h_ohtdp_312",
|
|
29
|
+
"content-expanded": "awsui_content-expanded_gwq0h_ohtdp_315",
|
|
30
|
+
"focusable": "awsui_focusable_gwq0h_ohtdp_319"
|
|
30
31
|
};
|
|
31
32
|
|
|
@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.awsui_content-
|
|
98
|
-
animation: awsui_awsui-motion-fade-
|
|
97
|
+
.awsui_content-enter_gwq0h_ohtdp_97:not(#\9) {
|
|
98
|
+
animation: awsui_awsui-motion-fade-in_gwq0h_ohtdp_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
|
|
99
99
|
}
|
|
100
|
-
@keyframes awsui_awsui-motion-fade-
|
|
100
|
+
@keyframes awsui_awsui-motion-fade-in_gwq0h_ohtdp_1 {
|
|
101
101
|
from {
|
|
102
102
|
opacity: 0.2;
|
|
103
103
|
}
|
|
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
@media (prefers-reduced-motion: reduce) {
|
|
109
|
-
.awsui_content-
|
|
109
|
+
.awsui_content-enter_gwq0h_ohtdp_97:not(#\9) {
|
|
110
110
|
animation: none;
|
|
111
111
|
transition: none;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
.awsui-motion-disabled .awsui_content-
|
|
114
|
+
.awsui-motion-disabled .awsui_content-enter_gwq0h_ohtdp_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_ohtdp_97:not(#\9) {
|
|
115
115
|
animation: none;
|
|
116
116
|
transition: none;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
.awsui_trigger-
|
|
119
|
+
.awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
|
|
120
120
|
transition: border-bottom-color var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
|
|
121
121
|
}
|
|
122
122
|
@media (prefers-reduced-motion: reduce) {
|
|
123
|
-
.awsui_trigger-
|
|
123
|
+
.awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
|
|
124
124
|
animation: none;
|
|
125
125
|
transition: none;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
.awsui-motion-disabled .awsui_trigger-
|
|
128
|
+
.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_ohtdp_119:not(#\9) {
|
|
129
129
|
animation: none;
|
|
130
130
|
transition: none;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.
|
|
133
|
+
.awsui_icon_gwq0h_ohtdp_133:not(#\9) {
|
|
134
134
|
transition: transform var(--motion-duration-rotate-90-jfxxiy, 135ms) var(--motion-easing-rotate-90-ax5lt7, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
135
135
|
}
|
|
136
136
|
@media (prefers-reduced-motion: reduce) {
|
|
137
|
-
.
|
|
137
|
+
.awsui_icon_gwq0h_ohtdp_133:not(#\9) {
|
|
138
138
|
animation: none;
|
|
139
139
|
transition: none;
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
.awsui-motion-disabled .
|
|
142
|
+
.awsui-motion-disabled .awsui_icon_gwq0h_ohtdp_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_ohtdp_133:not(#\9) {
|
|
143
143
|
animation: none;
|
|
144
144
|
transition: none;
|
|
145
145
|
}
|
|
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
148
148
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
149
149
|
SPDX-License-Identifier: Apache-2.0
|
|
150
150
|
*/
|
|
151
|
-
.
|
|
151
|
+
.awsui_root_gwq0h_ohtdp_151:not(#\9) {
|
|
152
152
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
153
153
|
border-collapse: separate;
|
|
154
154
|
border-spacing: 0;
|
|
@@ -191,23 +191,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
191
191
|
display: block;
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
.
|
|
194
|
+
.awsui_expand-button_gwq0h_ohtdp_168:not(#\9) {
|
|
195
|
+
/* used in test-utils */
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.awsui_icon_gwq0h_ohtdp_133:not(#\9) {
|
|
195
199
|
transform: rotate(-90deg);
|
|
196
200
|
}
|
|
197
|
-
.
|
|
201
|
+
.awsui_icon_gwq0h_ohtdp_133.awsui_expanded_gwq0h_ohtdp_175:not(#\9) {
|
|
198
202
|
transform: rotate(0deg);
|
|
199
203
|
}
|
|
200
204
|
|
|
201
|
-
.awsui_icon-
|
|
205
|
+
.awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
|
|
202
206
|
position: relative;
|
|
203
207
|
margin-left: calc((var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2);
|
|
204
208
|
margin-right: calc(var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
|
|
205
209
|
}
|
|
206
|
-
.awsui_icon-container-
|
|
210
|
+
.awsui_icon-container-container_gwq0h_ohtdp_184:not(#\9) {
|
|
207
211
|
margin-right: var(--space-xs-edba2s, 8px);
|
|
208
212
|
}
|
|
209
213
|
|
|
210
|
-
.
|
|
214
|
+
.awsui_wrapper_gwq0h_ohtdp_188:not(#\9) {
|
|
211
215
|
box-sizing: border-box;
|
|
212
216
|
display: flex;
|
|
213
217
|
border: none;
|
|
@@ -215,19 +219,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
215
219
|
line-height: var(--font-body-m-line-height-rfgrp9, 22px);
|
|
216
220
|
text-align: left;
|
|
217
221
|
}
|
|
218
|
-
.awsui_wrapper-
|
|
222
|
+
.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9) {
|
|
219
223
|
padding: var(--space-scaled-xxs-t2t62i, 4px) var(--space-xxs-ja5cp8, 4px);
|
|
220
224
|
}
|
|
221
|
-
.awsui_wrapper-
|
|
225
|
+
.awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
|
|
222
226
|
padding: var(--space-scaled-xxs-t2t62i, 4px) 0;
|
|
223
227
|
}
|
|
224
|
-
.awsui_wrapper-
|
|
228
|
+
.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9), .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
|
|
225
229
|
border: var(--border-divider-section-width-orq175, 2px) solid transparent;
|
|
226
230
|
}
|
|
227
|
-
.awsui_wrapper-
|
|
231
|
+
.awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9) {
|
|
228
232
|
border-left: var(--border-divider-section-width-orq175, 2px) solid transparent;
|
|
229
233
|
}
|
|
230
|
-
.awsui_wrapper-
|
|
234
|
+
.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9), .awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9), .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9) {
|
|
231
235
|
color: var(--color-text-expandable-section-default-fvf8va, #000716);
|
|
232
236
|
font-weight: var(--font-heading-s-weight-5y5giq, 800);
|
|
233
237
|
-webkit-font-smoothing: var(--font-smoothing-webkit-fyh4as, antialiased);
|
|
@@ -235,41 +239,41 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
235
239
|
font-size: var(--font-expandable-heading-size-mkp9vq, 16px);
|
|
236
240
|
letter-spacing: var(--font-heading-s-letter-spacing-j4vcrt, -0.005em);
|
|
237
241
|
}
|
|
238
|
-
.awsui_wrapper-
|
|
242
|
+
.awsui_wrapper-default_gwq0h_ohtdp_196:not(#\9):hover, .awsui_wrapper-navigation_gwq0h_ohtdp_205:not(#\9):hover, .awsui_wrapper-footer_gwq0h_ohtdp_199:not(#\9):hover {
|
|
239
243
|
color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
|
|
240
244
|
}
|
|
241
|
-
.awsui_wrapper-
|
|
245
|
+
.awsui_wrapper-container_gwq0h_ohtdp_219:not(#\9) {
|
|
242
246
|
padding: var(--space-container-header-vertical-di96ce, 12px) var(--space-container-horizontal-jxdgil, 20px);
|
|
243
247
|
}
|
|
244
|
-
body[data-awsui-focus-visible=true] .awsui_wrapper-
|
|
248
|
+
body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_ohtdp_219:not(#\9):focus {
|
|
245
249
|
padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
|
|
246
250
|
}
|
|
247
|
-
.awsui_wrapper-
|
|
251
|
+
.awsui_wrapper-default_gwq0h_ohtdp_196.awsui_wrapper-expanded_gwq0h_ohtdp_225:not(#\9) {
|
|
248
252
|
border-bottom-color: var(--color-border-divider-default-9o8zql, #e9ebed);
|
|
249
253
|
}
|
|
250
254
|
|
|
251
|
-
.
|
|
255
|
+
.awsui_header_gwq0h_ohtdp_229:not(#\9) {
|
|
252
256
|
display: flex;
|
|
253
257
|
}
|
|
254
|
-
.awsui_header-
|
|
258
|
+
.awsui_header-wrapper_gwq0h_ohtdp_232:not(#\9) {
|
|
255
259
|
font-weight: inherit;
|
|
256
260
|
font-size: inherit;
|
|
257
261
|
letter-spacing: inherit;
|
|
258
262
|
margin: 0;
|
|
259
263
|
padding: 0;
|
|
260
264
|
}
|
|
261
|
-
.awsui_header-
|
|
265
|
+
.awsui_header-button_gwq0h_ohtdp_239:not(#\9) {
|
|
262
266
|
box-sizing: border-box;
|
|
263
267
|
display: flex;
|
|
264
268
|
}
|
|
265
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
269
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus {
|
|
266
270
|
position: relative;
|
|
267
271
|
}
|
|
268
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
272
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus {
|
|
269
273
|
outline: 2px dotted transparent;
|
|
270
274
|
outline-offset: calc(0px - 1px);
|
|
271
275
|
}
|
|
272
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
276
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_ohtdp_239:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9):focus::before {
|
|
273
277
|
content: " ";
|
|
274
278
|
display: block;
|
|
275
279
|
position: absolute;
|
|
@@ -280,19 +284,19 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9
|
|
|
280
284
|
border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
|
|
281
285
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
|
|
282
286
|
}
|
|
283
|
-
.
|
|
287
|
+
.awsui_header_gwq0h_ohtdp_229:not(#\9):not(.awsui_with-interactive-elements_gwq0h_ohtdp_261) {
|
|
284
288
|
cursor: pointer;
|
|
285
289
|
}
|
|
286
|
-
.awsui_header-
|
|
290
|
+
.awsui_header-container_gwq0h_ohtdp_243:not(#\9) {
|
|
287
291
|
width: 100%;
|
|
288
292
|
}
|
|
289
|
-
.awsui_header-
|
|
293
|
+
.awsui_header-container_gwq0h_ohtdp_243 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
|
|
290
294
|
margin-top: var(--space-expandable-section-icon-offset-top-qfofw6, 4px);
|
|
291
295
|
}
|
|
292
|
-
.awsui_header-
|
|
296
|
+
.awsui_header-container_gwq0h_ohtdp_243.awsui_with-interactive-elements_gwq0h_ohtdp_261 .awsui_header-container-button_gwq0h_ohtdp_243:not(#\9) {
|
|
293
297
|
cursor: pointer;
|
|
294
298
|
}
|
|
295
|
-
.awsui_header-
|
|
299
|
+
.awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9) {
|
|
296
300
|
display: inline-flex;
|
|
297
301
|
cursor: pointer;
|
|
298
302
|
color: var(--color-text-expandable-section-navigation-icon-default-lzmj1u, #414d5c);
|
|
@@ -303,17 +307,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1g95t_235:not(#\9
|
|
|
303
307
|
text-decoration: none;
|
|
304
308
|
flex-direction: column;
|
|
305
309
|
}
|
|
306
|
-
.awsui_header-
|
|
310
|
+
.awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):hover {
|
|
307
311
|
color: var(--color-text-expandable-section-hover-o9ggrx, #0972d3);
|
|
308
312
|
}
|
|
309
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
313
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus {
|
|
310
314
|
position: relative;
|
|
311
315
|
}
|
|
312
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
316
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus {
|
|
313
317
|
outline: 2px dotted transparent;
|
|
314
318
|
outline-offset: calc(2px - 1px);
|
|
315
319
|
}
|
|
316
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
320
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_ohtdp_273 > .awsui_icon-container_gwq0h_ohtdp_179:not(#\9):focus::before {
|
|
317
321
|
content: " ";
|
|
318
322
|
display: block;
|
|
319
323
|
position: absolute;
|
|
@@ -325,24 +329,24 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1g95t_269 > .
|
|
|
325
329
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
|
|
326
330
|
}
|
|
327
331
|
|
|
328
|
-
.
|
|
332
|
+
.awsui_content_gwq0h_ohtdp_97:not(#\9) {
|
|
329
333
|
display: none;
|
|
330
334
|
}
|
|
331
|
-
.awsui_content-
|
|
335
|
+
.awsui_content-default_gwq0h_ohtdp_309:not(#\9) {
|
|
332
336
|
padding: var(--space-scaled-xs-wbfgrv, 8px) 0;
|
|
333
337
|
}
|
|
334
|
-
.awsui_content-
|
|
338
|
+
.awsui_content-footer_gwq0h_ohtdp_312:not(#\9) {
|
|
335
339
|
padding: var(--space-xs-edba2s, 8px) 0;
|
|
336
340
|
}
|
|
337
|
-
.awsui_content-
|
|
341
|
+
.awsui_content-expanded_gwq0h_ohtdp_315:not(#\9) {
|
|
338
342
|
display: block;
|
|
339
343
|
}
|
|
340
344
|
|
|
341
|
-
.
|
|
345
|
+
.awsui_focusable_gwq0h_ohtdp_319:not(#\9):focus {
|
|
342
346
|
outline: none;
|
|
343
347
|
text-decoration: none;
|
|
344
348
|
}
|
|
345
|
-
body[data-awsui-focus-visible=true] .
|
|
349
|
+
body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_ohtdp_319:not(#\9):focus {
|
|
346
350
|
outline: 2px dotted transparent;
|
|
347
351
|
border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
|
|
348
352
|
border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
|
|
@@ -2,31 +2,32 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"content-enter": "awsui_content-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"trigger-expanded": "awsui_trigger-
|
|
8
|
-
"icon": "
|
|
9
|
-
"root": "
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"icon-container
|
|
13
|
-
"
|
|
14
|
-
"wrapper
|
|
15
|
-
"wrapper-
|
|
16
|
-
"wrapper-
|
|
17
|
-
"wrapper-
|
|
18
|
-
"wrapper-
|
|
19
|
-
"
|
|
20
|
-
"header
|
|
21
|
-
"header-
|
|
22
|
-
"header-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"header-
|
|
26
|
-
"
|
|
27
|
-
"content
|
|
28
|
-
"content-
|
|
29
|
-
"content-
|
|
30
|
-
"
|
|
5
|
+
"content-enter": "awsui_content-enter_gwq0h_ohtdp_97",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_ohtdp_1",
|
|
7
|
+
"trigger-expanded": "awsui_trigger-expanded_gwq0h_ohtdp_119",
|
|
8
|
+
"icon": "awsui_icon_gwq0h_ohtdp_133",
|
|
9
|
+
"root": "awsui_root_gwq0h_ohtdp_151",
|
|
10
|
+
"expand-button": "awsui_expand-button_gwq0h_ohtdp_168",
|
|
11
|
+
"expanded": "awsui_expanded_gwq0h_ohtdp_175",
|
|
12
|
+
"icon-container": "awsui_icon-container_gwq0h_ohtdp_179",
|
|
13
|
+
"icon-container-container": "awsui_icon-container-container_gwq0h_ohtdp_184",
|
|
14
|
+
"wrapper": "awsui_wrapper_gwq0h_ohtdp_188",
|
|
15
|
+
"wrapper-default": "awsui_wrapper-default_gwq0h_ohtdp_196",
|
|
16
|
+
"wrapper-footer": "awsui_wrapper-footer_gwq0h_ohtdp_199",
|
|
17
|
+
"wrapper-navigation": "awsui_wrapper-navigation_gwq0h_ohtdp_205",
|
|
18
|
+
"wrapper-container": "awsui_wrapper-container_gwq0h_ohtdp_219",
|
|
19
|
+
"wrapper-expanded": "awsui_wrapper-expanded_gwq0h_ohtdp_225",
|
|
20
|
+
"header": "awsui_header_gwq0h_ohtdp_229",
|
|
21
|
+
"header-wrapper": "awsui_header-wrapper_gwq0h_ohtdp_232",
|
|
22
|
+
"header-button": "awsui_header-button_gwq0h_ohtdp_239",
|
|
23
|
+
"header-container-button": "awsui_header-container-button_gwq0h_ohtdp_243",
|
|
24
|
+
"with-interactive-elements": "awsui_with-interactive-elements_gwq0h_ohtdp_261",
|
|
25
|
+
"header-container": "awsui_header-container_gwq0h_ohtdp_243",
|
|
26
|
+
"header-navigation": "awsui_header-navigation_gwq0h_ohtdp_273",
|
|
27
|
+
"content": "awsui_content_gwq0h_ohtdp_97",
|
|
28
|
+
"content-default": "awsui_content-default_gwq0h_ohtdp_309",
|
|
29
|
+
"content-footer": "awsui_content-footer_gwq0h_ohtdp_312",
|
|
30
|
+
"content-expanded": "awsui_content-expanded_gwq0h_ohtdp_315",
|
|
31
|
+
"focusable": "awsui_focusable_gwq0h_ohtdp_319"
|
|
31
32
|
};
|
|
32
33
|
|