@magento/venia-ui 9.1.0 → 9.2.0-alpha.1

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Textarea/textarea.js

@@ -0,0 +1,88 @@
+import React, { Fragment } from 'react';
+import { bool, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import RichContent from '@magento/venia-ui/lib/components/RichContent';
+
+import defaultClasses from './textarea.module.css';
+
+/**
+ * Custom Attributes Textarea Type component.
+ *
+ * @typedef Textarea
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Textarea Type Product Attribute.
+ */
+const Textarea = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { attribute_metadata = {}, entered_attribute_value = {} } = props;
+
+    const attributeLabel = attribute_metadata.label ? (
+        <div className={classes.label}>{attribute_metadata.label}</div>
+    ) : null;
+    let attributeContent;
+
+    if (entered_attribute_value.value) {
+        const { is_html_allowed: isHtml } = attribute_metadata.ui_input;
+
+        if (isHtml) {
+            // TODO: Get decoded wysiwyg widgets from GraphQl
+            attributeContent = (
+                <div className={classes.contentHtml}>
+                    <RichContent html={entered_attribute_value.value} />
+                </div>
+            );
+        } else {
+            attributeContent = (
+                <div className={classes.content}>
+                    {entered_attribute_value.value}
+                </div>
+            );
+        }
+    }
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link Textarea}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the attribute
+ * @property {String} classes.label CSS class for the attribute label
+ * @property {String} classes.content CSS class for the attribute content
+ * @property {String} classes.contentHtml CSS class for the attribute content containing html
+ * @property {Object} attribute_metadata An object containing the attribute metadata
+ * @property {String} attribute_metadata.label The attribute label
+ * @property {Object} attribute_metadata.ui_input An object containing the input ui data
+ * @property {Boolean} attribute_metadata.ui_input.is_html_allowed Indicates if value might contain html
+ * @property {Object} entered_attribute_value An object containing the attribute value
+ * @property {String} entered_attribute_value.value Attribute value
+ */
+Textarea.propTypes = {
+    classes: shape({
+        label: string,
+        content: string,
+        contentHtml: string
+    }),
+    attribute_metadata: shape({
+        label: string,
+        ui_input: shape({
+            is_html_allowed: bool
+        })
+    }),
+    entered_attribute_value: shape({
+        value: string
+    })
+};
+
+export default Textarea;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Textarea/textarea.module.css

@@ -0,0 +1,13 @@
+.label {
+    composes: font-bold from global;
+    composes: inline-block from global;
+    composes: mr-2 from global;
+}
+
+.content {
+    composes: inline-block from global;
+}
+
+.contentHtml {
+    composes: block from global;
+}

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/__tests__/__snapshots__/attributeType.spec.js.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#AttributeType renders boolean attribute type component 1`] = `
+<mock-Boolean
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "BOOLEAN",
+      },
+    }
+  }
+/>
+`;
+
+exports[`#AttributeType renders date attribute type component 1`] = `
+<mock-Date
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "DATE",
+      },
+    }
+  }
+/>
+`;
+
+exports[`#AttributeType renders date time attribute type component 1`] = `
+<mock-DateTime
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "DATETIME",
+      },
+    }
+  }
+/>
+`;
+
+exports[`#AttributeType renders multiselect attribute type component 1`] = `
+<mock-Multiselect
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "MULTISELECT",
+      },
+    }
+  }
+/>
+`;
+
+exports[`#AttributeType renders null when no data is provided 1`] = `null`;
+
+exports[`#AttributeType renders null when type is not found 1`] = `null`;
+
+exports[`#AttributeType renders price attribute type component 1`] = `
+<mock-Price
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "PRICE",
+      },
+    }
+  }
+/>
+`;
+
+exports[`#AttributeType renders select attribute type component 1`] = `
+<mock-Select
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "SELECT",
+      },
+    }
+  }
+/>
+`;
+
+exports[`#AttributeType renders text attribute type component 1`] = `
+<mock-Text
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "TEXT",
+      },
+    }
+  }
+/>
+`;
+
+exports[`#AttributeType renders textarea attribute type component 1`] = `
+<mock-Textarea
+  attribute_metadata={
+    Object {
+      "ui_input": Object {
+        "ui_input_type": "TEXTAREA",
+      },
+    }
+  }
+/>
+`;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/__tests__/attributeType.spec.js

