Add component for Price display (#46)

<!-- (REQUIRED) What is the nature of this PR? -->
## This PR is a:
[X] New feature
[ ] Enhancement/Optimization
[ ] Refactor
[ ] Bugfix
[ ] Test for existing code
[ ] Documentation

<!-- (REQUIRED) What does this PR change? -->
## Summary
 
Adds a new component for display of prices. See deployed Storybook in PR for docs/usage.
 
<!-- (OPTIONAL) What other information can you provide about this PR? -->
## Additional information

<!--
Thank you for your contribution!
 
Before submitting this pull request, please make sure you have read our Contribution Guidelines and your PR meets our contribution standards:
https://github.com/magento-research/peregrine/blob/develop/.github/CONTRIBUTION.md
 
Please fill out as much information as you can about your PR to help speed up the review process.
If your PR addresses an existing GitHub Issue, please refer to it in the title or Additional Information section to make the connection.
 
We may ask you for changes in your PR in order to meet the standards set in our Contribution Guidelines. PR's that do not comply with our guidelines may be closed at the maintainers' discretion.

Feel free to remove this section before creating this PR.
-->

Author: DrewML

package-lock.json

@@ -56,6 +56,7 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.5.1",
     "execa": "^0.10.0",
+    "intl": "^1.2.5",
     "jest": "^22.4.3",
     "jest-fetch-mock": "^1.4.1",
     "npm-merge-driver": "^2.3.5",

package.json

@@ -0,0 +1,41 @@
+import { createElement, PureComponent, Fragment } from 'react';
+import { number, string, shape } from 'prop-types';
+
+export default class Price extends PureComponent {
+    static propTypes = {
+        value: number.isRequired,
+        currencyCode: string.isRequired,
+        classes: shape({
+            currency: string,
+            integer: string,
+            decimal: string,
+            fraction: string
+        })
+    };
+
+    static defaultProps = {
+        classes: {}
+    };
+
+    render() {
+        const { value, currencyCode, classes } = this.props;
+        const parts = Intl.NumberFormat(undefined, {
+            style: 'currency',
+            currency: currencyCode
+        }).formatToParts(value);
+
+        return (
+            <Fragment>
+                {parts.map((part, i) => {
+                    const partClass = classes[part.type];
+                    const key = `${i}-${part.value}`;
+                    return (
+                        <span key={key} className={partClass}>
+                            {part.value}
+                        </span>
+                    );
+                })}
+            </Fragment>
+        );
+    }
+}

src/Price/Price.js

@@ -0,0 +1,28 @@
+# Price
+
+The `Price` component is used anywhere a price is rendered in PWA Studio.
+
+Formatting of prices and currency symbol selection is handled entirely by the ECMAScript Internationalization API available in modern browsers. A [polyfill](https://www.npmjs.com/package/intl) will need to be loaded for any JavaScript runtime that does not have [`Intl.NumberFormat.prototype.formatToParts`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts).
+
+## Usage
+
+```jsx
+import Price from '@peregrine/Price';
+import cssModule from './my-pricing-styles';
+
+<Price value={100.99} currencyCode="USD" classes={cssModule} />;
+/*
+    <span className="curr">$</span>
+    <span className="int">88</span>
+    <span className="dec">.</span>
+    <span className="fract">81</span>
+*/
+```
+
+## Props
+
+| Prop Name      | Required? | Description                                                                                                                                                          |
+| -------------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `classes`      |    ❌     | A classname object.                                                                                                                                                  |
+| `value`        |    ✅     | Numeric price                                                                                                                                                        |
+| `currencyCode` |    ✅     | A string of with any currency code supported by [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) |

src/Price/__docs__/Price.md

@@ -0,0 +1,45 @@
+import { createElement } from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import Price from '../Price';
+import docs from '../__docs__/Price.md';
+
+const stories = storiesOf('Price', module);
+
+stories.add(
+    'USD',
+    withReadme(docs, () => <Price value={100.99} currencyCode="USD" />)
+);
+
+stories.add(
+    'EUR',
+    withReadme(docs, () => <Price value={100.99} currencyCode="EUR" />)
+);
+
+stories.add(
+    'JPY',
+    withReadme(docs, () => <Price value={100.99} currencyCode="JPY" />)
+);
+
+stories.add(
+    'Custom Styles',
+    withReadme(docs, () => {
+        const classes = {
+            currency: 'curr',
+            integer: 'int',
+            decimal: 'dec',
+            fraction: 'fract'
+        };
+        return (
+            <div>
+                <style>{`
+                    .curr { color: green; font-weight: bold; }
+                    .int { color: red; }
+                    .dec { color: black; }
+                    .fract { color: blue; }
+                `}</style>
+                <Price value={100.99} currencyCode="USD" classes={classes} />
+            </div>
+        );
+    })
+);

src/Price/__stories__/Price.js

@@ -0,0 +1,61 @@
+import { createElement, Fragment } from 'react';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Price from '../Price';
+import IntlPolyfill from 'intl';
+
+configure({ adapter: new Adapter() });
+
+if (!global.Intl.NumberFormat.prototype.formatToParts) {
+    global.Intl = IntlPolyfill;
+}
+
+test('Renders a USD price', () => {
+    const wrapper = shallow(<Price value={100.99} currencyCode="USD" />);
+    expect(
+        wrapper.equals(
+            <Fragment>
+                <span>$</span>
+                <span>100</span>
+                <span>.</span>
+                <span>99</span>
+            </Fragment>
+        )
+    ).toBe(true);
+});
+
+test('Renders a EUR price', () => {
+    const wrapper = shallow(<Price value={100.99} currencyCode="EUR" />);
+    expect(
+        wrapper.equals(
+            <Fragment>
+                <span>€</span>
+                <span>100</span>
+                <span>.</span>
+                <span>99</span>
+            </Fragment>
+        )
+    ).toBe(true);
+});
+
+test('Allows custom classnames for each part', () => {
+    const classes = {
+        currency: 'curr',
+        integer: 'int',
+        decimal: 'dec',
+        fraction: 'fract'
+    };
+    const wrapper = shallow(
+        <Price value={88.81} currencyCode="USD" classes={classes} />
+    );
+    expect(
+        wrapper.equals(
+            <Fragment>
+                <span className="curr">$</span>
+                <span className="int">88</span>
+                <span className="dec">.</span>
+                <span className="fract">81</span>
+            </Fragment>
+        )
+    ).toBe(true);
+});

src/Price/__tests__/Price.spec.js

@@ -5,6 +5,12 @@ import { log } from './middleware';
 const reducer = (state = {}) => state;
 
 const initStore = () =>
-    createStore(reducer, compose(applyMiddleware(log), exposeSlices));
+    createStore(
+        reducer,
+        compose(
+            applyMiddleware(log),
+            exposeSlices
+        )
+    );
 
 export default initStore;