feat: add Expander primitive (#252)

aws-amplify · Nov 24, 2021 · 1c234ac · 1c234ac
1 parent c458888
commit 1c234ac
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 0 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
@@ -2437,6 +2437,87 @@ export default function CheckBoxFieldPrimitive(
 "
 `;
 
+exports[`amplify render tests primitives Expander 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  Expander,
+  ExpanderItem,
+  ExpanderProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type ExpanderPrimitiveProps = React.PropsWithChildren<
+  Partial<ExpanderProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function ExpanderPrimitive(
+  props: ExpanderPrimitiveProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    /* @ts-ignore: TS2322 */
+    <Expander
+      type=\\"single\\"
+      isCollapsible={true}
+      {...rest}
+      {...getOverrideProps(overrides, \\"Expander\\")}
+    >
+      <ExpanderItem
+        title=\\"title1\\"
+        value=\\"ExpanderItem1\\"
+        children=\\"ExpanderItem1Content\\"
+        {...getOverrideProps(overrides, \\"Expander.ExpanderItem[0]\\")}
+      ></ExpanderItem>
+      <ExpanderItem
+        title=\\"title2\\"
+        value=\\"ExpanderItem2\\"
+        children=\\"ExpanderItem2Content\\"
+        {...getOverrideProps(overrides, \\"Expander.ExpanderItem[1]\\")}
+      ></ExpanderItem>
+    </Expander>
+  );
+}
+"
+`;
+
+exports[`amplify render tests primitives ExpanderItem 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  ExpanderItem,
+  ExpanderItemProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type ComponentWithoutNameProps = React.PropsWithChildren<
+  Partial<ExpanderItemProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function unknown_component_name(
+  props: unknown_component_nameProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    /* @ts-ignore: TS2322 */
+    <ExpanderItem
+      title=\\"title1\\"
+      value=\\"ExpanderItem1\\"
+      children=\\"ExpanderItem1Content\\"
+      {...rest}
+      {...getOverrideProps(overrides, \\"ExpanderItem\\")}
+    ></ExpanderItem>
+  );
+}
+"
+`;
+
 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
@@ -16,6 +16,10 @@ exports[`Primitives Collection 1`] = `"<Collection items={items || []} {...rest}
 
 exports[`Primitives Divider 1`] = `"<Divider {...rest} {...getOverrideProps(overrides, \\"Divider\\")}></Divider>"`;
 
