@cloudscape-design/components-themeable 3.0.649 → 3.0.650
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/form-field/styles.scss +4 -0
- package/lib/internal/scss/progress-bar/styles.scss +4 -0
- package/lib/internal/template/form-field/internal.js +1 -1
- package/lib/internal/template/form-field/internal.js.map +1 -1
- package/lib/internal/template/form-field/styles.css.js +24 -23
- package/lib/internal/template/form-field/styles.scoped.css +40 -37
- package/lib/internal/template/form-field/styles.selectors.js +24 -23
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/progress-bar/index.js +1 -1
- package/lib/internal/template/progress-bar/index.js.map +1 -1
- package/lib/internal/template/progress-bar/internal.d.ts +2 -2
- package/lib/internal/template/progress-bar/internal.d.ts.map +1 -1
- package/lib/internal/template/progress-bar/internal.js +2 -2
- package/lib/internal/template/progress-bar/internal.js.map +1 -1
- package/lib/internal/template/progress-bar/styles.css.js +19 -18
- package/lib/internal/template/progress-bar/styles.scoped.css +36 -32
- package/lib/internal/template/progress-bar/styles.selectors.js +19 -18
- package/lib/internal/template/test-utils/dom/progress-bar/index.js +1 -1
- package/lib/internal/template/test-utils/dom/progress-bar/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/progress-bar/index.js +1 -1
- package/lib/internal/template/test-utils/selectors/progress-bar/index.js.map +1 -1
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -110,7 +110,7 @@ export default function InternalFormField(_a) {
|
|
|
110
110
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
111
111
|
}, [funnelInteractionId, errorText, submissionAttempt, errorCount]);
|
|
112
112
|
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }, analyticsAttributes),
|
|
113
|
-
React.createElement("div", { className: clsx(__hideLabel && styles['visually-hidden']) },
|
|
113
|
+
React.createElement("div", { className: clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden']) },
|
|
114
114
|
label && (React.createElement("label", { className: styles.label, id: slotIds.label, htmlFor: generatedControlId }, label)),
|
|
115
115
|
React.createElement(InfoLinkLabelContext.Provider, { value: slotIds.label }, !__hideLabel && info && React.createElement("span", { className: styles.info }, info))),
|
|
116
116
|
description && (React.createElement("div", { className: styles.description, id: slotIds.description }, description)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.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 React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-negative\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.warning}>\n <div className={styles['warning-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.warning__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nWarningIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintText({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n subStepErrorContext,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n fieldErrorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.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 React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\nimport LiveRegion from '../internal/components/live-region';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-negative\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.warning}>\n <div className={styles['warning-icon-shake-wrapper']}>\n <div role=\"img\" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.warning__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <LiveRegion assertive={true} source={[i18nWarningIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintText({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepErrorContext, subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n subStepErrorContext,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n fieldErrorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,28 +1,29 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"error-icon-shake-wrapper": "awsui_error-icon-shake-
|
|
5
|
-
"warning-icon-shake-wrapper": "awsui_warning-icon-shake-
|
|
6
|
-
"awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-
|
|
7
|
-
"error-icon-scale-wrapper": "awsui_error-icon-scale-
|
|
8
|
-
"warning-icon-scale-wrapper": "awsui_warning-icon-scale-
|
|
9
|
-
"awsui-motion-scale-popup": "awsui_awsui-motion-scale-
|
|
10
|
-
"warning": "
|
|
11
|
-
"error": "
|
|
12
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
13
|
-
"root": "
|
|
14
|
-
"label": "
|
|
15
|
-
"info": "
|
|
16
|
-
"description": "
|
|
17
|
-
"constraint": "
|
|
18
|
-
"hints": "
|
|
19
|
-
"constraint-has-validation-text": "awsui_constraint-has-validation-
|
|
20
|
-
"secondary-control": "awsui_secondary-
|
|
21
|
-
"controls": "
|
|
22
|
-
"label-hidden": "awsui_label-
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
4
|
+
"error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_sqprx_103",
|
|
5
|
+
"warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_sqprx_104",
|
|
6
|
+
"awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_sqprx_1",
|
|
7
|
+
"error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_sqprx_134",
|
|
8
|
+
"warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_sqprx_135",
|
|
9
|
+
"awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_sqprx_1",
|
|
10
|
+
"warning": "awsui_warning_14mhv_sqprx_104",
|
|
11
|
+
"error": "awsui_error_14mhv_sqprx_103",
|
|
12
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_sqprx_1",
|
|
13
|
+
"root": "awsui_root_14mhv_sqprx_186",
|
|
14
|
+
"label": "awsui_label_14mhv_sqprx_222",
|
|
15
|
+
"info": "awsui_info_14mhv_sqprx_236",
|
|
16
|
+
"description": "awsui_description_14mhv_sqprx_242",
|
|
17
|
+
"constraint": "awsui_constraint_14mhv_sqprx_243",
|
|
18
|
+
"hints": "awsui_hints_14mhv_sqprx_250",
|
|
19
|
+
"constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_sqprx_251",
|
|
20
|
+
"secondary-control": "awsui_secondary-control_14mhv_sqprx_255",
|
|
21
|
+
"controls": "awsui_controls_14mhv_sqprx_259",
|
|
22
|
+
"label-hidden": "awsui_label-hidden_14mhv_sqprx_259",
|
|
23
|
+
"label-wrapper": "awsui_label-wrapper_14mhv_sqprx_262",
|
|
24
|
+
"control": "awsui_control_14mhv_sqprx_259",
|
|
25
|
+
"error__message": "awsui_error__message_14mhv_sqprx_289",
|
|
26
|
+
"warning__message": "awsui_warning__message_14mhv_sqprx_290",
|
|
27
|
+
"visually-hidden": "awsui_visually-hidden_14mhv_sqprx_294"
|
|
27
28
|
};
|
|
28
29
|
|
|
@@ -100,11 +100,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
100
100
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
101
101
|
SPDX-License-Identifier: Apache-2.0
|
|
102
102
|
*/
|
|
103
|
-
.awsui_error-icon-shake-
|
|
104
|
-
.awsui_warning-icon-shake-
|
|
105
|
-
animation: awsui_awsui-motion-shake-
|
|
103
|
+
.awsui_error-icon-shake-wrapper_14mhv_sqprx_103:not(#\9),
|
|
104
|
+
.awsui_warning-icon-shake-wrapper_14mhv_sqprx_104:not(#\9) {
|
|
105
|
+
animation: awsui_awsui-motion-shake-horizontally_14mhv_sqprx_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms);
|
|
106
106
|
}
|
|
107
|
-
@keyframes awsui_awsui-motion-shake-
|
|
107
|
+
@keyframes awsui_awsui-motion-shake-horizontally_14mhv_sqprx_1 {
|
|
108
108
|
0% {
|
|
109
109
|
transform: translateX(-5px);
|
|
110
110
|
animation-timing-function: linear;
|
|
@@ -118,22 +118,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
@media (prefers-reduced-motion: reduce) {
|
|
121
|
-
.awsui_error-icon-shake-
|
|
122
|
-
.awsui_warning-icon-shake-
|
|
121
|
+
.awsui_error-icon-shake-wrapper_14mhv_sqprx_103:not(#\9),
|
|
122
|
+
.awsui_warning-icon-shake-wrapper_14mhv_sqprx_104:not(#\9) {
|
|
123
123
|
animation: none;
|
|
124
124
|
transition: none;
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
|
-
.awsui-motion-disabled .awsui_error-icon-shake-
|
|
127
|
+
.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_sqprx_103:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_sqprx_103:not(#\9), .awsui-motion-disabled .awsui_warning-icon-shake-wrapper_14mhv_sqprx_104:not(#\9), .awsui-mode-entering .awsui_warning-icon-shake-wrapper_14mhv_sqprx_104:not(#\9) {
|
|
128
128
|
animation: none;
|
|
129
129
|
transition: none;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
.awsui_error-icon-scale-
|
|
133
|
-
.awsui_warning-icon-scale-
|
|
134
|
-
animation: awsui_awsui-motion-scale-
|
|
132
|
+
.awsui_error-icon-scale-wrapper_14mhv_sqprx_134:not(#\9),
|
|
133
|
+
.awsui_warning-icon-scale-wrapper_14mhv_sqprx_135:not(#\9) {
|
|
134
|
+
animation: awsui_awsui-motion-scale-popup_14mhv_sqprx_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
|
|
135
135
|
}
|
|
136
|
-
@keyframes awsui_awsui-motion-scale-
|
|
136
|
+
@keyframes awsui_awsui-motion-scale-popup_14mhv_sqprx_1 {
|
|
137
137
|
0% {
|
|
138
138
|
transform: scale(0.95);
|
|
139
139
|
}
|
|
@@ -142,22 +142,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
@media (prefers-reduced-motion: reduce) {
|
|
145
|
-
.awsui_error-icon-scale-
|
|
146
|
-
.awsui_warning-icon-scale-
|
|
145
|
+
.awsui_error-icon-scale-wrapper_14mhv_sqprx_134:not(#\9),
|
|
146
|
+
.awsui_warning-icon-scale-wrapper_14mhv_sqprx_135:not(#\9) {
|
|
147
147
|
animation: none;
|
|
148
148
|
transition: none;
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
|
-
.awsui-motion-disabled .awsui_error-icon-scale-
|
|
151
|
+
.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_sqprx_134:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_sqprx_134:not(#\9), .awsui-motion-disabled .awsui_warning-icon-scale-wrapper_14mhv_sqprx_135:not(#\9), .awsui-mode-entering .awsui_warning-icon-scale-wrapper_14mhv_sqprx_135:not(#\9) {
|
|
152
152
|
animation: none;
|
|
153
153
|
transition: none;
|
|
154
154
|
}
|
|
155
155
|
|
|
156
|
-
.
|
|
157
|
-
.
|
|
158
|
-
animation: awsui_awsui-motion-fade-in-
|
|
156
|
+
.awsui_warning_14mhv_sqprx_104:not(#\9),
|
|
157
|
+
.awsui_error_14mhv_sqprx_103:not(#\9) {
|
|
158
|
+
animation: awsui_awsui-motion-fade-in-0_14mhv_sqprx_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
|
|
159
159
|
}
|
|
160
|
-
@keyframes awsui_awsui-motion-fade-in-
|
|
160
|
+
@keyframes awsui_awsui-motion-fade-in-0_14mhv_sqprx_1 {
|
|
161
161
|
from {
|
|
162
162
|
opacity: 0;
|
|
163
163
|
}
|
|
@@ -166,18 +166,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
166
166
|
}
|
|
167
167
|
}
|
|
168
168
|
@media (prefers-reduced-motion: reduce) {
|
|
169
|
-
.
|
|
170
|
-
.
|
|
169
|
+
.awsui_warning_14mhv_sqprx_104:not(#\9),
|
|
170
|
+
.awsui_error_14mhv_sqprx_103:not(#\9) {
|
|
171
171
|
animation: none;
|
|
172
172
|
transition: none;
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
|
-
.awsui-motion-disabled .
|
|
175
|
+
.awsui-motion-disabled .awsui_warning_14mhv_sqprx_104:not(#\9), .awsui-mode-entering .awsui_warning_14mhv_sqprx_104:not(#\9), .awsui-motion-disabled .awsui_error_14mhv_sqprx_103:not(#\9), .awsui-mode-entering .awsui_error_14mhv_sqprx_103:not(#\9) {
|
|
176
176
|
animation: none;
|
|
177
177
|
transition: none;
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
-
.
|
|
180
|
+
.awsui_root_14mhv_sqprx_186:not(#\9) {
|
|
181
181
|
border-collapse: separate;
|
|
182
182
|
border-spacing: 0;
|
|
183
183
|
box-sizing: border-box;
|
|
@@ -214,7 +214,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
214
214
|
box-sizing: border-box;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
-
.
|
|
217
|
+
.awsui_label_14mhv_sqprx_222:not(#\9) {
|
|
218
218
|
box-sizing: border-box;
|
|
219
219
|
color: var(--color-text-form-label-3ubxwt, #16191f);
|
|
220
220
|
display: inline;
|
|
@@ -223,44 +223,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
223
223
|
font-weight: var(--font-display-label-weight-2njs7q, 400);
|
|
224
224
|
margin-inline-end: var(--space-xs-xf5ch3, 8px);
|
|
225
225
|
}
|
|
226
|
-
.
|
|
226
|
+
.awsui_label_14mhv_sqprx_222:not(#\9):only-child {
|
|
227
227
|
margin-block: 0;
|
|
228
228
|
margin-inline: 0;
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
.
|
|
231
|
+
.awsui_info_14mhv_sqprx_236:not(#\9) {
|
|
232
232
|
display: inline-flex;
|
|
233
233
|
padding-inline-start: var(--space-xs-xf5ch3, 8px);
|
|
234
234
|
border-inline-start: var(--border-divider-section-width-wl9k66, 1px) solid var(--color-border-divider-default-in8dkg, #eaeded);
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
-
.
|
|
238
|
-
.
|
|
237
|
+
.awsui_description_14mhv_sqprx_242:not(#\9),
|
|
238
|
+
.awsui_constraint_14mhv_sqprx_243:not(#\9) {
|
|
239
239
|
color: var(--color-text-form-secondary-rh78tu, #687078);
|
|
240
240
|
font-size: var(--font-size-body-s-533prh, 12px);
|
|
241
241
|
line-height: var(--line-height-body-s-n0pazd, 16px);
|
|
242
242
|
letter-spacing: var(--letter-spacing-body-s-nkvets, normal);
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
-
.
|
|
246
|
-
.awsui_constraint-has-validation-
|
|
245
|
+
.awsui_hints_14mhv_sqprx_250:not(#\9),
|
|
246
|
+
.awsui_constraint-has-validation-text_14mhv_sqprx_251:not(#\9) {
|
|
247
247
|
padding-block-start: var(--space-xxs-9rrxti, 4px);
|
|
248
248
|
}
|
|
249
249
|
|
|
250
|
-
.awsui_secondary-
|
|
250
|
+
.awsui_secondary-control_14mhv_sqprx_255:not(#\9) {
|
|
251
251
|
/* used in test-utils */
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
-
.
|
|
254
|
+
.awsui_controls_14mhv_sqprx_259:not(#\9):not(.awsui_label-hidden_14mhv_sqprx_259) {
|
|
255
255
|
padding-block-start: var(--space-xxs-9rrxti, 4px);
|
|
256
256
|
}
|
|
257
|
+
.awsui_label-wrapper_14mhv_sqprx_262:not(#\9):empty + .awsui_controls_14mhv_sqprx_259 {
|
|
258
|
+
padding-block-start: 0;
|
|
259
|
+
}
|
|
257
260
|
|
|
258
|
-
.
|
|
261
|
+
.awsui_control_14mhv_sqprx_259:not(#\9) {
|
|
259
262
|
min-inline-size: 0;
|
|
260
263
|
word-break: break-word;
|
|
261
264
|
}
|
|
262
265
|
|
|
263
|
-
.
|
|
266
|
+
.awsui_error_14mhv_sqprx_103:not(#\9) {
|
|
264
267
|
color: var(--color-text-status-error-ofc4yr, #d13212);
|
|
265
268
|
font-size: var(--font-size-body-s-533prh, 12px);
|
|
266
269
|
line-height: var(--line-height-body-s-n0pazd, 16px);
|
|
@@ -269,7 +272,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
269
272
|
align-items: flex-start;
|
|
270
273
|
}
|
|
271
274
|
|
|
272
|
-
.
|
|
275
|
+
.awsui_warning_14mhv_sqprx_104:not(#\9) {
|
|
273
276
|
color: var(--color-text-status-warning-azn00c, #906806);
|
|
274
277
|
font-size: var(--font-size-body-s-533prh, 12px);
|
|
275
278
|
line-height: var(--line-height-body-s-n0pazd, 16px);
|
|
@@ -278,12 +281,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
278
281
|
align-items: flex-start;
|
|
279
282
|
}
|
|
280
283
|
|
|
281
|
-
.
|
|
282
|
-
.
|
|
284
|
+
.awsui_error__message_14mhv_sqprx_289:not(#\9),
|
|
285
|
+
.awsui_warning__message_14mhv_sqprx_290:not(#\9) {
|
|
283
286
|
margin-inline-start: var(--space-xxs-9rrxti, 4px);
|
|
284
287
|
}
|
|
285
288
|
|
|
286
|
-
.awsui_visually-
|
|
289
|
+
.awsui_visually-hidden_14mhv_sqprx_294:not(#\9) {
|
|
287
290
|
position: absolute !important;
|
|
288
291
|
inset-block-start: -9999px !important;
|
|
289
292
|
inset-inline-start: -9999px !important;
|
|
@@ -2,28 +2,29 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"error-icon-shake-wrapper": "awsui_error-icon-shake-
|
|
6
|
-
"warning-icon-shake-wrapper": "awsui_warning-icon-shake-
|
|
7
|
-
"awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-
|
|
8
|
-
"error-icon-scale-wrapper": "awsui_error-icon-scale-
|
|
9
|
-
"warning-icon-scale-wrapper": "awsui_warning-icon-scale-
|
|
10
|
-
"awsui-motion-scale-popup": "awsui_awsui-motion-scale-
|
|
11
|
-
"warning": "
|
|
12
|
-
"error": "
|
|
13
|
-
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-
|
|
14
|
-
"root": "
|
|
15
|
-
"label": "
|
|
16
|
-
"info": "
|
|
17
|
-
"description": "
|
|
18
|
-
"constraint": "
|
|
19
|
-
"hints": "
|
|
20
|
-
"constraint-has-validation-text": "awsui_constraint-has-validation-
|
|
21
|
-
"secondary-control": "awsui_secondary-
|
|
22
|
-
"controls": "
|
|
23
|
-
"label-hidden": "awsui_label-
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
5
|
+
"error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_sqprx_103",
|
|
6
|
+
"warning-icon-shake-wrapper": "awsui_warning-icon-shake-wrapper_14mhv_sqprx_104",
|
|
7
|
+
"awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_sqprx_1",
|
|
8
|
+
"error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_sqprx_134",
|
|
9
|
+
"warning-icon-scale-wrapper": "awsui_warning-icon-scale-wrapper_14mhv_sqprx_135",
|
|
10
|
+
"awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_sqprx_1",
|
|
11
|
+
"warning": "awsui_warning_14mhv_sqprx_104",
|
|
12
|
+
"error": "awsui_error_14mhv_sqprx_103",
|
|
13
|
+
"awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_sqprx_1",
|
|
14
|
+
"root": "awsui_root_14mhv_sqprx_186",
|
|
15
|
+
"label": "awsui_label_14mhv_sqprx_222",
|
|
16
|
+
"info": "awsui_info_14mhv_sqprx_236",
|
|
17
|
+
"description": "awsui_description_14mhv_sqprx_242",
|
|
18
|
+
"constraint": "awsui_constraint_14mhv_sqprx_243",
|
|
19
|
+
"hints": "awsui_hints_14mhv_sqprx_250",
|
|
20
|
+
"constraint-has-validation-text": "awsui_constraint-has-validation-text_14mhv_sqprx_251",
|
|
21
|
+
"secondary-control": "awsui_secondary-control_14mhv_sqprx_255",
|
|
22
|
+
"controls": "awsui_controls_14mhv_sqprx_259",
|
|
23
|
+
"label-hidden": "awsui_label-hidden_14mhv_sqprx_259",
|
|
24
|
+
"label-wrapper": "awsui_label-wrapper_14mhv_sqprx_262",
|
|
25
|
+
"control": "awsui_control_14mhv_sqprx_259",
|
|
26
|
+
"error__message": "awsui_error__message_14mhv_sqprx_289",
|
|
27
|
+
"warning__message": "awsui_warning__message_14mhv_sqprx_290",
|
|
28
|
+
"visually-hidden": "awsui_visually-hidden_14mhv_sqprx_294"
|
|
28
29
|
};
|
|
29
30
|
|
|
@@ -49,7 +49,7 @@ export default function ProgressBar(_a) {
|
|
|
49
49
|
announcedValue))) : (React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: () => {
|
|
50
50
|
fireNonCancelableEvent(onResultButtonClick);
|
|
51
51
|
} })))),
|
|
52
|
-
additionalInfo && (React.createElement(SmallText, {
|
|
52
|
+
additionalInfo && (React.createElement(SmallText, { className: styles['additional-info'], color: isInFlash ? 'inherit' : undefined }, additionalInfo))));
|
|
53
53
|
}
|
|
54
54
|
applyDisplayName(ProgressBar, 'ProgressBar');
|
|
55
55
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.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 React, { useEffect, useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { joinStrings } from '../internal/utils/strings';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { throttle } from '../internal/utils/throttle';\nimport LiveRegion from '../internal/components/live-region';\n\nconst ASSERTION_FREQUENCY = 5000; // interval in ms between progress announcements\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n value = 0,\n status = 'in-progress',\n variant = 'standalone',\n resultButtonText,\n label,\n ariaLabel,\n ariaLabelledby,\n description,\n additionalInfo,\n resultText,\n onResultButtonClick,\n ...rest\n}: ProgressBarProps) {\n const { __internalRootRef } = useBaseComponent('ProgressBar', {\n props: { variant },\n });\n const baseProps = getBaseProps(rest);\n const generatedName = useUniqueId('awsui-progress-bar-');\n\n const labelId = `${generatedName}-label`;\n const isInFlash = variant === 'flash';\n const isInProgressState = status === 'in-progress';\n\n const [announcedValue, setAnnouncedValue] = useState('');\n const throttledAssertion = useMemo(() => {\n return throttle((value: ProgressBarProps['value']) => {\n setAnnouncedValue(`${value}%`);\n }, ASSERTION_FREQUENCY);\n }, []);\n\n useEffect(() => {\n throttledAssertion(value);\n }, [throttledAssertion, value]);\n\n if (isInFlash && resultButtonText) {\n warnOnce(\n 'ProgressBar',\n 'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n ref={__internalRootRef}\n >\n <div className={isInFlash ? styles['flash-container'] : undefined}>\n <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n {label}\n </div>\n {description && <SmallText color={isInFlash ? 'inherit' : undefined}>{description}</SmallText>}\n <div>\n {isInProgressState ? (\n <>\n <Progress\n value={value}\n ariaLabel={ariaLabel}\n ariaLabelledby={joinStrings(labelId, ariaLabelledby)}\n isInFlash={isInFlash}\n />\n <LiveRegion delay={0}>\n {label}\n {label ? ': ' : null}\n {announcedValue}\n </LiveRegion>\n </>\n ) : (\n <ResultState\n resultText={resultText}\n isInFlash={isInFlash}\n resultButtonText={resultButtonText}\n status={status}\n onClick={() => {\n fireNonCancelableEvent(onResultButtonClick);\n }}\n />\n )}\n </div>\n </div>\n {additionalInfo && (\n <SmallText className={styles['additional-info']} color={isInFlash ? 'inherit' : undefined}>\n {additionalInfo}\n </SmallText>\n )}\n </div>\n );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}
|
|
@@ -11,9 +11,9 @@ export declare const Progress: ({ value, isInFlash, ariaLabel, ariaLabelledby }:
|
|
|
11
11
|
interface SmallTextProps {
|
|
12
12
|
color?: BoxProps.Color;
|
|
13
13
|
children: React.ReactNode;
|
|
14
|
-
|
|
14
|
+
className?: string;
|
|
15
15
|
}
|
|
16
|
-
export declare const SmallText: ({ color, children,
|
|
16
|
+
export declare const SmallText: ({ color, children, className }: SmallTextProps) => JSX.Element;
|
|
17
17
|
interface ResultStateProps {
|
|
18
18
|
isInFlash: boolean;
|
|
19
19
|
resultText: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AACD,eAAO,MAAM,QAAQ,oDAAqD,aAAa,gBAyBtF,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AACD,eAAO,MAAM,QAAQ,oDAAqD,aAAa,gBAyBtF,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,mCAAoC,cAAc,gBAMvE,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,iEAAkE,gBAAgB,gBAqBzG,CAAC"}
|
|
@@ -18,8 +18,8 @@ export const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby }) => {
|
|
|
18
18
|
React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
|
|
19
19
|
React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, `${progressValue}%`))));
|
|
20
20
|
};
|
|
21
|
-
export const SmallText = ({ color, children,
|
|
22
|
-
return (React.createElement(InternalBox, { className: styles['word-wrap'], variant: "small", display: "block", color: color
|
|
21
|
+
export const SmallText = ({ color, children, className }) => {
|
|
22
|
+
return (React.createElement(InternalBox, { className: clsx(styles['word-wrap'], className), variant: "small", display: "block", color: color }, children));
|
|
23
23
|
};
|
|
24
24
|
const ResultButton = ({ onClick, children }) => {
|
|
25
25
|
return (React.createElement("div", { className: styles['result-button'] },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,UAAkB,EAAE,UAAkB,EAAE,EAAE;IACtE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,UAAU,CAAC,CAAC;AAC3D,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAiB,EAAE,EAAE;IACzF,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,aAAa,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,oBAAoB,CAAC;QAC1C,kCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,QAAQ,EACf,aAAa,IAAI,SAAS,IAAI,MAAM,CAAC,QAAQ,EAC7C,SAAS,IAAI,MAAM,CAAC,mBAAmB,CAAC,CACzC,EACD,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,aAAa,gBACR,SAAS,qBAEJ,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,GACxD;QACF,6CAAkB,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;YAChE,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,OAAO,EAAC,OAAO,EAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IAChG,GAAG,aAAa,GAAG,CACR,CACT,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.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 React from 'react';\nimport clsx from 'clsx';\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport { ProgressBarProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n value: number;\n isInFlash: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n}\nexport const Progress = ({ value, isInFlash, ariaLabel, ariaLabelledby }: ProgressProps) => {\n const roundedValue = Math.round(value);\n const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n return (\n <div className={styles['progress-container']}>\n <progress\n className={clsx(\n styles.progress,\n progressValue >= MAX_VALUE && styles.complete,\n isInFlash && styles['progress-in-flash']\n )}\n max={MAX_VALUE}\n value={progressValue}\n aria-label={ariaLabel}\n // Ensures aria-label takes precedence over aria-labelledby\n aria-labelledby={!ariaLabel ? ariaLabelledby : undefined}\n />\n <span aria-hidden=\"true\" className={styles['percentage-container']}>\n <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\n {`${progressValue}%`}\n </InternalBox>\n </span>\n </div>\n );\n};\n\ninterface SmallTextProps {\n color?: BoxProps.Color;\n children: React.ReactNode;\n className?: string;\n}\n\nexport const SmallText = ({ color, children, className }: SmallTextProps) => {\n return (\n <InternalBox className={clsx(styles['word-wrap'], className)} variant=\"small\" display=\"block\" color={color}>\n {children}\n </InternalBox>\n );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n return (\n <div className={styles['result-button']}>\n <InternalButton formAction=\"none\" onClick={onClick}>\n {children}\n </InternalButton>\n </div>\n );\n};\n\ninterface ResultStateProps {\n isInFlash: boolean;\n resultText: React.ReactNode;\n resultButtonText?: string;\n status: ProgressBarProps.Status;\n onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n const hasResultButton = !!resultButtonText;\n\n if (isInFlash) {\n return (\n <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n <span className={styles['result-text']}>{resultText}</span>\n </div>\n );\n }\n\n return (\n <div className={styles[`result-container-${status}`]} aria-live=\"polite\" aria-atomic=\"true\">\n <span className={clsx(hasResultButton && styles['with-result-button'])}>\n <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n <span className={styles['result-text']}>{resultText}</span>\n </InternalStatusIndicator>\n </span>\n {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n </div>\n );\n};\n"]}
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"progress": "
|
|
5
|
-
"result-state": "awsui_result-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"root": "
|
|
8
|
-
"with-result-button": "awsui_with-result-
|
|
9
|
-
"result-text": "awsui_result-
|
|
10
|
-
"result-container-error": "awsui_result-container-
|
|
11
|
-
"result-container-success": "awsui_result-container-
|
|
12
|
-
"result-button": "awsui_result-
|
|
13
|
-
"word-wrap": "awsui_word-
|
|
14
|
-
"label-flash": "awsui_label-
|
|
15
|
-
"label-key-value": "awsui_label-key-
|
|
16
|
-
"flash": "
|
|
17
|
-
"progress-container": "awsui_progress-
|
|
18
|
-
"percentage-container": "awsui_percentage-
|
|
19
|
-
"percentage": "
|
|
20
|
-
"complete": "
|
|
21
|
-
"progress-in-flash": "awsui_progress-in-
|
|
4
|
+
"progress": "awsui_progress_11huc_1f41j_197",
|
|
5
|
+
"result-state": "awsui_result-state_11huc_1f41j_211",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_1f41j_1",
|
|
7
|
+
"root": "awsui_root_11huc_1f41j_233",
|
|
8
|
+
"with-result-button": "awsui_with-result-button_11huc_1f41j_268",
|
|
9
|
+
"result-text": "awsui_result-text_11huc_1f41j_272",
|
|
10
|
+
"result-container-error": "awsui_result-container-error_11huc_1f41j_276",
|
|
11
|
+
"result-container-success": "awsui_result-container-success_11huc_1f41j_276",
|
|
12
|
+
"result-button": "awsui_result-button_11huc_1f41j_280",
|
|
13
|
+
"word-wrap": "awsui_word-wrap_11huc_1f41j_286",
|
|
14
|
+
"label-flash": "awsui_label-flash_11huc_1f41j_291",
|
|
15
|
+
"label-key-value": "awsui_label-key-value_11huc_1f41j_295",
|
|
16
|
+
"flash": "awsui_flash_11huc_1f41j_303",
|
|
17
|
+
"progress-container": "awsui_progress-container_11huc_1f41j_307",
|
|
18
|
+
"percentage-container": "awsui_percentage-container_11huc_1f41j_314",
|
|
19
|
+
"percentage": "awsui_percentage_11huc_1f41j_314",
|
|
20
|
+
"complete": "awsui_complete_11huc_1f41j_360",
|
|
21
|
+
"progress-in-flash": "awsui_progress-in-flash_11huc_1f41j_388",
|
|
22
|
+
"additional-info": "awsui_additional-info_11huc_1f41j_404"
|
|
22
23
|
};
|
|
23
24
|
|