From c4aba02b7cb0b175d18a980af270fab57c8308a7 Mon Sep 17 00:00:00 2001 From: barsnes Date: Mon, 7 Oct 2024 13:32:29 +0200 Subject: [PATCH] changes from feedback --- apps/_components/src/index.ts | 3 ++ apps/_components/src/logos/Figma.tsx | 30 ++++++++++++ apps/_components/src/logos/Github.tsx | 33 +++++++++++++ apps/_components/src/logos/Slack.tsx | 47 +++++++++++++++++++ .../PostLayout/PostLayout.module.css | 1 + .../components/Footer/Footer.module.css | 46 ++++++++++++++---- apps/storefront/components/Footer/Footer.tsx | 30 ++---------- .../components/GithubLink/GithubLink.tsx | 9 +--- .../layouts/PageLayout/PageLayout.module.css | 1 + 9 files changed, 157 insertions(+), 43 deletions(-) create mode 100644 apps/_components/src/logos/Figma.tsx create mode 100644 apps/_components/src/logos/Github.tsx create mode 100644 apps/_components/src/logos/Slack.tsx diff --git a/apps/_components/src/index.ts b/apps/_components/src/index.ts index 09c0ab936d..529b44bed3 100644 --- a/apps/_components/src/index.ts +++ b/apps/_components/src/index.ts @@ -3,3 +3,6 @@ export { Container } from './Container/Container'; export { ClipboardButton } from './ClipboardButton/ClipboardButton'; export { ColorModal } from './ColorModal/ColorModal'; export { Header } from './Header/Header'; +export { Figma } from './logos/Figma'; +export { Github } from './logos/Github'; +export { Slack } from './logos/Slack'; diff --git a/apps/_components/src/logos/Figma.tsx b/apps/_components/src/logos/Figma.tsx new file mode 100644 index 0000000000..b8cb9f1daf --- /dev/null +++ b/apps/_components/src/logos/Figma.tsx @@ -0,0 +1,30 @@ +type FigmaProps = React.HTMLAttributes; + +export function Figma(rest: FigmaProps) { + return ( + + + + + + + + + + + + ); +} diff --git a/apps/_components/src/logos/Github.tsx b/apps/_components/src/logos/Github.tsx new file mode 100644 index 0000000000..488b7771fb --- /dev/null +++ b/apps/_components/src/logos/Github.tsx @@ -0,0 +1,33 @@ +type GithubProps = React.HTMLAttributes; + +export function Github(rest: GithubProps) { + return ( + + + + + + + + + + + ); +} diff --git a/apps/_components/src/logos/Slack.tsx b/apps/_components/src/logos/Slack.tsx new file mode 100644 index 0000000000..0b16c6d928 --- /dev/null +++ b/apps/_components/src/logos/Slack.tsx @@ -0,0 +1,47 @@ +type SlackProps = React.HTMLAttributes; + +export function Slack(rest: SlackProps) { + return ( + + + + + + + + + + + ); +} diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css index be274c6c49..ed65974fd2 100644 --- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css +++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css @@ -20,6 +20,7 @@ gap: var(--ds-spacing-5); text-align: center; margin: 0 auto; + margin-top: var(--ds-spacing-12); } .ingress { diff --git a/apps/storefront/components/Footer/Footer.module.css b/apps/storefront/components/Footer/Footer.module.css index 2310921cb8..e88b263b78 100644 --- a/apps/storefront/components/Footer/Footer.module.css +++ b/apps/storefront/components/Footer/Footer.module.css @@ -12,16 +12,6 @@ margin-bottom: var(--ds-spacing-4); } -.footer .logos img { - height: 26px; - width: auto; - margin-right: var(--ds-spacing-2); - - &.udir { - height: 32px; - } -} - .logos { display: flex; flex-direction: column; @@ -46,6 +36,42 @@ .link { --dsc-link-color--visited: var(--ds-color-neutral-text-default); + + & svg { + max-width: 24px; + + & * { + fill: var(--dsc-link-color); + } + } + + &:focus-visible { + & svg * { + fill: var(--dsc-link-color--focus); + } + } + + &:hover { + & svg * { + fill: var(--dsc-link-color--hover); + } + } + + &:active { + & svg * { + fill: var(--dsc-link-color--active); + } + } +} + +.footer .logos img { + height: 26px; + width: auto; + margin-right: var(--ds-spacing-2); + + &.udir { + height: 32px; + } } .top { diff --git a/apps/storefront/components/Footer/Footer.tsx b/apps/storefront/components/Footer/Footer.tsx index 2cee5b09b0..4959f5727a 100644 --- a/apps/storefront/components/Footer/Footer.tsx +++ b/apps/storefront/components/Footer/Footer.tsx @@ -1,7 +1,6 @@ import { Button, Heading, Link, Paragraph } from '@digdir/designsystemet-react'; import { EnvelopeClosedIcon } from '@navikt/aksel-icons'; -import { Container } from '@repo/components'; -import cl from 'clsx/lite'; +import { Container, Figma, Github, Slack } from '@repo/components'; import Image from 'next/image'; import NextLink from 'next/link'; import type { ReactNode } from 'react'; @@ -32,38 +31,17 @@ const rightLinks = [ { text: 'Bli invitert til slack', url: 'https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ', - prefix: ( - - ), + prefix: , }, { text: 'Github', url: 'https://github.com/digdir/designsystemet', - prefix: ( - - ), + prefix: , }, { text: 'Figma', url: 'https://www.figma.com/@designsystemet', - prefix: ( - - ), + prefix: , }, ]; diff --git a/apps/storefront/components/GithubLink/GithubLink.tsx b/apps/storefront/components/GithubLink/GithubLink.tsx index b0549f4fa1..f59a4dd0ac 100644 --- a/apps/storefront/components/GithubLink/GithubLink.tsx +++ b/apps/storefront/components/GithubLink/GithubLink.tsx @@ -1,6 +1,6 @@ 'use client'; import { Link } from '@digdir/designsystemet-react'; -import Image from 'next/image'; +import { Github } from '@repo/components'; import { usePathname } from 'next/navigation'; import type { HTMLAttributes } from 'react'; @@ -18,12 +18,7 @@ const GithubLink = ({ {...rest} data-unstyled > - github logo + Rediger denne siden på Github (åpnes i ny fane) ); diff --git a/apps/storefront/layouts/PageLayout/PageLayout.module.css b/apps/storefront/layouts/PageLayout/PageLayout.module.css index a06bdb294b..dde3f9e0d9 100644 --- a/apps/storefront/layouts/PageLayout/PageLayout.module.css +++ b/apps/storefront/layouts/PageLayout/PageLayout.module.css @@ -47,6 +47,7 @@ text-align: center; justify-content: center; margin-bottom: var(--ds-spacing-3); + margin-top: var(--ds-spacing-8); } .content {