+exports[`Primitives Expander 1`] = `"<Expander {...rest} {...getOverrideProps(overrides, \\"Expander\\")}></Expander>"`;
+
+exports[`Primitives ExpanderItem 1`] = `"<ExpanderItem {...rest} {...getOverrideProps(overrides, \\"ExpanderItem\\")}></ExpanderItem>"`;
+
 exports[`Primitives Flex 1`] = `"<Flex {...rest} {...getOverrideProps(overrides, \\"Flex\\")}></Flex>"`;
 
 exports[`Primitives Grid 1`] = `"<Grid {...rest} {...getOverrideProps(overrides, \\"Grid\\")}></Grid>"`;

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
@@ -394,6 +394,14 @@ describe('amplify render tests', () => {
   });
 
   describe('primitives', () => {
+    test('Expander', () => {
+      expect(generateWithAmplifyRenderer('primitives/ExpanderPrimitive').componentText).toMatchSnapshot();
+    });
+
+    test('ExpanderItem', () => {
+      expect(generateWithAmplifyRenderer('primitives/ExpanderItemPrimitive').componentText).toMatchSnapshot();
+    });
+
     test('TextField', () => {
       expect(generateWithAmplifyRenderer('primitives/TextFieldPrimitive').componentText).toMatchSnapshot();
     });

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/ExpanderItemPrimitive.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/ExpanderItemPrimitive.json
@@ -0,0 +1,14 @@
+{
+  "componentType": "ExpanderItem",
+  "properties": {
+    "title": {
+      "value": "title1"
+    },
+    "value": {
+      "value": "ExpanderItem1"
+    },
+    "children": {
+      "value": "ExpanderItem1Content"
+    }
+  }
+}
diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/ExpanderPrimitive.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/primitives/ExpanderPrimitive.json
@@ -0,0 +1,45 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Expander",
+  "name": "ExpanderPrimitive",
+  "properties": {
+    "type": {
+      "value": "single",
+      "type": "String"
+    },
+    "isCollapsible": {
+      "value": true,
+      "type": "Boolean"
+    }
+  },
+  "children": [
+    {
+      "componentType": "ExpanderItem",
+      "properties": {
+        "title": {
+          "value": "title1"
+        },
+        "value": {
+          "value": "ExpanderItem1"
+        },
+        "children": {
+          "value": "ExpanderItem1Content"
+        }
+      }
+    },
+    {
+      "componentType": "ExpanderItem",
+      "properties": {
+        "title": {
+          "value": "title2"
+        },
+        "value": {
+          "value": "ExpanderItem2"
+        },
+        "children": {
+          "value": "ExpanderItem2Content"
+        }
+      }
+    }
+  ]
+}
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
@@ -24,6 +24,8 @@ import {
   CardProps,
   CheckboxFieldProps,
   DividerProps,
+  ExpanderProps,
+  ExpanderItemProps,
   FlexProps,
   GridProps,
   HeadingProps,
@@ -130,6 +132,20 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
       case Primitive.Divider:
         return new ReactComponentRenderer<DividerProps>(component, this.importCollection, parent).renderElement();
 
+      case Primitive.Expander:
+        return new ReactComponentWithChildrenRenderer<ExpanderProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitive.ExpanderItem:
+        return new ReactComponentWithChildrenRenderer<ExpanderItemProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
       case Primitive.Flex:
         return new ReactComponentWithChildrenRenderer<FlexProps>(
           component,

diff --git a/packages/codegen-ui-react/lib/primitive.ts b/packages/codegen-ui-react/lib/primitive.ts
@@ -25,6 +25,8 @@ enum Primitive {
   CheckboxField = 'CheckboxField',
   Collection = 'Collection',
   Divider = 'Divider',
+  Expander = 'Expander',
+  ExpanderItem = 'ExpanderItem',
   Flex = 'Flex',
   Grid = 'Grid',
   Heading = 'Heading',

diff --git a/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.js b/packages/test-generator/integration-test-templates/cypress/integration/primitives-spec.js
@@ -90,6 +90,30 @@ describe('Primitives', () => {
     });
   });
 
+  describe('Expander', () => {
+    it('Basic', () => {
+      cy.visit('http://localhost:3000/primitives-tests');
+      cy.get('#expander')
+        .find('.amplify-expander')
+        .within(() => {
+          cy.get('.amplify-expander__item')
+            .eq(0)
+            .within(() => {
+              cy.get('.amplify-expander__trigger').should('have.text', 'title1');
+              cy.get('.amplify-expander__trigger').click();
+              cy.get('.amplify-expander__content__text').should('have.text', 'ExpanderItem1Content');
+            });
+          cy.get('.amplify-expander__item')
+            .eq(1)
+            .within(() => {
+              cy.get('.amplify-expander__trigger').should('have.text', 'title2');
+              cy.get('.amplify-expander__trigger').click();
+              cy.get('.amplify-expander__content__text').should('have.text', 'ExpanderItem2Content');
+            });
+        });
+    });
+  });
+
   describe('Flex', () => {
     it('Basic', () => {
       cy.visit('http://localhost:3000/primitives-tests');

diff --git a/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx b/packages/test-generator/integration-test-templates/src/PrimitivesTests.tsx
@@ -25,6 +25,7 @@ import {
   CheckboxFieldPrimitive,
   CollectionPrimitive,
   DividerPrimitive,
+  ExpanderPrimitive,
   FlexPrimitive,
   GridPrimitive,
   HeadingPrimitive,
@@ -89,6 +90,10 @@ export default function PrimitivesTests() {
         <Heading>Divider</Heading>
         <DividerPrimitive />
       </View>
+      <View id="expander">
+        <Heading>Expander</Heading>
+        <ExpanderPrimitive />
+      </View>
       <View id="flex">
         <Heading>Flex</Heading>
         <FlexPrimitive />

diff --git a/packages/test-generator/lib/components/primitives/ExpanderPrimitive.json b/packages/test-generator/lib/components/primitives/ExpanderPrimitive.json
@@ -0,0 +1,45 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Expander",
+  "name": "ExpanderPrimitive",
+  "properties": {
+    "type": {
+      "value": "single",
+      "type": "String"
+    },
+    "isCollapsible": {
+      "value": true,
+      "type": "Boolean"
+    }
+  },
+  "children": [
+    {
+      "componentType": "ExpanderItem",
+      "properties": {
+        "title": {
+          "value": "title1"
+        },
+        "value": {
+          "value": "ExpanderItem1"
+        },
+        "children": {
+          "value": "ExpanderItem1Content"
+        }
+      }
+    },
+    {
+      "componentType": "ExpanderItem",
+      "properties": {
+        "title": {
+          "value": "title2"
+        },
+        "value": {
+          "value": "ExpanderItem2"
+        },
+        "children": {
+          "value": "ExpanderItem2Content"
+        }
+      }
+    }
+  ]
+}
diff --git a/packages/test-generator/lib/components/primitives/index.ts b/packages/test-generator/lib/components/primitives/index.ts
@@ -21,6 +21,7 @@ export { default as CardPrimitive } from './CardPrimitive.json';
 export { default as CheckboxFieldPrimitive } from './CheckboxFieldPrimitive.json';
 export { default as CollectionPrimitive } from './CollectionPrimitive.json';
 export { default as DividerPrimitive } from './DividerPrimitive.json';
+export { default as ExpanderPrimitive } from './ExpanderPrimitive.json';
 export { default as FlexPrimitive } from './FlexPrimitive.json';
 export { default as GridPrimitive } from './GridPrimitive.json';
 export { default as HeadingPrimitive } from './HeadingPrimitive.json';