diff --git a/src/App.js b/src/App.js index a443c11..cc364da 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import './App.css'; +import AutoReview from './components/autoReview' function App() { return ( @@ -9,6 +10,7 @@ function App() { My really cool blog site

+ ); } diff --git a/src/App.test.js b/src/App.test.js index bb45998..c0db822 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -6,3 +6,9 @@ test('renders My really cool blog site logo', () => { const linkElement = screen.getByText(/My really cool blog site/i); expect(linkElement).toBeInTheDocument(); }); + +test('renders Auto Review Article', () => { + render(); + const linkElement = screen.getByText(/Auto Review:/i); + expect(linkElement).toBeInTheDocument(); +}); \ No newline at end of file diff --git a/src/components/autoReview/autoReview.css b/src/components/autoReview/autoReview.css new file mode 100644 index 0000000..bf419b0 --- /dev/null +++ b/src/components/autoReview/autoReview.css @@ -0,0 +1,24 @@ +.autoReview { + border: black 7px solid; + border-radius: 10px; + margin: 5px 0px; + padding: 0px 10px; + display: inherit; + width: 25%; + flex-direction: inherit; + align-items: inherit; +} + +.articleHeader{ + margin: 15px 0px; + display: flex; + background: #272c35; + padding: 0px 10px; + font-size: calc(5px + 2vmin); + color: white; + text-shadow: 0 0 black; +} + +.articleParagraph { + margin: 3% 0%; +} \ No newline at end of file diff --git a/src/components/autoReview/index.js b/src/components/autoReview/index.js new file mode 100644 index 0000000..070f07f --- /dev/null +++ b/src/components/autoReview/index.js @@ -0,0 +1,16 @@ +import './autoReview.css'; + +function AutoReview() { + return ( +
+
+

+ Auto Review: 415 RSX W18 +

+
+

One technological model for both semi- and fully-autonomous cars is vehicle-to-vehicle communication.

+
+ ); +} + +export default AutoReview;