Skip to content

Commit

Permalink
Justering av kodeeksempler for Table (#2517)
Browse files Browse the repository at this point in the history
  • Loading branch information
@HalvorHaugan
HalvorHaugan authored Nov 28, 2023
1 parent 138c452 commit 1bdebfd
Show file tree
Hide file tree
Showing 12 changed files with 283 additions and 112 deletions.
2 changes: 1 addition & 1 deletion @navikt/core/react/src/table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export interface TableType
* <Table.Header>
* <Table.Row>
* <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
* <Table.HeaderCell scope="col">Fødseslnr.</Table.HeaderCell>
* <Table.HeaderCell scope="col">Fødselsnr.</Table.HeaderCell>
* <Table.HeaderCell scope="col">Start</Table.HeaderCell>
* </Table.Row>
* </Table.Header>
Expand Down
202 changes: 100 additions & 102 deletions aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
import cl from "clsx";
import { useRouter } from "next/router";
import { useEffect, useRef, useState } from "react";
import { Sandbox } from "./parts/Sandbox";
import { CodeSandbox } from "./parts/CodeSandbox";
import { Sandbox } from "./parts/Sandbox";

const iframePadding = 192;
const iframeId = "example-iframe";
Expand Down Expand Up @@ -98,10 +98,10 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {

return (
<div>
<div className="mb-5 max-w-xl">
<Chips>
{node.dir.filer.map((fil) => {
return (
{node.dir.filer.length > 1 && (
<div className="mb-5 max-w-xl">
<Chips>
{node.dir.filer.map((fil) => (
<Chips.Toggle
checkmark={false}
key={fil._key}
Expand All @@ -119,119 +119,117 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
>
{fixName(fil.title)}
</Chips.Toggle>
);
))}
</Chips>
</div>
)}
{node.dir.filer.map((fil) => (
<div
key={fil._key}
className={cl({
visible: active === fil.navn,
hidden: active !== fil.navn,
})}
</Chips>
</div>
{node.dir.filer.map((fil) => {
return (
<div
key={fil._key}
className={cl({
visible: active === fil.navn,
hidden: active !== fil.navn,
})}
>
{fil?.description && (
<BodyLong className="mb-2">{fil.description}</BodyLong>
)}

{active === fil.navn && (
<>
<div
>
{fil?.description && (
<BodyLong className="mb-2">{fil.description}</BodyLong>
)}

{active === fil.navn && (
<>
<div
className={cl(
"overflow-hidden rounded-t-lg border border-b-0 border-gray-300 ",
{
"relative animate-pulse": unloaded,
"bg-gray-50": !unloaded,
}
)}
>
<iframe
src={`/${demoVariant}/${node.dir.title}/${fil.navn.replace(
".tsx",
""
)}`}
height={frameState}
onLoad={() => handleExampleLoad()}
id={iframeId}
aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
className={cl(
"overflow-hidden rounded-t-lg border border-b-0 border-gray-300 ",
"min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
{
"relative animate-pulse": unloaded,
"bg-gray-50": !unloaded,
invisible: unloaded,
}
)}
>
<iframe
src={`/${demoVariant}/${node.dir.title}/${fil.navn.replace(
".tsx",
""
)}`}
height={frameState}
onLoad={() => handleExampleLoad()}
id={iframeId}
aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
className={cl(
"min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
{
invisible: unloaded,
}
)}
title="Kode-eksempler"
ref={iframeRef}
/>
{unloaded && (
<div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
<div className="grid w-3/5 gap-2">
<div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
<div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
</div>
</div>
)}
</div>
<div className="mb-2 rounded-b-lg border border-gray-300 p-1">
<HStack gap="4" justify="space-between">
<div className="hidden sm:block">
<HStack gap="2">
<Button
variant="tertiary-neutral"
size="small"
icon={
<MobileSmallIcon title="Sett eksempel til mobilbredde" />
}
onClick={() =>
(iframeRef.current.style.width = "360px")
}
/>

<Button
variant="tertiary-neutral"
size="small"
icon={
<LaptopIcon title="Sett eksempel til desktopbredde" />
}
onClick={() => (iframeRef.current.style.width = "")}
/>
</HStack>
title="Kode-eksempler"
ref={iframeRef}
/>
{unloaded && (
<div className="absolute inset-0 mx-auto flex flex-col items-center justify-center gap-2">
<div className="grid w-3/5 gap-2">
<div className="bg-surface-neutral-subtle h-6 w-2/3 rounded-xl" />
<div className="bg-surface-neutral-subtle h-16 w-full rounded-xl" />
</div>

</div>
)}
</div>
<div className="mb-2 rounded-b-lg border border-gray-300 p-1">
<HStack gap="4" justify="space-between">
<div className="hidden sm:block">
<HStack gap="2">
{fil?.sandboxEnabled && (
<Sandbox code={fil?.sandboxBase64} />
)}
<CodeSandbox code={fil.innhold.trim()} />
<Button
variant="tertiary-neutral"
size="small"
icon={
<ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
<MobileSmallIcon title="Sett eksempel til mobilbredde" />
}
onClick={() =>
(iframeRef.current.style.width = "360px")
}
/>

<Button
variant="tertiary-neutral"
size="small"
icon={
<LaptopIcon title="Sett eksempel til desktopbredde" />
}
target="_blank"
className="si-ignore"
as="a"
href={`/${demoVariant}/${
node.dir.title
}/${fil.navn.replace(".tsx", "")}`}
onClick={() => (iframeRef.current.style.width = "")}
/>
</HStack>
</div>

<HStack gap="2">
{fil?.sandboxEnabled && (
<Sandbox code={fil?.sandboxBase64} />
)}
<CodeSandbox code={fil.innhold.trim()} />
<Button
variant="tertiary-neutral"
size="small"
icon={
<ExternalLinkIcon title="Åpne eksempel i nytt vindu" />
}
target="_blank"
className="si-ignore"
as="a"
href={`/${demoVariant}/${
node.dir.title
}/${fil.navn.replace(".tsx", "")}`}
/>
</HStack>
</div>
</HStack>
</div>

<SnippetLazy
node={{
code: { code: fil.innhold.trim(), language: "tsx" },
}}
/>
</>
)}
</div>
);
})}
<SnippetLazy
node={{
code: { code: fil.innhold.trim(), language: "tsx" },
}}
/>
</>
)}
</div>
))}
</div>
);
};
Expand Down
94 changes: 94 additions & 0 deletions aksel.nav.no/website/pages/eksempler/table-menu/default.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { withDsExample } from "@/web/examples/withDsExample";
import { MenuElipsisHorizontalCircleIcon } from "@navikt/aksel-icons";
import { Button, Dropdown, HStack, Link, Table } from "@navikt/ds-react";

const Example = () => {
return (
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell scope="col">Navn</Table.HeaderCell>
<Table.HeaderCell scope="col" align="right">
Prosent
</Table.HeaderCell>
<Table.HeaderCell scope="col" align="right">
Handlinger
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{data.map(({ name, percent }, i) => (
<Table.Row key={i + name}>
<Table.HeaderCell scope="row">{name}</Table.HeaderCell>
<Table.DataCell align="right">{percent}&nbsp;%</Table.DataCell>
<Table.DataCell align="right">
<Dropdown defaultOpen={i === 0}>
<HStack justify="end">
<Button
as={Dropdown.Toggle}
icon={<MenuElipsisHorizontalCircleIcon title="Meny" />}
size="small"
variant="tertiary"
/>
</HStack>
<Dropdown.Menu>
<Dropdown.Menu.GroupedList>
<Dropdown.Menu.GroupedList.Item onClick={() => {}}>
Legg på vent
</Dropdown.Menu.GroupedList.Item>
<Dropdown.Menu.GroupedList.Item onClick={() => {}}>
Meld av
</Dropdown.Menu.GroupedList.Item>
<Dropdown.Menu.Divider />
<Dropdown.Menu.GroupedList.Item
as={Link}
href="#"
underline={false}
>
Annuller
</Dropdown.Menu.GroupedList.Item>
</Dropdown.Menu.GroupedList>
</Dropdown.Menu>
</Dropdown>
</Table.DataCell>
</Table.Row>
))}
</Table.Body>
</Table>
);
};

const data = [
{
name: "Jakobsen, Markus",
percent: 100,
},
{
name: "Halvorsen, Mari",
percent: 50,
},
{
name: "Christiansen, Mathias",
percent: 95,
},
{
name: "Fredriksen, Leah",
percent: 100,
},
{
name: "Evensen, Jonas",
percent: 9,
},
];

// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE
export default withDsExample(Example);

/* Storybook story */
export const Demo = {
render: Example,
};

export const args = {
index: 0,
};
Loading

0 comments on commit 1bdebfd

Please sign in to comment.