diff --git a/src/Homepage.test.js b/src/Homepage.test.js new file mode 100644 index 0000000..2193798 --- /dev/null +++ b/src/Homepage.test.js @@ -0,0 +1,25 @@ +import { render, fireEvent ,screen } from '@testing-library/react'; +import Homepage from './components/HomePage/HomePage'; + + +describe('Homepage', () => { + test('renders Homepage component', () => { + const { getByText } = render(); + + expect(screen.getByText("Open Source Internships")).toBeInTheDocument(); + expect(screen.getByText("We are an organization to help you find open source internships")).toBeInTheDocument(); + expect(screen.getByText("What Open Source is ...")).toBeInTheDocument(); + expect(screen.getByText("a term that is referred to Open Source Software that is designed to be publicly accessible meaning that any user can see, modify, and distribute the code.")).toBeInTheDocument(); + expect(screen.getByText("We are here to help you!")).toBeInTheDocument(); +}); + + const Button = ({children}) => ( + + ) + test('renders button start', async () => { + render() + fireEvent.click(screen.getByText(/start/i)) + }); + screen.debug(); + +}); \ No newline at end of file diff --git a/src/Resources.test.js b/src/Resources.test.js new file mode 100644 index 0000000..20592ae --- /dev/null +++ b/src/Resources.test.js @@ -0,0 +1,41 @@ +import { render, screen, fireEvent } from '@testing-library/react'; +import React from 'react'; +import { BrowserRouter, Router, Link } from 'react-router-dom'; +import { createMemoryHistory } from 'history'; +import data from './components/data/data.json'; +import Resources from './components/Resources/Resources'; + +describe('Resources', () => { + + test(" more info Link validation", async () => { + //check the more info link 12 times rendered on /resouces page + //check when click moreinfo link routes to corresponding page /resources/resource.id + //check each page has resource.name by getByText on the screen + + let history = createMemoryHistory({ initialEntries: ["/resources"] }); + + render(); + let moreinfoButtons = screen.getAllByText("More info"); + for (let resource of data) + { + + + More info + + + expect(moreinfoButtons).toHaveLength(12) + + fireEvent.click(moreinfoButtons[`${resource.id-1}`]); + + expect(location.pathname).toEqual(`/resources/${resource.id}`); + + await expect(screen.getByText(`${resource.name}`)).toBeInTheDocument(); + + } + + }); + screen.debug(); +}); + + + diff --git a/src/assets/images/sample.png b/src/assets/images/sample.png new file mode 100644 index 0000000..c647725 Binary files /dev/null and b/src/assets/images/sample.png differ diff --git a/src/components/Contributions/Contributions.js b/src/components/Contributions/Contributions.js new file mode 100644 index 0000000..599a1cc --- /dev/null +++ b/src/components/Contributions/Contributions.js @@ -0,0 +1,15 @@ +import React from 'react'; +import SubHeading from '../UI/SubHeading'; +import Paragraph from '../UI/Paragraph'; +import styles from './Contributions.module.css'; +const Contributions = props => { + return ( +
+ Contributions + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + +
+ ) +} +export default Contributions; \ No newline at end of file diff --git a/src/components/Contributions/Contributions.module.css b/src/components/Contributions/Contributions.module.css new file mode 100644 index 0000000..40c165a --- /dev/null +++ b/src/components/Contributions/Contributions.module.css @@ -0,0 +1,7 @@ + + +.container{ + display: grid; + justify-items: start; + +} \ No newline at end of file diff --git a/src/components/Internships/Internships.js b/src/components/Internships/Internships.js new file mode 100644 index 0000000..f009dda --- /dev/null +++ b/src/components/Internships/Internships.js @@ -0,0 +1,17 @@ +import React from 'react'; +import SubHeading from '../UI/SubHeading'; +import Paragraph from '../UI/Paragraph'; +import styles from './Internships.module.css'; +const Internships = props => { + return ( +
+ + Internships + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + + +
+ ) +} +export default Internships; \ No newline at end of file diff --git a/src/components/Internships/Internships.module.css b/src/components/Internships/Internships.module.css new file mode 100644 index 0000000..a75e787 --- /dev/null +++ b/src/components/Internships/Internships.module.css @@ -0,0 +1,6 @@ + +.container{ + display: grid; + justify-items: start; + +} \ No newline at end of file diff --git a/src/components/Members/Members.js b/src/components/Members/Members.js new file mode 100644 index 0000000..94c3c03 --- /dev/null +++ b/src/components/Members/Members.js @@ -0,0 +1,17 @@ +import React from 'react'; +import SubHeading from '../UI/SubHeading'; +import Paragraph from '../UI/Paragraph'; +import styles from './Members.module.css'; +const Members = props => { + return ( +
+ + Members + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + + +
+ ) +} +export default Members; \ No newline at end of file diff --git a/src/components/Members/Members.module.css b/src/components/Members/Members.module.css new file mode 100644 index 0000000..b39e212 --- /dev/null +++ b/src/components/Members/Members.module.css @@ -0,0 +1,7 @@ + + +.container{ + display: grid; + justify-items: start; + +} \ No newline at end of file diff --git a/src/components/NewAbout/About.js b/src/components/NewAbout/About.js new file mode 100644 index 0000000..edbea88 --- /dev/null +++ b/src/components/NewAbout/About.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Heading from '../UI/Heading'; +import Paragraph from '../UI/Paragraph'; + +import styles from './About.module.css'; +const About = props => { + return ( +
+ + We are an Organization to help you find Open Source Internships + + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + + +
+ ) +} +export default About; \ No newline at end of file diff --git a/src/components/NewAbout/About.module.css b/src/components/NewAbout/About.module.css new file mode 100644 index 0000000..5fe0706 --- /dev/null +++ b/src/components/NewAbout/About.module.css @@ -0,0 +1,5 @@ +.container{ + display: grid; + justify-items: start; + +} \ No newline at end of file diff --git a/src/components/NewHomepage/Homepage.js b/src/components/NewHomepage/Homepage.js new file mode 100644 index 0000000..92dd311 --- /dev/null +++ b/src/components/NewHomepage/Homepage.js @@ -0,0 +1,54 @@ +import React from 'react'; +import Button from '../UI/Button'; +import styles from './Homepage.module.css'; +import sampleImg from '../../assets/images/sample.png'; + +import Contributions from '../Contributions/Contributions'; +import Members from '../Members/Members'; +import Internships from '../Internships/Internships'; +import About from '../NewAbout/About' +const Homepage = props => { + return ( +
+ + + + + + + + + + + + + + + + + + + +
+ + + sampleimage +
+ + +
+ + + + + +
+ +
+ ) +} +export default Homepage; \ No newline at end of file diff --git a/src/components/NewHomepage/Homepage.module.css b/src/components/NewHomepage/Homepage.module.css new file mode 100644 index 0000000..d02ca73 --- /dev/null +++ b/src/components/NewHomepage/Homepage.module.css @@ -0,0 +1,23 @@ + +.image{ + width: 100%; + height: 100%; +} + +.homepage-table { + display: table; + border-spacing: 150px; + +} +.homepage-table-row { + display:flex; + justify-content: space-evenly; +} +.homepage-table-data{ + display: flex; + +} +.homepage-table-button{ + display: flex; + justify-content: space-evenly; +} \ No newline at end of file diff --git a/src/components/Resources/Bubblechart.js b/src/components/Resources/Bubblechart.js index 6b83fc4..868786b 100644 --- a/src/components/Resources/Bubblechart.js +++ b/src/components/Resources/Bubblechart.js @@ -6,7 +6,6 @@ import "./Bubblechart.css"; const Bubblechart = (aData) => { let jsonToDisplay = { "children": [...aData.data] }; let diameter = 1000; - // color = d3.scaleOrdinal(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]); let bubble = d3.pack() .size([diameter, diameter]) .padding(2); @@ -28,12 +27,13 @@ const Bubblechart = (aData) => { - let root = d3.hierarchy(jsonToDisplay) - .sum(function (d) { console.log(d.id); return d.id; }) - - .sort(function (a, b) { return b.id - a.id }); - + let root = d3.hierarchy(jsonToDisplay) + .sort(function (b,a) { return d3.ascending(b.contributions,a.contributions); }) + .sum(function (d) { return d.contributions; }) + + + bubble(root); let node = svg.selectAll('node') @@ -41,12 +41,13 @@ const Bubblechart = (aData) => { .enter().append('g') .attr('class', 'node') .attr('transform', function (d) { return 'translate(' + d.x + ' ' + d.y + ')'; }) + .append("a") let defs = node.append('defs'); defs.append("pattern") - .attr("id", function (d) { console.log(d.data.id); return d.data.id }) + .attr("id", function (d) { return d.data.id }) .attr("width", 10) .attr("height", 10) @@ -60,7 +61,10 @@ const Bubblechart = (aData) => { .attr("y", 0); + + node.append("circle") + .attr('r', function (d) { return d.r / (Math.sqrt(1.5)); }) @@ -69,7 +73,8 @@ const Bubblechart = (aData) => { .style("stroke", "black") .on("mouseover", mouseover) .on("mousemove", mousemove) - .on("mouseout", mouseout); + .on("mouseout", mouseout) + .on("click", function(event,d) { console.log(d.data.login); window.location.href = "http://github.com/"+d.data.login; }) let div = d3.select("#bubble").append("div") @@ -92,9 +97,8 @@ const Bubblechart = (aData) => { function mouseout(d) { div.style("display", "none"); } - - - + + return (
diff --git a/src/components/Resources/TableView.js b/src/components/Resources/TableView.js index 8a08c2e..6600a9d 100644 --- a/src/components/Resources/TableView.js +++ b/src/components/Resources/TableView.js @@ -1,24 +1,24 @@ import React from 'react'; import ResourcesList from '../data/data.json'; import { Link } from "react-router-dom"; -import './TableView.css'; +import styles from './TableView.module.css'; import Toggle from "../Toggle"; -export default function TableView() { +const TableView = props => { return (
- - - - +
IDNameURL
+ + + { ResourcesList.map(resource => - - - - + + + + ) @@ -27,4 +27,5 @@ return ( ); -} \ No newline at end of file +} +export default TableView; \ No newline at end of file diff --git a/src/components/Resources/TableView.css b/src/components/Resources/TableView.module.css similarity index 72% rename from src/components/Resources/TableView.css rename to src/components/Resources/TableView.module.css index 82c2257..29d4ad1 100644 --- a/src/components/Resources/TableView.css +++ b/src/components/Resources/TableView.module.css @@ -1,4 +1,4 @@ -table { +.resource-table { text-align: center; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; @@ -6,22 +6,22 @@ table { margin-bottom: 45px; } -table td, -table th { +.resource-table-data, +.resource-table-head { border: 1px solid #ddd; padding: 40px; padding-right: 78px; } -table tr:nth-child(even) { +.resource-table-row:nth-child(even) { background-color: #f2f2f2; } -table tr:hover { +.resource-table-row:hover { background-color: #ddd; } -table th { +.resource-table-head { padding-top: 12px; padding-bottom: 12px; text-align: center; diff --git a/src/components/Router.js b/src/components/Router.js index 3ffba8f..69c50c9 100644 --- a/src/components/Router.js +++ b/src/components/Router.js @@ -9,6 +9,7 @@ import Contact from "./ContactUs/Contact"; import About from "./About/About"; import TableView from "./Resources/TableView"; import GitApi from "./Api/GitApi"; +import NewHomepage from './NewHomepage/Homepage'; const Router = () => ( @@ -24,6 +25,8 @@ const Router = () => ( + +
diff --git a/src/components/UI/Button.js b/src/components/UI/Button.js new file mode 100644 index 0000000..9184c61 --- /dev/null +++ b/src/components/UI/Button.js @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './Button.module.css'; + +const Button = props => { + return ( + + ) +} +export default Button; \ No newline at end of file diff --git a/src/components/UI/Button.module.css b/src/components/UI/Button.module.css new file mode 100644 index 0000000..c3f84fc --- /dev/null +++ b/src/components/UI/Button.module.css @@ -0,0 +1,12 @@ +.button { + background-color: turquoise; + border-radius: 3px; + width: 100px; + height: 33px; + display: flex; + align-content: flex-start; + flex-direction: column; + justify-content: space-evenly; + align-items: stretch; + color:white; +} \ No newline at end of file diff --git a/src/components/UI/Heading.js b/src/components/UI/Heading.js new file mode 100644 index 0000000..014480b --- /dev/null +++ b/src/components/UI/Heading.js @@ -0,0 +1,10 @@ +import React from 'react'; +import styles from '../UI/Heading.module.css'; +const Heading = props => { + return ( +
+ {props.children} +
+ ) +} +export default Heading; \ No newline at end of file diff --git a/src/components/UI/Heading.module.css b/src/components/UI/Heading.module.css new file mode 100644 index 0000000..3a3ed15 --- /dev/null +++ b/src/components/UI/Heading.module.css @@ -0,0 +1,6 @@ +.heading{ + font-weight: bolder; + font-family: "Arial"; + font-size: -webkit-xxx-large; + text-align: start; +} \ No newline at end of file diff --git a/src/components/UI/Paragraph.js b/src/components/UI/Paragraph.js new file mode 100644 index 0000000..b0485f1 --- /dev/null +++ b/src/components/UI/Paragraph.js @@ -0,0 +1,10 @@ +import React from 'react'; +import styles from '../UI/Paragraph.module.css'; +const Paragraph = props => { + return ( +
+ {props.children} +
+ ) +} +export default Paragraph; \ No newline at end of file diff --git a/src/components/UI/Paragraph.module.css b/src/components/UI/Paragraph.module.css new file mode 100644 index 0000000..61f17b1 --- /dev/null +++ b/src/components/UI/Paragraph.module.css @@ -0,0 +1,4 @@ +.paragraph { + font-family: Arial, Helvetica, sans-serif; + text-align: start; +} \ No newline at end of file diff --git a/src/components/UI/SubHeading.js b/src/components/UI/SubHeading.js new file mode 100644 index 0000000..85669ee --- /dev/null +++ b/src/components/UI/SubHeading.js @@ -0,0 +1,11 @@ +import React from 'react'; +import styles from '../UI/SubHeading.module.css' +const SubHeading = props => { + + return ( +
+ {props.children} +
+ ) +} +export default SubHeading; \ No newline at end of file diff --git a/src/components/UI/SubHeading.module.css b/src/components/UI/SubHeading.module.css new file mode 100644 index 0000000..48e0264 --- /dev/null +++ b/src/components/UI/SubHeading.module.css @@ -0,0 +1,6 @@ +.subheading{ + font-family: 'Times New Roman', Times, serif; + font-weight: bold; + font-size: x-large; + text-align: start; +} \ No newline at end of file
IDNameURL
{resource.id}{resource.name}{More info}
{resource.id}{resource.name}{More info}