diff --git a/src/components/App.jsx b/src/components/App.jsx index 0b5a6cd..48dd097 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -8,30 +8,34 @@ import CImagesAll from "./CustomerImageCmpnt/CustomerImagesAll"; import Appples from "./RatingSummary/Appples"; import PhotoGallery from "./PhotoGallery/PhotoGallery"; import TopBar from "./TopBar/TopBar"; +import BlueSecondTopLine from "./SecondTopLine/BlueSecondTopline"; +import Footer from "./Footer/Footer"; // import "../Css/App.css"; class App extends Component { - render() { - return ( -
-
- -
+ render() { + return ( +
+
+ +
+ - -
- {/*place holder: replace when ready*/} -
- - - - - - -
- ); - } + +
+ {/*place holder: replace when ready*/} +
+ + + + + + +
+ ); + } } export default App; diff --git a/src/components/Footer/Bluefoot.js b/src/components/Footer/Bluefoot.js new file mode 100644 index 0000000..27736e1 --- /dev/null +++ b/src/components/Footer/Bluefoot.js @@ -0,0 +1,37 @@ +// will hold the get to know us +// make money +// all that stuff in blue above footer + +import React, { Component } from "react"; + +export default class Bluefoot extends Component { + render() { + return ( +
+
stuff here with blue ish background
+

+ These are the voyages of the Starship Enterprise. Its continuing + mission, to explore strange new worlds, to seek out new life and new + civilizations, to boldly go where no one has gone before. We need to + neutralize the homing signal. Each unit has total environmental + control, gravity, temperature, atmosphere, light, in a protective + field. Sensors show energy readings in your area. We had a forced + chamber explosion in the resonator coil. Field strength has increased + by 3,000 percent. +

+ +

+ Shields up. I recommend we transfer power to phasers and arm the + photon torpedoes. Something strange on the detector circuit. The + weapons must have disrupted our communicators. You saw something as + tasty as meat, but inorganically materialized out of patterns used by + our transporters. Captain, the most elementary and valuable statement + in science, the beginning of wisdom, is 'I do not know.' All + transporters off. +

+ +

Resistance is futile.

