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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Price/price.js

@@ -0,0 +1,74 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+
+import { BrowserPersistence } from '@magento/peregrine/lib/util';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import PriceComponent from '@magento/venia-ui/lib/components/Price';
+
+import defaultClasses from './price.module.css';
+
+const storage = new BrowserPersistence();
+
+/**
+ * Custom Attributes Price Type component.
+ *
+ * @typedef Price
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Price Type Product Attribute.
+ */
+const Price = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const { attribute_metadata = {}, entered_attribute_value = {} } = props;
+
+    // TODO: Get complete price data from GraphQl including currency
+    const storeCurrency = storage.getItem('store_view_currency') || 'USD';
+    const attributeLabel = attribute_metadata.label ? (
+        <div className={classes.label}>{attribute_metadata.label}</div>
+    ) : null;
+    const attributeContent = entered_attribute_value.value ? (
+        <div className={classes.attributeContent}>
+            <PriceComponent
+                value={parseInt(entered_attribute_value.value)}
+                currencyCode={storeCurrency}
+            />
+        </div>
+    ) : null;
+
+    return (
+        <Fragment>
+            {attributeLabel}
+            {attributeContent}
+        </Fragment>
+    );
+};
+
+/**
+ * Props for {@link Price}
+ *
+ * @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
+ */
+Price.propTypes = {
+    classes: shape({
+        label: string,
+        content: string
+    }),
+    attribute_metadata: shape({
+        label: string
+    }),
+    entered_attribute_value: shape({
+        value: string
+    })
+};
+
+export default Price;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Price/price.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/Select/__tests__/__snapshots__/select.spec.js.snap

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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Select/__tests__/select.spec.js

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Select from '../select';
+
+jest.mock('@magento/venia-ui/lib/components/RichContent', () => {
+    return props => <mock-RichContent {...props} />;
+});
+
+let inputProps = {};
+
+const Component = () => {
+    return <Select {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'Select Label'
+        }
+    };
+};
+
+describe('#Select', () => {
+    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: 'Select 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: 'Select 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/Select/index.js

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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Select/select.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 './select.module.css';
+
+/**
+ * Custom Attributes Select Type component.
+ *
+ * @typedef Select
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Select Type Product Attribute.
+ */
+const Select = 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 Select}
+ *
+ * @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
+ */
+Select.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 Select;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Select/select.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/Text/__tests__/__snapshots__/text.spec.js.snap

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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Text/__tests__/text.spec.js

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Text from '../text';
+
+jest.mock('@magento/venia-ui/lib/components/RichContent', () => {
+    return props => <mock-RichContent {...props} />;
+});
+
+let inputProps = {};
+
+const Component = () => {
+    return <Text {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'Text Label'
+        }
+    };
+};
+
+describe('#Text', () => {
+    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 text without html when data is provided', () => {
+        inputProps = {
+            attribute_metadata: {
+                label: 'Text Label',
+                ui_input: {
+                    is_html_allowed: false
+                }
+            },
+            entered_attribute_value: {
+                value: 'Text'
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders text with html when data is provided', () => {
+        inputProps = {
+            attribute_metadata: {
+                label: 'Text Label',
+                ui_input: {
+                    is_html_allowed: true
+                }
+            },
+            entered_attribute_value: {
+                value: '<div>Text</div>'
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

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

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

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Text/text.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 './text.module.css';
+
+/**
+ * Custom Attributes Text Type component.
+ *
+ * @typedef Text
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a Text Type Product Attribute.
+ */
+const Text = 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 Text}
+ *
+ * @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
+ */
+Text.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 Text;

package/lib/components/ProductFullDetail/CustomAttributes/AttributeType/Text/text.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/Textarea/__tests__/__snapshots__/textarea.spec.js.snap

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

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import Textarea from '../textarea';
+
+jest.mock('@magento/venia-ui/lib/components/RichContent', () => {
+    return props => <mock-RichContent {...props} />;
+});
+
+let inputProps = {};
+
+const Component = () => {
+    return <Textarea {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        attribute_metadata: {
+            label: 'Textarea Label'
+        }
+    };
+};
+
+describe('#Textarea', () => {
+    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 textarea without html when data is provided', () => {
+        inputProps = {
+            attribute_metadata: {
+                label: 'Textarea Label',
+                ui_input: {
+                    is_html_allowed: false
+                }
+            },
+            entered_attribute_value: {
+                value: 'Textarea'
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders textarea with html when data is provided', () => {
+        inputProps = {
+            attribute_metadata: {
+                label: 'Textarea Label',
+                ui_input: {
+                    is_html_allowed: true
+                }
+            },
+            entered_attribute_value: {
+                value: '<div>Textarea</div>'
+            }
+        };
+
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

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

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