Add numeric text display

Author: lulunac27a

src/components/CostDisplay/CostDisplay.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './CostDisplay.module.css';
+import NumericDisplay from '../NumericDisplay/NumericDisplay';
 
 const CostDisplay = (
   { cost }, //cost display content
 ) => (
   <div className={styles.CostDisplay} data-testid="CostDisplay">
     {/*display cost display with specified styles*/}
-    Cost: <span id="cost-value">{cost}</span>
+    Cost:{" "}
+    <span id="cost-value">
+      <NumericDisplay value={cost} />
+    </span>
     {/*bold the cost numeric value*/}
   </div>
 );

src/components/CostDisplay/CostDisplay.module.css

@@ -1,6 +1,3 @@
 .CostDisplay {
   text-align: center; /*center cost display text component*/
 }
-#cost-value {
-  font-weight: bold; /*bold numeric cost value*/
-}

src/components/NumericDisplay/NumericDisplay.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './NumericDisplay.module.css';
+
+const NumericDisplay = ({ value }) => (
+  <div className={styles.NumericDisplay} data-testid="NumericDisplay">
+    {value}
+  </div>
+);
+
+NumericDisplay.propTypes = {};
+
+NumericDisplay.defaultProps = {};
+
+export default NumericDisplay;

src/components/NumericDisplay/NumericDisplay.lazy.js

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyNumericDisplay = lazy(() => import('./NumericDisplay'));
+
+const NumericDisplay = props => (
+  <Suspense fallback={null}>
+    <LazyNumericDisplay {...props} />
+  </Suspense>
+);
+
+export default NumericDisplay;

src/components/NumericDisplay/NumericDisplay.module.css

@@ -0,0 +1,4 @@
+.NumericDisplay {
+  font-weight: bold; /*bold numeric cost value*/
+  font-variant-numeric: tabular-nums; /*make all numeric values the same character width*/
+}

src/components/NumericDisplay/NumericDisplay.stories.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import NumericDisplay from './NumericDisplay';
+
+export default {
+  title: "NumericDisplay",
+};
+
+export const Default = () => <NumericDisplay />;
+
+Default.story = {
+  name: 'default',
+};

src/components/NumericDisplay/NumericDisplay.test.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import NumericDisplay from './NumericDisplay';
+
+describe('<NumericDisplay />', () => {
+  test('it should mount', () => {
+    render(<NumericDisplay />);
+
+    const NumericDisplay = screen.getByTestId('NumericDisplay');
+
+    expect(NumericDisplay).toBeInTheDocument();
+  });
+});