feat: add Menu primitive (#322)

aws-amplify · Feb 25, 2022 · fe26cca · fe26cca
1 parent 2c8a7f4
commit fe26cca
Show file tree

Hide file tree

Showing 14 changed files with 194 additions and 2 deletions.
diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -5298,6 +5298,69 @@ export default function unknown_component_name(
 "
 `;
 
+exports[`amplify render tests primitives Menu 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Menu, MenuItem, MenuProps } from \\"@aws-amplify/ui-react\\";
+
+export type MenuPrimitiveProps = React.PropsWithChildren<
+  Partial<MenuProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function MenuPrimitive(
+  props: MenuPrimitiveProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    /* @ts-ignore: TS2322 */
+    <Menu {...rest} {...getOverrideProps(overrides, \\"Menu\\")}>
+      <MenuItem
+        children=\\"Item\\"
+        {...getOverrideProps(overrides, \\"Menu.MenuItem[0]\\")}
+      ></MenuItem>
+    </Menu>
+  );
+}
+"
+`;
+
+exports[`amplify render tests primitives MenuButton 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { ButtonProps, MenuButton } from \\"@aws-amplify/ui-react\\";
+
+export type MenuButtonPrimitiveProps = React.PropsWithChildren<
+  Partial<ButtonProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function MenuButtonPrimitive(
+  props: MenuButtonPrimitiveProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    /* @ts-ignore: TS2322 */
+    <MenuButton
+      children=\\"Menu Button\\"
+      {...rest}
+      {...getOverrideProps(overrides, \\"MenuButton\\")}
+    ></MenuButton>
+  );
+}
+"
+`;
+
 exports[`amplify render tests primitives SliderField 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

