diff --git a/package-lock.json b/package-lock.json index f4f5aa7d9..a81aef758 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "6.7.1-alpha.1", + "@abgov/react-components": "6.8.0-alpha.2", "@abgov/ui-components-common": "1.7.0", - "@abgov/web-components": "1.37.1-alpha.2", + "@abgov/web-components": "1.38.0-alpha.3", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", @@ -68,9 +68,10 @@ } }, "node_modules/@abgov/react-components": { - "version": "6.7.1-alpha.1", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.7.1-alpha.1.tgz", - "integrity": "sha512-s5+tGLY2DOeMV3BjiIz0c71hESIF/kcWA3PrFxvPCoCuPWiilLL0ktmd9sCRPp5qhcbWtW6M8vuLatwIiD28qQ==", + "version": "6.8.0-alpha.2", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.8.0-alpha.2.tgz", + "integrity": "sha512-C4ZmYzOWrFUKtcmcP+3Zz3zcUBQgziZqx3lVB5jkQT052vqt/5JQQWkB8Danw0fjfgnuO/MheOWH8qZEuZjFlg==", + "license": "Apache-2.0", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", @@ -83,9 +84,10 @@ "integrity": "sha512-dnqLxTJdBxNZFKPDyckaHHrkipjFIwXyU63rlEkcHgKhn4d+KrwlbMuxtsS73FvH4bozyQm2OM+sPu32wyWgNA==" }, "node_modules/@abgov/web-components": { - "version": "1.37.1-alpha.2", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.37.1-alpha.2.tgz", - "integrity": "sha512-WoQZAwccxRPQHWHBS/7gDISCFbEnWrsRZvS8U9iK0N3jr00YTtlvxdwEDywZAcgrXitxa8qlIVbpylZVLzDdmQ==", + "version": "1.38.0-alpha.3", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.38.0-alpha.3.tgz", + "integrity": "sha512-mE8qwOCO+V7gHvZqrONgo81c0HBekci7jSwO+GoOQRrRMYoh17vTRM3tPPrtRznqJ+QyQBQS5G2tWkpoqbHMsg==", + "license": "Apache-2.0", "peerDependencies": { "@sveltejs/vite-plugin-svelte": "3.x", "glob": "10.x", @@ -990,16 +992,6 @@ "node": ">= 18" } }, - "node_modules/@pkgjs/parseargs": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", - "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", - "optional": true, - "peer": true, - "engines": { - "node": ">=14" - } - }, "node_modules/@remix-run/router": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", diff --git a/package.json b/package.json index 1660d33b7..e062f4968 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "6.7.1-alpha.1", + "@abgov/react-components": "6.8.0-alpha.2", "@abgov/ui-components-common": "1.7.0", - "@abgov/web-components": "1.37.1-alpha.2", + "@abgov/web-components": "1.38.0-alpha.3", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", diff --git a/src/components/version-language-switcher/HelpButton.tsx b/src/components/version-language-switcher/HelpButton.tsx index 7fb14e824..21b7e088e 100644 --- a/src/components/version-language-switcher/HelpButton.tsx +++ b/src/components/version-language-switcher/HelpButton.tsx @@ -26,7 +26,6 @@ export function HelpButton() { return ( ); -} \ No newline at end of file +} diff --git a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx index e98056ed2..8b9377c6f 100644 --- a/src/components/version-language-switcher/VersionLanguageSwitcher.tsx +++ b/src/components/version-language-switcher/VersionLanguageSwitcher.tsx @@ -2,6 +2,7 @@ import { GoabIcon, GoabPopover } from "@abgov/react-components"; + import { ANGULAR_VERSIONS, getVersionedUrlPath, Language, LanguageVersion, VERSIONED_ANGULAR_URL_SEGMENT, @@ -16,7 +17,7 @@ export const VersionLanguageSwitcher = () => { const {language, version, setLanguage, setVersion} = useContext(LanguageVersionContext); const location = useLocation(); const navigate = useNavigate(); - const [hash, setHash] = React.useState(window.location.hash); + const [hash, setHash] = React.useState(window.location.hash); useEffect(() => { function setLanguageAndVersionFromUrl() { @@ -33,7 +34,7 @@ export const VersionLanguageSwitcher = () => { setLanguageAndVersionFromUrl(); }); - // popover collapses when Url hash tag changes + // popover collapses when Url hash tag changes const generateHyperlink = (newValue: LanguageVersion | Language) => { return hash === newValue ? "#" : `#${newValue}`; }; @@ -85,30 +86,22 @@ export const VersionLanguageSwitcher = () => { return str.charAt(0).toUpperCase() + str.slice(1); } - const openLanguagePopOver = (e: React.MouseEvent) => { - e.preventDefault(); - }; - - const openVersionPopOver = (e: React.MouseEvent) => { - e.preventDefault(); - }; - const getCurrentVersionLabel = (language: string, version: string) => { if (language === "react") { return version === "new" ? REACT_VERSIONS.NEW.label : REACT_VERSIONS.OLD.label; - } if (language === "angular") { + } if (language === "angular") { return version === "new" ? ANGULAR_VERSIONS.NEW.label : ANGULAR_VERSIONS.OLD.label; } } return ( - <> -
+
openLanguagePopOver(e)}> - {capitalizeFirstLetter(language)} - +
+ + {capitalizeFirstLetter(language)} +
} padded={false}> <> @@ -121,10 +114,10 @@ export const VersionLanguageSwitcher = () => { openVersionPopOver(e)}> - {getCurrentVersionLabel(language, version)} - +
+ + {getCurrentVersionLabel(language, version)} +
} padded={false}> <> {["new", "old"].map(ver => ( @@ -134,7 +127,6 @@ export const VersionLanguageSwitcher = () => { ))} -
- +
); } diff --git a/src/components/version-language-switcher/version-language-switcher.css b/src/components/version-language-switcher/version-language-switcher.css index f2594c468..3bd4e681c 100644 --- a/src/components/version-language-switcher/version-language-switcher.css +++ b/src/components/version-language-switcher/version-language-switcher.css @@ -30,12 +30,10 @@ } .version-language-switcher { - height: 20px; display: flex; flex-direction: row; align-items: center; /* vertically align content */ gap: var(--goa-space-s); - margin-bottom: var(--goa-space-xs); } @media (max-width: 623px) { @@ -55,4 +53,16 @@ gap: 0; margin-bottom: var(--goa-space-3xs); } -} \ No newline at end of file +} + +.menu-link { + display: flex; + align-items: center; + justify-content: center; + color: var(--goa-color-interactive-default); +} + +.menu-link:hover { + color: var(--goa-color-interactive-hover); + text-decoration: underline; +}