+
+ ); + } +} diff --git a/src/components/Footer/BottomLine.js b/src/components/Footer/BottomLine.js new file mode 100644 index 0000000..240dddd --- /dev/null +++ b/src/components/Footer/BottomLine.js @@ -0,0 +1,24 @@ +import React, { Component } from "react"; +import "./footer.css"; + +export default class BottomLine extends Component { + render() { + return ( + + ); + } +} diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..2837af4 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,20 @@ +// this is gonna be the one to rule them all + +import React, { Component } from "react"; +import "./footer.css"; + +import Bluefoot from "./Bluefoot"; +import Prefoot from "./Prefoot"; +import BottomLine from "./BottomLine"; + +export default class Footer extends Component { + render() { + return ( +
+ + + +
+ ); + } +} diff --git a/src/components/Footer/Prefoot.js b/src/components/Footer/Prefoot.js new file mode 100644 index 0000000..da6e1ff --- /dev/null +++ b/src/components/Footer/Prefoot.js @@ -0,0 +1,17 @@ +import React, { Component } from "react"; + +// will move to footer + +export default class Prefoot extends Component { + render() { + return ( +
+ a table of Amazin features +
+ ); + } +} diff --git a/src/components/Footer/footer.css b/src/components/Footer/footer.css new file mode 100644 index 0000000..7525236 --- /dev/null +++ b/src/components/Footer/footer.css @@ -0,0 +1,44 @@ +.bottomline { + display: inline-flex; + background-color: rgb(19, 26, 34); + color: rgb(252, 252, 253); + width: 100%; + align-content: center; + text-align: center; + align-items: center; + align-self: center; + justify-content: center; +} + +.bottomlinks { + text-decoration: none; + color: rgb(252, 252, 253); + padding: 10px; +} + +.bottomlinks:hover { + text-decoration: underline white; +} + +.notalink { + text-decoration: none; + color: rgb(173, 173, 175); + cursor: default; +} + +.bluefoot { + background-color: rgb(35, 47, 62); + color: aliceblue; + padding: 13px; +} + +.bluefoot, +.prefoot, +.bottomline { + margin: -3px; + max-width: 100%; +} + +.lowfootertable { + max-width: 100%; +} diff --git a/src/components/PrimaryPage.jsx b/src/components/PrimaryPage.jsx index c733af3..fc696e9 100644 --- a/src/components/PrimaryPage.jsx +++ b/src/components/PrimaryPage.jsx @@ -9,63 +9,67 @@ import Appples from "./RatingSummary/Appples"; import Grid from "@material-ui/core/Grid"; import TopBar from "./TopBar/TopBar"; import PhotoGallery from "./PhotoGallery/PhotoGallery"; +import BlueSecondTopLine from "./SecondTopLine/BlueSecondTopline"; +import Footer from "./Footer/Footer"; import "./primarypage.css"; class PrimaryPage extends Component { - render() { - return ( -
- - - -
-
- -
-
- -
-
-
- - - - - - - - - - - - - - - - - - -
- ); - } + render() { + return ( +
+ + + + +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + +
+ ); + } } export default PrimaryPage; diff --git a/src/components/SecondTopLine/BestSellers.js b/src/components/SecondTopLine/BestSellers.js new file mode 100644 index 0000000..3fed365 --- /dev/null +++ b/src/components/SecondTopLine/BestSellers.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class BestSellers extends Component { + render() { + return ( +
+

+ Best Sellers +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/BlueSecondTop.css b/src/components/SecondTopLine/BlueSecondTop.css new file mode 100644 index 0000000..dbd21a9 --- /dev/null +++ b/src/components/SecondTopLine/BlueSecondTop.css @@ -0,0 +1,23 @@ +.bluesecondtopline { + display:flex; + flex-direction: row; + background-color: rgb(35, 47, 62); + color: aliceblue; + width:100%; + height:50px; + align-items: center; + justify-content: space-evenly; + flex-wrap: nowrap; +} + +.bluetoprow { + text-decoration: none; + color: aliceblue; + border:1px solid rgb(35, 47, 62); + padding:5px; +} + +.bluetoprow:hover{ + border:1px solid white; + cursor: pointer; +} diff --git a/src/components/SecondTopLine/BlueSecondTopline.js b/src/components/SecondTopLine/BlueSecondTopline.js new file mode 100644 index 0000000..0408d29 --- /dev/null +++ b/src/components/SecondTopLine/BlueSecondTopline.js @@ -0,0 +1,34 @@ +import React, { Component } from "react"; +import Location from "./Location"; +import BestSellers from "./BestSellers"; +import CustomerService from "./CustomerService"; +import Deals from "./Deals"; +import NewReleases from "./NewReleases"; +import Gift from "./Gift"; +import Foods from "./Foods"; +import GiftCards from "./GiftCards"; +import Shipping from "./Shipping"; +import Registry from "./Registry"; +import School from "./School"; + +import "./BlueSecondTop.css"; + +export default class BlueSecondTopLine extends Component { + render() { + return ( +
+ + + + + + + + + + + +
+ ); + } +} diff --git a/src/components/SecondTopLine/CustomerService.js b/src/components/SecondTopLine/CustomerService.js new file mode 100644 index 0000000..ee477da --- /dev/null +++ b/src/components/SecondTopLine/CustomerService.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class CustomerService extends Component { + render() { + return ( +
+

+ Customer Service +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/Deals.js b/src/components/SecondTopLine/Deals.js new file mode 100644 index 0000000..d3a71d4 --- /dev/null +++ b/src/components/SecondTopLine/Deals.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class Deals extends Component { + render() { + return ( +
+

+ Today's Deals +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/Foods.js b/src/components/SecondTopLine/Foods.js new file mode 100644 index 0000000..b46ebb3 --- /dev/null +++ b/src/components/SecondTopLine/Foods.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class Foods extends Component { + render() { + return ( +
+

+ Hole Foodz +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/Gift.js b/src/components/SecondTopLine/Gift.js new file mode 100644 index 0000000..7153e0d --- /dev/null +++ b/src/components/SecondTopLine/Gift.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class Gift extends Component { + render() { + return ( +
+

+ Find a Gift +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/GiftCards.js b/src/components/SecondTopLine/GiftCards.js new file mode 100644 index 0000000..05afc0e --- /dev/null +++ b/src/components/SecondTopLine/GiftCards.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class GiftCards extends Component { + render() { + return ( +
+

+ Gift Cards +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/Location.js b/src/components/SecondTopLine/Location.js new file mode 100644 index 0000000..3c99b76 --- /dev/null +++ b/src/components/SecondTopLine/Location.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class Location extends Component { + render() { + return ( +
+

+ Where are You? +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/NewReleases.js b/src/components/SecondTopLine/NewReleases.js new file mode 100644 index 0000000..34cece8 --- /dev/null +++ b/src/components/SecondTopLine/NewReleases.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class NewReleases extends Component { + render() { + return ( +
+

+ New Releases +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/Registry.js b/src/components/SecondTopLine/Registry.js new file mode 100644 index 0000000..9a82088 --- /dev/null +++ b/src/components/SecondTopLine/Registry.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class Registry extends Component { + render() { + return ( +
+

+ Registry +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/School.js b/src/components/SecondTopLine/School.js new file mode 100644 index 0000000..2691afc --- /dev/null +++ b/src/components/SecondTopLine/School.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class School extends Component { + render() { + return ( +
+

+ Low prices on school supplies +

+
+ ); + } +} diff --git a/src/components/SecondTopLine/Shipping.js b/src/components/SecondTopLine/Shipping.js new file mode 100644 index 0000000..aa7668d --- /dev/null +++ b/src/components/SecondTopLine/Shipping.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; + +export default class Shipping extends Component { + render() { + return ( +
+

+ Free Shipping +

+
+ ); + } +} diff --git a/tests/blBlueTopBar.spec.js b/tests/blBlueTopBar.spec.js new file mode 100644 index 0000000..3f56525 --- /dev/null +++ b/tests/blBlueTopBar.spec.js @@ -0,0 +1,20 @@ +import React from "react"; +import BlueSecondTopLine from "../src/components/SecondTopLine/BlueSecondTopline"; +import ReactDom from "react-dom"; +import { cleanup } from "@testing-library/react"; +import { shallow, configure } from "enzyme"; +import Adapter from "enzyme-adapter-react-16"; +configure({ adapter: new Adapter() }); + +// this here is gold +afterEach(cleanup); +// it kills anything after each test so need to unmount + +// basic crash test 1 star + +describe("This component test should render 2nd blue top bar without crashing", () => { + it("Should render as expected!", () => { + const div = document.createElement("div"); + ReactDom.render(, div); + }); +}); diff --git a/tests/footertest.spec.js b/tests/footertest.spec.js new file mode 100644 index 0000000..8619baa --- /dev/null +++ b/tests/footertest.spec.js @@ -0,0 +1,58 @@ +import React from "react"; +import Footer from "../src/components/Footer/Footer"; +import BottomLine from "../src/components/Footer/BottomLine"; +import ReactDom from "react-dom"; +import { cleanup } from "@testing-library/react"; +import { shallow, configure } from "enzyme"; +import Adapter from "enzyme-adapter-react-16"; +configure({ adapter: new Adapter() }); + +// this here is gold +afterEach(cleanup); +// it kills anything after each test so need to unmount + +// basic crash test + +describe("This component test should render the footer without crashing", () => { + it("Should render as expected!", () => { + const div = document.createElement("div"); + ReactDom.render(