Update order detail page

packages/venia-concept/src/components/ButtonGroup/__tests__/buttonGroup.spec.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import Button from '../button';
+import ButtonGroup from '../buttonGroup';
+
+jest.mock('src/classify');
+jest.mock('../button');
+
+test('renders a div', () => {
+    const { root } = TestRenderer.create(<ButtonGroup />);
+
+    const el = root.findByProps({ className: 'root' });
+
+    expect(el).toBeTruthy();
+});
+
+test('renders children from `items`', () => {
+    const items = [
+        { key: 'a', children: 'a' },
+        { key: 'b', children: 'b' },
+        { key: 'c', children: 'c' }
+    ];
+
+    const { root } = TestRenderer.create(<ButtonGroup items={items} />);
+
+    const el = root.findByProps({ className: 'root' });
+
+    expect(el.children).toHaveLength(3);
+
+    for (const child of el.children) {
+        expect(child.type).toBe(Button);
+    }
+});

packages/venia-concept/src/components/ButtonGroup/button.css

@@ -0,0 +1,53 @@
+.root {
+    composes: root from '../clickable.css';
+    background: none white;
+    border: 1px solid rgb(var(--venia-grey-dark));
+    color: rgb(var(--venia-text));
+    font-size: 0.75rem;
+    font-weight: 600;
+    height: 2rem;
+    margin-left: -1px;
+    min-width: 6rem;
+    transition-duration: 384ms;
+    transition-property: border-color, color;
+    transition-timing-function: var(--venia-anim-standard);
+    z-index: 1;
+}
+
+.root:hover {
+    border-color: rgb(var(--venia-text));
+    z-index: 2;
+}
+
+.root:focus {
+    border-color: rgb(var(--venia-teal));
+    box-shadow: 0 0 0 2px rgb(var(--venia-teal-light)),
+        0 0 0.5rem 2px rgba(var(--venia-teal), 0.2);
+    color: rgb(var(--venia-teal));
+    outline: none;
+    transition-duration: 128ms;
+    z-index: 3;
+}
+
+.root:disabled {
+    border-color: rgb(var(--venia-grey-dark));
+    color: rgb(var(--venia-grey-dark));
+}
+
+.root:nth-of-type(1) {
+    border-radius: 0.25rem 0 0 0.25rem;
+    margin-left: 0;
+}
+
+.root:nth-last-of-type(1) {
+    border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.content {
+    align-items: center;
+    display: inline-grid;
+    gap: 0.5rem;
+    grid-auto-flow: column;
+    justify-content: center;
+    justify-items: center;
+}

packages/venia-concept/src/components/ButtonGroup/button.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { shape, string } from 'prop-types';
+
+import classify from 'src/classify';
+import defaultClasses from './button.css';
+
+class Button extends Component {
+    static propTypes = {
+        classes: shape({
+            content: string,
+            root: string
+        }).isRequired
+    };
+
+    render() {
+        const { children, classes, ...rest } = this.props;
+
+        return (
+            <button {...rest} className={classes.root}>
+                <span className={classes.content}>{children}</span>
+            </button>
+        );
+    }
+}
+
+export default classify(defaultClasses)(Button);

packages/venia-concept/src/components/ButtonGroup/buttonGroup.css

@@ -0,0 +1,6 @@
+.root {
+    display: inline-grid;
+    grid-auto-flow: column;
+    justify-content: start;
+    position: relative;
+}

packages/venia-concept/src/components/ButtonGroup/buttonGroup.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { arrayOf, node, shape, string } from 'prop-types';
+
+import classify from 'src/classify';
+import Button from './button';
+import defaultClasses from './buttonGroup.css';
+
+class ButtonGroup extends Component {
+    static propTypes = {
+        classes: shape({
+            root: string
+        }).isRequired,
+        items: arrayOf(
+            shape({
+                children: node.isRequired,
+                key: string.isRequired
+            })
+        ).isRequired
+    };
+
+    static defaultProps = {
+        items: []
+    };
+
+    render() {
+        const { classes, items } = this.props;
+
+        const children = Array.from(items, ({ key, ...itemProps }) => (
+            <Button key={key} {...itemProps} />
+        ));
+
+        return <div className={classes.root}>{children}</div>;
+    }
+}
+
+export default classify(defaultClasses)(ButtonGroup);

packages/venia-concept/src/components/PurchaseDetailsPage/DetailsBlock/__tests__/__snapshots__/detailsBlock.spec.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the expected tree 1`] = `
+<dl
+  className="root"
+>
+  <dt
+    className="property"
+  >
+    Order No
+  </dt>
+  <dd
+    className="value"
+  >
+    84322
+  </dd>
+  <dt
+    className="property"
+  >
+    Order Date
+  </dt>
+  <dd
+    className="value"
+  >
+    June 24, 2018
+  </dd>
+</dl>
+`;

packages/venia-concept/src/components/PurchaseDetailsPage/DetailsBlock/__tests__/detailsBlock.spec.js

@@ -1,33 +1,34 @@
 import React from 'react';
-import { configure, shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import DetailsBlock from '../detailsBlock';
+import TestRenderer from 'react-test-renderer';
 
-configure({ adapter: new Adapter() });
+import DetailsBlock from '../detailsBlock';
 
-const classes = {
-    property: 'property',
-    value: 'value'
-};
+jest.mock('src/classify');
 
 const rows = [
     { property: 'Order No', value: '84322' },
     { property: 'Order Date', value: 'June 24, 2018' }
 ];
 
-test('renders correctly', () => {
-    const wrapper = shallow(
-        <DetailsBlock classes={classes} rows={rows} />
-    ).dive();
+test('renders the expected tree', () => {
+    const tree = TestRenderer.create(<DetailsBlock rows={rows} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+test('renders elements with classnames', () => {
+    const { root } = TestRenderer.create(<DetailsBlock rows={rows} />);
 
-    expect(wrapper.find(`.${classes.property}`)).toHaveLength(rows.length);
-    expect(wrapper.find(`.${classes.value}`)).toHaveLength(rows.length);
+    expect(root.findByProps({ className: 'root' })).toBeTruthy();
+    expect(root.findAllByProps({ className: 'property' })).toHaveLength(2);
+    expect(root.findAllByProps({ className: 'value' })).toHaveLength(2);
+});
 
-    wrapper.find(`.${classes.property}`).forEach((node, index) => {
-        expect(node.text()).toEqual(rows[index].property);
-    });
+test('renders data as children', () => {
+    const { root } = TestRenderer.create(<DetailsBlock rows={rows} />);
 
-    wrapper.find(`.${classes.value}`).forEach((node, index) => {
-        expect(node.text()).toEqual(rows[index].value);
-    });
+    expect(root.findByProps({ children: rows[0].property })).toBeTruthy();
+    expect(root.findByProps({ children: rows[0].value })).toBeTruthy();
+    expect(root.findByProps({ children: rows[1].property })).toBeTruthy();
+    expect(root.findByProps({ children: rows[1].value })).toBeTruthy();
 });

packages/venia-concept/src/components/PurchaseDetailsPage/DetailsBlock/detailsBlock.css

@@ -1,16 +1,15 @@
 .root {
-    display: grid;
-    grid-template-columns: auto 1fr;
     border: 1px solid rgb(var(--venia-border));
-    color: black;
+    color: rgb(var(--venia-text));
+    display: grid;
     font-size: 0.75rem;
-    font-weight: 300;
+    gap: 0 1.5rem;
+    grid-template-columns: minmax(8rem, auto) 1fr;
     line-height: 1.5rem;
-    padding: 0.5rem 0.625rem 2rem;
+    padding: 0.5rem 1rem;
 }
 
 .property {
-    margin-right: 1.5rem;
     color: rgb(var(--venia-text-alt));
 }
 

packages/venia-concept/src/components/PurchaseDetailsPage/DetailsBlock/detailsBlock.js

@@ -1,31 +1,38 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import { arrayOf, node, shape, string } from 'prop-types';
 import classify from 'src/classify';
 import defaultClasses from './detailsBlock.css';
 
 class DetailsBlock extends Component {
     static propTypes = {
-        rows: PropTypes.array,
-        classes: PropTypes.shape({})
+        classes: shape({
+            property: string,
+            root: string,
+            value: string
+        }).isRequired,
+        rows: arrayOf(
+            shape({
+                property: node,
+                value: node
+            })
+        )
     };
 
     static defaultProps = {
         rows: []
     };
 
     render() {
-        const { rows, classes } = this.props;
+        const { classes, rows } = this.props;
 
-        return (
-            <dl className={classes.root}>
-                {rows.map(({ property, value }) => (
-                    <Fragment key={property}>
-                        <dt className={classes.property}>{property}</dt>
-                        <dd className={classes.value}>{value}</dd>
-                    </Fragment>
-                ))}
-            </dl>
-        );
+        const items = Array.from(rows, ({ property, value }) => (
+            <Fragment key={property}>
+                <dt className={classes.property}>{property}</dt>
+                <dd className={classes.value}>{value}</dd>
+            </Fragment>
+        ));
+
+        return <dl className={classes.root}>{items}</dl>;
     }
 }