From 73b3417a72960a056693d6e8e4fe5df048b68dcc Mon Sep 17 00:00:00 2001
From: Ernst Kaese <ernstka@amazon.com>
Date: Tue, 10 Dec 2024 17:17:15 +0200
Subject: [PATCH 1/4] feat: Additional content slot in Collection Preferences

---
 pages/collection-preferences/simple.page.tsx             | 9 +++++++++
 .../snapshot-tests/__snapshots__/documenter.test.ts.snap | 8 +++++++-
 .../__snapshots__/test-utils-selectors.test.tsx.snap     | 1 +
 .../__tests__/collection-preferences.test.tsx            | 7 +++++++
 src/collection-preferences/index.tsx                     | 5 +++++
 src/collection-preferences/interfaces.ts                 | 4 ++++
 src/collection-preferences/styles.scss                   | 3 ++-
 src/test-utils/dom/collection-preferences/index.ts       | 4 ++++
 8 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/pages/collection-preferences/simple.page.tsx b/pages/collection-preferences/simple.page.tsx
index 8a5d4bbd7b..ad5e80bdd9 100644
--- a/pages/collection-preferences/simple.page.tsx
+++ b/pages/collection-preferences/simple.page.tsx
@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 
+import Alert from '~components/alert';
+import Box from '~components/box';
 import CollectionPreferences from '~components/collection-preferences';
 
 import ScreenshotArea from '../utils/screenshot-area';
