An engaging device catalogue to browse iphones and apple watches

package.json

@@ -8,12 +8,38 @@
     "unit": "jest"
   },
   "dependencies": {
+    "@tds/core-a11y-content": "^2.3.0",
+    "@tds/core-benefit": "^1.1.2",
+    "@tds/core-box": "^2.4.0",
+    "@tds/core-button": "^3.3.0",
+    "@tds/core-button-link": "^3.3.0",
+    "@tds/core-card": "^2.6.0",
+    "@tds/core-chevron-link": "^2.3.3",
+    "@tds/core-css-reset": "^3.0.1",
+    "@tds/core-dimple-divider": "^2.1.0",
+    "@tds/core-display-heading": "^3.1.0",
+    "@tds/core-flex-grid": "^4.1.0",
+    "@tds/core-hairline-divider": "^2.1.0",
     "@tds/core-heading": "^3.0.8",
+    "@tds/core-image": "^2.1.0",
+    "@tds/core-link": "^2.3.0",
+    "@tds/core-paragraph": "^2.1.0",
+    "@tds/core-price-lockup": "^2.4.0",
+    "@tds/core-terms-and-conditions": "^1.5.0",
+    "@tds/core-text": "^3.2.0",
+    "@testing-library/react": "^12.1.2",
+    "axios": "^0.24.0",
+    "cors": "^2.8.5",
     "enzyme": "^3.11.0",
     "express": "^4.17.1",
+    "nodemon": "^2.0.15",
+    "path": "^0.12.7",
+    "prettier": "^2.5.1",
+    "process": "^0.11.10",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.13",

src/server.js

@@ -1,7 +1,10 @@
-var express = require('express');
-var app = express();
-var router = express.Router();
-var PORT = 8081;
+const express = require('express');
+const app = express();
+const router = express.Router();
+const PORT = 8081;
+const cors = require('cors');
+
+app.use(cors());
 
 router.get('/watches', function(req, res) {
   res.json({

src/ui/__tests__/DeviceCard.test.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import DeviceCardItem from "../components/DeviceCard";
+
+describe("DeviceCardItem", () => {
+  const deviceData = {
+    key: 1,
+    name: "iPhone 13",
+    brand: "Apple",
+    price: "500",
+    url: "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-13-pro-silver-select?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1631652954000",
+  };
+
+  it("renders without crashing", () => {
+    render(
+      <DeviceCardItem
+        name={deviceData.name}
+        brand={deviceData.brand}
+        price={deviceData.price}
+        url={deviceData.url}
+      />
+    );
+  });
+});

src/ui/__tests__/DeviceCardGrid.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import DeviceCardGrid from "../components/DeviceCardGrid";
+
+describe("DeviceCardGrid", () => {
+  const deviceData = [
+    {
+      key: 1,
+      name: "iPhone 13",
+      brand: "Apple",
+      price: "500",
+      url: "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-13-pro-silver-select?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1631652954000",
+    },
+  ];
+
+  it("renders without crashing", () => {
+    render(<DeviceCardGrid data={deviceData} />);
+  });
+});

src/ui/__tests__/Home.test.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import Home from "../components/Home";
+
+describe("Home", () => {
+  it("renders without crashing", () => {
+    render(<Home/>);
+  });
+});

src/ui/components/App/index.js

@@ -1,16 +1,23 @@
-import React from 'react';
-import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
-import Home from '../Home';
-import NotFound from '../NotFound';
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import CSSReset from "@tds/core-css-reset";
+import Home from "../Home";
+import NotFound from "../NotFound";
+import NavBar from "../NavBar";
 
-const App = () => (
-  <Router>
-    <Switch>
-      <Route path="/">
-        <Home />
-      </Route>
-    </Switch>
-  </Router>
-);
-
-export default App;
+export default function App() {
+  return (
+    <Router>
+      <CSSReset />
+      <NavBar />
+      <Switch>
+        <Route path="/">
+          <Home />
+        </Route>
+        <Route>
+          <NotFound />
+        </Route>
+      </Switch>
+    </Router>
+  );
+}

src/ui/components/DeviceCard.js

@@ -0,0 +1,44 @@
+import React from "react";
+import FlexGrid from "@tds/core-flex-grid";
+import Heading from "@tds/core-heading";
+import Card from "@tds/core-card";
+import PriceLockup from "@tds/core-price-lockup";
+import Text from "@tds/core-text";
+import Image from "@tds/core-image";
+import Button from "@tds/core-button";
+import ChevronLink from "@tds/core-chevron-link";
+import Box from "@tds/core-box";
+import DimpleDivider from "@tds/core-dimple-divider";
+
+export default function DeviceCardItem(props) {
+  return (
+    <div className="device-card_item">
+      <FlexGrid outsideGutter={false}>
+        <FlexGrid.Row>
+          <FlexGrid.Col xs={12} md={9}>
+            <Card fullHeight variant="defaultWithBorder">
+              <Box between={4}>
+                <Image src={props.url} width={200} height={100} alt="device" />
+                <Heading level="h3">{props.brand.toUpperCase()}</Heading>
+                <Heading level="h2" tag="h3">
+                  {props.name}
+                </Heading>
+                <PriceLockup
+                  size="medium"
+                  price={props.price}
+                  bottomText="TELUS Easy Payment and Bring-It-Back applied. Read legal footnote. Taxes due upfront."
+                  signDirection="left"
+                />
+                <br />
+                <Text size="medium">Retail price: $470</Text>
+                {/* <Button>Add to cart</Button>
+                <ChevronLink href="#">Learn more</ChevronLink> */}
+              </Box>
+            </Card>
+          </FlexGrid.Col>
+        </FlexGrid.Row>
+      </FlexGrid>
+      <DimpleDivider />
+    </div>
+  );
+}

src/ui/components/DeviceCardGrid.js

@@ -0,0 +1,27 @@
+import React from "react";
+import FlexGrid from "@tds/core-flex-grid";
+import Box from "@tds/core-box";
+import DeviceCardItem from "./DeviceCard";
+
+export default function DeviceCardGrid(props) {
+  return (
+    <FlexGrid>
+      <FlexGrid.Row>
+        {props.data.map((item, index) => {
+          return (
+            <FlexGrid.Col key={index}>
+              <Box verical={4}>
+                <DeviceCardItem
+                  name={item.name}
+                  brand={item.brand}
+                  price={item.price}
+                  url={props.url}
+                />
+              </Box>
+            </FlexGrid.Col>
+          );
+        })}
+      </FlexGrid.Row>
+    </FlexGrid>
+  );
+}

src/ui/components/Footnote.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { FootnoteLink } from "@tds/core-terms-and-conditions";
+import Card from "@tds/core-card";
+import Heading from "@tds/core-heading";
+import Paragraph from "@tds/core-paragraph";
+import Text from "@tds/core-text";
+import Box from '@tds/core-box'
+
+export default function Footnote(props) {
+  return (
+    <div>
+      <Card variant="defaultWithBorder">
+        <Box between={3}>
+          <Heading level="h4">Get to know us more</Heading>
+
+          <Paragraph>
+            The TELUS team acknowledges that our work spans many Territories and
+            Treaty areas and we are grateful for the traditional Knowledge
+            Keepers and Elders who are with us today, those who have gone before
+            us and the youth that inspire us. We recognize the land and the
+            benefits it provides all of us, as an act of Reconciliation, as
+            recommended by the Truth and Reconciliation Commission’s (TRC) 94
+            Calls to Action and gratitude to those whose territory we reside on,
+            work on or are visiting. Learn more about TELUS’ commitments to
+            Reconciliation.
+          </Paragraph>
+
+          <Paragraph>
+            <Text>To learn more about Telus and our products, click here.</Text>
+          </Paragraph>
+        </Box>
+      </Card>
+    </div>
+  );
+}

src/ui/components/Home/index.js

@@ -1,6 +1,111 @@
-import React from 'react';
-import Heading from '@tds/core-heading';
-
-const Home = () => <Heading level="h1">Device Catalogue</Heading>;
+import React from "react";
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import CSSReset from "@tds/core-css-reset";
+import Heading from "@tds/core-heading";
+import FlexGrid from "@tds/core-flex-grid";
+import Box from "@tds/core-box";
+import Image from "@tds/core-image";
+import Paragraph from "@tds/core-paragraph";
+import DimpleDivider from "@tds/core-dimple-divider";
+import ChevronLink from "@tds/core-chevron-link";
+import Footnote from "../Footnote";
+import IphonesLayout from "../IPhones";
+import WatchesLayout from "../Watches";
 
+const Home = () => {
+  return (
+    <Router>
+      <CSSReset />
+      <Switch>
+        <Route exact path="/">
+          <React.Fragment>
+            <Heading level="h1" tag="h2">
+              Browse our exclusive device catalogues.
+            </Heading>
+            <br />
+            <div className="home-iphone">
+              <FlexGrid>
+                <FlexGrid.Row>
+                  <FlexGrid.Col xs={12} md={4}>
+                    <Image
+                      src={
+                        "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-13-pro-max-gold-select?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1631652956000"
+                      }
+                      width={200}
+                      height={100}
+                      alt="iPhone 13"
+                    />
+                  </FlexGrid.Col>
+                  <FlexGrid.Col xs={12} md={5}>
+                    <Box between={3}>
+                      <Heading level="h2">
+                        Get up to $520 off iPhone 13 with Bring‑It‑Back
+                      </Heading>
+                      <Paragraph>
+                        Enjoy iPhone 11 for just $20 per month on a two-year
+                        term when you choose Bring‑It‑Back Read. Offer available
+                        for a limited time only.
+                      </Paragraph>
+                      <div>
+                        <ChevronLink>
+                          <Link to="/iphones">Browse more iPhones</Link>
+                        </ChevronLink>
+                      </div>
+                    </Box>
+                  </FlexGrid.Col>
+                </FlexGrid.Row>
+              </FlexGrid>
+            </div>
+            <DimpleDivider />
+            <div className="home-watch">
+              <FlexGrid>
+                <FlexGrid.Row>
+                  <FlexGrid.Col xs={12} md={4}>
+                    <Image
+                      src={
+                        "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/F02W3?wid=1144&hei=1144&fmt=jpeg&qlt=80&.v=1614983429000"
+                      }
+                      width={200}
+                      height={100}
+                      alt="iPhone 11"
+                    />
+                  </FlexGrid.Col>
+                  <FlexGrid.Col xs={12} md={5}>
+                    <Box between={3}>
+                      <Heading level="h2">
+                        Get up to $520 off Apple watches with Bring‑It‑Back
+                      </Heading>
+                      <Paragraph>
+                        Enjoy the all new Apple watches for just $20 per month
+                        on a two-year term when you choose Bring‑It‑Back Read.
+                        Offer available for a limited time only.
+                      </Paragraph>
+                      <div>
+                        <ChevronLink>
+                          <Link to="/watches">Browse more Apple watches</Link>
+                        </ChevronLink>
+                      </div>
+                    </Box>
+                  </FlexGrid.Col>
+                </FlexGrid.Row>
+              </FlexGrid>
+            </div>
+            <DimpleDivider />
+            <div className="footer-text">
+              <Link to="https://www.telus.com/en/mobility" invert>
+                <Footnote />
+              </Link>
+            </div>
+          </React.Fragment>
+        </Route>
+        <Route path="/iphones">
+          <IphonesLayout />
+        </Route>
+        <Route path="/watches">
+          <WatchesLayout />
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
 export default Home;