From 961a7250955d034a9121f26c4385549af340c411 Mon Sep 17 00:00:00 2001 From: nkapolcs Date: Fri, 7 Feb 2020 00:32:20 +0100 Subject: [PATCH 1/8] create socialIcons component --- src/components/Header/Header.js | 2 + .../Header/SocialIcons/SocialIcons.js | 39 +++++++++++++++++++ .../Header/SocialIcons/SocialIcons.style.js | 5 +++ 3 files changed, 46 insertions(+) create mode 100644 src/components/Header/SocialIcons/SocialIcons.js create mode 100644 src/components/Header/SocialIcons/SocialIcons.style.js diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 6160178..d2e7a36 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -11,6 +11,7 @@ import ToggleButton from "./ToggleButton/ToggleButton"; import TechIcons from "./TechIcons/TechIcons"; import TechNames from "./TechNames/TechNames"; import TeamMembers from "./TeamMembers/TeamMembers"; +import SocialIcons from "./SocialIcons/SocialIcons"; const Header = styled.div` ${headerStyle} @@ -37,6 +38,7 @@ const header = () => ( {settings.display === "icon" ? : } {settings.header.teamMembers ? : null} + {settings.socialIcons ? : null} ) : null} diff --git a/src/components/Header/SocialIcons/SocialIcons.js b/src/components/Header/SocialIcons/SocialIcons.js new file mode 100644 index 0000000..53a30df --- /dev/null +++ b/src/components/Header/SocialIcons/SocialIcons.js @@ -0,0 +1,39 @@ +import React from "react"; +import styled from "styled-components"; +import { socialIconsStyle } from "./SocialIcons.style"; +import IconDisplayer from "../../UI/Icons/IconDisplayer"; +import settings from "../../../../settings/settings"; + +const SocialIcons = styled.div` + ${socialIconsStyle} +`; + +const socialIcons = () => ( + + {settings.header.socialLinks.map(social => + settings.socialIcons[social.name] ? ( + + + + ) : ( + /* eslint-disable-next-line no-console */ + console.warn( + `There is no icon path specified in the settings for ${social.name} social icon` + ) + ) + )} + +); + +export default socialIcons; diff --git a/src/components/Header/SocialIcons/SocialIcons.style.js b/src/components/Header/SocialIcons/SocialIcons.style.js new file mode 100644 index 0000000..a20e004 --- /dev/null +++ b/src/components/Header/SocialIcons/SocialIcons.style.js @@ -0,0 +1,5 @@ +import { css } from "styled-components"; + +export const socialIconsStyle = css` + margin-left: auto; +`; From f518c5c859f72444ebbd026a9fa43e9b2b5a3542 Mon Sep 17 00:00:00 2001 From: nkapolcs Date: Thu, 20 Feb 2020 23:14:50 +0100 Subject: [PATCH 2/8] update documentation --- README.md | 5 +++++ src/components/Header/SocialIcons/SocialIcons.style.js | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/README.md b/README.md index 77b4bd9..dc67627 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,10 @@ Replace "teamMembers": [ { "name": "Example Member1", "link": "https://github.com/examplemember1" }, { "name": "Example Member2", "link": "https://github.com/examplemember2" } + ], + "socialLinks": [ + { "name": "medium", "link": "https://medium.com/" }, + { "name": "github", "link": "https://github.com/" } ] }, "products": [ @@ -85,6 +89,7 @@ Replace | `proxyURL` | CORS proxy url. Required for Medium API access E.g. https://github.com/c-hive/cors-proxy | `string / url` | **No** | | `header.technologies` | Technologies used by team/user/company. | `array` | **No** | | `header.teamMembers` | Team member(s) name and link. | `object` | **No** | +| `header.socialLinks` | Team online presence. | `object` | **No** | | `products.name` | Product name. (This is required if you create a product entry) | `string` | **Yes** | | `products.cover` | Product cover image. | `string / path to img` | **No** | | `products.description` | Product description | `string` | **No** | diff --git a/src/components/Header/SocialIcons/SocialIcons.style.js b/src/components/Header/SocialIcons/SocialIcons.style.js index a20e004..fb56bd1 100644 --- a/src/components/Header/SocialIcons/SocialIcons.style.js +++ b/src/components/Header/SocialIcons/SocialIcons.style.js @@ -2,4 +2,9 @@ import { css } from "styled-components"; export const socialIconsStyle = css` margin-left: auto; + + a { + display: inline-block; + margin-right: 4px; + } `; From a7000f9d33a61a706845a353e060c2a135c6b234 Mon Sep 17 00:00:00 2001 From: nkapolcs Date: Thu, 20 Feb 2020 23:30:32 +0100 Subject: [PATCH 3/8] fix header margin --- src/components/Header/Header.style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/Header.style.js b/src/components/Header/Header.style.js index d3a3333..b15d11c 100644 --- a/src/components/Header/Header.style.js +++ b/src/components/Header/Header.style.js @@ -5,7 +5,7 @@ export const headerIconsContainerStyle = css` align-items: center; flex-basis: 100%; width: 100%; - margin: 0px 0 10px 20px; + margin: 0px 20px 10px 20px; .border { border-left: 1px solid ${props => props.theme.color}; From aa084360038156a1c7039aea7e233f5f2dc7d808 Mon Sep 17 00:00:00 2001 From: nkapolcs Date: Fri, 28 Feb 2020 20:50:57 +0100 Subject: [PATCH 4/8] use inline if in header component --- src/components/Header/Header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index d2e7a36..02df18a 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -38,7 +38,7 @@ const header = () => ( {settings.display === "icon" ? : } {settings.header.teamMembers ? : null} - {settings.socialIcons ? : null} + {settings.socialIcons && } ) : null} From a854fe68c43d0bc52bcd4d50b388d76137f08804 Mon Sep 17 00:00:00 2001 From: nkapolcs Date: Fri, 28 Feb 2020 22:22:36 +0100 Subject: [PATCH 5/8] create SocialIcons UI component --- src/components/Header/Header.js | 9 +++- src/components/Header/Header.style.js | 8 ++++ .../Header/SocialIcons/SocialIcons.js | 39 ----------------- src/components/Products/Product/Product.js | 33 ++------------- .../Products/Product/Product.style.js | 4 -- src/components/UI/SocialIcons/SocialIcons.js | 42 +++++++++++++++++++ .../SocialIcons/SocialIcons.style.js | 3 -- 7 files changed, 60 insertions(+), 78 deletions(-) delete mode 100644 src/components/Header/SocialIcons/SocialIcons.js create mode 100644 src/components/UI/SocialIcons/SocialIcons.js rename src/components/{Header => UI}/SocialIcons/SocialIcons.style.js (72%) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 02df18a..d9d83d1 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -11,7 +11,7 @@ import ToggleButton from "./ToggleButton/ToggleButton"; import TechIcons from "./TechIcons/TechIcons"; import TechNames from "./TechNames/TechNames"; import TeamMembers from "./TeamMembers/TeamMembers"; -import SocialIcons from "./SocialIcons/SocialIcons"; +import SocialIcons from "../UI/SocialIcons/SocialIcons"; const Header = styled.div` ${headerStyle} @@ -38,7 +38,12 @@ const header = () => ( {settings.display === "icon" ? : } {settings.header.teamMembers ? : null} - {settings.socialIcons && } + {settings.socialIcons && ( + + )} ) : null} diff --git a/src/components/Header/Header.style.js b/src/components/Header/Header.style.js index b15d11c..2b20511 100644 --- a/src/components/Header/Header.style.js +++ b/src/components/Header/Header.style.js @@ -14,6 +14,14 @@ export const headerIconsContainerStyle = css` transition: 0.3s; opacity: 0.3; } + + .socialIcons--header { + margin-left: auto; + + .MuiIconButton-root { + margin-right: 4px; + } + } `; export const headerStyle = css` diff --git a/src/components/Header/SocialIcons/SocialIcons.js b/src/components/Header/SocialIcons/SocialIcons.js deleted file mode 100644 index 53a30df..0000000 --- a/src/components/Header/SocialIcons/SocialIcons.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import { socialIconsStyle } from "./SocialIcons.style"; -import IconDisplayer from "../../UI/Icons/IconDisplayer"; -import settings from "../../../../settings/settings"; - -const SocialIcons = styled.div` - ${socialIconsStyle} -`; - -const socialIcons = () => ( - - {settings.header.socialLinks.map(social => - settings.socialIcons[social.name] ? ( - - - - ) : ( - /* eslint-disable-next-line no-console */ - console.warn( - `There is no icon path specified in the settings for ${social.name} social icon` - ) - ) - )} - -); - -export default socialIcons; diff --git a/src/components/Products/Product/Product.js b/src/components/Products/Product/Product.js index f0637d1..4cf8d39 100644 --- a/src/components/Products/Product/Product.js +++ b/src/components/Products/Product/Product.js @@ -1,12 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { - Card, - CardActions, - CardContent, - CardMedia, - IconButton, -} from "@material-ui/core/"; +import { Card, CardActions, CardContent, CardMedia } from "@material-ui/core/"; import { productStyle, productTitleStyle, @@ -15,6 +9,7 @@ import { } from "./Product.style"; import IconDisplayer from "../../UI/Icons/IconDisplayer"; import settings from "../../../../settings/settings"; +import SocialIcons from "../../UI/SocialIcons/SocialIcons"; const Product = styled.div` ${productStyle} @@ -64,29 +59,7 @@ const product = ({ name, cover, description, technologies, socialLinks }) => { {socialLinks && ( - {socialLinks.map(social => - settings.socialIcons[social.name] ? ( - - - - ) : ( - /* eslint-disable-next-line no-console */ - console.warn( - `There is no icon path specified in the settings for ${social.name} social icon` - ) - ) - )} + )} diff --git a/src/components/Products/Product/Product.style.js b/src/components/Products/Product/Product.style.js index f563826..e4be3de 100644 --- a/src/components/Products/Product/Product.style.js +++ b/src/components/Products/Product/Product.style.js @@ -45,10 +45,6 @@ export const technologiesIconsContainerStyle = css` `; export const actionTechIconsStyle = css` - a { - display: inline-block; - } - img { width: 28px; height: 28px; diff --git a/src/components/UI/SocialIcons/SocialIcons.js b/src/components/UI/SocialIcons/SocialIcons.js new file mode 100644 index 0000000..b7df2b1 --- /dev/null +++ b/src/components/UI/SocialIcons/SocialIcons.js @@ -0,0 +1,42 @@ +import React from "react"; +import styled from "styled-components"; +import { IconButton } from "@material-ui/core/"; +import { socialIconsStyle } from "./SocialIcons.style"; +import IconDisplayer from "../Icons/IconDisplayer"; +import settings from "../../../../settings/settings"; + +const SocialIcons = styled.div` + ${socialIconsStyle} +`; + +const socialIcons = ({ classNames, data }) => { + return ( + + {data.map(social => + settings.socialIcons[social.name] ? ( + + + + ) : ( + /* eslint-disable-next-line no-console */ + console.warn( + `There is no icon path specified in the settings for ${social.name} social icon` + ) + ) + )} + + ); +}; + +export default socialIcons; diff --git a/src/components/Header/SocialIcons/SocialIcons.style.js b/src/components/UI/SocialIcons/SocialIcons.style.js similarity index 72% rename from src/components/Header/SocialIcons/SocialIcons.style.js rename to src/components/UI/SocialIcons/SocialIcons.style.js index fb56bd1..4548eea 100644 --- a/src/components/Header/SocialIcons/SocialIcons.style.js +++ b/src/components/UI/SocialIcons/SocialIcons.style.js @@ -1,10 +1,7 @@ import { css } from "styled-components"; export const socialIconsStyle = css` - margin-left: auto; - a { display: inline-block; - margin-right: 4px; } `; From 9a895d1d7c7189afb8badd2e4cc10f44d02595fc Mon Sep 17 00:00:00 2001 From: nkapolcs Date: Sat, 29 Feb 2020 12:11:00 +0100 Subject: [PATCH 6/8] rename SocialIcons data prop --- src/components/Header/Header.js | 2 +- src/components/Products/Product/Product.js | 2 +- src/components/UI/SocialIcons/SocialIcons.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index d9d83d1..2d8002f 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -41,7 +41,7 @@ const header = () => ( {settings.socialIcons && ( )} diff --git a/src/components/Products/Product/Product.js b/src/components/Products/Product/Product.js index 4cf8d39..be5f458 100644 --- a/src/components/Products/Product/Product.js +++ b/src/components/Products/Product/Product.js @@ -59,7 +59,7 @@ const product = ({ name, cover, description, technologies, socialLinks }) => { {socialLinks && ( - + )} diff --git a/src/components/UI/SocialIcons/SocialIcons.js b/src/components/UI/SocialIcons/SocialIcons.js index b7df2b1..38369ec 100644 --- a/src/components/UI/SocialIcons/SocialIcons.js +++ b/src/components/UI/SocialIcons/SocialIcons.js @@ -9,10 +9,10 @@ const SocialIcons = styled.div` ${socialIconsStyle} `; -const socialIcons = ({ classNames, data }) => { +const socialIcons = ({ classNames, socialLinks }) => { return ( - {data.map(social => + {socialLinks.map(social => settings.socialIcons[social.name] ? ( Date: Tue, 3 Mar 2020 00:00:25 +0100 Subject: [PATCH 7/8] remove social prefix --- src/components/Header/Header.js | 2 +- src/components/Products/Product/Product.js | 2 +- src/components/UI/SocialIcons/SocialIcons.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 2d8002f..702ffb1 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -41,7 +41,7 @@ const header = () => ( {settings.socialIcons && ( )} diff --git a/src/components/Products/Product/Product.js b/src/components/Products/Product/Product.js index be5f458..35dc696 100644 --- a/src/components/Products/Product/Product.js +++ b/src/components/Products/Product/Product.js @@ -59,7 +59,7 @@ const product = ({ name, cover, description, technologies, socialLinks }) => { {socialLinks && ( - + )} diff --git a/src/components/UI/SocialIcons/SocialIcons.js b/src/components/UI/SocialIcons/SocialIcons.js index 38369ec..df7957e 100644 --- a/src/components/UI/SocialIcons/SocialIcons.js +++ b/src/components/UI/SocialIcons/SocialIcons.js @@ -9,10 +9,10 @@ const SocialIcons = styled.div` ${socialIconsStyle} `; -const socialIcons = ({ classNames, socialLinks }) => { +const socialIcons = ({ classNames, links }) => { return ( - {socialLinks.map(social => + {links.map(social => settings.socialIcons[social.name] ? ( Date: Tue, 3 Mar 2020 00:14:42 +0100 Subject: [PATCH 8/8] add SocialIconsWrapper --- src/components/Header/Header.js | 12 ++++++++---- src/components/Header/Header.style.js | 10 +++++----- src/components/UI/SocialIcons/SocialIcons.js | 4 ++-- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 702ffb1..58e74f3 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -4,6 +4,7 @@ import settings from "../../../settings/settings.json"; import { headerStyle, headerIconsContainerStyle, + socialIconsWrapperStyle, logoTextStyle, logoStyle, } from "./Header.style"; @@ -21,6 +22,10 @@ const HeaderIconsContainer = styled.div` ${headerIconsContainerStyle} `; +const SocialIconsWrapper = styled.div` + ${socialIconsWrapperStyle} +`; + const LogoText = styled.p` ${logoTextStyle} `; @@ -39,10 +44,9 @@ const header = () => ( {settings.display === "icon" ? : } {settings.header.teamMembers ? : null} {settings.socialIcons && ( - + + + )} ) : null} diff --git a/src/components/Header/Header.style.js b/src/components/Header/Header.style.js index 2b20511..2c16895 100644 --- a/src/components/Header/Header.style.js +++ b/src/components/Header/Header.style.js @@ -14,13 +14,13 @@ export const headerIconsContainerStyle = css` transition: 0.3s; opacity: 0.3; } +`; - .socialIcons--header { - margin-left: auto; +export const socialIconsWrapperStyle = css` + margin-left: auto; - .MuiIconButton-root { - margin-right: 4px; - } + .MuiIconButton-root { + margin-right: 4px; } `; diff --git a/src/components/UI/SocialIcons/SocialIcons.js b/src/components/UI/SocialIcons/SocialIcons.js index df7957e..fba22d3 100644 --- a/src/components/UI/SocialIcons/SocialIcons.js +++ b/src/components/UI/SocialIcons/SocialIcons.js @@ -9,9 +9,9 @@ const SocialIcons = styled.div` ${socialIconsStyle} `; -const socialIcons = ({ classNames, links }) => { +const socialIcons = ({ links }) => { return ( - + {links.map(social => settings.socialIcons[social.name] ? (