From 7c8a2069455af4aba1147156e86c682106817f36 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Tue, 14 Jan 2025 11:42:14 -0500 Subject: [PATCH 01/12] feat: remove logo from header and footer removes logo and property from header, footer, readme, tests #123 --- .../ErrorBoundary/PdapErrorBoundary.vue | 4 +-- src/components/ErrorBoundary/README.md | 4 +-- src/components/Header/PdapHeader.vue | 29 +++++-------------- src/components/Header/README.md | 3 +- src/components/Header/header.spec.ts | 23 ++++----------- src/components/Header/types.ts | 3 +- src/demo/App.vue | 2 -- 7 files changed, 18 insertions(+), 50 deletions(-) diff --git a/src/components/ErrorBoundary/PdapErrorBoundary.vue b/src/components/ErrorBoundary/PdapErrorBoundary.vue index afcd75b..951fff0 100644 --- a/src/components/ErrorBoundary/PdapErrorBoundary.vue +++ b/src/components/ErrorBoundary/PdapErrorBoundary.vue @@ -66,11 +66,11 @@ onErrorCaptured((err, vm, info) => { * * * diff --git a/src/components/ErrorBoundary/README.md b/src/components/ErrorBoundary/README.md index 6346f43..8fe0a15 100644 --- a/src/components/ErrorBoundary/README.md +++ b/src/components/ErrorBoundary/README.md @@ -14,11 +14,11 @@ _From data-sources `App.vue`: This will catch any uncaught error at the route le ``` ``` diff --git a/src/components/Header/PdapHeader.vue b/src/components/Header/PdapHeader.vue index 82b1c5b..f1fd4aa 100644 --- a/src/components/Header/PdapHeader.vue +++ b/src/components/Header/PdapHeader.vue @@ -1,19 +1,9 @@ @@ -23,17 +13,15 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'; import { RouterLink } from 'vue-router'; import PdapNav from '../Nav/PdapNav.vue'; import { PdapHeaderProps } from './types'; -import lockup from '../../assets/lockup.svg'; // Props const props = withDefaults(defineProps(), { - logoImageSrc: lockup, - logoImageAnchorPath: '/', + logoAnchorPath: '/', }); // Vars const el = ref(null); -const navLogoLinkIsPath = props.logoImageAnchorPath.startsWith('/'); +const navLogoLinkIsPath = props.logoAnchorPath.startsWith('/'); // Lifecycle methods onMounted(() => { @@ -62,7 +50,7 @@ function getHeightAndSetToCSSVar() { * * ## Props * @prop {string} logoImageSrc Src for the PDAP logo image to be displayed - * @prop {string } logoImageAnchorPath Path for the link that wraps the PDAP logo image + * @prop {string } logoAnchorPath Path for the link that wraps the PDAP logo image * * ## Notes * The `Header` component does not require any props to be passed. But keep in mind that it is responsible for rendering the `Nav` component. Consuming applications will need to `provide` an array of nav links -- **there are no defaults for this**, you must `provide` these links either 1\. in a layout component (see example below), at the route level, or at the app level. This allows for flexibility in which links are rendered on which routes @@ -83,7 +71,4 @@ export default { @apply xs:max-w-none; } -.logo img { - @apply dark:invert; -} diff --git a/src/components/Header/README.md b/src/components/Header/README.md index f648cd1..48ad015 100644 --- a/src/components/Header/README.md +++ b/src/components/Header/README.md @@ -4,8 +4,7 @@ | name | required? | types | description | default | | --------------------- | --------- | -------- | ---------------------- | ---------------------------------------------------------- | -| `logoImageSrc` | no | `string` | Source of logo image | `'node_modules/pdap-design-system/dist/images/lockup.svg'` | -| `logoImageAnchorPath` | no | `string` | Flex alignment presets | `/` | +| `logoAnchorPath` | no | `string` | Flex alignment presets | `/` | ## Notes diff --git a/src/components/Header/header.spec.ts b/src/components/Header/header.spec.ts index 2405889..23b55c9 100644 --- a/src/components/Header/header.spec.ts +++ b/src/components/Header/header.spec.ts @@ -51,40 +51,27 @@ describe('Header component', () => { }); // Props - // Props - logo src - test('Renders header with default logo src', () => { - const wrapper = mount(PdapHeader, base); - expect(wrapper.props().logoImageSrc).toBe('/src/assets/lockup.svg'); - }); - - test('Renders header with custom logo src', () => { - const wrapper = mount(PdapHeader, { - ...base, - props: { logoImageSrc: 'test' }, - }); - expect(wrapper.props().logoImageSrc).toBe('test'); - }); // Props - anchor path test('Renders header with default logo anchor path', () => { const wrapper = mount(PdapHeader, base); - expect(wrapper.props().logoImageAnchorPath).toBe('/'); + expect(wrapper.props().logoAnchorPath).toBe('/'); }); test('Renders header with custom logo anchor path', () => { const wrapper = mount(PdapHeader, { ...base, - props: { logoImageAnchorPath: '/test' }, + props: { logoAnchorPath: '/test' }, }); - expect(wrapper.props().logoImageAnchorPath).toBe('/test'); + expect(wrapper.props().logoAnchorPath).toBe('/test'); }); test('Renders header with custom logo anchor href', () => { const wrapper = mount(PdapHeader, { ...base, - props: { logoImageAnchorPath: 'www.test.com' }, + props: { logoAnchorPath: 'www.test.com' }, }); - expect(wrapper.props().logoImageAnchorPath).toBe('www.test.com'); + expect(wrapper.props().logoAnchorPath).toBe('www.test.com'); }); test('Header is unmounted from the DOM', async () => { diff --git a/src/components/Header/types.ts b/src/components/Header/types.ts index 80eef5e..dfa0106 100644 --- a/src/components/Header/types.ts +++ b/src/components/Header/types.ts @@ -1,4 +1,3 @@ export interface PdapHeaderProps { - logoImageSrc?: string; - logoImageAnchorPath?: string; + logoAnchorPath?: string; } diff --git a/src/demo/App.vue b/src/demo/App.vue index 1600518..12833c9 100644 --- a/src/demo/App.vue +++ b/src/demo/App.vue @@ -2,8 +2,6 @@ import { Header, Footer } from '../components'; import { provide } from 'vue'; import { RouterView } from 'vue-router'; -// import acronym from ''; -// import lockup from 'pdap-design-system/images/lockup.svg'; const links = [ { From 89247af483cc88771c4f080ae458b36f9adcbdc0 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Tue, 14 Jan 2025 12:14:56 -0500 Subject: [PATCH 02/12] fix: tune nav text appearance #131 --- src/components/Header/PdapHeader.vue | 3 ++- src/styles/base.css | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Header/PdapHeader.vue b/src/components/Header/PdapHeader.vue index f1fd4aa..66fbf50 100644 --- a/src/components/Header/PdapHeader.vue +++ b/src/components/Header/PdapHeader.vue @@ -67,7 +67,8 @@ export default { } .logo { - @apply decoration-0 relative max-w-[80%] px-4; + @apply decoration-0 relative max-w-[80%] text-xl font-semibold px-4 text-brand-wine-400; + @apply lg:text-lg; @apply xs:max-w-none; } diff --git a/src/styles/base.css b/src/styles/base.css index 901c76f..88f8424 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -145,8 +145,8 @@ @apply border-2 border-transparent border-solid outline-none; } -a:focus, -a:focus-visible, +a:focus:not(.pdap-nav-link), +a:focus-visible:not(.pdap-nav-link), button:focus, button:focus-visible, [role="button"]:focus, From faef62fdd12a2269fcbf1d6ce82b2feef6d5f952 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Tue, 14 Jan 2025 12:31:22 -0500 Subject: [PATCH 03/12] fix(base.css): thinner header weights --- src/styles/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/base.css b/src/styles/base.css index 88f8424..58a9e57 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -76,12 +76,12 @@ } h2 { - @apply font-bold mb-4 mt-8 text-2xl; + @apply font-semibold mb-4 mt-8 text-2xl; @apply md:text-4xl; } h3 { - @apply font-extrabold mb-2 mt-8 text-med tracking-[.1em] uppercase; + @apply font-bold mb-2 mt-8 text-med tracking-[.1em] uppercase; @apply md:text-lg; } From a5898e6af71bdf1a91bf3c2e6de40ed71fa12f0d Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Thu, 16 Jan 2025 23:50:23 -0500 Subject: [PATCH 04/12] fix(header): tweak text logo style --- src/components/Header/PdapHeader.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/PdapHeader.vue b/src/components/Header/PdapHeader.vue index 66fbf50..d42a402 100644 --- a/src/components/Header/PdapHeader.vue +++ b/src/components/Header/PdapHeader.vue @@ -67,7 +67,7 @@ export default { } .logo { - @apply decoration-0 relative max-w-[80%] text-xl font-semibold px-4 text-brand-wine-400; + @apply decoration-0 relative max-w-[80%] text-xl font-bold p-2 outline outline-wineneutral-500 text-brand-wine-400; @apply lg:text-lg; @apply xs:max-w-none; } From 2eee0764bda1ed7b1a954a18a1d82148f26488b6 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Wed, 22 Jan 2025 15:53:59 -0500 Subject: [PATCH 05/12] fix(footer): replace linkedin and add email link to footer also fixed snapshot, test, readme references --- src/components/Footer/PdapFooter.vue | 14 +++++++------- src/components/Footer/README.md | 10 +++++----- .../Footer/__snapshots__/footer.spec.ts.snap | 16 ++++++++-------- src/components/Footer/constants.ts | 2 +- src/components/Footer/footer.spec.ts | 4 ++-- 5 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/Footer/PdapFooter.vue b/src/components/Footer/PdapFooter.vue index 08944a5..46b05f2 100644 --- a/src/components/Footer/PdapFooter.vue +++ b/src/components/Footer/PdapFooter.vue @@ -101,7 +101,6 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { faGithub, faDiscord, - faLinkedin, IconDefinition, } from '@fortawesome/free-brands-svg-icons'; import { @@ -109,6 +108,7 @@ import { faInbox, faBook, faCircleDollarToSlot, + faEnvelope, } from '@fortawesome/free-solid-svg-icons'; import { formatWithCommas } from '../../utils/format'; @@ -117,7 +117,7 @@ const props = defineProps(); const iconMap = new Map([ [FOOTER_LINK_ICONS.GITHUB, faGithub], [FOOTER_LINK_ICONS.DISCORD, faDiscord], - [FOOTER_LINK_ICONS.LINKEDIN, faLinkedin], + [FOOTER_LINK_ICONS.EMAIL, faEnvelope], [FOOTER_LINK_ICONS.JOBS, faSmile], [FOOTER_LINK_ICONS.NEWSLETTER, faInbox], [FOOTER_LINK_ICONS.DOCS, faBook], @@ -134,11 +134,6 @@ const links = inject('footerLinks', [ text: 'Discord', icon: FOOTER_LINK_ICONS.DISCORD, }, - { - href: 'https://www.linkedin.com/company/pdap', - text: 'LinkedIn', - icon: FOOTER_LINK_ICONS.LINKEDIN, - }, { href: 'https://pdap.io/jobs', text: 'Jobs', @@ -154,6 +149,11 @@ const links = inject('footerLinks', [ text: 'Docs', icon: FOOTER_LINK_ICONS.DOCS, }, + { + href: 'mailto:contact@pdap.io', + text: 'Email', + icon: FOOTER_LINK_ICONS.EMAIL, + }, ]); const targetProgress = computed(() => { diff --git a/src/components/Footer/README.md b/src/components/Footer/README.md index 1f9b742..8637391 100644 --- a/src/components/Footer/README.md +++ b/src/components/Footer/README.md @@ -26,11 +26,6 @@ export default { text: 'Discord', icon: FOOTER_LINK_ICONS.DISCORD, }, - { - href: 'https://www.linkedin.com/company/pdap', - text: 'LinkedIn', - icon: FOOTER_LINK_ICONS.LINKEDIN, - }, { href: 'https://pdap.io/jobs', text: 'Jobs', @@ -46,6 +41,11 @@ export default { text: 'Docs', icon: FOOTER_LINK_ICONS.DOCS, }, + { + href: 'mailto:contact@pdap.io', + text: 'Email', + icon: FOOTER_LINK_ICONS.EMAIL, + }, ] } }, diff --git a/src/components/Footer/__snapshots__/footer.spec.ts.snap b/src/components/Footer/__snapshots__/footer.spec.ts.snap index d7436e4..a340a64 100644 --- a/src/components/Footer/__snapshots__/footer.spec.ts.snap +++ b/src/components/Footer/__snapshots__/footer.spec.ts.snap @@ -20,14 +20,6 @@ exports[`Footer component > Renders a footer 1`] = ` -
  • - - LinkedIn - - -
    • +
  • + + Email + + +
    • diff --git a/src/components/Footer/constants.ts b/src/components/Footer/constants.ts index 4253d3d..8011166 100644 --- a/src/components/Footer/constants.ts +++ b/src/components/Footer/constants.ts @@ -3,9 +3,9 @@ */ export const FOOTER_LINK_ICONS = { GITHUB: 'github', - LINKEDIN: 'linkedin', DISCORD: 'discord', JOBS: 'jobs', NEWSLETTER: 'newsletter', DOCS: 'docs', + EMAIL: 'email', } as const; diff --git a/src/components/Footer/footer.spec.ts b/src/components/Footer/footer.spec.ts index 0ffa4ec..cea723b 100644 --- a/src/components/Footer/footer.spec.ts +++ b/src/components/Footer/footer.spec.ts @@ -46,10 +46,10 @@ describe('Footer component', () => { // Verify specific links exist expect(wrapper.html()).toContain('Github'); expect(wrapper.html()).toContain('Discord'); - expect(wrapper.html()).toContain('LinkedIn'); expect(wrapper.html()).toContain('Jobs'); expect(wrapper.html()).toContain('Newsletter'); expect(wrapper.html()).toContain('Docs'); + expect(wrapper.html()).toContain('Email'); }); // Fundraising Section @@ -175,7 +175,7 @@ describe('Link behavior', () => { test('Internal links should not open in new tab', () => { const wrapper = mount(PdapFooter, base); - const internalLinks = wrapper.findAll('a:not([href^="http"])'); + const internalLinks = wrapper.findAll('a:not([href^="http"]):not([href^="mailto"])'); internalLinks.forEach((link) => { expect(link.attributes('target')).toBeFalsy(); From 95a181ad6dc49858ac136ba972d87de870538f94 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Wed, 22 Jan 2025 22:38:29 -0500 Subject: [PATCH 06/12] feat(header): add icon to header --- src/components/Header/PdapHeader.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Header/PdapHeader.vue b/src/components/Header/PdapHeader.vue index d42a402..98a6480 100644 --- a/src/components/Header/PdapHeader.vue +++ b/src/components/Header/PdapHeader.vue @@ -1,9 +1,13 @@ @@ -13,6 +17,8 @@ import { onBeforeUnmount, onMounted, ref } from 'vue'; import { RouterLink } from 'vue-router'; import PdapNav from '../Nav/PdapNav.vue'; import { PdapHeaderProps } from './types'; +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; +import { faArrowsToCircle } from '@fortawesome/free-solid-svg-icons'; // Props const props = withDefaults(defineProps(), { From c1a90ba586f299d13ed7d55891fb2bba6aed6ac5 Mon Sep 17 00:00:00 2001 From: Josh Chamberlain Date: Sun, 26 Jan 2025 17:19:31 -0500 Subject: [PATCH 07/12] fix(footer): remove fundraising and fix tests --- src/components/Footer/PdapFooter.vue | 65 +------------ src/components/Footer/README.md | 6 -- .../Footer/__snapshots__/footer.spec.ts.snap | 19 +--- src/components/Footer/footer.spec.ts | 96 +------------------ src/components/Footer/types.ts | 7 -- src/demo/App.vue | 2 +- 6 files changed, 9 insertions(+), 186 deletions(-) diff --git a/src/components/Footer/PdapFooter.vue b/src/components/Footer/PdapFooter.vue index 46b05f2..00cced5 100644 --- a/src/components/Footer/PdapFooter.vue +++ b/src/components/Footer/PdapFooter.vue @@ -1,7 +1,6 @@