Add cost display component

Author: lulunac27a

generate-react-cli.json

@@ -0,0 +1,16 @@
+{
+  "usesTypeScript": false,
+  "usesStyledComponents": false,
+  "testLibrary": "Testing Library",
+  "component": {
+    "default": {
+      "path": "src/components",
+      "withStyle": true,
+      "withTest": true,
+      "withStory": true,
+      "withLazy": true
+    }
+  },
+  "usesCssModule": true,
+  "cssPreprocessor": "css"
+}

src/components/CostDisplay/CostDisplay.js

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

src/components/CostDisplay/CostDisplay.lazy.js

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

src/components/CostDisplay/CostDisplay.module.css

@@ -0,0 +1 @@
+.CostDisplay {}

src/components/CostDisplay/CostDisplay.stories.js

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

src/components/CostDisplay/CostDisplay.test.js

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