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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/boolean.js

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import { arrayOf, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './boolean.module.css';
+
+/**
+ * Custom Attributes Boolean Type component.
+ *
+ * @typedef Boolean
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Boolean Type Product Attribute.
+ */
+const Boolean = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { attribute_metadata = {}, selected_attribute_options = {} } = props;
+
+    const attributeLabel = attribute_metadata.label ? (
+        <div className={classes.label}>{attribute_metadata.label}</div>
+    ) : null;
+    let attributeContent;
+
+    if (selected_attribute_options.attribute_option?.length > 0) {
+        const options = selected_attribute_options.attribute_option
+            .map(option => option.label)
+            .join(', ');
+
+        attributeContent = <div className={classes.content}>{options}</div>;
+    }
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link Boolean}
+ *
+ * @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 {Object} attribute_metadata An object containing the attribute metadata
+ * @property {String} attribute_metadata.label The attribute label
+ * @property {Object} selected_attribute_options An object containing the attribute selected options
+ * @property {Array} selected_attribute_options.attribute_option An array of the selected options
+ * @property {String} selected_attribute_options.attribute_option.label Label of the selected option
+ */
+Boolean.propTypes = {
+    classes: shape({
+        label: string,
+        content: string
+    }),
+    attribute_metadata: shape({
+        label: string
+    }),
+    selected_attribute_options: shape({
+        attribute_option: arrayOf(
+            shape({
+                label: string
+            })
+        )
+    })
+};
+
+export default Boolean;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Boolean/boolean.module.css

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

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

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

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Date renders date when data is provided 1`] = `
+Array [
+  <div>
+    Date Label
+  </div>,
+  <div>
+    <mock-FormattedDate
+      day="2-digit"
+      month="short"
+      value="2019-08-27T12:00:00"
+      year="numeric"
+    />
+  </div>,
+]
+`;
+
+exports[`#Date renders empty when no data is provided 1`] = `null`;
+
+exports[`#Date renders label only when data is missing 1`] = `
+<div>
+  Date Label
+</div>
+`;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Date/__tests__/date.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Date from '../date';
+
+jest.mock('react-intl', () => ({
+    FormattedDate: props => <mock-FormattedDate {...props} />
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <Date {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'Date Label'
+        }
+    };
+};
+
+describe('#Date', () => {
+    it('renders empty when no data is provided', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders label only when data is missing', () => {
+        givenDefaultValues();
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders date when data is provided', () => {
+        givenDefaultValues();
+        inputProps = {
+            ...inputProps,
+            entered_attribute_value: {
+                value: '2019-08-27 12:00:00'
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Date/date.js

@@ -0,0 +1,82 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedDate } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './date.module.css';
+
+/**
+ * Custom Attributes Date Type component.
+ *
+ * @typedef Date
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Date Type Product Attribute.
+ */
+const Date = 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;
+
+    // TODO: Get correct data from GraphQl based on config time zone
+    if (entered_attribute_value.value) {
+        // Convert date to ISO-8601 format so Safari can also parse it
+        const isoFormattedDate = entered_attribute_value.value.replace(
+            ' ',
+            'T'
+        );
+
+        attributeContent = (
+            <div className={classes.content}>
+                <FormattedDate
+                    value={isoFormattedDate}
+                    year="numeric"
+                    month="short"
+                    day="2-digit"
+                />
+            </div>
+        );
+    }
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link Date}
+ *
+ * @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 {Object} attribute_metadata An object containing the attribute metadata
+ * @property {String} attribute_metadata.label The attribute label
+ * @property {Object} entered_attribute_value An object containing the attribute value
+ * @property {String} entered_attribute_value.value Attribute value
+ */
+Date.propTypes = {
+    classes: shape({
+        label: string,
+        content: string
+    }),
+    attribute_metadata: shape({
+        label: string
+    }),
+    entered_attribute_value: shape({
+        value: string
+    })
+};
+
+export default Date;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Date/date.module.css

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

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

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

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#DateTime renders date time when data is provided 1`] = `
+Array [
+  <div>
+    DateTime Label
+  </div>,
+  <div>
+    <mock-FormattedDate
+      day="2-digit"
+      month="short"
+      value="2019-08-27T12:00:00"
+      year="numeric"
+    />
+    , 
+    <mock-FormattedTime
+      value="2019-08-27T12:00:00"
+    />
+  </div>,
+]
+`;
+
+exports[`#DateTime renders empty when no data is provided 1`] = `null`;
+
+exports[`#DateTime renders label only when data is missing 1`] = `
+<div>
+  DateTime Label
+</div>
+`;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/DateTime/__tests__/dateTime.spec.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import DateTime from '../dateTime';
+
+jest.mock('react-intl', () => ({
+    FormattedDate: props => <mock-FormattedDate {...props} />,
+    FormattedTime: props => <mock-FormattedTime {...props} />
+}));
+
+let inputProps = {};
+
+const Component = () => {
+    return <DateTime {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'DateTime Label'
+        }
+    };
+};
+
+describe('#DateTime', () => {
+    it('renders empty when no data is provided', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders label only when data is missing', () => {
+        givenDefaultValues();
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders date time when data is provided', () => {
+        givenDefaultValues();
+        inputProps = {
+            ...inputProps,
+            entered_attribute_value: {
+                value: '2019-08-27 12:00:00'
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/DateTime/dateTime.js

@@ -0,0 +1,85 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedDate, FormattedTime } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './dateTime.module.css';
+
+/**
+ * Custom Attributes DateTime Type component.
+ *
+ * @typedef DateTime
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a DateTime Type Product Attribute.
+ */
+const DateTime = 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;
+
+    // TODO: Get correct data from GraphQl based on config time zone
+    if (entered_attribute_value.value) {
+        // Convert date to ISO-8601 format so Safari can also parse it
+        const isoFormattedDate = entered_attribute_value.value.replace(
+            ' ',
+            'T'
+        );
+
+        attributeContent = (
+            <div className={classes.content}>
+                <FormattedDate
+                    value={isoFormattedDate}
+                    year="numeric"
+                    month="short"
+                    day="2-digit"
+                />
+                {/* eslint-disable-next-line react/jsx-no-literals */}
+                {', '}
+                <FormattedTime value={isoFormattedDate} />
+            </div>
+        );
+    }
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link DateTime}
+ *
+ * @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 {Object} attribute_metadata An object containing the attribute metadata
+ * @property {String} attribute_metadata.label The attribute label
+ * @property {Object} entered_attribute_value An object containing the attribute value
+ * @property {String} entered_attribute_value.value Attribute value
+ */
+DateTime.propTypes = {
+    classes: shape({
+        label: string,
+        content: string
+    }),
+    attribute_metadata: shape({
+        label: string
+    }),
+    entered_attribute_value: shape({
+        value: string
+    })
+};
+
+export default DateTime;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/DateTime/dateTime.module.css

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

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

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

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

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#Multiselect renders empty when no data is provided 1`] = `null`;
+
+exports[`#Multiselect renders label only when data is missing 1`] = `
+<div>
+  Multiselect Label
+</div>
+`;
+
+exports[`#Multiselect renders options with html when data is provided 1`] = `
+Array [
+  <div>
+    Multiselect Label
+  </div>,
+  <div>
+    <mock-RichContent
+      html="<span>Option 1</span>"
+    />
+    <mock-RichContent
+      html="<span>Option 2</span>"
+    />
+  </div>,
+]
+`;
+
+exports[`#Multiselect renders options without html when data is provided 1`] = `
+Array [
+  <div>
+    Multiselect Label
+  </div>,
+  <div>
+    Option 1, Option 2
+  </div>,
+]
+`;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Multiselect/__tests__/multiSelect.spec.js

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Multiselect from '../multiselect';
+
+jest.mock('@magento/venia-ui/lib/components/RichContent', () => {
+    return props => <mock-RichContent {...props} />;
+});
+
+let inputProps = {};
+
+const Component = () => {
+    return <Multiselect {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'Multiselect Label'
+        }
+    };
+};
+
+describe('#Multiselect', () => {
+    it('renders empty when no data is provided', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders label only when data is missing', () => {
+        givenDefaultValues();
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders options without html when data is provided', () => {
+        inputProps = {
+            attribute_metadata: {
+                label: 'Multiselect Label',
+                ui_input: {
+                    is_html_allowed: false
+                }
+            },
+            selected_attribute_options: {
+                attribute_option: [
+                    {
+                        label: 'Option 1'
+                    },
+                    {
+                        label: 'Option 2'
+                    }
+                ]
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders options with html when data is provided', () => {
+        inputProps = {
+            attribute_metadata: {
+                label: 'Multiselect Label',
+                ui_input: {
+                    is_html_allowed: true
+                }
+            },
+            selected_attribute_options: {
+                attribute_option: [
+                    {
+                        label: '<span>Option 1</span>'
+                    },
+                    {
+                        label: '<span>Option 2</span>'
+                    }
+                ]
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

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

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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Multiselect/multiselect.js

@@ -0,0 +1,99 @@
+import React, { Fragment } from 'react';
+import { arrayOf, 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 './multiselect.module.css';
+
+/**
+ * Custom Attributes Multiselect Type component.
+ *
+ * @typedef Multiselect
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Multiselect Type Product Attribute.
+ */
+const Multiselect = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { attribute_metadata = {}, selected_attribute_options = {} } = props;
+
+    const attributeLabel = attribute_metadata.label ? (
+        <div className={classes.label}>{attribute_metadata.label}</div>
+    ) : null;
+    let attributeContent;
+
+    if (selected_attribute_options.attribute_option?.length > 0) {
+        const { is_html_allowed: isHtml } = attribute_metadata.ui_input;
+
+        if (isHtml) {
+            const options = selected_attribute_options.attribute_option.map(
+                (option, key) => {
+                    return (
+                        // TODO: Get decoded wysiwyg widgets from GraphQl
+                        <RichContent key={key} html={option.label} />
+                    );
+                }
+            );
+
+            attributeContent = (
+                <div className={classes.contentHtml}>{options}</div>
+            );
+        } else {
+            const options = selected_attribute_options.attribute_option
+                .map(option => option.label)
+                .join(', ');
+
+            attributeContent = <div className={classes.content}>{options}</div>;
+        }
+    }
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link Multiselect}
+ *
+ * @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} selected_attribute_options An object containing the attribute selected options
+ * @property {Array} selected_attribute_options.attribute_option An array of the selected options
+ * @property {String} selected_attribute_options.attribute_option.label Label of the selected option
+ */
+Multiselect.propTypes = {
+    classes: shape({
+        label: string,
+        content: string,
+        contentHtml: string
+    }),
+    attribute_metadata: shape({
+        label: string,
+        ui_input: shape({
+            is_html_allowed: bool
+        })
+    }),
+    selected_attribute_options: shape({
+        attribute_option: arrayOf(
+            shape({
+                label: string
+            })
+        )
+    })
+};
+
+export default Multiselect;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Multiselect/multiselect.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;
+}