From 778eb904d1ee2d3404c711773c48f30db7a801d1 Mon Sep 17 00:00:00 2001 From: Lucie Plantier <147003018+lucie-pl@users.noreply.github.com> Date: Wed, 27 Mar 2024 19:31:49 -0400 Subject: [PATCH] Feature/contact card (#70) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adding new police color for text Named it grey-police, based on S+1 on figma * Adding LinkedIn icon * Adding ContactCard components Structure made, still need to link it to fake data * Adding mockoon file * Adding siteId props to ContactCard * Linking with mocked data - importing services : api, apiInterface, errors - implementing useEffect and useState hooks - fetching data from mockoon * Adding new icons for ContactCard - adding standardized icons for facebook, instagram, linkedIn and X * Fixing data transmission + Adding new social icons - No need for fetch anymore, been done on MapSite just passing the correct props * Styling contact card * Changing the prop passed to ContactCard - from siteId to contact * Merging main to feature/ContactCard branch * Merging (again) main to feature/ContactCard branch * Adding fake link to social media (FB, IG, X, .. ) - Display of social icons depending on their existence, so I added fake links to mockoon file. * Fixing display of social icons * Adjusting size of edit button * Fixing card styling * Armonizing contact card style * Fixing and harmonizing styling issue --------- Co-authored-by: Théo Auffeuvre <79534984+theo-auffeuvre@users.noreply.github.com> --- canopeum_frontend/canopeum-mockoon.json | 6 +- canopeum_frontend/src/App.scss | 24 +++---- .../assets/icons/facebook-contact-logo.svg | 23 +++++++ .../assets/icons/instagram-contact-logo.svg | 24 +++++++ .../assets/icons/linkedin-contact-logo.svg | 25 ++++++++ .../src/assets/icons/linkedin.svg | 3 + .../src/assets/icons/x-contact-logo.svg | 22 +++++++ .../src/assets/styles/theme-variables.scss | 4 +- .../components/ContactCard/ContactCard.tsx | 62 +++++++++++++++++++ .../components/ContactCard/contact-card.scss | 23 +++++++ .../src/components/site/SiteSummaryCard.tsx | 1 + canopeum_frontend/src/pages/MapSite.tsx | 19 ++++-- 12 files changed, 216 insertions(+), 20 deletions(-) create mode 100644 canopeum_frontend/src/assets/icons/facebook-contact-logo.svg create mode 100644 canopeum_frontend/src/assets/icons/instagram-contact-logo.svg create mode 100644 canopeum_frontend/src/assets/icons/linkedin-contact-logo.svg create mode 100644 canopeum_frontend/src/assets/icons/linkedin.svg create mode 100644 canopeum_frontend/src/assets/icons/x-contact-logo.svg create mode 100644 canopeum_frontend/src/components/ContactCard/ContactCard.tsx create mode 100644 canopeum_frontend/src/components/ContactCard/contact-card.scss diff --git a/canopeum_frontend/canopeum-mockoon.json b/canopeum_frontend/canopeum-mockoon.json index 6db79df9a..3845f5520 100644 --- a/canopeum_frontend/canopeum-mockoon.json +++ b/canopeum_frontend/canopeum-mockoon.json @@ -1030,7 +1030,7 @@ "responses": [ { "uuid": "2d298812-02ea-4391-93fc-0dd874d3f57a", - "body": "{\n \"name\": \"{{lorem (int 1 3)}}\",\n \"type\": {\n \"id\": {{int 1 9999}},\n \"en\": \"{{lorem (int 1 3)}}\",\n \"fr\": \"{{lorem (int 1 3)}}\"\n },\n \"description\": \"{{lorem (int 1 150)}}\",\n \"sponsors\": {{{someOf (array (lorem 2) (lorem 2) (lorem 2) (lorem 2) (lorem 2)) 0 5 true}}},\n \"announcement\": {\n \"id\": {{int 1 9999}},\n \"body\": \"{{lorem (int 1 150)}}\",\n \"link\": \"https://{{domain}}/\"\n },\n \"contact\": {\n \"id\": {{int 1 9999}},\n \"address\": \"{{street}}, {{city}}, {{countryCode}} {{postcode}}\",\n \"email\": \"{{email}}\",\n \"phone\": \"{{phone}}\",\n \"facebookLink\": \"\",\n \"xLink\": \"\",\n \"instagramLink\": \"\",\n \"linkedInLink\": \"\"\n },\n \"widgets\": [\n {{#repeat 0 (int 0 2) comma=true}}\n {\n \"id\": {{int 1 9999}},\n \"title\": \"{{lorem (int 1 5)}}\",\n \"body\": \"{{lorem (int 1 150)}}\"\n }\n {{/repeat}}\n ],\n \"image\": \"\"\n}", + "body": "{\n \"name\": \"{{lorem (int 1 3)}}\",\n \"type\": {\n \"id\": {{int 1 9999}},\n \"en\": \"{{lorem (int 1 3)}}\",\n \"fr\": \"{{lorem (int 1 3)}}\"\n },\n \"description\": \"{{lorem (int 1 150)}}\",\n \"sponsors\": {{{someOf (array (lorem 2) (lorem 2) (lorem 2) (lorem 2) (lorem 2)) 0 5 true}}},\n \"announcement\": {\n \"id\": {{int 1 9999}},\n \"body\": \"{{lorem (int 1 150)}}\",\n \"link\": \"https://{{domain}}/\"\n },\n \"contact\": {\n \"id\": {{int 1 9999}},\n \"address\": \"{{street}}, {{city}}, {{countryCode}} {{postcode}}\",\n \"email\": \"{{email}}\",\n \"phone\": \"{{phone}}\",\n \"facebookLink\": \"https://beslogic.com\",\n \"xLink\": \"https://beslogic.com\",\n \"instagramLink\": \"https://beslogic.com\",\n \"linkedInLink\": \"https://beslogic.com\"\n },\n \"widgets\": [\n {{#repeat 0 (int 0 2) comma=true}}\n {\n \"id\": {{int 1 9999}},\n \"title\": \"{{lorem (int 1 5)}}\",\n \"body\": \"{{lorem (int 1 150)}}\"\n }\n {{/repeat}}\n ],\n \"image\": \"\"\n}", "latency": 0, "statusCode": 200, "label": "", @@ -1503,7 +1503,7 @@ "id": "m32b", "name": "Site", "documentation": "", - "value": "{\n \"name\": \"{{lorem (int 1 3)}}\",\n \"contact\": {\n \"address\": \"{{street}}, {{city}}, {{countryCode}} {{postcode}}\",\n \"email\": \"{{email}}\",\n \"phone\": \"{{phone}}\",\n \"facebookLink\": \"\",\n \"xLink\": \"\",\n \"instagramLink\": \"\",\n \"linkedInLink\": \"\"\n },\n \n}" + "value": "{\n \"name\": \"{{lorem (int 1 3)}}\",\n \"contact\": {\n \"address\": \"{{street}}, {{city}}, {{countryCode}} {{postcode}}\",\n \"email\": \"{{email}}\",\n \"phone\": \"{{phone}}\",\n \"facebookLink\": \"https://beslogic.com\",\n \"xLink\": \"https://beslogic.com\",\n \"instagramLink\": \"https://beslogic.com\",\n \"linkedInLink\": \"https://beslogic.com\"\n },\n \n}" }, { "uuid": "c6fae7ec-3df3-465d-9a91-8a677aead682", @@ -1531,7 +1531,7 @@ "id": "r9jy", "name": "Contact", "documentation": "", - "value": "{\n \"address\": \"{{street}}, {{city}}, {{countryCode}} {{postcode}}\",\n \"email\": \"{{email}}\",\n \"phone\": \"{{phone}}\",\n \"facebookLink\": \"\",\n \"xLink\": \"\",\n \"instagramLink\": \"\",\n \"linkedInLink\": \"\"\n}" + "value": "{\n \"address\": \"{{street}}, {{city}}, {{countryCode}} {{postcode}}\",\n \"email\": \"{{email}}\",\n \"phone\": \"{{phone}}\",\n \"facebookLink\": \"https://beslogic.com\",\n \"xLink\": \"https://beslogic.com\",\n \"instagramLink\": \"https://beslogic.com\",\n \"linkedInLink\": \"https://beslogic.com\"\n}" } ], "callbacks": [] diff --git a/canopeum_frontend/src/App.scss b/canopeum_frontend/src/App.scss index 9fe33d1ba..f061712e3 100644 --- a/canopeum_frontend/src/App.scss +++ b/canopeum_frontend/src/App.scss @@ -6,18 +6,18 @@ @import "bootstrap/scss/bootstrap"; -// ::-webkit-scrollbar { -// width: 10px; -// } - -// ::-webkit-scrollbar-track { -// background-color: transparent; -// } - -// ::-webkit-scrollbar-thumb { -// background-color: #f8f9fa; -// border-radius: 5px; -// } +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: #f8f9fa; + border-radius: 5px; +} body { background-image: url('@assets/images/TreeBackground.png'); diff --git a/canopeum_frontend/src/assets/icons/facebook-contact-logo.svg b/canopeum_frontend/src/assets/icons/facebook-contact-logo.svg new file mode 100644 index 000000000..8faee2109 --- /dev/null +++ b/canopeum_frontend/src/assets/icons/facebook-contact-logo.svg @@ -0,0 +1,23 @@ + + + + diff --git a/canopeum_frontend/src/assets/icons/instagram-contact-logo.svg b/canopeum_frontend/src/assets/icons/instagram-contact-logo.svg new file mode 100644 index 000000000..b18426da6 --- /dev/null +++ b/canopeum_frontend/src/assets/icons/instagram-contact-logo.svg @@ -0,0 +1,24 @@ + + + + + diff --git a/canopeum_frontend/src/assets/icons/linkedin-contact-logo.svg b/canopeum_frontend/src/assets/icons/linkedin-contact-logo.svg new file mode 100644 index 000000000..82cf25602 --- /dev/null +++ b/canopeum_frontend/src/assets/icons/linkedin-contact-logo.svg @@ -0,0 +1,25 @@ + + + + + diff --git a/canopeum_frontend/src/assets/icons/linkedin.svg b/canopeum_frontend/src/assets/icons/linkedin.svg new file mode 100644 index 000000000..925257cbf --- /dev/null +++ b/canopeum_frontend/src/assets/icons/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/canopeum_frontend/src/assets/icons/x-contact-logo.svg b/canopeum_frontend/src/assets/icons/x-contact-logo.svg new file mode 100644 index 000000000..813a43336 --- /dev/null +++ b/canopeum_frontend/src/assets/icons/x-contact-logo.svg @@ -0,0 +1,22 @@ + + + + diff --git a/canopeum_frontend/src/assets/styles/theme-variables.scss b/canopeum_frontend/src/assets/styles/theme-variables.scss index 834bc3262..3928a0f22 100644 --- a/canopeum_frontend/src/assets/styles/theme-variables.scss +++ b/canopeum_frontend/src/assets/styles/theme-variables.scss @@ -12,6 +12,7 @@ $green: #28a745; $teal: #20c997; $cyan: #17a2b8; $white: #fff; +$grey-police: #433A2E; $gray-100: #f8f9fa; $gray-200: #e9ecef; $gray-300: #dee2e6; @@ -38,6 +39,7 @@ $grays: ( $theme-colors: ( primary: #007E51, secondary: #F18200, + secondary_1: $grey-police, success: $green, info: $cyan, warning: $yellow, @@ -60,7 +62,7 @@ $colors: ( white: $white, gray: $gray-600, gray-dark: $gray-800, - cream: $cream, + cream: $cream ); $theme-color-interval: 8%; $table-variants: ( diff --git a/canopeum_frontend/src/components/ContactCard/ContactCard.tsx b/canopeum_frontend/src/components/ContactCard/ContactCard.tsx new file mode 100644 index 000000000..fc5db5053 --- /dev/null +++ b/canopeum_frontend/src/components/ContactCard/ContactCard.tsx @@ -0,0 +1,62 @@ +import '../ContactCard/contact-card.scss'; +import '../../pages/Utilities'; + +import facebookLogo from '@assets/icons/facebook-contact-logo.svg'; +import instagramLogo from '@assets/icons/instagram-contact-logo.svg'; +import linkedinLogo from '@assets/icons/linkedin-contact-logo.svg'; +import xLogo from '@assets/icons/x-contact-logo.svg'; +import { Link } from 'react-router-dom'; + +import type { Contact } from '../../services/api' + +const ContactCard = ({ contact }:{readonly contact: Contact}) => { + + const renderContactCard = () => ( +
+
+
+

Contact

+ edit_square +
+
+
+ home_work +

{contact.address}

+
+
+ mail +

{contact.email}

+
+
+ perm_phone_msg +

{contact.phone}

+
+
+
+ {contact.linkedInLink && + linkedin-logo + } + {contact.instagramLink && + instagram-logo + } + {contact.xLink && + x-logo + } + {contact.facebookLink && + facebook-logo + } +
+
+ + +
+ ) + + return ( +
+ {renderContactCard()} +
+ ) +} + +export default ContactCard diff --git a/canopeum_frontend/src/components/ContactCard/contact-card.scss b/canopeum_frontend/src/components/ContactCard/contact-card.scss new file mode 100644 index 000000000..ab7b904f1 --- /dev/null +++ b/canopeum_frontend/src/components/ContactCard/contact-card.scss @@ -0,0 +1,23 @@ +@import '@assets/styles/theme-variables.scss'; + +.card { + padding: 20px; + background-color: $white; +} + +.card-title { + font-family: $font-family-sans-serif; + font-size: $h2-font-size; +} + +.card-text { + font-family: $font-family-monospace; + color: $grey-police; +} + + +.material-symbols-outlined { + color: $grey-police; + padding-right: 16px; + +} diff --git a/canopeum_frontend/src/components/site/SiteSummaryCard.tsx b/canopeum_frontend/src/components/site/SiteSummaryCard.tsx index 592beb4e0..a4462558a 100644 --- a/canopeum_frontend/src/components/site/SiteSummaryCard.tsx +++ b/canopeum_frontend/src/components/site/SiteSummaryCard.tsx @@ -70,4 +70,5 @@ const SiteSummaryCard = ({ site, viewMode }: Props) => { ) } + export default SiteSummaryCard diff --git a/canopeum_frontend/src/pages/MapSite.tsx b/canopeum_frontend/src/pages/MapSite.tsx index 3ac2a783b..d0c8e2d15 100644 --- a/canopeum_frontend/src/pages/MapSite.tsx +++ b/canopeum_frontend/src/pages/MapSite.tsx @@ -10,6 +10,20 @@ import PostWidget from '../components/PostWidget' import AnnouncementCard from '../components/AnnouncementCard/AnnouncementCard'; +import ContactCard from '../components/ContactCard/ContactCard'; +import SiteSummaryCard from '../components/site/SiteSummaryCard' +import type { SiteSocial } from '../services/api' +import api from '../services/apiInterface' + +const fetchSite = async (siteId: number, setSite: (site: SiteSocial) => void) => { + try { + const site = await api().social.site(siteId) + setSite(site) + } catch (error) { + console.error(error) + } +} + const MapSite = () => { const { siteId } = useParams() const { currentUser } = useContext(AuthenticationContext) @@ -53,15 +67,12 @@ const MapSite = () => { ) : (site && )} -
-
-

Left

-
{ site?.announcement && } + { site?.contact && }