diff --git a/my-app/.storybook/preview-head.html b/my-app/.storybook/preview-head.html new file mode 100644 index 00000000..4167ef27 --- /dev/null +++ b/my-app/.storybook/preview-head.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/my-app/package.json b/my-app/package.json index 3c0d97dd..e4b1c7bc 100644 --- a/my-app/package.json +++ b/my-app/package.json @@ -15,7 +15,7 @@ "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", - "storybook": "start-storybook" + "storybook": "start-storybook -s public, src" }, "eslintConfig": { "extends": "react-app" diff --git a/my-app/src/components/Card/Card.css b/my-app/src/components/Card/Card.css deleted file mode 100644 index 598bc0f2..00000000 --- a/my-app/src/components/Card/Card.css +++ /dev/null @@ -1,28 +0,0 @@ -* { - padding: 0; - margin: 0; - font-family: 'Roboto', sans-serif; -} - -.card { - align-items: center; - background-color: #EBECF0; - color: #3B4349; - display: flex; - font-family: 'Roboto'; - flex-direction: column; - height: 30%; - margin: 1em; - padding: 0 1em 0.5em; - width: 15%; -} - -.right { - margin-top: 1em; - text-align: right; - width: 100%; -} - -.right a { - text-decoration: none; -} \ No newline at end of file diff --git a/my-app/src/components/Card/Card.js b/my-app/src/components/Card/Card.js deleted file mode 100644 index 2ed2f9ae..00000000 --- a/my-app/src/components/Card/Card.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import './Card.css'; -import Name from '../name/Name'; -import Avatar from '../avatar/avatarComponent'; -import Skill from '../skill/Skill.component'; -import Link from '../link/linkComponent'; - -const Card = ({ name, skills, contact, more }) => { - return ( -
- - -
- {skills.length > 1 ? ( - skills.map(skill => ) - ) : ( - - )} -
- -
- -
-
- ); -}; - -Card.propTypes = { - contact: PropTypes.shape({ - link: PropTypes.string.isRequired, - text: PropTypes.string.isRequired - }), - more: PropTypes.shape({ - link: PropTypes.string.isRequired, - text: PropTypes.string.isRequired - }) -}; -export default Card; diff --git a/my-app/src/components/Input/Input.css b/my-app/src/components/Input/Input.css index e69de29b..be4d62bf 100644 --- a/my-app/src/components/Input/Input.css +++ b/my-app/src/components/Input/Input.css @@ -0,0 +1,3 @@ +input { + font-size: 1.6rem; +} diff --git a/my-app/src/components/avatar/avatarComponent.jsx b/my-app/src/components/avatar/avatar.component.js similarity index 55% rename from my-app/src/components/avatar/avatarComponent.jsx rename to my-app/src/components/avatar/avatar.component.js index 7763ed02..cf759c2d 100644 --- a/my-app/src/components/avatar/avatarComponent.jsx +++ b/my-app/src/components/avatar/avatar.component.js @@ -1,10 +1,10 @@ -import React from 'react'; -import './avatar.css'; -import avatarPhoto from './avatar.jpg'; +import React from "react"; +import "./avatar.css"; +import avatarPhoto from "./avatar.jpg"; const Avatar = () => { return ( -
+
avatar
); diff --git a/my-app/src/components/avatar/avatar.css b/my-app/src/components/avatar/avatar.css index e78c6769..4be22d9d 100644 --- a/my-app/src/components/avatar/avatar.css +++ b/my-app/src/components/avatar/avatar.css @@ -1,5 +1,5 @@ .avatar-img { border-radius: 50%; - margin-top: 1em; - width: 7rem; + height: 6rem; + width: 6rem; } diff --git a/my-app/src/components/Input/Input.js b/my-app/src/components/input/input.component.js similarity index 69% rename from my-app/src/components/Input/Input.js rename to my-app/src/components/input/input.component.js index a1748ca2..c24e60f2 100644 --- a/my-app/src/components/Input/Input.js +++ b/my-app/src/components/input/input.component.js @@ -1,5 +1,5 @@ -import React from 'react'; -import './Input.css'; +import React from "react"; +import "./input.css"; const Input = ({ type, name }) => { return ; diff --git a/my-app/src/components/link/linkComponent.js b/my-app/src/components/link/link.component.js similarity index 78% rename from my-app/src/components/link/linkComponent.js rename to my-app/src/components/link/link.component.js index 0de5cadb..aaf2097a 100644 --- a/my-app/src/components/link/linkComponent.js +++ b/my-app/src/components/link/link.component.js @@ -1,5 +1,5 @@ -import React from 'react'; -import './link.css'; +import React from "react"; +import "./link.css"; const Link = ({ link, text }) => { return ( diff --git a/my-app/src/components/link/link.css b/my-app/src/components/link/link.css index 739273d3..34b693c6 100644 --- a/my-app/src/components/link/link.css +++ b/my-app/src/components/link/link.css @@ -1,11 +1,10 @@ -.contact-link{ - font-family: 'Roboto', sans-serif; - font-style: normal; - font-size: 1em; - font-weight: 500; - text-decoration-line: underline; +.contact-link { + font-style: normal; + font-size: 1.6rem; + font-weight: 500; + text-decoration-line: underline; } a { - color: #3B4349; + color: #3b4349; } diff --git a/my-app/src/components/name/Name.css b/my-app/src/components/name/Name.css deleted file mode 100644 index 012493a1..00000000 --- a/my-app/src/components/name/Name.css +++ /dev/null @@ -1,6 +0,0 @@ -h3 { - color: #333; - font-size: 1.5em; - font-weight: 500; - padding: 0.5em 0 0.2em; -} \ No newline at end of file diff --git a/my-app/src/components/name/Name.js b/my-app/src/components/name/Name.js deleted file mode 100644 index 5642c152..00000000 --- a/my-app/src/components/name/Name.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import './Name.css'; - -const Name = ({ name }) => { - return ( -
-

{name}

-
- ); -}; - -export default Name; diff --git a/my-app/src/components/sampleButton/button.css b/my-app/src/components/sampleButton/button.css new file mode 100644 index 00000000..92a99dac --- /dev/null +++ b/my-app/src/components/sampleButton/button.css @@ -0,0 +1,3 @@ +button { + font-size: 1.6rem; +} diff --git a/my-app/src/components/sampleButton/sampleButton.component.js b/my-app/src/components/sampleButton/sample-button.component.js similarity index 84% rename from my-app/src/components/sampleButton/sampleButton.component.js rename to my-app/src/components/sampleButton/sample-button.component.js index f5e26c3e..8a478baf 100644 --- a/my-app/src/components/sampleButton/sampleButton.component.js +++ b/my-app/src/components/sampleButton/sample-button.component.js @@ -2,7 +2,8 @@ // how you can make your component in storybook. <----- // Import react, css and other files if needed -import React from 'react'; +import React from "react"; +import "./button.css"; const SampleButton = () => { return ; diff --git a/my-app/src/components/skill/Skill.component.js b/my-app/src/components/skill/Skill.component.js deleted file mode 100644 index fb824484..00000000 --- a/my-app/src/components/skill/Skill.component.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import './Skill.css'; - -const Skill = ({ skills }) => { - return {skills}; -}; - -export default Skill; diff --git a/my-app/src/components/skill/Skill.css b/my-app/src/components/skill/Skill.css deleted file mode 100644 index d5e8cca5..00000000 --- a/my-app/src/components/skill/Skill.css +++ /dev/null @@ -1,14 +0,0 @@ -.skills-block { - margin: 0 auto 0.3em; - width: 90%; -} - -.skills-block span { - display: inline-block; - padding: 0.2em; -} - -.skills-block span::before { - content: "#"; - color: #3B4349; -} diff --git a/my-app/src/components/userCard/user-card.component.js b/my-app/src/components/userCard/user-card.component.js new file mode 100644 index 00000000..e3ccf08c --- /dev/null +++ b/my-app/src/components/userCard/user-card.component.js @@ -0,0 +1,67 @@ +import React from "react"; +import PropTypes from "prop-types"; +import "./user-card.css"; +import Avatar from "../avatar/avatar.component"; +import UserCardSection from "../userCardSection/user-card-section.component"; + +const Name = ({ name }) => { + return ( +
+
{name}
+
+ ); +}; + +const Role = ({ mentor, mentee }) => { + return ( +
+
+ {mentor && mentee ? ( + <> + Mentor / Mentee + + ) : mentee ? ( + Mentee + ) : ( + Mentor + )} +
+
+ ); +}; + +function getClassName(user) { + const classes = ["card"]; + user.mentor && classes.push("mentor"); + user.mentee && classes.push("mentee"); + return classes.join(" "); +} + +const UserCard = ({ user, sections }) => { + const { name, mentor, mentee } = user; + return ( +
+
1 ? "extended content" : "content"}> + {} + + + + {sections.length > 0 && + sections.map((article, index) => ( + + ))} +
+
+ ); +}; + +UserCard.propTypes = { + user: PropTypes.object.isRequired, + sections: PropTypes.array.isRequired +}; + +export default UserCard; diff --git a/my-app/src/components/userCard/user-card.css b/my-app/src/components/userCard/user-card.css new file mode 100644 index 00000000..694f869d --- /dev/null +++ b/my-app/src/components/userCard/user-card.css @@ -0,0 +1,64 @@ +.card { + align-items: center; + background-color: #fea594; + color: #3b4349; + display: flex; + flex-direction: column; + margin: 6rem; + padding: 1.3rem; + text-align: left; + width: 32rem; +} + +.card.mentee { + background-color: #e32c6a; +} + +.card.mentor-mentee { + background: linear-gradient( + 135deg, + rgba(227, 43, 105, 1) 0%, + rgba(248, 194, 161, 1) 100% + ); +} + +.card .content { + background-color: #fff; + margin: 0 1.6rem; + padding: 1.2rem 2.4rem 0.4rem; + position: relative; + width: 29.2rem; +} + +.card .avatar { + position: absolute; + left: 40%; + transform: translateX(-40%); + transform: translateY(-60%); + top: 0; +} + +.card .extended .name, +.card .extended .role { + text-align: center; +} + +.card .extended .role + .card-section { + border-top: none; +} + +.card .name h5 { + padding: 1.2rem 0 0; +} + +.card .role h6 { + color: #fd4927; + font-size: 1.6rem; + font-weight: 300; + margin: 0.8rem 0; + text-transform: uppercase; +} + +.card .role h6 span { + font-size: 1.6rem; +} diff --git a/my-app/src/components/userCardSection/user-card-section.component.js b/my-app/src/components/userCardSection/user-card-section.component.js new file mode 100644 index 00000000..8d0933ca --- /dev/null +++ b/my-app/src/components/userCardSection/user-card-section.component.js @@ -0,0 +1,13 @@ +import React from "react"; +import "./user-card-section.css"; + +const UserCardSection = ({ title, text }) => { + return ( +
+
{title}
+

{text}

+
+ ); +}; + +export default UserCardSection; diff --git a/my-app/src/components/userCardSection/user-card-section.css b/my-app/src/components/userCardSection/user-card-section.css new file mode 100644 index 00000000..8f0906d9 --- /dev/null +++ b/my-app/src/components/userCardSection/user-card-section.css @@ -0,0 +1,9 @@ +.user-card { + border-top: 1px solid rgba(253, 73, 39, 0.5); + margin: 1.2rem 0; + padding-top: 1.2rem; +} + +.user-card h6 { + margin-bottom: 0.3rem; +} diff --git a/my-app/src/index.css b/my-app/src/index.css index 4a1df4db..b2a23ed0 100644 --- a/my-app/src/index.css +++ b/my-app/src/index.css @@ -1,13 +1,59 @@ -body { +@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"); + +* { + box-sizing: border-box; + font-family: "DM Mono", monospace, Arial, Helvetica, sans-serif; + font-size: 62.5%; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + padding: 0; +} + +body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + color: #000; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +h1 { + font-size: 6rem; + font-weight: 500; +} + +h2 { + font-size: 5rem; + font-weight: 500; +} + +h3 { + font-size: 4rem; + font-weight: 500; +} + +h4 { + font-size: 3rem; + font-weight: 500; +} + +h5 { + font-size: 2.5rem; + font-weight: 500; +} + +h6 { + font-size: 2rem; + font-weight: 500; +} + +p { + font-size: 1.6rem; + font-weight: 300; +} + +label { + font-size: 1.2rem; +} diff --git a/my-app/src/stories/stories.js b/my-app/src/stories/stories.js index 25a4d95a..67b02ef8 100644 --- a/my-app/src/stories/stories.js +++ b/my-app/src/stories/stories.js @@ -1,33 +1,70 @@ import React from "react"; -import {storiesOf} from "@storybook/react"; +import { storiesOf } from "@storybook/react"; // Import your component file here -import Avatar from "../components/avatar/avatarComponent"; -import Input from "../components/Input/Input" -import SampleButton from "../components/sampleButton/sampleButton.component"; -import Link from "../components/link/linkComponent"; -import Name from "../components/name/Name"; -import Card from "../components/Card/Card"; -import Skill from "../components/skill/Skill.component"; +import Avatar from "../components/avatar/avatar.component"; +import Input from "../components/input/input.component"; +import SampleButton from "../components/sampleButton/sample-button.component"; +import Link from "../components/link/link.component"; +import UserCard from "../components/userCard/user-card.component"; // Add the stories of your components here -storiesOf('Avatar', module).add('avatar', () => ); -storiesOf('Input', module).add('input text', () => ); -storiesOf('Input', module).add('input checkbox', () => ); -storiesOf('Sample button', module).add('sample button', () => ); -storiesOf('Link Component', module).add('link contact', () => ( +storiesOf("Avatar", module).add("avatar", () => ); +storiesOf("Input", module).add("input text", () => ( + +)); +storiesOf("Input", module).add("input checkbox", () => ( + +)); +storiesOf("Sample button", module).add("sample button", () => ); +storiesOf("Link Component", module).add("link contact", () => ( )); -storiesOf('Link Component', module).add('link more', () => ( +storiesOf("Link Component", module).add("link more", () => ( )); -storiesOf('Name', module).add('first name', () => ); -storiesOf('Name', module).add('surname', () => ); -storiesOf('Skill', module).add('skill', () => ); -storiesOf('Card', module).add('card', () => ( - ( + +)); +storiesOf("User Card", module).add("card mentee", () => ( + +)); +storiesOf("User Card", module).add("card extended", () => ( + ));