From 63e7f3bf76867eec70f839947eeeccb5fca87378 Mon Sep 17 00:00:00 2001 From: Summer Cook Date: Fri, 10 Nov 2023 12:25:38 -0600 Subject: [PATCH 1/6] add linkedin icon --- src/assets/svg/Linkedin.jsx | 15 +++++++++++++++ src/components/SocialIcon/SocialIcon.jsx | 4 +++- 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 src/assets/svg/Linkedin.jsx diff --git a/src/assets/svg/Linkedin.jsx b/src/assets/svg/Linkedin.jsx new file mode 100644 index 00000000..dd5f9b99 --- /dev/null +++ b/src/assets/svg/Linkedin.jsx @@ -0,0 +1,15 @@ +import * as React from 'react' + +const Linkedin = ({ height, fill }) => ( + + + +) + +export default Linkedin diff --git a/src/components/SocialIcon/SocialIcon.jsx b/src/components/SocialIcon/SocialIcon.jsx index 81825e31..5a63c0c9 100644 --- a/src/components/SocialIcon/SocialIcon.jsx +++ b/src/components/SocialIcon/SocialIcon.jsx @@ -7,6 +7,7 @@ import TikTok from '../../assets/svg/TikTok' import Twitter from '../../assets/svg/Twitter' import Vimeo from '../../assets/svg/Vimeo' import YouTube from '../../assets/svg/YouTube' +import Linkedin from '../../assets/svg/Linkedin' import './social-icon.css' const iconsList = { @@ -17,6 +18,7 @@ const iconsList = { twitter: (height, color) => , vimeo: (height, color) => , youtube: (height, color) => , + linkedin: (height, color) => , } const SocialIcon = ({ addClass, color, height, icon, url }) => ( @@ -29,7 +31,7 @@ SocialIcon.propTypes = { addClass: PropTypes.string, color: PropTypes.string, height: PropTypes.number, - icon: PropTypes.oneOf(['facebook', 'instagram', 'rss', 'tiktok', 'twitter', 'vimeo', 'youtube']).isRequired, + icon: PropTypes.oneOf(['facebook', 'instagram', 'rss', 'tiktok', 'twitter', 'vimeo', 'youtube', 'linkedin']).isRequired, url: PropTypes.string.isRequired, } From 03ac86b5e66f3c1891564b5b3b6dfe4f585e939b Mon Sep 17 00:00:00 2001 From: Summer Cook Date: Fri, 10 Nov 2023 14:04:39 -0600 Subject: [PATCH 2/6] update linkedin icon and footer --- src/assets/img/thank-you.md | 1 + src/assets/svg/Linkedin.jsx | 9 +++++---- src/components/Link/link.css | 5 +---- src/components/SocialIcon/SocialIcon.jsx | 2 +- src/compounds/Footer/Footer.jsx | 6 ++++-- src/compounds/LinkGroup/LinkGroup.jsx | 2 +- src/compounds/LinkGroup/LinkGroup.stories.jsx | 4 ++-- src/resources/args.js | 4 ++++ 8 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/assets/img/thank-you.md b/src/assets/img/thank-you.md index 0d840d0c..8e1cdb83 100644 --- a/src/assets/img/thank-you.md +++ b/src/assets/img/thank-you.md @@ -11,3 +11,4 @@ Our icons were sourced from the following: * [Twitter social badge icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/twitter-social-badge) * [Vimeo icons created by Md Tanvirul Haque - Flaticon](https://www.flaticon.com/free-icons/vimeo) * [Youtube icons created by Freepik - Flaticon](https://www.flaticon.com/free-icons/youtube) +* [Linkedin icons created by IconScout](https://iconscout.com/free-icon/linkedin-48) diff --git a/src/assets/svg/Linkedin.jsx b/src/assets/svg/Linkedin.jsx index dd5f9b99..dab854d5 100644 --- a/src/assets/svg/Linkedin.jsx +++ b/src/assets/svg/Linkedin.jsx @@ -2,13 +2,14 @@ import * as React from 'react' const Linkedin = ({ height, fill }) => ( - + + ) diff --git a/src/components/Link/link.css b/src/components/Link/link.css index 6bb55a4e..c7eedac5 100644 --- a/src/components/Link/link.css +++ b/src/components/Link/link.css @@ -1,7 +1,4 @@ .link-group-links { color: #000000; - display: block; - font-size: 16px; - margin-bottom: 5px; - text-decoration: none; + font-size: 13px; } diff --git a/src/components/SocialIcon/SocialIcon.jsx b/src/components/SocialIcon/SocialIcon.jsx index 5a63c0c9..df465478 100644 --- a/src/components/SocialIcon/SocialIcon.jsx +++ b/src/components/SocialIcon/SocialIcon.jsx @@ -18,7 +18,7 @@ const iconsList = { twitter: (height, color) => , vimeo: (height, color) => , youtube: (height, color) => , - linkedin: (height, color) => , + linkedin: (height, color) => , } const SocialIcon = ({ addClass, color, height, icon, url }) => ( diff --git a/src/compounds/Footer/Footer.jsx b/src/compounds/Footer/Footer.jsx index e05e9ce3..06fa4e34 100644 --- a/src/compounds/Footer/Footer.jsx +++ b/src/compounds/Footer/Footer.jsx @@ -1,14 +1,16 @@ import React from 'react' import PropTypes from 'prop-types' import LinkGroup from '../LinkGroup/LinkGroup' +import Link from '../../components/Link/Link' import SocialIcon from '../../components/SocialIcon/SocialIcon' const Footer = ({ companyName, sections, socials, color, ...props }) => ( -