feat: Makes file token group public

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<Omit<FileTokenGroupProps, 'onDismiss' | 'i18nStrings'>>([
+  {
+    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 (
+    <>
+      <h1>FileTokenGroup permutations</h1>
+      <ScreenshotArea>
+        <PermutationsView
+          permutations={permutations}
+          render={permutation => (
+            <FileTokenGroup
+              i18nStrings={{
+                errorIconAriaLabel: 'Error',
+                warningIconAriaLabel: 'Warning',
+                removeFileAriaLabel: (fileIndex: number) => `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}
+            />
+          )}
+        />
+      </ScreenshotArea>
+    </>
+  );
+}

src/__tests__/required-props-for-components.ts

@@ -144,6 +144,13 @@ const defaultProps: Record<string, Record<string, any>> = {
       uploadButtonText: () => 'Choose file(s)',
     },
   },
+  'file-token-group': {
+    items: [],
+    i18nStrings: {
+      limitShowFewer: '',
+      limitShowMore: '',
+    },
+  },
   'key-value-pairs': {
     items: [],
   },

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<FileTokenGroupProps.Item>",
+    },
+    {
+      "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": [

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",
   ],

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