chore: Documenter and other snapshots

build-tools/utils/pluralize.js

@@ -17,6 +17,7 @@ const pluralizationMap = {
   ButtonGroup: 'ButtonGroups',
   Calendar: 'Calendars',
   Cards: 'Cards',
+  Carousel: 'Carousels',
   Checkbox: 'Checkboxes',
   CodeEditor: 'CodeEditors',
   CollectionPreferences: 'CollectionPreferences',

pages/carousel/utils.tsx

@@ -16,7 +16,7 @@ export function generateCarousels() {
     color: 'white',
     display: 'grid',
     gridTemplateColumns: '50% 50%',
-    height: 'calc(100% - 30px)',
+    height: 'calc(100% - 60px)',
     alignItems: 'end',
     padding: '30px',
   };
@@ -155,7 +155,7 @@ export function generateCardCarousels() {
     {
       content: (
         <ProductCard
-          title="Cloud Data Operating System"
+          title="1. Cloud Data Operating System"
           vendor="Cloud Data"
           logo={cardLogo}
           category="Professional services"
@@ -167,7 +167,7 @@ export function generateCardCarousels() {
     {
       content: (
         <ProductCard
-          title="Cloud Data Deep Security"
+          title="2. Cloud Data Deep Security"
           vendor="Cloud Data"
           logo={cardLogo}
           category="AMI | v20.0.833"
@@ -179,7 +179,7 @@ export function generateCardCarousels() {
     {
       content: (
         <ProductCard
-          title="Cloud Data Deep Security"
+          title="3. Cloud Data Deep Security"
           vendor="Cloud Data"
           logo={cardLogo}
           category="AMI | v20.0.833"
@@ -191,7 +191,7 @@ export function generateCardCarousels() {
     {
       content: (
         <ProductCard
-          title="Cloud Data Deep Security"
+          title="4. Cloud Data Deep Security"
           vendor="Cloud Data"
           logo={cardLogo}
           category="AMI | v20.0.833"
@@ -203,7 +203,7 @@ export function generateCardCarousels() {
     {
       content: (
         <ProductCard
-          title="Cloud Data Deep Security"
+          title="5. Cloud Data Deep Security"
           vendor="Cloud Data"
           logo={cardLogo}
           category="AMI | v20.0.833"

src/__tests__/functional-tests/test-utils.test.tsx

@@ -17,7 +17,7 @@ import { getRequiredPropsForComponent } from '../required-props-for-components';
 import { getAllComponents, requireComponent } from '../utils';
 
 const componentWithMultipleRootElements = ['top-navigation', 'app-layout'];
-const componentsWithExceptions = ['annotation-context', ...componentWithMultipleRootElements];
+const componentsWithExceptions = ['annotation-context', 'carousel', ...componentWithMultipleRootElements];
 const components = getAllComponents().filter(component => !componentsWithExceptions.includes(component));
 
 const RENDER_COMPONENTS_DEFAULT_PROPS: Record<string, unknown>[] = [

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -4522,6 +4522,68 @@ The order of \`id\`s doesn't influence the order of display of sections, which i
 }
 `;
 
+exports[`Documenter definition for carousel matches the snapshot: carousel 1`] = `
+{
+  "events": [],
+  "functions": [],
+  "name": "Carousel",
+  "properties": [
+    {
+      "name": "ariaLabel",
+      "optional": false,
+      "type": "string",
+    },
+    {
+      "name": "ariaLabelNext",
+      "optional": false,
+      "type": "string",
+    },
+    {
+      "name": "ariaLabelPrevious",
+      "optional": false,
+      "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",
+    },
+    {
+      "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",
+    },
+    {
+      "name": "items",
+      "optional": false,
+      "type": "ReadonlyArray<CarouselProps.Item>",
+    },
+    {
+      "defaultValue": ""large"",
+      "description": "size
+default to a predefined sizes of the carousel. User can also control the carousel height by using a number
+that represents pixels.",
+      "name": "size",
+      "optional": true,
+      "type": ""large" | "medium" | "small" | number",
+    },
+    {
+      "name": "visibleItemNumber",
+      "optional": true,
+      "type": "number",
+    },
+  ],
+  "regions": [],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Documenter definition for checkbox matches the snapshot: checkbox 1`] = `
 {
   "events": [

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -127,6 +127,11 @@ exports[`test-utils selectors 1`] = `
     "awsui_section_p8a6i",
     "awsui_selection-control_p8a6i",
   ],
+  "carousel": [
+    "awsui_carousel-item_16n63",
+    "awsui_content-wrapper_16n63",
+    "awsui_root_16n63",
+  ],
   "checkbox": [
     "awsui_root_k2y2q",
   ],

src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap

@@ -69,6 +69,10 @@ export { ElementWrapper };
         export { CardsWrapper };
 
 
+        import CarouselWrapper from './carousel';
+        export { CarouselWrapper };
+
+
         import CheckboxWrapper from './checkbox';
         export { CheckboxWrapper };
 
@@ -643,6 +647,26 @@ declare module '@cloudscape-design/test-utils-core/dist/dom' {
         */
        findAllCards(selector?: string): Array<CardsWrapper>;
 
+       /**
+        * Returns the wrapper of the first Carousel that matches the specified CSS selector.
+        * If no CSS selector is specified, returns the wrapper of the first Carousel.
+        * If no matching Carousel is found, returns \`null\`.
+        *
+        * @param {string} [selector] CSS Selector
+        * @returns {CarouselWrapper | null}
+        */
+       findCarousel(selector?: string): CarouselWrapper | null;
+
+       /**
+        * Returns an array of Carousel wrapper that matches the specified CSS selector.
+        * If no CSS selector is specified, returns all of the Carousels inside the current wrapper.
+        * If no matching Carousel is found, returns an empty array.
+        *
+        * @param {string} [selector] CSS Selector
+        * @returns {Array<CarouselWrapper>}
+        */
+       findAllCarousels(selector?: string): Array<CarouselWrapper>;
+
        /**
         * Returns the wrapper of the first Checkbox that matches the specified CSS selector.
         * If no CSS selector is specified, returns the wrapper of the first Checkbox.
@@ -2081,6 +2105,17 @@ declare module '@cloudscape-design/test-utils-core/dist/dom' {
         return this.findAllComponents(CardsWrapper, selector);
       };
 
+      ElementWrapper.prototype.findCarousel = function(selector) {
+        const rootSelector = \`.\${CarouselWrapper.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, CarouselWrapper);
+      };
+
+      ElementWrapper.prototype.findAllCarousels = function(selector) {
+        return this.findAllComponents(CarouselWrapper, selector);
+      };
+
       ElementWrapper.prototype.findCheckbox = function(selector) {
         const rootSelector = \`.\${CheckboxWrapper.rootSelector}\`;
         // casting to 'any' is needed to avoid this issue with generics
@@ -2845,6 +2880,10 @@ export { ElementWrapper };
         export { CardsWrapper };
 
 
+        import CarouselWrapper from './carousel';
+        export { CarouselWrapper };
+
+
         import CheckboxWrapper from './checkbox';
         export { CheckboxWrapper };
 
@@ -3387,6 +3426,24 @@ declare module '@cloudscape-design/test-utils-core/dist/selectors' {
         */
        findAllCards(selector?: string): MultiElementWrapper<CardsWrapper>;
 
+       /**
+        * Returns a wrapper that matches the Carousels with the specified CSS selector.
+        * If no CSS selector is specified, returns a wrapper that matches Carousels.
+        *
+        * @param {string} [selector] CSS Selector
+        * @returns {CarouselWrapper}
+        */
+       findCarousel(selector?: string): CarouselWrapper;
+
+       /**
+        * Returns a multi-element wrapper that matches Carousels with the specified CSS selector.
+        * If no CSS selector is specified, returns a multi-element wrapper that matches Carousels.
+        *
+        * @param {string} [selector] CSS Selector
+        * @returns {MultiElementWrapper<CarouselWrapper>}
+        */
+       findAllCarousels(selector?: string): MultiElementWrapper<CarouselWrapper>;
+
        /**
         * Returns a wrapper that matches the Checkboxes with the specified CSS selector.
         * If no CSS selector is specified, returns a wrapper that matches Checkboxes.
@@ -4699,6 +4756,17 @@ declare module '@cloudscape-design/test-utils-core/dist/selectors' {
         return this.findAllComponents(CardsWrapper, selector);
       };
 
+      ElementWrapper.prototype.findCarousel = function(selector) {
+        const rootSelector = \`.\${CarouselWrapper.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, CarouselWrapper);
+      };
+
+      ElementWrapper.prototype.findAllCarousels = function(selector) {
+        return this.findAllComponents(CarouselWrapper, selector);
+      };
+
       ElementWrapper.prototype.findCheckbox = function(selector) {
         const rootSelector = \`.\${CheckboxWrapper.rootSelector}\`;
         // casting to 'any' is needed to avoid this issue with generics

src/carousel/interfaces.tsx

@@ -5,7 +5,6 @@ import { BaseComponentProps } from '../internal/base-component';
 export interface CarouselProps extends BaseComponentProps {
   items: ReadonlyArray<CarouselProps.Item>;
 
-  height?: number;
   /**
    * size
    * default to a predefined sizes of the carousel. User can also control the carousel height by using a number

src/test-utils/dom/carousel/index.ts

@@ -0,0 +1,22 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+import styles from '../../../carousel/styles.selectors.js';
+
+export class CarouselItemWrapper extends ComponentWrapper {
+  /**
+   * Finds the content of a carousel
+   */
+  findContent(): ElementWrapper | null {
+    return this.findByClassName(styles['content-wrapper']);
+  }
+}
+
+export default class CarouselWrapper extends ComponentWrapper<HTMLDivElement> {
+  static rootSelector: string = styles.root;
+
+  findItems(): Array<CarouselItemWrapper> {
+    return this.findAllByClassName(styles['carousel-item']).map(item => new CarouselItemWrapper(item.getElement()));
+  }
+}