diff --git a/...codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap b/...codegen-ui-react/lib/__tests__/amplify-ui-renderers/__snapshots__/primitives.test.ts.snap
@@ -34,6 +34,12 @@ exports[`Primitives Link 1`] = `"<Link {...rest} {...getOverrideProps(overrides,
 
 exports[`Primitives Loader 1`] = `"<Loader {...rest} {...getOverrideProps(overrides, \\"Loader\\")}></Loader>"`;
 
+exports[`Primitives Menu 1`] = `"<Menu {...rest} {...getOverrideProps(overrides, \\"Menu\\")}></Menu>"`;
+
+exports[`Primitives MenuButton 1`] = `"<MenuButton {...rest} {...getOverrideProps(overrides, \\"MenuButton\\")}></MenuButton>"`;
+
+exports[`Primitives MenuItem 1`] = `"<MenuItem {...rest} {...getOverrideProps(overrides, \\"MenuItem\\")}></MenuItem>"`;
+
 exports[`Primitives Pagination 1`] = `"<Pagination {...rest} {...getOverrideProps(overrides, \\"Pagination\\")}></Pagination>"`;
 
 exports[`Primitives PasswordField 1`] = `"<PasswordField {...rest} {...getOverrideProps(overrides, \\"PasswordField\\")}></PasswordField>"`;

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -447,6 +447,14 @@ describe('amplify render tests', () => {
     test('Table', () => {
       expect(generateWithAmplifyRenderer('primitives/TablePrimitive').componentText).toMatchSnapshot();
     });
+
+    test('Menu', () => {
+      expect(generateWithAmplifyRenderer('primitives/MenuPrimitive').componentText).toMatchSnapshot();
+    });
+
+    test('MenuButton', () => {
+      expect(generateWithAmplifyRenderer('primitives/MenuButtonPrimitive').componentText).toMatchSnapshot();
+    });
   });
 
   describe('icon-indices', () => {

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuButtonPrimitive.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuButtonPrimitive.json
@@ -0,0 +1,10 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "MenuButton",
+  "name": "MenuButtonPrimitive",
+  "properties": {
+    "label": {
+      "value": "Menu Button"
+    }
+  }
+}
diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuPrimitive.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/MenuPrimitive.json
@@ -0,0 +1,16 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Menu",
+  "name": "MenuPrimitive",
+  "properties": {},
+  "children": [
+    {
+      "componentType": "MenuItem",
+      "properties": {
+        "label": {
+          "value": "Item"
+        }
+      }
+    }
+  ]
+}
diff --git a/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts b/packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-renderer.ts
@@ -33,6 +33,8 @@ import {
   ImageProps,
   LinkProps,
   LoaderProps,
+  MenuItemProps,
+  MenuProps,
   PaginationProps,
   PasswordFieldProps,
   PhoneNumberFieldProps,
@@ -206,6 +208,27 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
           parent,
         ).renderElement(renderChildren);
 
+      case Primitive.MenuButton:
+        return new ReactComponentWithChildrenRenderer<ButtonProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitive.MenuItem:
+        return new ReactComponentWithChildrenRenderer<MenuItemProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitive.Menu:
+        return new ReactComponentWithChildrenRenderer<MenuProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
       case Primitive.Pagination:
         return new ReactComponentWithChildrenRenderer<PaginationProps>(
           component,

diff --git a/packages/codegen-ui-react/lib/primitive.ts b/packages/codegen-ui-react/lib/primitive.ts
@@ -34,6 +34,9 @@ enum Primitive {
   Image = 'Image',
   Link = 'Link',
   Loader = 'Loader',
+  Menu = 'Menu',
+  MenuButton = 'MenuButton',
+  MenuItem = 'MenuItem',
   Pagination = 'Pagination',
   PasswordField = 'PasswordField',
   PhoneNumberField = 'PhoneNumberField',
@@ -75,8 +78,8 @@ export const PrimitiveChildrenPropMapping: Partial<Record<Primitive, string>> =
   [Primitive.Button]: 'label',
   [Primitive.Heading]: 'label',
   [Primitive.Link]: 'label',
-  // [Primitive.MenuButton]: 'label',
-  // [Primitive.MenuItem]: 'label',
+  [Primitive.MenuButton]: 'label',
+  [Primitive.MenuItem]: 'label',
   [Primitive.Radio]: 'label',
   [Primitive.TableCell]: 'label',
   [Primitive.Text]: 'label',

diff --git a/packages/codegen-ui-react/lib/react-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-studio-template-renderer.ts
@@ -1073,6 +1073,10 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     if (isBuiltInIcon(component.componentType)) {
       return 'IconProps';
     }
+    // MenuButton primitive uses ButtonProps
+    if (component.componentType === Primitive.MenuButton) {
+      return 'ButtonProps';
+    }
     return `${component.componentType}Props`;
   }
 

diff --git a/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts b/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts
@@ -80,6 +80,8 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([
   'ImagePrimitive',
   'LinkPrimitive',
   'LoaderPrimitive',
+  'MenuButtonPrimitive',
+  'MenuPrimitive',
   'PaginationPrimitive',
   'PasswordFieldPrimitive',
   'PhoneNumberFieldPrimitive',

diff --git a/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.ts b/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.ts
@@ -165,6 +165,25 @@ describe('Primitives', () => {
     });
   });
 
+  describe('Menu', () => {
+    it('Basic', () => {
+      cy.get('#menu')
+        .find('.amplify-menu-trigger')
+        .find('path')
+        .should('have.attr', 'd', 'M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z');
+
+      cy.get('.amplify-menu-content__item').should('not.exist');
+      cy.get('#menu').find('.amplify-menu-trigger').click();
+      cy.get('.amplify-menu-content__item').should('have.text', 'Item');
+    });
+  });
+
+  describe('MenuButton', () => {
+    it('Basic', () => {
+      cy.get('#menu-button').find('.amplify-button').should('have.text', 'Menu Button');
+    });
+  });
+
   describe('Pagination', () => {
     it('Basic', () => {
       cy.get('#pagination')

diff --git a/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx b/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx
@@ -33,6 +33,8 @@ import {
   ImagePrimitive,
   LinkPrimitive,
   LoaderPrimitive,
+  MenuButtonPrimitive,
+  MenuPrimitive,
   PaginationPrimitive,
   PasswordFieldPrimitive,
   PhoneNumberFieldPrimitive,
@@ -123,6 +125,14 @@ export default function PrimitivesTests() {
         <Heading>Loader</Heading>
         <LoaderPrimitive />
       </View>
+      <View id="menu">
+        <Heading>Menu</Heading>
+        <MenuPrimitive />
+      </View>
+      <View id="menu-button">
+        <Heading>Menu Button</Heading>
+        <MenuButtonPrimitive />
+      </View>
       <View id="pagination">
         <Heading>Pagination</Heading>
         <PaginationPrimitive />

diff --git a/packages/test-generator/lib/components/primitives/MenuButtonPrimitive.json b/packages/test-generator/lib/components/primitives/MenuButtonPrimitive.json
@@ -0,0 +1,10 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "MenuButton",
+  "name": "MenuButtonPrimitive",
+  "properties": {
+    "label": {
+      "value": "Menu Button"
+    }
+  }
+}
diff --git a/packages/test-generator/lib/components/primitives/MenuPrimitive.json b/packages/test-generator/lib/components/primitives/MenuPrimitive.json
@@ -0,0 +1,16 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Menu",
+  "name": "MenuPrimitive",
+  "properties": {},
+  "children": [
+    {
+      "componentType": "MenuItem",
+      "properties": {
+        "label": {
+          "value": "Item"
+        }
+      }
+    }
+  ]
+}
diff --git a/packages/test-generator/lib/components/primitives/index.ts b/packages/test-generator/lib/components/primitives/index.ts
@@ -29,6 +29,8 @@ export { default as IconPrimitive } from './IconPrimitive.json';
 export { default as ImagePrimitive } from './ImagePrimitive.json';
 export { default as LinkPrimitive } from './LinkPrimitive.json';
 export { default as LoaderPrimitive } from './LoaderPrimitive.json';
+export { default as MenuButtonPrimitive } from './MenuButtonPrimitive.json';
+export { default as MenuPrimitive } from './MenuPrimitive.json';
 export { default as PaginationPrimitive } from './PaginationPrimitive.json';
 export { default as PasswordFieldPrimitive } from './PasswordFieldPrimitive.json';
 export { default as PhoneNumberFieldPrimitive } from './PhoneNumberFieldPrimitive.json';