From fb27acdf77a0207f38da955f60b3821a416292b1 Mon Sep 17 00:00:00 2001 From: Roni Lockwood Date: Wed, 26 Mar 2025 16:10:39 -0600 Subject: [PATCH 1/2] [MKTG][c] update footer to 6 col --- build/footerDev.json | 706 ++++++++++++++++--------------- gatsby-browser.js | 1 + src/components/Footer/Footer.jsx | 518 +++++++++++------------ 3 files changed, 627 insertions(+), 598 deletions(-) diff --git a/build/footerDev.json b/build/footerDev.json index e68ff2761..8c0c9204a 100644 --- a/build/footerDev.json +++ b/build/footerDev.json @@ -2,334 +2,380 @@ "type": "footer", "src": "https://voyager.postman.com/illustration/postman-footer-rocket-launch.svg", "alt": "api-platform", - "copyright": "© 2023 Postman, Inc.", "items": [ - { - "title": "Product", - "arialabelledby": "product", - "category": "global-footer", - "label": "product", - "items": [ - { - "title": "What is Postman?", - "url": "https://www.postman.com/product/what-is-postman/", - "category": "global-footer", - "label": "what-is-postman", - "ariaLabel": "Read more about what Postman is" - }, - { - "title": "API repository", - "url": "https://www.postman.com/product/api-repository/", - "category": "global-footer", - "label": "api-repository", - "ariaLabel": "Read more about A P I repository" - }, - { - "title": "Tools", - "url": "https://www.postman.com/product/tools/", - "category": "global-footer", - "label": "tools", - "ariaLabel": "Read more about Postman tools." - }, - { - "title": "Governance", - "url": "https://www.postman.com/product/governance/", - "category": "global-footer", - "label": "governance", - "ariaLabel": "Read more about Postman governance" - }, - { - "title": "Workspaces", - "url": "https://www.postman.com/product/workspaces/", - "category": "global-footer", - "label": "workspaces", - "ariaLabel": "Read more about Postman workspaces" - }, - { - "title": "Integrations", - "url": "https://www.postman.com/product/integrations/", - "category": "global-footer", - "label": "integrations", - "ariaLabel": "Read more about Postman integrations" - }, - { - "title": "Enterprise", - "url": "https://www.postman.com/postman-enterprise/", - "category": "global-footer", - "label": "enterprise", - "ariaLabel": "Read more about Postman enterprise" - }, - { - "title": "Plans and pricing", - "url": "https://www.postman.com/pricing/", - "category": "global-footer", - "label": "plans-and-pricing", - "ariaLabel": "Read more about Postman plans and pricing" - }, - { - "title": "Download the app", - "url": "https://www.postman.com/downloads/", - "category": "global-footer", - "label": "download-the-app", - "ariaLabel": "Visit the download page for the Postman app" - }, - { - "title": "Support Center", - "url": "https://support.postman.com/hc/en-us", - "category": "global-footer", - "label": "support-center", - "ariaLabel": "Visit the Postman support center" - } - ] - }, - { - "title": "Company", - "arialabelledby": "company", - "category": "global-footer", - "label": "company", - "id": "company", - "items": [ - { - "title": "About", - "url": "https://www.postman.com/company/about-postman/", - "category": "global-footer", - "label": "about", - "ariaLabel": "Read more about Postman, the company" - }, - { - "title": "Careers and culture", - "url": "https://www.postman.com/company/careers/", - "category": "global-footer", - "label": "careers-and-culture", - "ariaLabel": "Read more about careers and culture at Postman" - }, - { - "title": "Press and media", - "url": "https://www.postman.com/company/press-media/", - "category": "global-footer", - "label": "press-and-media", - "ariaLabel": "Read more about press and media for Postman" - }, - { - "title": "Contact us", - "url": "https://www.postman.com/company/contact-us/", - "category": "global-footer", - "label": "contact-us", - "ariaLabel": "Contact us at Postman" - }, - { - "title": "Partner program", - "url": "https://www.postman.com/partner-program/", - "category": "global-footer", - "label": "partner-program", - "ariaLabel": "Read more about Postman Ecosystem Partner Program" - } - ] - }, - { - "title": "Legal and Security", - "arialabelledby": "legal-and-security", - "category": "global-footer", - "label": "legal-and-security", - "id": "legal-and-security", - "items": [ - { - "title": "Terms of Service", - "url": "https://www.postman.com/legal/terms/", - "category": "global-footer", - "label": "terms", - "ariaLabel": "Read more about Postman's terms'" - }, - { - "title": "Trust and Safety", - "url": "https://www.postman.com/trust/", - "hrefType": "internal", - "category": "global-footer", - "label": "trust-and-safety", - "ariaLabel": "Read more about Postman Trust and Safety" - }, - { - "title": "Privacy policy", - "url": "https://www.postman.com/legal/privacy-policy/", - "hrefType": "internal", - "category": "global-footer", - "label": "privacy-policy", - "ariaLabel": "Read more about Postman's privacy policy'e" - }, - { - "title": "Cookie notice", - "url": "https://www.postman.com/legal/cookies/", - "category": "global-footer", - "label": "cookie-notice", - "ariaLabel": "Read more about Postman's Cookie notice'" - }, - { - "title": "Privacy choices", - "url": "https://www.postman.com/legal/privacy-choices/", - "category": "global-footer", - "label": "privacy-choice", - "ariaLabel": "Read more about Postman's privacy choices" - } - ] - }, - { - "title": "API Categories", - "arialabelledby": "api-categories", - "category": "global-footer", - "label": "api-categories", - "id": "api-categories", - "items": [ - { - "title": "App Security", - "url": "https://www.postman.com/category/app-security", - "hrefType": "internal", - "category": "global-footer", - "label": "app-security", - "ariaLabel": "Read more about Postman app security" - }, - { - "title": "Payments", - "url": "https://www.postman.com/category/payments", - "hrefType": "internal", - "category": "global-footer", - "label": "payments", - "ariaLabel": "Read more about Postman payments" - }, - { - "title": "Financial Services", - "url": "https://www.postman.com/category/financial-services", - "category": "global-footer", - "label": "financial-services", - "ariaLabel": "Read more about financial services'" - }, - { - "title": "DevOps", - "url": "https://www.postman.com/category/devops", - "category": "global-footer", - "label": "devops", - "ariaLabel": "Read more about devOps'" - }, - { - "title": "Developer Productivity", - "url": "https://www.postman.com/category/developer-productivity", - "category": "global-footer", - "label": "developer-productivity", - "ariaLabel": "Read more about developer productivity" - }, - { - "title": "Data Analytics", - "url": "https://www.postman.com/category/data-analytics", - "category": "global-footer", - "label": "data-analytics", - "ariaLabel": "Read more about Postman's data analytics" - }, - { - "title": "Communication", - "url": "https://www.postman.com/category/communication", - "category": "global-footer", - "label": "communication", - "ariaLabel": "Read more about communication" - }, - { - "title": "Artificial Intelligence", - "url": "https://www.postman.com/category/artificial-intelligence", - "hrefType": "internal", - "category": "global-footer", - "label": "artificial-intelligence", - "ariaLabel": "Read more about Postman's artificial intelligence" - } - ] - }, - { - "items": [ - { - "svg": "", - "icon": "https://voyager.postman.com/logo/external/twtr-logo-blue.svg", - "title": "Twitter", - "url": "https://twitter.com/getpostman", - "hrefType": "external-other", - "category": "global-footer", - "label": "twitter", - "ariaLabel": "Follow Postman on Twitter" - }, - { - "svg": "", - "icon": "https://voyager.postman.com/logo/external/lnkdin-icon.svg", - "title": "LinkedIn", - "url": "https://www.linkedin.com/company/postman-platform", - "hrefType": "external-other", - "category": "global-footer", - "label": "linkedin", - "ariaLabel": "Follow Postman on Linked In" - }, - { - "svg": "", - "icon": "https://voyager.postman.com/logo/external/github-icon.svg", - "title": "GitHub", - "url": "https://github.com/postmanlabs", - "hrefType": "external-other", - "category": "global-footer", - "label": "github", - "ariaLabel": "Contribute to Postman on Git Hub" - }, - { - "svg": "", - "icon": "https://voyager.postman.com/logo/external/yt-icon.svg", - "title": "YouTube", - "url": "https://www.youtube.com/c/Postman", - "hrefType": "external-other", - "category": "global-footer", - "label": "youtube", - "ariaLabel": "Watch our Postman You Tube channel" - }, - { - "svg": "Asset 2", - "icon": "https://voyager.postman.com/logo/external/twitch-icon.svg", - "title": "Twitch", - "url": "https://www.twitch.tv/getpostman", - "hrefType": "external-other", - "category": "global-footer", - "label": "twitch", - "ariaLabel": "Follow Postman on Twitch" - } - ], - "title": "Social", - "arialabelledby": "social" - }, - { - "svgs": [ - { - "body": "", - "url": "https://www.facebook.com/getpostman/", - "arialabel": "Visit our Facebook page" - }, - { - "body": "", - "url": "https://twitter.com/getpostman", - "arialabel": "Visit our Twitter page" - }, - { - "body": "", - "url": "https://www.linkedin.com/company/postman-platform", - "arialabel": "Visit our Linked in page" - }, - { - "body": "", - "url": "https://github.com/postmanlabs", - "arialabel": "Visit our Git Hub page" - }, - { - "body": "", - "url": "https://www.twitch.tv/getpostman", - "arialabel": "Visit our Twitch page" - }, - { - "body": "", - "url": "https://www.youtube.com/c/Postman", - "arialabel": "Visit our YouTube Channel" - } - ] - } - ], - "copy": "© 2023 Postman, Inc. All rights reserved." - } \ No newline at end of file + { + "title": "Product", + "arialabelledby": "product", + "category": "global-footer", + "label": "product", + "items": [ + { + "title": "What is Postman?", + "url": "https://www.postman.com/product/what-is-postman/", + "category": "global-footer", + "label": "what-is-postman", + "ariaLabel": "Read more about what Postman is" + }, + { + "title": "Enterprise", + "url": "https://www.postman.com/postman-enterprise/", + "category": "global-footer", + "label": "enterprise", + "ariaLabel": "Read more about Postman enterprise" + }, + { + "title": "Flows", + "url": "https://www.postman.com/product/flows/", + "category": "global-footer", + "label": "flows", + "ariaLabel": "Read more about Postman flows" + }, + { + "title": "Postbot", + "url": "https://www.postman.com/product/postbot/", + "category": "global-footer", + "label": "postbot", + "ariaLabel": "Read more about Postman postbot" + }, + { + "title": "VS Code extension", + "url": "https://www.postman.com/downloads/#postman-vs-code-extension", + "category": "global-footer", + "label": "vs-extension", + "ariaLabel": "Read more about Postman VS Code extension" + }, + { + "title": "Postman CLI", + "url": "https://www.postman.com/downloads/#postman-cli/", + "category": "global-footer", + "label": "postman-cli", + "ariaLabel": "Read more about Postman cli." + }, + { + "title": "Integrations", + "url": "https://www.postman.com/product/integrations/", + "category": "global-footer", + "label": "integrations", + "ariaLabel": "Read more about Postman integrations" + }, + { + "title": "Tools", + "url": "https://www.postman.com/product/tools/", + "category": "global-footer", + "label": "tools", + "ariaLabel": "Read more about Postman tools." + }, + { + "title": "API Governance", + "url": "https://www.postman.com/product/governance/", + "category": "global-footer", + "label": "governance", + "ariaLabel": "Read more about Postman governance" + }, + { + "title": "Workspaces", + "url": "https://www.postman.com/product/workspaces/", + "category": "global-footer", + "label": "workspaces", + "ariaLabel": "Read more about Postman workspaces" + }, + { + "title": "Plans and pricing", + "url": "https://www.postman.com/pricing/", + "category": "global-footer", + "label": "plans-and-pricing", + "ariaLabel": "Read more about Postman plans and pricing" + } + ] + }, + { + "title": "API Network", + "arialabelledby": "api-network", + "category": "global-footer", + "label": "api-network", + "items": [ + { + "title": "App Security", + "url": "https://www.postman.com/category/app-security/", + "category": "global-footer", + "label": "app-security", + "ariaLabel": "Read more about App Security" + }, + { + "title": "Artificial Intelligence", + "url": "https://www.postman.com/category/artificial-intelligence/", + "category": "global-footer", + "label": "artificial-intelligence", + "ariaLabel": "Read more about Artificial Intelligence" + }, + { + "title": "Communication", + "url": "https://www.postman.com/category/communication/", + "category": "global-footer", + "label": "communication", + "ariaLabel": "Read more about Communication" + }, + { + "title": "Data Analytics", + "url": "https://www.postman.com/category/data-analytics/", + "category": "global-footer", + "label": "data-analytics", + "ariaLabel": "Read more about Data Analytics" + }, + { + "title": "Database", + "url": "https://www.postman.com/category/database-apis/", + "category": "global-footer", + "label": "database", + "ariaLabel": "Read more about Database" + }, + { + "title": "Developer Productivity", + "url": "https://www.postman.com/category/developer-productivity/", + "category": "global-footer", + "label": "developer-productivity", + "ariaLabel": "Read more about Developer Productivity" + }, + { + "title": "DevOps", + "url": "https://www.postman.com/category/devops/", + "category": "global-footer", + "label": "devops", + "ariaLabel": "Read more about DevOps" + }, + { + "title": "Ecommerce", + "url": "https://www.postman.com/category/e-commerce-apis/", + "category": "global-footer", + "label": "ecommerce", + "ariaLabel": "Read more about Ecommerce" + }, + { + "title": "eSignature", + "url": "https://www.postman.com/category/e-signature-apis/", + "category": "global-footer", + "label": "esignature", + "ariaLabel": "Read more about eSignature" + }, + { + "title": "Financial Services", + "url": "https://www.postman.com/category/financial-services/", + "category": "global-footer", + "label": "financial-services", + "ariaLabel": "Read more about Financial Services" + }, + { + "title": "Payments", + "url": "https://www.postman.com/category/payments/", + "category": "global-footer", + "label": "payments", + "ariaLabel": "Read more about Payments" + }, + { + "title": "Travel", + "url": "https://www.postman.com/category/travel-apis/", + "category": "global-footer", + "label": "travel", + "ariaLabel": "Read more about Travel" + } + ] + }, + { + "title": "Resources", + "arialabelledby": "resources", + "category": "global-footer", + "label": "resources", + "items": [ + { + "title": "Postman Docs", + "url": "https://learning.postman.com/docs/introduction/overview/", + "category": "global-footer", + "label": "postman-docs", + "ariaLabel": "Read more about Postman documentation" + }, + { + "title": "Academy", + "url": "https://academy.postman.com/", + "category": "global-footer", + "label": "academy", + "ariaLabel": "Read more about Postman Academy" + }, + { + "title": "Community", + "url": "https://community.postman.com/", + "category": "global-footer", + "label": "community", + "ariaLabel": "Read more about Postman Community" + }, + { + "title": "Intergalactic", + "url": "https://www.postman.com/events/intergalactic/", + "category": "global-footer", + "label": "intergalactic", + "ariaLabel": "Read more about Postman intergalactic" + }, + { + "title": "Videos", + "url": "https://www.youtube.com/c/Postman/", + "category": "global-footer", + "label": "videos", + "ariaLabel": "Read more about Postman Videos" + } + ] + }, + { + "title": "Legal and Security", + "arialabelledby": "legal-and-security", + "category": "global-footer", + "label": "legal-and-security", + "id": "legal-and-security", + "items": [ + { + "title": "Terms of Service", + "url": "https://www.postman.com/legal/terms/", + "category": "global-footer", + "label": "terms", + "ariaLabel": "Read more about Postman's terms'" + }, + { + "title": "Trust and Safety", + "url": "https://www.postman.com/trust/", + "hrefType": "internal", + "category": "global-footer", + "label": "trust-and-safety", + "ariaLabel": "Read more about Postman Trust and Safety" + }, + { + "title": "Privacy policy", + "url": "https://www.postman.com/legal/privacy-policy/", + "hrefType": "internal", + "category": "global-footer", + "label": "privacy-policy", + "ariaLabel": "Read more about Postman's privacy policy'e" + }, + { + "title": "Cookie notice", + "url": "https://www.postman.com/legal/cookies/", + "category": "global-footer", + "label": "cookie-notice", + "ariaLabel": "Read more about Postman's Cookie notice'" + } + ] + }, + { + "title": "Company", + "arialabelledby": "company", + "category": "global-footer", + "label": "company", + "id": "company", + "items": [ + { + "title": "About", + "url": "https://www.postman.com/company/about-postman/", + "category": "global-footer", + "label": "about", + "ariaLabel": "Read more about Postman, the company" + }, + { + "title": "Careers and culture", + "url": "https://www.postman.com/company/careers/", + "category": "global-footer", + "label": "careers-and-culture", + "ariaLabel": "Read more about careers and culture at Postman" + }, + { + "title": "Contact us", + "url": "https://www.postman.com/company/contact-us/", + "category": "global-footer", + "label": "contact-us", + "ariaLabel": "Contact us at Postman" + }, + { + "title": "Partner program", + "url": "https://www.postman.com/partner-program/", + "category": "global-footer", + "label": "partner-program", + "ariaLabel": "Read more about Postman Ecosystem Partner Program" + }, + { + "title": "Customer stories", + "url": "https://www.postman.com/case-studies/", + "category": "global-footer", + "label": "customer-stories", + "ariaLabel": "Read more about Postman customer stories" + }, + { + "title": "Student programs", + "url": "https://www.postman.com/student-program/", + "category": "global-footer", + "label": "student-programs", + "ariaLabel": "Read more about Postman student programs" + }, + { + "title": "Press and media", + "url": "https://www.postman.com/company/press-media/", + "category": "global-footer", + "label": "press-and-media", + "ariaLabel": "Read more about press and media for Postman" + } + ] + }, + { + "items": [ + { + "svg": "", + "icon": "https://voyager.postman.com/logo/external/twtr-logo-blue.svg", + "title": "Twitter", + "url": "https://twitter.com/getpostman", + "hrefType": "external-other", + "category": "global-footer", + "label": "twitter", + "ariaLabel": "Follow Postman on Twitter" + }, + { + "svg": "", + "icon": "https://voyager.postman.com/logo/external/lnkdin-icon.svg", + "title": "LinkedIn", + "url": "https://www.linkedin.com/company/postman-platform", + "hrefType": "external-other", + "category": "global-footer", + "label": "linkedin", + "ariaLabel": "Follow Postman on Linked In" + }, + { + "svg": "", + "icon": "https://voyager.postman.com/logo/external/github-icon.svg", + "title": "GitHub", + "url": "https://github.com/postmanlabs", + "hrefType": "external-other", + "category": "global-footer", + "label": "github", + "ariaLabel": "Contribute to Postman on Git Hub" + }, + { + "svg": "", + "icon": "https://voyager.postman.com/logo/external/yt-icon.svg", + "title": "YouTube", + "url": "https://www.youtube.com/c/Postman", + "hrefType": "external-other", + "category": "global-footer", + "label": "youtube", + "ariaLabel": "Watch our Postman You Tube channel" + }, + { + "svg": "", + "icon": "https://voyager.postman.com/logo/external/twitch-icon.svg", + "title": "Twitch", + "url": "https://www.twitch.tv/getpostman", + "hrefType": "external-other", + "category": "global-footer", + "label": "twitch", + "ariaLabel": "Follow Postman on Twitch" + } + ], + "title": "Social", + "arialabelledby": "social" + } + ] + } + \ No newline at end of file diff --git a/gatsby-browser.js b/gatsby-browser.js index 8b96cd4b8..a20ec09c9 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,3 +1,4 @@ +import './styles/config/normalize.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import 'jquery/dist/jquery.min'; import 'popper.js/dist/popper.min'; diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 76086aed7..c2397837d 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -1,80 +1,84 @@ import React, {useState, useEffect} from 'react'; import { v4 as uuidv4 } from 'uuid'; import styled from 'styled-components'; +import { Divider, SectionStyles, FooterLinkStyles } from 'aether-marketing'; import footerDataLocal from '../../../build/footerDev.json'; // import footerData from '../../../bff-data/footer.json'; -const FooterWrapper = styled.footer` - border-top: 1px solid ${(props) => props.theme.colors.grey_30}; - background-color: ${(props) => props.theme.colors.grey_00}; - font-size: 14px; - color: ${(props) => props.theme.colors.grey_50}; -.copyright { - font-size: 12px; -} -.column { - margin-left: 0px; -} -.footer-col-title { - font-size: 16px !important; - font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif; - font-weight: 600; - line-height: 1.4; - margin-bottom: 8px; -} -` +const Column = styled.ul` + padding-left: 0; +`; -const ColumnWrapper = styled.ul` - li { - list-style-type: none; - margin-bottom: 0; - } - -a { - color: ${(props) => props.theme.colors.grey_50}; - text-transform: none; - font-weight: 400; - display: block; - line-height: 1.7; +const ColumnRow = styled.li` + list-style-type: none; + margin-bottom: 0; padding: 5px 0; - &:hover { +`; + +const FooterImg = styled.img` + width: 100px !important; + height: auto; + margin: 0 auto; + display: block; +`; +const Copyright = styled.span` + color: ${(props) => props.theme.colors.grey_50} !important; + font-size: 1.2rem; +`; +const FooterColTitle = styled.h2` + font-size: 1.6rem !important; + line-height: 1.4; + margin-bottom: 8px; + // font-family: ${(props) => props.theme.fonts.Inter}; + font-weight: 600; + color: ${(props) => props.theme.colors.grey_50}; + font-feature-settings: 'calt' 0; +`; +const SubFooter = styled.div` + border-top: 1px solid #ccc; + margin-top: 20px; + padding-top: 20px; + .choice-link { + color: ${(props) => props.theme.colors.grey_50}; + } + .choice-link:hover { + color: ${(props) => props.theme.colors.blue_50}; + text-decoration: none; + } + .download-link:hover { color: ${(props) => props.theme.colors.blue_50}; text-decoration: none; } +`; +const SocialCol = styled.div` span { - border: 1px solid ${(props) => props.theme.colors.blue_10}; - border-radius: ${(props) => props.theme.borderRadius.medium}; - padding: 0 7px 0 4px; display: inline-block; - white-space: pre; - margin-left: 6px; + margin: 0 8px; } -} -` - -const FooterImgWrapper = styled.div` - @media (min-width: 768px) { + img { + opacity: 0.7; filter: grayscale(100%); transition: ${(props) => props.theme.transitions.all}; &:hover { + opacity: 1; filter: grayscale(0); - transition: all 0.2s ease-in-out; + transition: ${(props) => props.theme.transitions.all}; } } -` -const SocialSVGWrapper = styled.div` - display: inline-block; - margin-right: 8px; - width: 16px; - height: 16px; - & svg { - max-height: 100%; - width: auto; + svg { + opacity: 0.7; + filter: grayscale(100%); + -webkit-filter: grayscale(100%); + transition: 0.2s ease-in-out; } -` - + svg:hover { + opacity: 1; + filter: grayscale(0%); + transition: 0.2s ease-in-out; + } +`; const triggerGA = (category, label) => ( category && label @@ -119,241 +123,219 @@ const Footer = () => { const columns = data.items.slice(0, 5); return ( - - - + {/* social */} +
+
+ {data.items.slice(5, 6).map((item) => ( + + + + ))} +
+
+ +
+ + Download Postman + +
+
+ + Your privacy choices + + + +
+
+ © {new Date().getFullYear()} Postman, Inc. +
+ + {/* eslint-enable */} + + + ); }; From 6653cfb8f0db5bd7f4d92cf70782e978ca54a0b6 Mon Sep 17 00:00:00 2001 From: Roni Lockwood Date: Wed, 26 Mar 2025 17:39:42 -0600 Subject: [PATCH 2/2] update to not use aether-marketing --- src/components/Footer/Footer.jsx | 488 +++++----- .../Footer/__snapshots__/Footer.spec.jsx.snap | 867 +++++++++++------- 2 files changed, 822 insertions(+), 533 deletions(-) diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index c2397837d..cb22ae9d7 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -1,61 +1,76 @@ -import React, {useState, useEffect} from 'react'; -import { v4 as uuidv4 } from 'uuid'; -import styled from 'styled-components'; -import { Divider, SectionStyles, FooterLinkStyles } from 'aether-marketing'; -import footerDataLocal from '../../../build/footerDev.json'; +import React, { useState, useEffect } from "react" +import { v4 as uuidv4 } from "uuid" +import styled from "styled-components" +import footerDataLocal from "../../../build/footerDev.json" // import footerData from '../../../bff-data/footer.json'; - - const Column = styled.ul` padding-left: 0; -`; + margin-left: 0; +` const ColumnRow = styled.li` list-style-type: none; margin-bottom: 0; + padding: 5px 0; -`; +` +const FooterLinkStyles = styled.a` + color: ${(props) => props.theme.colors.grey_50}; + display: block; + line-height: 1.7; + border-bottom: none; + &:hover, + :active { + border-bottom: none !important; + line-height: 1.7; + display: block; + text-decoration: none; + } +` const FooterImg = styled.img` width: 100px !important; height: auto; margin: 0 auto; display: block; -`; +` const Copyright = styled.span` color: ${(props) => props.theme.colors.grey_50} !important; - font-size: 1.2rem; -`; + font-size: 14px; +` const FooterColTitle = styled.h2` font-size: 1.6rem !important; line-height: 1.4; margin-bottom: 8px; - // font-family: ${(props) => props.theme.fonts.Inter}; font-weight: 600; color: ${(props) => props.theme.colors.grey_50}; - font-feature-settings: 'calt' 0; -`; + font-feature-settings: "calt" 0; +` const SubFooter = styled.div` - border-top: 1px solid #ccc; + border-top: 1px solid #E6E6E6; margin-top: 20px; padding-top: 20px; .choice-link { color: ${(props) => props.theme.colors.grey_50}; } .choice-link:hover { - color: ${(props) => props.theme.colors.blue_50}; + color: ${(props) => props.theme.colors.blue_60}; text-decoration: none; } .download-link:hover { - color: ${(props) => props.theme.colors.blue_50}; + color: ${(props) => props.theme.colors.blue_60}; text-decoration: none; } -`; +` const SocialCol = styled.div` +margin-bottom: 0px; span { display: inline-block; - margin: 0 8px; + margin-right: 2rem; + &:last-of-type { + margin-right: 0; + } } img { opacity: 0.7; @@ -78,94 +93,89 @@ const SocialCol = styled.div` filter: grayscale(0%); transition: 0.2s ease-in-out; } -`; -const triggerGA = (category, label) => ( - category - && label - && window.pm - && window.pm.ga('send', 'event', category, 'Click', label) -); +` +const SectionStyles = styled.section` + padding-top: ${(props) => props.paddingTop || "40px"}; + padding-bottom: ${(props) => props.paddingBottom || "40px"}; + background-color: ${(props) => + props.backgroundColor ? theme.colors[props.backgroundColor] : "#FFFFFF"}; + + @media (min-width: 769px) { + padding-top: ${(props) => props.paddingTop || "80px"}; + padding-bottom: ${(props) => props.paddingBottom || "80px"}; + } +` +const HRStyles = styled.hr` + border: 0; + border-top: 1px solid ${(props) => props.theme.colors.grey_30}; + margin-top: 0; + margin-bottom: 0; +` +const triggerGA = (category, label) => + category && + label && + window.pm && + window.pm.ga("send", "event", category, "Click", label) // Helper function for rel attribute in link or button function relStringGenerator(target) { - if (target === '') { - return null; + if (target === "") { + return null } - if (target === 'blank') { - return 'noopener'; + if (target === "blank") { + return "noopener" } - return null; + return null } // // Helper function for target attribute in link or button function targetStringGenerator(target) { - if (target === '') { - return null; + if (target === "") { + return null } - if (target === 'blank') { - return '_blank'; + if (target === "blank") { + return "_blank" } - return null; + return null } const Footer = () => { + const [data, setData] = useState(footerDataLocal) + const footerKeys = ["alt", "copy", "copyright", "items", "src", "type"] - const [data, setData] = useState(footerDataLocal); - const footerKeys = ['alt', 'copy', 'copyright', 'items', 'src', 'type']; - useEffect(() => { - if (footerKeys.every(key => Object.keys(footerDataLocal).includes(key))) { + if (footerKeys.every((key) => Object.keys(footerDataLocal).includes(key))) { setData(footerDataLocal) } else { setData(footerDataLocal) } }, []) - const columns = data.items.slice(0, 5); - + const columns = data.items.slice(0, 5) + return (
- -
-
-
-
- {/* First column */} -
- -
- {/* Second column */} -
- {columns.slice(0, 1).map((item) => ( - - ))} -
-
- {/* Third column - stacked - top */} - {columns.slice(1, 2).map((item) => ( -
-
- {/* social */} -
-
- {data.items.slice(5, 6).map((item) => ( - - + + ))} +
+ + + +
+ + © {new Date().getFullYear()} Postman, Inc. + +
+ + {/* eslint-enable */}
- - - -
- © {new Date().getFullYear()} Postman, Inc. -
- - {/* eslint-enable */} -
- -
- ); -}; + + + ) +} -export default Footer; \ No newline at end of file +export default Footer diff --git a/src/components/Footer/__snapshots__/Footer.spec.jsx.snap b/src/components/Footer/__snapshots__/Footer.spec.jsx.snap index 311635c11..d7ed7206b 100644 --- a/src/components/Footer/__snapshots__/Footer.spec.jsx.snap +++ b/src/components/Footer/__snapshots__/Footer.spec.jsx.snap @@ -1,59 +1,57 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Footer renders correctly 1`] = ` -