diff --git a/pages/file-token-group/permutations.page.tsx b/pages/file-token-group/permutations.page.tsx new file mode 100644 index 0000000000..051c515e89 --- /dev/null +++ b/pages/file-token-group/permutations.page.tsx @@ -0,0 +1,68 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import FileTokenGroup, { FileTokenGroupProps } from '~components/file-token-group'; + +import createPermutations from '../utils/permutations'; +import PermutationsView from '../utils/permutations-view'; +import ScreenshotArea from '../utils/screenshot-area'; + +const file1 = new File([new Blob(['demo content 1'])], 'demo file 1', { type: 'image/*' }); +const file2 = new File([new Blob(['demo content 2'])], 'demo file 2 long name here test', { type: 'image/*' }); + +const permutations = createPermutations>([ + { + items: [[{ file: file1 }]], + showFileLastModified: [true, false], + showFileSize: [true, false], + alignment: ['horizontal', 'vertical'], + }, + { + items: [[{ file: file1 }, { file: file2, loading: true }]], + showFileLastModified: [true, false], + showFileSize: [true, false], + alignment: ['horizontal', 'vertical'], + }, + { + items: [ + [ + { file: file1, errorText: 'Error' }, + { file: file2, warningText: 'Warning' }, + ], + ], + showFileLastModified: [true, false], + showFileSize: [true, false], + alignment: ['horizontal', 'vertical'], + }, +]); + +export default function FileTokenGroupPermutations() { + return ( + <> +

FileTokenGroup permutations

+ + ( + `Remove file ${fileIndex + 1}`, + formatFileSize: () => `1.01 MB`, + formatFileLastModified: () => '2020-01-01T00:00:00', + limitShowFewer: 'Show fewer', + limitShowMore: 'Show more', + }} + onDismiss={() => { + /*empty handler to suppress react controlled property warning*/ + }} + {...permutation} + /> + )} + /> + + + ); +} diff --git a/src/__tests__/required-props-for-components.ts b/src/__tests__/required-props-for-components.ts index 4c9251dc0a..e28ba9b28b 100644 --- a/src/__tests__/required-props-for-components.ts +++ b/src/__tests__/required-props-for-components.ts @@ -144,6 +144,13 @@ const defaultProps: Record> = { uploadButtonText: () => 'Choose file(s)', }, }, + 'file-token-group': { + items: [], + i18nStrings: { + limitShowFewer: '', + limitShowMore: '', + }, + }, 'key-value-pairs': { items: [], }, diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 96f2adecb4..ff9453de0e 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -7361,6 +7361,175 @@ use the \`id\` attribute, consider setting it on a parent element instead.", } `; +exports[`Documenter definition for file-token-group matches the snapshot: file-token-group 1`] = ` +{ + "events": [ + { + "cancelable": false, + "description": " Called when the user clicks on the dismiss button. The token won't be automatically removed. + Make sure that you add a listener to this event to update your application state.", + "detailInlineType": { + "name": "FileTokenGroupProps.DismissDetail", + "properties": [ + { + "name": "fileIndex", + "optional": false, + "type": "number", + }, + ], + "type": "object", + }, + "detailType": "FileTokenGroupProps.DismissDetail", + "name": "onDismiss", + }, + ], + "functions": [], + "name": "FileTokenGroup", + "properties": [ + { + "description": "Specifies the direction in which tokens are aligned (\`horizontal | vertical\`).", + "inlineType": { + "name": "FileTokenGroupProps.Alignment", + "type": "union", + "values": [ + "horizontal", + "vertical", + ], + }, + "name": "alignment", + "optional": true, + "type": "string", + }, + { + "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).", + "description": "Adds the specified classes to the root element of the component.", + "name": "className", + "optional": true, + "type": "string", + }, + { + "description": "An object containing all the localized strings required by the component: +* \`removeFileAriaLabel\` (function): A function to render the ARIA label for file token remove button. +* \`errorIconAriaLabel\` (string): The ARIA label to be shown on the error file icon. +* \`warningIconAriaLabel\` (string): The ARIA label to be shown on the warning file icon. +* \`formatFileSize\` (function): (Optional) A function that takes file size in bytes, and produces a formatted string. +* \`formatFileLastModified\` (function): (Optional) A function that takes the files last modified date, and produces a formatted string.", + "inlineType": { + "name": "FileTokenGroupProps.I18nStrings", + "properties": [ + { + "name": "errorIconAriaLabel", + "optional": true, + "type": "string", + }, + { + "name": "formatFileLastModified", + "optional": true, + "type": "(date: Date) => string", + }, + { + "name": "formatFileSize", + "optional": true, + "type": "(sizeInBytes: number) => string", + }, + { + "name": "limitShowFewer", + "optional": true, + "type": "string", + }, + { + "name": "limitShowMore", + "optional": true, + "type": "string", + }, + { + "name": "removeFileAriaLabel", + "optional": false, + "type": "(fileIndex: number) => string", + }, + { + "name": "warningIconAriaLabel", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "i18nStrings", + "optional": false, + "type": "FileTokenGroupProps.I18nStrings", + }, + { + "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases, +use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must +use the \`id\` attribute, consider setting it on a parent element instead.", + "description": "Adds the specified ID to the root element of the component.", + "name": "id", + "optional": true, + "type": "string", + }, + { + "description": "An array of objects representing token items. Each token has the following properties: +- \`file\` (string) - File value. +- \`loading\` (boolean) - (Optional) Determine whether the token is loading. +- \`errorText\` (string) - (Optional) Text that displays as a validation error message. +- \`warningText\` (string) - (Optional) - Text that displays as a validation warning message. +", + "name": "items", + "optional": false, + "type": "ReadonlyArray", + }, + { + "description": "Specifies the maximum number of displayed tokens. If the property isn't set, all of the tokens are displayed.", + "name": "limit", + "optional": true, + "type": "number", + }, + { + "description": "Adds an \`aria-label\` to the "Show fewer" button. +Use to assign unique labels when there are multiple file token groups with the same \`limitShowFewer\` label on one page.", + "name": "limitShowFewerAriaLabel", + "optional": true, + "type": "string", + }, + { + "description": "Adds an \`aria-label\` to the "Show more" button. +Use to assign unique labels when there are multiple file token groups with the same \`limitShowMore\` label on one page.", + "name": "limitShowMoreAriaLabel", + "optional": true, + "type": "string", + }, + { + "description": "Specifies if the control is read-only, which prevents the +user from modifying the value. A read-only control is still focusable.", + "name": "readOnly", + "optional": true, + "type": "boolean", + }, + { + "description": "Show file last modified timestamp in the token. Use \`i18nStrings.formatFileLastModified\` to customize it.", + "name": "showFileLastModified", + "optional": true, + "type": "boolean", + }, + { + "description": "Show file size in the token. Use \`i18nStrings.formatFileSize\` to customize it.", + "name": "showFileSize", + "optional": true, + "type": "boolean", + }, + { + "description": "Show file thumbnail in the token. Only supported for images.", + "name": "showFileThumbnail", + "optional": true, + "type": "boolean", + }, + ], + "regions": [], + "releaseStatus": "stable", +} +`; + exports[`Documenter definition for file-upload matches the snapshot: file-upload 1`] = ` { "events": [ diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index c8025d20ff..e190f54f0e 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -249,6 +249,14 @@ exports[`test-utils selectors 1`] = ` "awsui_icon-container_gwq0h", "awsui_root_gwq0h", ], + "file-token-group": [ + "awsui_file-option-last-modified_39ths", + "awsui_file-option-name_39ths", + "awsui_file-option-size_39ths", + "awsui_file-option-thumbnail_39ths", + "awsui_root_polq8", + "awsui_token_39ths", + ], "file-upload": [ "awsui_hints_1ubbm", "awsui_root_1ubbm", @@ -335,10 +343,6 @@ exports[`test-utils selectors 1`] = ` "awsui_dropdown_qwoo0", "awsui_file-input-button_181f9", "awsui_file-input_181f9", - "awsui_file-option-last-modified_ofwwb", - "awsui_file-option-name_ofwwb", - "awsui_file-option-size_ofwwb", - "awsui_file-option-thumbnail_ofwwb", "awsui_filter-container_z5mul", "awsui_filtering-match-highlight_1p2cx", "awsui_handle_sdha6", @@ -365,7 +369,6 @@ exports[`test-utils selectors 1`] = ` "awsui_root_1qprf", "awsui_root_1t44z", "awsui_root_1tk3k", - "awsui_root_9f1dn", "awsui_root_qwoo0", "awsui_root_vrgzu", "awsui_selectable-item_15o6u", @@ -375,7 +378,6 @@ exports[`test-utils selectors 1`] = ` "awsui_ticks--y_f0fot", "awsui_title_1kjc7", "awsui_toggle_gfwv3", - "awsui_token_ofwwb", "awsui_value_10ipo", "awsui_wrapper_1wepg", ], diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap index f41edd874d..e388bad762 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -117,6 +117,10 @@ export { ElementWrapper }; export { ExpandableSectionWrapper }; + import FileTokenGroupWrapper from './file-token-group'; + export { FileTokenGroupWrapper }; + + import FileUploadWrapper from './file-upload'; export { FileUploadWrapper }; @@ -338,6 +342,7 @@ findDatePicker(selector?: string): DatePickerWrapper | null; findDateRangePicker(selector?: string): DateRangePickerWrapper | null; findDrawer(selector?: string): DrawerWrapper | null; findExpandableSection(selector?: string): ExpandableSectionWrapper | null; +findFileTokenGroup(selector?: string): FileTokenGroupWrapper | null; findFileUpload(selector?: string): FileUploadWrapper | null; findFlashbar(selector?: string): FlashbarWrapper | null; findForm(selector?: string): FormWrapper | null; @@ -556,6 +561,12 @@ ElementWrapper.prototype.findExpandableSection = function(selector) { // https://github.com/microsoft/TypeScript/issues/29132 return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper); }; +ElementWrapper.prototype.findFileTokenGroup = function(selector) { + const rootSelector = \`.\${FileTokenGroupWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileTokenGroupWrapper); + }; ElementWrapper.prototype.findFileUpload = function(selector) { const rootSelector = \`.\${FileUploadWrapper.rootSelector}\`; // casting to 'any' is needed to avoid this issue with generics @@ -964,6 +975,10 @@ export { ElementWrapper }; export { ExpandableSectionWrapper }; + import FileTokenGroupWrapper from './file-token-group'; + export { FileTokenGroupWrapper }; + + import FileUploadWrapper from './file-upload'; export { FileUploadWrapper }; @@ -1185,6 +1200,7 @@ findDatePicker(selector?: string): DatePickerWrapper; findDateRangePicker(selector?: string): DateRangePickerWrapper; findDrawer(selector?: string): DrawerWrapper; findExpandableSection(selector?: string): ExpandableSectionWrapper; +findFileTokenGroup(selector?: string): FileTokenGroupWrapper; findFileUpload(selector?: string): FileUploadWrapper; findFlashbar(selector?: string): FlashbarWrapper; findForm(selector?: string): FormWrapper; @@ -1403,6 +1419,12 @@ ElementWrapper.prototype.findExpandableSection = function(selector) { // https://github.com/microsoft/TypeScript/issues/29132 return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ExpandableSectionWrapper); }; +ElementWrapper.prototype.findFileTokenGroup = function(selector) { + const rootSelector = \`.\${FileTokenGroupWrapper.rootSelector}\`; + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, FileTokenGroupWrapper); + }; ElementWrapper.prototype.findFileUpload = function(selector) { const rootSelector = \`.\${FileUploadWrapper.rootSelector}\`; // casting to 'any' is needed to avoid this issue with generics diff --git a/src/internal/components/file-token-group/__tests__/default-formatters.test.tsx b/src/file-token-group/__tests__/default-formatters.test.tsx similarity index 100% rename from src/internal/components/file-token-group/__tests__/default-formatters.test.tsx rename to src/file-token-group/__tests__/default-formatters.test.tsx diff --git a/src/internal/components/file-token-group/__tests__/file-token-group.test.tsx b/src/file-token-group/__tests__/file-token-group.test.tsx similarity index 91% rename from src/internal/components/file-token-group/__tests__/file-token-group.test.tsx rename to src/file-token-group/__tests__/file-token-group.test.tsx index 14fca2e7e8..ce2b25066b 100644 --- a/src/internal/components/file-token-group/__tests__/file-token-group.test.tsx +++ b/src/file-token-group/__tests__/file-token-group.test.tsx @@ -3,18 +3,15 @@ import React, { useState } from 'react'; import { act, fireEvent, render as testingLibraryRender } from '@testing-library/react'; -import '../../../../__a11y__/to-validate-a11y'; -import FileTokenGroup, { - FileTokenGroupProps, -} from '../../../../../lib/components/internal/components/file-token-group'; -import createWrapper from '../../../../../lib/components/test-utils/dom'; -import FileTokenGroupWrapper from '../../../../../lib/components/test-utils/dom/internal/file-token-group'; - -import styles from '../../../../../lib/components/internal/components/file-token-group/styles.css.js'; -import testStyles from '../../../../../lib/components/internal/components/file-token-group/test-classes/styles.css.js'; -import tooltipStyles from '../../../../../lib/components/internal/components/tooltip/styles.selectors.js'; - -jest.mock('../../../../../lib/components/internal/utils/date-time', () => ({ +import '../../__a11y__/to-validate-a11y'; +import FileTokenGroup, { FileTokenGroupProps } from '../../../lib/components/file-token-group'; +import createWrapper from '../../../lib/components/test-utils/dom'; + +import styles from '../../../lib/components/file-token-group/styles.css.js'; +import testStyles from '../../../lib/components/file-token-group/test-classes/styles.css.js'; +import tooltipStyles from '../../../lib/components/internal/components/tooltip/styles.selectors.js'; + +jest.mock('../../../lib/components/internal/utils/date-time', () => ({ formatDateTime: () => '2020-06-01T00:00:00', })); @@ -50,20 +47,18 @@ const file3 = new File( ); function render(props: Partial) { - testingLibraryRender( + const { container } = testingLibraryRender(
Test label
); - const element = createWrapper().findByClassName(FileTokenGroupWrapper.rootSelector)!.getElement(); - return new FileTokenGroupWrapper(element); + return createWrapper(container).findFileTokenGroup()!; } function renderStateful(props: Partial = {}) { - testingLibraryRender(); - const element = createWrapper().findByClassName(FileTokenGroupWrapper.rootSelector)!.getElement(); - return new FileTokenGroupWrapper(element); + const { container } = testingLibraryRender(); + return createWrapper(container).findFileTokenGroup()!; } function StatefulFileTokenGroup({ items: initialItems = [], ...rest }: Partial) { diff --git a/src/internal/components/file-token-group/constants.scss b/src/file-token-group/constants.scss similarity index 88% rename from src/internal/components/file-token-group/constants.scss rename to src/file-token-group/constants.scss index 6c9aba203f..b08ff50f49 100644 --- a/src/internal/components/file-token-group/constants.scss +++ b/src/file-token-group/constants.scss @@ -3,7 +3,7 @@ SPDX-License-Identifier: Apache-2.0 */ -@use '../../styles/tokens' as awsui; +@use '../internal/styles/tokens' as awsui; $image-size: 48px; $file-token-height: 68px; diff --git a/src/internal/components/file-token-group/default-formatters.ts b/src/file-token-group/default-formatters.ts similarity index 90% rename from src/internal/components/file-token-group/default-formatters.ts rename to src/file-token-group/default-formatters.ts index 3fffd6538b..1374abc65b 100644 --- a/src/internal/components/file-token-group/default-formatters.ts +++ b/src/file-token-group/default-formatters.ts @@ -1,7 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { formatDateTime } from '../../utils/date-time'; +import { formatDateTime } from '../internal/utils/date-time'; const KB = 1000; const MB = 1000 ** 2; diff --git a/src/internal/components/file-token-group/file-token.tsx b/src/file-token-group/file-token.tsx similarity index 90% rename from src/internal/components/file-token-group/file-token.tsx rename to src/file-token-group/file-token.tsx index c3e852777c..c60fb3dc10 100644 --- a/src/internal/components/file-token-group/file-token.tsx +++ b/src/file-token-group/file-token.tsx @@ -4,15 +4,15 @@ import React, { useRef, useState } from 'react'; import clsx from 'clsx'; -import InternalBox from '../../../box/internal.js'; -import { FormFieldError, FormFieldWarning } from '../../../form-field/internal'; -import InternalSpaceBetween from '../../../space-between/internal.js'; -import InternalSpinner from '../../../spinner/internal.js'; -import DismissButton from '../../../token-group/dismiss-button'; -import { TokenGroupProps } from '../../../token-group/interfaces.js'; -import { BaseComponentProps } from '../../base-component/index.js'; -import { useUniqueId } from '../../hooks/use-unique-id'; -import Tooltip from '../tooltip/index'; +import InternalBox from '../box/internal.js'; +import { FormFieldError, FormFieldWarning } from '../form-field/internal'; +import { BaseComponentProps } from '../internal/base-component/index.js'; +import Tooltip from '../internal/components/tooltip/index'; +import { useUniqueId } from '../internal/hooks/use-unique-id'; +import InternalSpaceBetween from '../space-between/internal.js'; +import InternalSpinner from '../spinner/internal.js'; +import DismissButton from '../token-group/dismiss-button'; +import { TokenGroupProps } from '../token-group/interfaces.js'; import * as defaultFormatters from './default-formatters.js'; import { FileOptionThumbnail } from './thumbnail.js'; @@ -93,7 +93,7 @@ function InternalFileToken({ ref={containerRef} className={clsx(styles.token, { [styles['token-grid']]: alignment === 'horizontal', - [styles['token-contains-image']]: groupContainsImage, + [styles['token-contains-image']]: groupContainsImage && showFileThumbnail, })} role="group" aria-label={file.name} diff --git a/src/file-token-group/index.tsx b/src/file-token-group/index.tsx new file mode 100644 index 0000000000..6f37e87ef2 --- /dev/null +++ b/src/file-token-group/index.tsx @@ -0,0 +1,32 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import useBaseComponent from '../internal/hooks/use-base-component'; +import { applyDisplayName } from '../internal/utils/apply-display-name'; +import { FileTokenGroupProps } from './interfaces'; +import InternalFileTokenGroup from './internal'; + +export { FileTokenGroupProps }; + +const FileTokenGroup = ({ showFileLastModified, showFileSize, showFileThumbnail, ...props }: FileTokenGroupProps) => { + const baseComponentProps = useBaseComponent('FileTokenGroup', { + props: { + showFileLastModified, + showFileSize, + showFileThumbnail, + }, + }); + return ( + + ); +}; + +applyDisplayName(FileTokenGroup, 'FileTokenGroup'); +export default FileTokenGroup; diff --git a/src/internal/components/file-token-group/interfaces.ts b/src/file-token-group/interfaces.ts similarity index 96% rename from src/internal/components/file-token-group/interfaces.ts rename to src/file-token-group/interfaces.ts index 08c2805bc1..6b9b7724fc 100644 --- a/src/internal/components/file-token-group/interfaces.ts +++ b/src/file-token-group/interfaces.ts @@ -1,7 +1,7 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 -import { BaseComponentProps } from '../../base-component'; -import { NonCancelableEventHandler } from '../../events'; +import { BaseComponentProps } from '../internal/base-component'; +import { NonCancelableEventHandler } from '../internal/events'; export interface FileTokenGroupProps extends BaseComponentProps { /** diff --git a/src/internal/components/file-token-group/index.tsx b/src/file-token-group/internal.tsx similarity index 82% rename from src/internal/components/file-token-group/index.tsx rename to src/file-token-group/internal.tsx index a7a1d95e20..72f4faffa8 100644 --- a/src/internal/components/file-token-group/index.tsx +++ b/src/file-token-group/internal.tsx @@ -4,21 +4,19 @@ import React, { useState } from 'react'; import clsx from 'clsx'; -import { getBaseProps } from '../../base-component/index.js'; -import { fireNonCancelableEvent } from '../../events/index.js'; -import { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js'; -import { useListFocusController } from '../../hooks/use-list-focus-controller.js'; -import { useMergeRefs } from '../../hooks/use-merge-refs/index.js'; -import TokenList from '../token-list/index.js'; +import { getBaseProps } from '../internal/base-component/index.js'; +import TokenList from '../internal/components/token-list/index.js'; +import { fireNonCancelableEvent } from '../internal/events/index.js'; +import { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js'; +import { useListFocusController } from '../internal/hooks/use-list-focus-controller.js'; +import { useMergeRefs } from '../internal/hooks/use-merge-refs/index.js'; import InternalFileToken from './file-token.js'; import { FileTokenGroupProps } from './interfaces.js'; -import tokenListStyles from '../token-list/styles.css.js'; +import tokenListStyles from '../internal/components/token-list/styles.css.js'; import styles from './styles.css.js'; import testStyles from './test-classes/styles.css.js'; -export { FileTokenGroupProps }; - type InternalFileTokenGroupProps = FileTokenGroupProps & InternalBaseComponentProps; function InternalFileTokenGroup({ diff --git a/src/internal/components/file-token-group/styles.scss b/src/file-token-group/styles.scss similarity index 95% rename from src/internal/components/file-token-group/styles.scss rename to src/file-token-group/styles.scss index 0992cdef79..785ecf68b5 100644 --- a/src/internal/components/file-token-group/styles.scss +++ b/src/file-token-group/styles.scss @@ -3,10 +3,10 @@ SPDX-License-Identifier: Apache-2.0 */ -@use '../../styles/tokens' as awsui; -@use '../../styles' as styles; +@use '../internal/styles/tokens' as awsui; +@use '../internal/styles' as styles; @use './constants' as constants; -@use '../../../token-group/mixins.scss' as mixins; +@use '../token-group/mixins.scss' as mixins; @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible; @mixin token-box-validation { diff --git a/src/internal/components/file-token-group/test-classes/styles.scss b/src/file-token-group/test-classes/styles.scss similarity index 100% rename from src/internal/components/file-token-group/test-classes/styles.scss rename to src/file-token-group/test-classes/styles.scss diff --git a/src/internal/components/file-token-group/thumbnail.tsx b/src/file-token-group/thumbnail.tsx similarity index 100% rename from src/internal/components/file-token-group/thumbnail.tsx rename to src/file-token-group/thumbnail.tsx diff --git a/src/file-upload/internal.tsx b/src/file-upload/internal.tsx index 56b0e79f9d..c98b9b75db 100644 --- a/src/file-upload/internal.tsx +++ b/src/file-upload/internal.tsx @@ -9,11 +9,11 @@ import { warnOnce } from '@cloudscape-design/component-toolkit/internal'; import InternalBox from '../box/internal'; import { ButtonProps } from '../button/interfaces'; import { useFormFieldContext } from '../contexts/form-field'; +import InternalFileTokenGroup from '../file-token-group/internal'; import { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal'; import { getBaseProps } from '../internal/base-component'; import InternalFileDropzone, { useFilesDragging } from '../internal/components/file-dropzone'; import InternalFileInput from '../internal/components/file-input'; -import InternalFileTokenGroup from '../internal/components/file-token-group'; import { fireNonCancelableEvent } from '../internal/events'; import checkControlled from '../internal/hooks/check-controlled'; import { InternalBaseComponentProps } from '../internal/hooks/use-base-component'; diff --git a/src/internal/components/token-list/styles.scss b/src/internal/components/token-list/styles.scss index b7eb6bd882..a622c93447 100644 --- a/src/internal/components/token-list/styles.scss +++ b/src/internal/components/token-list/styles.scss @@ -5,7 +5,7 @@ @use '../../styles/tokens' as awsui; @use '../../styles' as styles; -@use '../../../internal/components/file-token-group/constants' as constants; +@use '../../../file-token-group/constants' as constants; @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible; .root { diff --git a/src/test-utils/dom/internal/file-token-group.ts b/src/test-utils/dom/file-token-group/index.ts similarity index 90% rename from src/test-utils/dom/internal/file-token-group.ts rename to src/test-utils/dom/file-token-group/index.ts index 33cd7526ac..0faf3501c2 100644 --- a/src/test-utils/dom/internal/file-token-group.ts +++ b/src/test-utils/dom/file-token-group/index.ts @@ -2,9 +2,9 @@ // SPDX-License-Identifier: Apache-2.0 import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom'; +import selectors from '../../../file-token-group/styles.selectors.js'; +import testSelectors from '../../../file-token-group/test-classes/styles.selectors.js'; import formFieldStyles from '../../../form-field/styles.selectors.js'; -import selectors from '../../../internal/components/file-token-group/styles.selectors.js'; -import testSelectors from '../../../internal/components/file-token-group/test-classes/styles.selectors.js'; import tokenGroupSelectors from '../../../token-group/styles.selectors.js'; export default class FileTokenGroupWrapper extends ComponentWrapper { diff --git a/src/test-utils/dom/file-upload/index.ts b/src/test-utils/dom/file-upload/index.ts index a14cd54c9a..2ef76d037b 100644 --- a/src/test-utils/dom/file-upload/index.ts +++ b/src/test-utils/dom/file-upload/index.ts @@ -3,12 +3,12 @@ import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom'; import ButtonWrapper from '../button'; -import { FileTokenWrapper } from '../internal/file-token-group'; +import { FileTokenWrapper } from '../file-token-group'; +import tokenGroupSelectors from '../../../file-token-group/styles.selectors.js'; import fileUploadSelectors from '../../../file-upload/styles.selectors.js'; import formFieldStyles from '../../../form-field/styles.selectors.js'; import fileUploadInputSelectors from '../../../internal/components/file-input/styles.selectors.js'; -import tokenGroupSelectors from '../../../internal/components/file-token-group/styles.selectors.js'; import tokenListSelectors from '../../../internal/components/token-list/styles.selectors.js'; export default class FileUploadWrapper extends ComponentWrapper {