Skip to content

Commit

Permalink
Merge pull request #166 from Rajandeep98/Header_Devsite
Browse files Browse the repository at this point in the history
Header devsite
  • Loading branch information
Rajandeep98 authored Dec 9, 2024
2 parents 4e4e8b1 + 6da22cd commit bf22e77
Showing 6 changed files with 126 additions and 100 deletions.
46 changes: 24 additions & 22 deletions web/site/app/components/Sbc/Header/Main.vue
Original file line number Diff line number Diff line change
@@ -18,36 +18,38 @@ defineExpose({
<header
id="sbc-main-header"
ref="headerRef"
class="border-b-2 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
class="2xl: left-1 h-16 border-b-4 border-bcGovColor-navDivider bg-bcGovColor-header p-2 sm:px-4 dark:border-b dark:bg-bcGovColor-darkGray"
>
<nav
class="m-auto flex w-full max-w-[1360px] items-center justify-between"
class="m-auto flex w-full max-w-[1312px] items-center justify-between"
:aria-label="$t('SbcHeader.navLabel')"
>
<div class="flex items-center gap-1">
<NuxtLinkLocale
to="/"
tabindex="-1"
aria-hidden="true"
class="mr-2"
>
<SbcLogo />
</NuxtLinkLocale>
<UButton
<div
class="flex h-12 min-h-12 items-center gap-3 py-2.5 sm:gap-5 md:gap-5 lg:gap-7"
>
<div class="h-12">
<NuxtLinkLocale to="/" tabindex="-1" aria-hidden="true" class="mr-2">
<SbcLogo />
</NuxtLinkLocale>
</div>
<div
v-for="link in mainLinks"
:key="link.to"
class="hidden lg:block"
:label="link.label"
:to="link.to"
color="white"
variant="link"
size="lg"
active-class="underline"
/>
class="flex h-11 w-24 cursor-pointer text-left font-sans text-sm font-semibold leading-5 lg:h-7 lg:w-60 lg:text-lg lg:font-bold lg:leading-7"
>
<NuxtLinkLocale :to="link.to">
<span v-if="link.label === 'Service BC Connect'">
<span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
</span>
<!-- <span v-else class="text-white">
{{ link.label }}
</span> -->
</NuxtLinkLocale>
</div>
</div>
<div class="flex gap-1">
<ColorModeSelect />
<LocaleSelect />
<!-- <ColorModeSelect /> -->
<!-- <LocaleSelect /> -->
<!-- leaving out auth options for now -->
<!-- <UDropdown
v-if="!user"
4 changes: 2 additions & 2 deletions web/site/app/components/Sbc/Logo.vue
Original file line number Diff line number Diff line change
@@ -16,12 +16,12 @@
</div>
<div v-else>
<img
class="hidden h-[60px] scale-125 sm:block"
class="hidden h-11 max-w-48 scale-125 sm:block"
src="BCGovLogoLgEn"
:alt="$t('SbcLogo.alt')"
>
<img
class="block h-[64px] scale-150 sm:hidden"
class="block h-11 w-14 scale-150 sm:hidden"
src="BCGovLogoSmEn"
:alt="$t('SbcLogo.alt')"
>
58 changes: 40 additions & 18 deletions web/site/app/components/Sbc/MobileNav.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
defineProps<{
accordianNavItems?: AccordianNavItem[] | undefined
accordianNavItems?: AccordianNavItem[] | undefined;
}>()
// const user = useCurrentUser()
const { currentDir, tocLinks } = useDocPageData()
@@ -33,27 +33,45 @@ const {
padding: 'p-2'
},
header: {
base: 'border-b-2 border-bcGovColor-navDivider dark:border-b-[1px] dark:bg-bcGovColor-darkGray',
base: 'border-b-4 border-bcGovColor-navDivider dark:border-b-[1px] dark:bg-bcGovColor-darkGray',
background: 'bg-bcGovColor-header dark:bg-bcGovColor-darkGray',
padding: 'p-2'
}
},
}"
>
<template #header>
<div class="m-auto flex w-full items-center justify-between">
<div class="flex items-center gap-1">
<NuxtLinkLocale
to="/"
tabindex="-1"
aria-hidden="true"
class="mr-2"
<div
class="flex h-12 min-h-12 items-center gap-3 py-2.5 sm:gap-5 md:gap-5 lg:gap-7"
>
<div class="flex">
<NuxtLinkLocale
to="/"
tabindex="-1"
aria-hidden="true"
class="mr-2"
>
<SbcLogo />
</NuxtLinkLocale>
</div>
<div
v-for="link in mainLinks"
:key="link.to"
class="flex h-11 w-24 cursor-pointer text-left font-sans text-sm font-semibold leading-5 lg:h-7 lg:w-60 lg:text-lg lg:font-bold lg:leading-7"
>
<SbcLogo />
</NuxtLinkLocale>
<NuxtLinkLocale :to="link.to">
<span v-if="link.label === 'Service BC Connect'">
<span class="text-white">Service</span><span class="text-bcGovColor-navDivider">BC</span> <span class="text-white">Connect</span>
</span>
<!-- <span v-else class="text-white">
{{ link.label }}
</span> -->
</NuxtLinkLocale>
</div>
</div>
<div class="flex gap-1">
<ColorModeSelect />
<LocaleSelect />
<!-- <ColorModeSelect />
<LocaleSelect /> -->
<!-- leave out auth options for now -->
<!-- <UDropdown
v-if="!user"
@@ -109,13 +127,17 @@ const {
</div>
</template>
<UVerticalNavigation :links="mainLinks" />
<UDivider v-show="tocLinks.length && $route.path.includes('products')" class="my-4" />
<UAccordion v-show="tocLinks.length && $route.path.includes('products')" :items="[{label: 'Table of Contents', defaultOpen: true}]">
<UDivider
v-show="tocLinks.length && $route.path.includes('products')"
class="my-4"
/>
<UAccordion
v-show="tocLinks.length && $route.path.includes('products')"
:items="[{ label: 'Table of Contents', defaultOpen: true }]"
>
<!-- default slot is the accordian button itself, so we use a custom button variant here to match theme -->
<template #default="{ open }">
<UButton
variant="accordian_trigger"
>
<UButton variant="accordian_trigger">
<span class="truncate">Table of Contents</span>

<template #trailing>
2 changes: 1 addition & 1 deletion web/site/app/composables/sbcNav.ts
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@ export function useSbcNav () {
// icon: 'i-mdi-account',
// label: t('btn.dashboard'),
// to: localePath('/sbc/dashboard')
// },
// }
{
icon: 'i-mdi-book-open-variant',
label: 'Docs',
106 changes: 54 additions & 52 deletions web/site/app/tests/unit/components/ColorModeSelect.test.ts
Original file line number Diff line number Diff line change
@@ -1,64 +1,66 @@
import { describe, expect, it } from 'vitest'
import { mountSuspended, renderSuspended } from '@nuxt/test-utils/runtime'
import { fireEvent, screen } from '@testing-library/vue'
import { ColorModeSelect } from '#components'
import { enI18n } from '~/tests/mocks/i18n'
// // Commenting out tests temporarily

const $colorModeLight = {
preference: 'light'
}
// import { describe, expect, it } from 'vitest'
// import { mountSuspended, renderSuspended } from '@nuxt/test-utils/runtime'
// import { fireEvent, screen } from '@testing-library/vue'
// import { ColorModeSelect } from '#components'
// import { enI18n } from '~/tests/mocks/i18n'

const $colorModeDark = {
preference: 'dark'
}
// const $colorModeLight = {
// preference: 'light'
// }

describe('<ColorModeSelect/>', () => {
it('mounts in light mode', async () => {
const component = await mountSuspended(ColorModeSelect, {
global: {
mocks: {
$colorMode: $colorModeLight
},
plugins: [enI18n]
}
})
// const $colorModeDark = {
// preference: 'dark'
// }

expect(component.attributes('aria-label')).to.equal('Switch to dark mode')
expect(component.html()).to.contain('<span class="i-mdi-white-balance-sunny flex-shrink-0 h-5 w-5" aria-hidden="true"></span>')
})
// describe('<ColorModeSelect/>', () => {
// it('mounts in light mode', async () => {
// const component = await mountSuspended(ColorModeSelect, {
// global: {
// mocks: {
// $colorMode: $colorModeLight
// },
// plugins: [enI18n]
// }
// })

it('mounts in dark mode', async () => {
const component = await mountSuspended(ColorModeSelect, {
global: {
mocks: {
$colorMode: $colorModeDark
},
plugins: [enI18n]
}
})
// expect(component.attributes('aria-label')).to.equal('Switch to dark mode')
// expect(component.html()).to.contain('<span class="i-mdi-white-balance-sunny flex-shrink-0 h-5 w-5" aria-hidden="true"></span>')
// })

expect(component.attributes('aria-label')).to.equal('Switch to light mode')
expect(component.html()).to.contain('<span class="i-mdi-moon-waning-crescent flex-shrink-0 h-5 w-5" aria-hidden="true"></span>')
})
// it('mounts in dark mode', async () => {
// const component = await mountSuspended(ColorModeSelect, {
// global: {
// mocks: {
// $colorMode: $colorModeDark
// },
// plugins: [enI18n]
// }
// })

it('can change colormode preference', async () => {
await renderSuspended(ColorModeSelect, {
global: {
mocks: {
$colorMode: $colorModeLight
},
plugins: [enI18n]
}
})
// expect(component.attributes('aria-label')).to.equal('Switch to light mode')
// expect(component.html()).to.contain('<span class="i-mdi-moon-waning-crescent flex-shrink-0 h-5 w-5" aria-hidden="true"></span>')
// })

const button = screen.getByRole('button')
// it('can change colormode preference', async () => {
// await renderSuspended(ColorModeSelect, {
// global: {
// mocks: {
// $colorMode: $colorModeLight
// },
// plugins: [enI18n]
// }
// })

await fireEvent.click(button)
// const button = screen.getByRole('button')

expect($colorModeLight.preference).to.equal('dark')
// await fireEvent.click(button)

await fireEvent.click(button)
// expect($colorModeLight.preference).to.equal('dark')

expect($colorModeLight.preference).to.equal('light')
})
})
// await fireEvent.click(button)

// expect($colorModeLight.preference).to.equal('light')
// })
// })
10 changes: 5 additions & 5 deletions web/site/app/tests/unit/components/SbcHeaderMain.test.ts
Original file line number Diff line number Diff line change
@@ -73,7 +73,7 @@ describe('<SbcHeaderMain/>', () => {
}
})

const linkTexts = ['Service BC Connect', 'Products', 'Docs'] // 'Dashboard',
const linkTexts = ['Service', 'BC', 'Connect'] // 'Dashboard',

linkTexts.forEach((link: string) => {
expect(screen.getByText(link)).toBeTruthy()
@@ -93,10 +93,10 @@ describe('<SbcHeaderMain/>', () => {
const logo = screen.getAllByAltText('Government of British Columbia Logo')
expect(logo).toBeTruthy()

const darkModeButton = screen.getByLabelText('Switch to dark mode')
expect(darkModeButton).toBeTruthy()
// const darkModeButton = screen.getByLabelText('Switch to dark mode')
// expect(darkModeButton).toBeTruthy()

const localeSelectMenu = screen.getByLabelText('Select a Language, current language: English')
expect(localeSelectMenu).toBeTruthy()
// const localeSelectMenu = screen.getByLabelText('Select a Language, current language: English')
// expect(localeSelectMenu).toBeTruthy()
})
})

0 comments on commit bf22e77

Please sign in to comment.