diff --git a/package.json b/package.json index 1c36cab..bbca36b 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@code4ro/reusable-components": "0.1.21", + "@code4ro/reusable-components": "^0.1.23", "@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0", @@ -16,11 +16,13 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", + "@types/react-helmet": "^6.1.0", "@types/react-router-dom": "^5.1.5", "date-fns": "^2.16.1", "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-helmet": "^6.1.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", "react-spinners-css": "^1.2.2", diff --git a/src/components/NewsCardWidget.module.scss b/src/components/NewsCardWidget.module.scss index c52a490..313fb69 100644 --- a/src/components/NewsCardWidget.module.scss +++ b/src/components/NewsCardWidget.module.scss @@ -1,4 +1,19 @@ .cardWrapper { margin: 40px auto 0; max-width: 36rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.button { + border: none; + background: #ffcc00; + color: black; + width: 200px; + border-radius: 5px; + padding: 20px 20px; + cursor: pointer; + font-size: 20px; + margin: 40px auto 0; } diff --git a/src/components/NewsCardWidget.tsx b/src/components/NewsCardWidget.tsx index 745c6c8..6a1201b 100644 --- a/src/components/NewsCardWidget.tsx +++ b/src/components/NewsCardWidget.tsx @@ -1,5 +1,7 @@ import { ElectionNewsCard } from "@code4ro/reusable-components"; import React from "react"; +import { Helmet } from "react-helmet"; +import { NavLink } from "react-router-dom"; import { useBallotFromRoute, useNewsItemIdFromRoute } from "../functions/urlState"; import classes from "./NewsCardWidget.module.scss"; @@ -19,7 +21,21 @@ export const NewsCardWidget: React.FC = () => { return ( (data && data.electionNews && (
+ + {newsItem.title} + + + + + +
)) || null diff --git a/yarn.lock b/yarn.lock index ac178bf..4203015 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1156,10 +1156,10 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@code4ro/reusable-components@0.1.21": - version "0.1.21" - resolved "https://registry.yarnpkg.com/@code4ro/reusable-components/-/reusable-components-0.1.21.tgz#650a32e2c76ad219ec7a2ddaef64b9d3376a840f" - integrity sha512-d+3EHmgNJcrh5GZIbFlRmz1OWp30iy+/lSDBktsJEqeaX+FplmAX5Pbw4MwVYVpoD0m0Vz9oYnb8eny97NJfaQ== +"@code4ro/reusable-components@^0.1.23": + version "0.1.23" + resolved "https://registry.yarnpkg.com/@code4ro/reusable-components/-/reusable-components-0.1.23.tgz#b8991d518211e08630afc82b3cc382e4a7c015e0" + integrity sha512-BSQDz7AsP0FuNgOvET5mZ8UcVl0iGucyuxN1Fnyd77lDWCFTPbAUzq6nt7uWqKqmrqXt8ZLGmqerx42p0x8egQ== dependencies: color "^3.1.2" date-fns "^2.16.1" @@ -1830,6 +1830,13 @@ dependencies: "@types/react" "*" +"@types/react-helmet@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.0.tgz#af586ed685f4905e2adc7462d1d65ace52beee7a" + integrity sha512-PYRoU1XJFOzQ3BHvWL1T8iDNbRjdMDJMT5hFmZKGbsq09kbSqJy61uwEpTrbTNWDopVphUT34zUSVLK9pjsgYQ== + dependencies: + "@types/react" "*" + "@types/react-router-dom@^5.1.5": version "5.1.5" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090" @@ -9622,6 +9629,21 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== +react-fast-compare@^3.1.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + +react-helmet@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" + integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== + dependencies: + object-assign "^4.1.1" + prop-types "^15.7.2" + react-fast-compare "^3.1.1" + react-side-effect "^2.1.0" + react-input-autosize@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2" @@ -9737,6 +9759,11 @@ react-select@^3.1.0: react-input-autosize "^2.2.2" react-transition-group "^4.3.0" +react-side-effect@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3" + integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg== + react-spinners-css@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/react-spinners-css/-/react-spinners-css-1.2.2.tgz#abbcf609e6b459c89e47f3994d8ef85d1c56dc75"