Skip to content

Commit

Permalink
🎨 Oppdatert ikonside med forslag fra Slack (#2164)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KenAJoh
KenAJoh authored Aug 15, 2023
1 parent 48d6f14 commit 1cd8ac9
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 67 deletions.
114 changes: 66 additions & 48 deletions aksel.nav.no/website/components/website-modules/icon-page/Page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useMedia } from "@/utils";
import * as Icons from "@navikt/aksel-icons";
import meta from "@navikt/aksel-icons/metadata";
import { Heading, Modal, Search, ToggleGroup } from "@navikt/ds-react";
import { HGrid, Heading, Modal, Search, ToggleGroup } from "@navikt/ds-react";
import cl from "clsx";
import Footer from "components/layout/footer/Footer";
import { Header } from "components/layout/header/Header";
Expand Down Expand Up @@ -76,6 +76,12 @@ export const IconPage = ({ name }: { name: string }) => {
hideModal && Modal.setAppElement("#__next");
}, [hideModal]);

const subCategoryWordLength = Math.max(
...categories.map((cat) =>
Math.max(...cat.sub_categories.map((sub) => sub.sub_category.length))
)
);

return (
<>
<Head>
Expand Down Expand Up @@ -177,56 +183,68 @@ export const IconPage = ({ name }: { name: string }) => {
>
{cat.category}
</Heading>
<div className="grid w-full gap-2">
<div className="grid w-full">
{cat.sub_categories.map((sub) => {
return (
<div key={sub.sub_category}>
<Heading
level="3"
size="xsmall"
className="text-text-subtle mb-1"
<div
key={sub.sub_category}
className="border-t-border-subtle border-t py-2"
>
<HGrid
columns={{
xs: "1fr",
md: `${subCategoryWordLength}ch 1fr`,
}}
gap={{ xs: "0", md: "2" }}
>
{sub.sub_category}
</Heading>
<div className="gap-05 flex flex-wrap">
{sub.icons.map((i) => {
const T = Icons[`${i.id}Icon`];
if (T === undefined) {
return null;
}
return (
<Link
href={`/ikoner/${i.id}`}
scroll={false}
key={i.id}
prefetch={false}
id={i.id}
tabIndex={0}
ref={(el) => {
if (name === i.id) {
focusRef.current = el;
}
}}
className={cl(
"hover:bg-surface-hover bg-surface-default active:bg-surface-neutral-subtle-hover group relative grid aspect-square w-11 shrink-0 place-items-center rounded focus:outline-none focus:ring-blue-800 focus-visible:ring-2",
{
"from-surface-selected bg-surface-selected ring-border-alt-3 z-10 bg-gradient-to-br to-teal-50 ring-1":
i.id === name,
}
)}
>
<span className="navds-sr-only">
{i.name}
</span>
<T
className="text-3xl"
aria-hidden
alt=""
/>
</Link>
);
})}
</div>
<Heading
level="3"
size="xsmall"
className="text-text-subtle leading-[44px]"
>
{sub.sub_category}
</Heading>

<div className="gap-05 flex flex-wrap">
{sub.icons.map((i) => {
const T = Icons[`${i.id}Icon`];
if (T === undefined) {
return null;
}
return (
<Link
href={`/ikoner/${i.id}`}
scroll={false}
key={i.id}
prefetch={false}
id={i.id}
tabIndex={0}
ref={(el) => {
if (name === i.id) {
focusRef.current = el;
}
}}
className={cl(
"hover:bg-surface-neutral-subtle-hover bg-surface-subtle active:bg-surface-neutral-subtle-hover group relative grid aspect-square w-11 shrink-0 place-items-center rounded focus:outline-none focus:ring-blue-800 focus-visible:ring-2",
{
"from-surface-selected bg-surface-selected ring-border-alt-3 z-10 bg-gradient-to-br to-teal-50 ring-1":
i.id === name,
}
)}
>
<span className="navds-sr-only">
{i.name}
</span>
<T
className="text-3xl"
aria-hidden
alt=""
/>
</Link>
);
})}
</div>
</HGrid>
</div>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion aksel.nav.no/website/components/website-modules/icon-page/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const IconSidebar = ({
href="/ikoner"
scroll={false}
prefetch={false}
className="min-h-11 hover:bg-surface-hover focus-visible:shadow-focus active:bg-surface-neutral-subtle-hover absolute right-2 top-2 grid aspect-square place-content-center rounded text-xl focus:outline-none"
className="min-h-11 hover:bg-surface-hover focus-visible:shadow-focus active:bg-surface-neutral-subtle-hover absolute right-2 top-4 grid aspect-square place-content-center rounded text-xl focus:outline-none"
onClick={() => {
focusRef?.current?.focus?.();
}}
Expand Down
36 changes: 18 additions & 18 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3342,7 +3342,7 @@ __metadata:
languageName: node
linkType: hard

"@navikt/aksel-icons@^4.11.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
"@navikt/aksel-icons@^4.11.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
version: 0.0.0-use.local
resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
dependencies:
Expand All @@ -3369,8 +3369,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
dependencies:
"@navikt/ds-css": ^4.11.0
"@navikt/ds-tokens": ^4.11.0
"@navikt/ds-css": ^4.11.1
"@navikt/ds-tokens": ^4.11.1
"@types/jest": ^29.0.0
concurrently: 7.2.1
copyfiles: 2.4.1
Expand All @@ -3387,7 +3387,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@navikt/aksel@workspace:@navikt/aksel"
dependencies:
"@navikt/ds-css": 4.11.0
"@navikt/ds-css": 4.11.1
"@types/inquirer": ^9.0.3
"@types/jest": ^29.0.0
axios: 1.3.6
Expand All @@ -3411,11 +3411,11 @@ __metadata:
languageName: unknown
linkType: soft

"@navikt/ds-css@*, @navikt/[email protected].0, @navikt/ds-css@^4.11.0, @navikt/ds-css@workspace:@navikt/core/css":
"@navikt/ds-css@*, @navikt/[email protected].1, @navikt/ds-css@^4.11.1, @navikt/ds-css@workspace:@navikt/core/css":
version: 0.0.0-use.local
resolution: "@navikt/ds-css@workspace:@navikt/core/css"
dependencies:
"@navikt/ds-tokens": ^4.11.0
"@navikt/ds-tokens": ^4.11.1
cssnano: 6.0.0
fast-glob: 3.2.11
lodash: 4.17.21
Expand All @@ -3428,12 +3428,12 @@ __metadata:
languageName: unknown
linkType: soft

"@navikt/ds-react@*, @navikt/[email protected].0, @navikt/ds-react@^4.11.0, @navikt/ds-react@workspace:@navikt/core/react":
"@navikt/ds-react@*, @navikt/[email protected].1, @navikt/ds-react@^4.11.1, @navikt/ds-react@workspace:@navikt/core/react":
version: 0.0.0-use.local
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
dependencies:
"@floating-ui/react": 0.24.1
"@navikt/aksel-icons": ^4.11.0
"@navikt/aksel-icons": ^4.11.1
"@radix-ui/react-tabs": 1.0.0
"@radix-ui/react-toggle-group": 1.0.0
"@testing-library/dom": 8.13.0
Expand Down Expand Up @@ -3469,11 +3469,11 @@ __metadata:
languageName: unknown
linkType: soft

"@navikt/ds-tailwind@^4.11.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
"@navikt/ds-tailwind@^4.11.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
version: 0.0.0-use.local
resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
dependencies:
"@navikt/ds-tokens": ^4.11.0
"@navikt/ds-tokens": ^4.11.1
"@types/jest": ^29.0.0
color: 4.2.3
jest: ^29.0.0
Expand All @@ -3484,7 +3484,7 @@ __metadata:
languageName: unknown
linkType: soft

"@navikt/ds-tokens@^4.11.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
"@navikt/ds-tokens@^4.11.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
version: 0.0.0-use.local
resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
dependencies:
Expand Down Expand Up @@ -7853,11 +7853,11 @@ __metadata:
version: 0.0.0-use.local
resolution: "aksel.nav.no@workspace:aksel.nav.no"
dependencies:
"@navikt/aksel-icons": ^4.11.0
"@navikt/ds-css": ^4.11.0
"@navikt/ds-react": ^4.11.0
"@navikt/ds-tailwind": ^4.11.0
"@navikt/ds-tokens": ^4.11.0
"@navikt/aksel-icons": ^4.11.1
"@navikt/ds-css": ^4.11.1
"@navikt/ds-react": ^4.11.1
"@navikt/ds-tailwind": ^4.11.1
"@navikt/ds-tokens": ^4.11.1
prettier-plugin-tailwindcss: ^0.2.3
languageName: unknown
linkType: soft
Expand Down Expand Up @@ -21818,8 +21818,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "shadow-dom@workspace:examples/shadow-dom"
dependencies:
"@navikt/ds-css": 4.11.0
"@navikt/ds-react": 4.11.0
"@navikt/ds-css": 4.11.1
"@navikt/ds-react": 4.11.1
"@types/react": ^18.0.0
"@types/react-dom": ^18.0.0
"@vitejs/plugin-react": ^3.1.0
Expand Down

0 comments on commit 1cd8ac9

Please sign in to comment.