@@ -0,0 +1,173 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import AttributeType from '../attributeType';
+
+// jest.mock('@magento/peregrine/lib/talons/ProductFullDetail/CustomAttributes/AttributeType', () => ({
+//     useAttributeType: jest.fn(() => {
+//         return {
+//             getAttributeTypeConfig: jest.fn().mockImplementation(() => {
+//                 return 'test';
+//             })
+//         };
+//     })
+// }));
+
+jest.mock('../Boolean', () => props => <mock-Boolean {...props} />);
+jest.mock('../Date', () => props => <mock-Date {...props} />);
+jest.mock('../DateTime', () => props => <mock-DateTime {...props} />);
+jest.mock('../Multiselect', () => props => <mock-Multiselect {...props} />);
+jest.mock('../Price', () => props => <mock-Price {...props} />);
+jest.mock('../Select', () => props => <mock-Select {...props} />);
+jest.mock('../Text', () => props => <mock-Text {...props} />);
+jest.mock('../Textarea', () => props => <mock-Textarea {...props} />);
+
+let inputProps = {};
+
+const Component = () => {
+    return <AttributeType {...inputProps} />;
+};
+
+describe('#AttributeType', () => {
+    it('renders null when no data is provided', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders null when type is not found', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'FAKETYPE'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders boolean attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'BOOLEAN'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders date attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'DATE'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders date time attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'DATETIME'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders multiselect attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'MULTISELECT'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders price attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'PRICE'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders select attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'SELECT'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders text attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'TEXT'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders textarea attribute type component', () => {
+        inputProps = {
+            data: {
+                attribute_metadata: {
+                    ui_input: {
+                        ui_input_type: 'TEXTAREA'
+                    }
+                }
+            }
+        };
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/attributeType.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { useAttributeType } from '@magento/peregrine/lib/talons/ProductFullDetail/CustomAttributes/AttributeType/useAttributeType';
+
+import Boolean from './Boolean';
+import Date from './Date';
+import DateTime from './DateTime';
+import Multiselect from './Multiselect';
+import Price from './Price';
+import Select from './Select';
+import Text from './Text';
+import Textarea from './Textarea';
+
+const defaultTypeConfig = {
+    boolean: {
+        component: Boolean
+    },
+    date: {
+        component: Date
+    },
+    datetime: {
+        component: DateTime
+    },
+    multiselect: {
+        component: Multiselect
+    },
+    price: {
+        component: Price
+    },
+    select: {
+        component: Select
+    },
+    text: {
+        component: Text
+    },
+    textarea: {
+        component: Textarea
+    }
+};
+
+const AttributeType = props => {
+    const { data, ...rest } = props;
+    const { ui_input_type: type } = data?.attribute_metadata.ui_input || {};
+
+    const { getAttributeTypeConfig } = useAttributeType({
+        typeConfig: defaultTypeConfig
+    });
+
+    if (type) {
+        const attributeTypeConfig = getAttributeTypeConfig(type.toLowerCase());
+        if (attributeTypeConfig && attributeTypeConfig.component) {
+            const Component = attributeTypeConfig.component;
+
+            return <Component {...data} {...rest} />;
+        }
+    }
+
+    return null;
+};
+
+export default AttributeType;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/index.js

@@ -0,0 +1 @@
+export { default } from './attributeType';

package/lib/components/ProductFullDetail/CustomAttributes/__tests__/__snapshots__/customAttributes.spec.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#CustomAttributes renders with custom attributes visible on front only 1`] = `
+<div>
+  <p>
+    Details
+  </p>
+  <ul>
+    <li>
+      <mock-AttributeType
+        data={
+          Object {
+            "attribute_metadata": Object {
+              "is_visible_on_front": true,
+              "uid": "uid-1",
+            },
+          }
+        }
+      />
+    </li>
+    <li>
+      <mock-AttributeType
+        data={
+          Object {
+            "attribute_metadata": Object {
+              "is_visible_on_front": true,
+              "uid": "uid-2",
+            },
+          }
+        }
+      />
+    </li>
+    <li>
+      <mock-AttributeType
+        data={
+          Object {
+            "attribute_metadata": Object {
+              "is_visible_on_front": true,
+              "uid": "uid-4",
+            },
+          }
+        }
+      />
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`#CustomAttributes renders without custom attributes 1`] = `null`;

package/lib/components/ProductFullDetail/CustomAttributes/__tests__/customAttributes.spec.js

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import CustomAttributes from '../customAttributes';
+
+jest.mock('react-intl', () => ({
+    FormattedMessage: ({ defaultMessage }) => defaultMessage
+}));
+
+jest.mock('../AttributeType', () => {
+    return props => <mock-AttributeType {...props} />;
+});
+
+let inputProps = {};
+
+const Component = () => {
+    return <CustomAttributes {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        customAttributes: []
+    };
+};
+
+describe('#CustomAttributes', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders without custom attributes', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders with custom attributes visible on front only', () => {
+        inputProps = {
+            customAttributes: [
+                {
+                    attribute_metadata: {
+                        is_visible_on_front: true,
+                        uid: 'uid-1'
+                    }
+                },
+                {
+                    attribute_metadata: {
+                        is_visible_on_front: true,
+                        uid: 'uid-2'
+                    }
+                },
+                {
+                    attribute_metadata: {
+                        is_visible_on_front: false,
+                        uid: 'uid-3'
+                    }
+                },
+                {
+                    attribute_metadata: {
+                        is_visible_on_front: true,
+                        uid: 'uid-4'
+                    }
+                },
+                {
+                    attribute_metadata: {
+                        is_visible_on_front: false,
+                        uid: 'uid-5'
+                    }
+                }
+            ]
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import { array, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import AttributeType from './AttributeType';
+import defaultClasses from './customAttributes.module.css';
+
+const CustomAttributes = props => {
+    const { customAttributes } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const list = useMemo(
+        () =>
+            customAttributes.reduce((previousAttribute, currentAttribute) => {
+                // Visible on front attributes only
+                if (
+                    currentAttribute.attribute_metadata.is_visible_on_front ===
+                    true
+                ) {
+                    const attributeContent = (
+                        <li
+                            key={currentAttribute.attribute_metadata.uid}
+                            className={classes.listItem}
+                        >
+                            <AttributeType data={currentAttribute} />
+                        </li>
+                    );
+
+                    previousAttribute.push(attributeContent);
+                }
+
+                return previousAttribute;
+            }, []),
+        [classes, customAttributes]
+    );
+
+    if (list.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className={classes.root}>
+            <p className={classes.title}>
+                <FormattedMessage
+                    id={'customAttributes.title'}
+                    defaultMessage={'Details'}
+                />
+            </p>
+            <ul className={classes.list}>{list}</ul>
+        </div>
+    );
+};
+
+CustomAttributes.propTypes = {
+    classes: shape({
+        root: string,
+        title: string,
+        list: string,
+        listItem: string
+    }),
+    customAttributes: array.isRequired
+};
+
+export default CustomAttributes;

package/lib/components/ProductFullDetail/CustomAttributes/customAttributes.module.css

@@ -0,0 +1,14 @@
+.root {
+    composes: mt-8 from global;
+}
+
+.title {
+    composes: font-semibold from global;
+}
+
+.list {
+    composes: list-disc from global;
+    composes: mb-4 from global;
+    composes: mt-4 from global;
+    composes: pl-6 from global;
+}

package/lib/components/ProductFullDetail/CustomAttributes/index.js

@@ -0,0 +1 @@
+export { default } from './customAttributes';