Add comments in cost display component

Author: lulunac27a

src/components/CostDisplay/CostDisplay.js

@@ -2,9 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './CostDisplay.module.css';
 
-const CostDisplay = ({ cost }) => (
+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>
+    {/*bold the cost numeric value*/}
   </div>
 );
 

src/components/CostDisplay/CostDisplay.module.css

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

src/components/CostDisplay/CostDisplay.stories.js

@@ -5,7 +5,7 @@ export default {
   title: 'CostDisplay',
 };
 
-export const Default = () => <CostDisplay />;
+export const Default = () => <CostDisplay />; //default JSX component render
 
 Default.story = {
   name: 'default',