@@ -42,6 +44,13 @@ export default function CollectionPreferencesPermutations() {
           className="cp-4"
           {...baseProperties}
           visibleContentPreference={visibleContentPreference}
+          additionalContent={
+            <Box margin={{ bottom: 's' }}>
+              <Alert type={'info'} header={'Test additional content'}>
+                Some additional content
+              </Alert>
+            </Box>
+          }
         />
       </ScreenshotArea>
     </>
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index a5481314af..13e406d667 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5661,7 +5661,13 @@ You must set the current value in the \`preferences.wrapLines\` property.",
       "type": "CollectionPreferencesProps.WrapLinesPreference",
     },
   ],
-  "regions": [],
+  "regions": [
+    {
+      "description": "Used to display additional content above the preferences in the modal",
+      "isDefault": false,
+      "name": "additionalContent",
+    },
+  ],
   "releaseStatus": "stable",
 }
 `;
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 f38ff89487..d7353b61d8 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
@@ -176,6 +176,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_visible-content-toggle_tc96w",
     "awsui_visible-content_tc96w",
     "awsui_wrap-lines_tc96w",
+    "awsui_additional-content_tc96w",
   ],
   "column-layout": [
     "awsui_column-layout_vvxn7",
diff --git a/src/collection-preferences/__tests__/collection-preferences.test.tsx b/src/collection-preferences/__tests__/collection-preferences.test.tsx
index 022907be21..bbf39fa18b 100644
--- a/src/collection-preferences/__tests__/collection-preferences.test.tsx
+++ b/src/collection-preferences/__tests__/collection-preferences.test.tsx
@@ -85,6 +85,13 @@ describe('Collection preferences - Modal', () => {
     wrapper.findModal()!.findConfirmButton()!.click();
     expectVisibleModal(wrapper, false);
   });
+  test('is additional content displayed when provided', () => {
+    const wrapper = renderCollectionPreferences({
+      additionalContent: 'Test additional content',
+    });
+    wrapper.findTriggerButton().click();
+    expect(wrapper.findModal()!.findAdditionalContent()?.findTextContent()).toBe('Test additional content');
+  });
 });
 
 describe('Collection preferences - Events', () => {
diff --git a/src/collection-preferences/index.tsx b/src/collection-preferences/index.tsx
index 93b4a5662b..b74106f639 100644
--- a/src/collection-preferences/index.tsx
+++ b/src/collection-preferences/index.tsx
@@ -60,6 +60,7 @@ export default function CollectionPreferences({
   customPreference,
   getModalRoot,
   removeModalRoot,
+  additionalContent,
   ...rest
 }: CollectionPreferencesProps) {
   const parentMetadata = useContext(CollectionPreferencesMetadata);
@@ -181,6 +182,10 @@ export default function CollectionPreferences({
             size={hasContentOnTheLeft && hasContentOnTheRight ? 'large' : 'medium'}
             onDismiss={onCancelListener}
           >
+            {/* Additional content */}
+            <div className={styles.additionalContent}>{additionalContent}</div>
+
+            {/* Preferences content */}
             <ModalContentLayout
               left={
                 hasContentOnTheLeft && (
diff --git a/src/collection-preferences/interfaces.ts b/src/collection-preferences/interfaces.ts
index 246a75b3cf..0d1cc2e4e8 100644
--- a/src/collection-preferences/interfaces.ts
+++ b/src/collection-preferences/interfaces.ts
@@ -201,6 +201,10 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
    * The values for all configured preferences are present even if the user didn't change their values.
    */
   onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;
+  /**
+   * Used to display additional content above the preferences in the modal
+   */
+  additionalContent?: React.ReactNode;
 }
 
 export namespace CollectionPreferencesProps {
diff --git a/src/collection-preferences/styles.scss b/src/collection-preferences/styles.scss
index f330f773b4..e4a935744b 100644
--- a/src/collection-preferences/styles.scss
+++ b/src/collection-preferences/styles.scss
@@ -13,7 +13,8 @@
 .trigger-button,
 .cancel-button,
 .confirm-button,
-.custom {
+.custom,
+.additional-content {
   /* used in test-utils */
 }
 
diff --git a/src/test-utils/dom/collection-preferences/index.ts b/src/test-utils/dom/collection-preferences/index.ts
index 21eaf4a987..8d1b24bd7d 100644
--- a/src/test-utils/dom/collection-preferences/index.ts
+++ b/src/test-utils/dom/collection-preferences/index.ts
@@ -55,6 +55,10 @@ class PreferencesModalWrapper extends ModalWrapper {
   findCustomPreference(): ElementWrapper | null {
     return this.findByClassName(styles.custom);
   }
+
+  findAdditionalContent(): ElementWrapper | null {
+    return this.findByClassName(styles.additionalContent);
+  }
 }
 
 export default class CollectionPreferencesWrapper extends ComponentWrapper {

From f27bdd6f56df2dafe2db9e22187d7c1724b1b802 Mon Sep 17 00:00:00 2001
From: Ernst Kaese <ernstka@amazon.com>
Date: Wed, 11 Dec 2024 13:23:50 +0200
Subject: [PATCH 2/4] Fix test-utils, rename additionalContent to contentBefore
 and update documentation

---
 pages/collection-preferences/simple.page.tsx                | 6 +++---
 .../snapshot-tests/__snapshots__/documenter.test.ts.snap    | 4 ++--
 .../__snapshots__/test-utils-selectors.test.tsx.snap        | 2 +-
 .../__tests__/collection-preferences.test.tsx               | 4 ++--
 src/collection-preferences/index.tsx                        | 4 ++--
 src/collection-preferences/interfaces.ts                    | 4 ++--
 src/test-utils/dom/collection-preferences/index.ts          | 2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/pages/collection-preferences/simple.page.tsx b/pages/collection-preferences/simple.page.tsx
index ad5e80bdd9..a6dd44c2aa 100644
--- a/pages/collection-preferences/simple.page.tsx
+++ b/pages/collection-preferences/simple.page.tsx
@@ -44,10 +44,10 @@ export default function CollectionPreferencesPermutations() {
           className="cp-4"
           {...baseProperties}
           visibleContentPreference={visibleContentPreference}
-          additionalContent={
+          contentBefore={
             <Box margin={{ bottom: 's' }}>
-              <Alert type={'info'} header={'Test additional content'}>
-                Some additional content
+              <Alert type={'info'} header={'Test content before'}>
+                Some information
               </Alert>
             </Box>
           }
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index ac04041fd8..ae15f2d73a 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -5669,9 +5669,9 @@ You must set the current value in the \`preferences.wrapLines\` property.",
   ],
   "regions": [
     {
-      "description": "Used to display additional content above the preferences in the modal",
+      "description": "Content displayed before the preferences. Use it to display additional information relating to the preferences.",
       "isDefault": false,
-      "name": "additionalContent",
+      "name": "contentBefore",
     },
   ],
   "releaseStatus": "stable",
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 d7353b61d8..b4f5caef81 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
@@ -142,6 +142,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_tab-button--warnings_1gl9c",
   ],
   "collection-preferences": [
+    "awsui_additional-content_tc96w",
     "awsui_cancel-button_tc96w",
     "awsui_confirm-button_tc96w",
     "awsui_content-density_tc96w",
@@ -176,7 +177,6 @@ exports[`test-utils selectors 1`] = `
     "awsui_visible-content-toggle_tc96w",
     "awsui_visible-content_tc96w",
     "awsui_wrap-lines_tc96w",
-    "awsui_additional-content_tc96w",
   ],
   "column-layout": [
     "awsui_column-layout_vvxn7",
diff --git a/src/collection-preferences/__tests__/collection-preferences.test.tsx b/src/collection-preferences/__tests__/collection-preferences.test.tsx
index bbf39fa18b..479950dd4f 100644
--- a/src/collection-preferences/__tests__/collection-preferences.test.tsx
+++ b/src/collection-preferences/__tests__/collection-preferences.test.tsx
@@ -87,10 +87,10 @@ describe('Collection preferences - Modal', () => {
   });
   test('is additional content displayed when provided', () => {
     const wrapper = renderCollectionPreferences({
-      additionalContent: 'Test additional content',
+      contentBefore: 'Test content before',
     });
     wrapper.findTriggerButton().click();
-    expect(wrapper.findModal()!.findAdditionalContent()?.findTextContent()).toBe('Test additional content');
+    expect(wrapper.findModal()!.findAdditionalContent()?.getElement().textContent).toBe('Test content before');
   });
 });
 
diff --git a/src/collection-preferences/index.tsx b/src/collection-preferences/index.tsx
index b74106f639..e295ef5c8b 100644
--- a/src/collection-preferences/index.tsx
+++ b/src/collection-preferences/index.tsx
@@ -60,7 +60,7 @@ export default function CollectionPreferences({
   customPreference,
   getModalRoot,
   removeModalRoot,
-  additionalContent,
+  contentBefore,
   ...rest
 }: CollectionPreferencesProps) {
   const parentMetadata = useContext(CollectionPreferencesMetadata);
@@ -183,7 +183,7 @@ export default function CollectionPreferences({
             onDismiss={onCancelListener}
           >
             {/* Additional content */}
-            <div className={styles.additionalContent}>{additionalContent}</div>
+            <div className={styles['additional-content']}>{contentBefore}</div>
 
             {/* Preferences content */}
             <ModalContentLayout
diff --git a/src/collection-preferences/interfaces.ts b/src/collection-preferences/interfaces.ts
index 0d1cc2e4e8..0fba0f9ee9 100644
--- a/src/collection-preferences/interfaces.ts
+++ b/src/collection-preferences/interfaces.ts
@@ -202,9 +202,9 @@ export interface CollectionPreferencesProps<CustomPreferenceType = any> extends
    */
   onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;
   /**
-   * Used to display additional content above the preferences in the modal
+   * Content displayed before the preferences. Use it to display additional information relating to the preferences.
    */
-  additionalContent?: React.ReactNode;
+  contentBefore?: React.ReactNode;
 }
 
 export namespace CollectionPreferencesProps {
diff --git a/src/test-utils/dom/collection-preferences/index.ts b/src/test-utils/dom/collection-preferences/index.ts
index 8d1b24bd7d..3f9124cd5d 100644
--- a/src/test-utils/dom/collection-preferences/index.ts
+++ b/src/test-utils/dom/collection-preferences/index.ts
@@ -57,7 +57,7 @@ class PreferencesModalWrapper extends ModalWrapper {
   }
 
   findAdditionalContent(): ElementWrapper | null {
-    return this.findByClassName(styles.additionalContent);
+    return this.findByClassName(styles['additional-content']);
   }
 }
 

From 1bc05af732013e3f81481321d9e825c3fd2cf00b Mon Sep 17 00:00:00 2001
From: Ernst Kaese <ernstka@amazon.com>
Date: Wed, 11 Dec 2024 13:36:40 +0200
Subject: [PATCH 3/4] Update test-util function name and CSS classname

---
 .../__snapshots__/test-utils-selectors.test.tsx.snap          | 2 +-
 .../__tests__/collection-preferences.test.tsx                 | 2 +-
 src/collection-preferences/index.tsx                          | 4 ++--
 src/collection-preferences/styles.scss                        | 2 +-
 src/test-utils/dom/collection-preferences/index.ts            | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

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 b4f5caef81..d2de67dea0 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
@@ -142,9 +142,9 @@ exports[`test-utils selectors 1`] = `
     "awsui_tab-button--warnings_1gl9c",
   ],
   "collection-preferences": [
-    "awsui_additional-content_tc96w",
     "awsui_cancel-button_tc96w",
     "awsui_confirm-button_tc96w",
+    "awsui_content-before_tc96w",
     "awsui_content-density_tc96w",
     "awsui_content-display-description_tc96w",
     "awsui_content-display-no-match_tc96w",
diff --git a/src/collection-preferences/__tests__/collection-preferences.test.tsx b/src/collection-preferences/__tests__/collection-preferences.test.tsx
index 479950dd4f..ad6d9d0294 100644
--- a/src/collection-preferences/__tests__/collection-preferences.test.tsx
+++ b/src/collection-preferences/__tests__/collection-preferences.test.tsx
@@ -90,7 +90,7 @@ describe('Collection preferences - Modal', () => {
       contentBefore: 'Test content before',
     });
     wrapper.findTriggerButton().click();
-    expect(wrapper.findModal()!.findAdditionalContent()?.getElement().textContent).toBe('Test content before');
+    expect(wrapper.findModal()!.findContentBefore()?.getElement().textContent).toBe('Test content before');
   });
 });
 
diff --git a/src/collection-preferences/index.tsx b/src/collection-preferences/index.tsx
index e295ef5c8b..1688ef7e2b 100644
--- a/src/collection-preferences/index.tsx
+++ b/src/collection-preferences/index.tsx
@@ -182,8 +182,8 @@ export default function CollectionPreferences({
             size={hasContentOnTheLeft && hasContentOnTheRight ? 'large' : 'medium'}
             onDismiss={onCancelListener}
           >
-            {/* Additional content */}
-            <div className={styles['additional-content']}>{contentBefore}</div>
+            {/* Content before */}
+            <div className={styles['content-before']}>{contentBefore}</div>
 
             {/* Preferences content */}
             <ModalContentLayout
diff --git a/src/collection-preferences/styles.scss b/src/collection-preferences/styles.scss
index e4a935744b..211eb389de 100644
--- a/src/collection-preferences/styles.scss
+++ b/src/collection-preferences/styles.scss
@@ -14,7 +14,7 @@
 .cancel-button,
 .confirm-button,
 .custom,
-.additional-content {
+.content-before {
   /* used in test-utils */
 }
 
diff --git a/src/test-utils/dom/collection-preferences/index.ts b/src/test-utils/dom/collection-preferences/index.ts
index 3f9124cd5d..3a69780118 100644
--- a/src/test-utils/dom/collection-preferences/index.ts
+++ b/src/test-utils/dom/collection-preferences/index.ts
@@ -56,8 +56,8 @@ class PreferencesModalWrapper extends ModalWrapper {
     return this.findByClassName(styles.custom);
   }
 
-  findAdditionalContent(): ElementWrapper | null {
-    return this.findByClassName(styles['additional-content']);
+  findContentBefore(): ElementWrapper | null {
+    return this.findByClassName(styles['content-before']);
   }
 }
 

From 937f66b5deb54f149658be51674f7ebadcb27757 Mon Sep 17 00:00:00 2001
From: Ernst Kaese <ernstka@amazon.com>
Date: Tue, 17 Dec 2024 13:44:08 +0200
Subject: [PATCH 4/4] Update dev page alert demo to be a local storage warning

---
 pages/collection-preferences/simple.page.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/pages/collection-preferences/simple.page.tsx b/pages/collection-preferences/simple.page.tsx
index a6dd44c2aa..158bf1b1b1 100644
--- a/pages/collection-preferences/simple.page.tsx
+++ b/pages/collection-preferences/simple.page.tsx
@@ -31,6 +31,15 @@ export default function CollectionPreferencesPermutations() {
           visibleContentPreference={visibleContentPreference}
           stickyColumnsPreference={stickyColumnsPreference}
           customPreference={customPreference}
+          contentBefore={
+            <Box margin={{ bottom: 's' }}>
+              <Alert type={'warning'} header={'Local storage not enabled'}>
+                Go to your browser settings to enable local storage. This will persist your settings across sessions
+                unless your local storage is cleared. If local storage is not enabled preferences are saved in session
+                storage as a fallback.
+              </Alert>
+            </Box>
+          }
         />
         <CollectionPreferences className={`cp-2`} {...baseProperties} customPreference={customPreference} />
         <CollectionPreferences
@@ -44,13 +53,6 @@ export default function CollectionPreferencesPermutations() {
           className="cp-4"
           {...baseProperties}
           visibleContentPreference={visibleContentPreference}
-          contentBefore={
-            <Box margin={{ bottom: 's' }}>
-              <Alert type={'info'} header={'Test content before'}>
-                Some information
-              </Alert>
-            </Box>
-          }
         />
       </ScreenshotArea>
     </>