Skip to content

Commit

Permalink
Oppdaterte design på EndreSamarbeidModal.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sstensby
sstensby committed Nov 6, 2024
1 parent 5baa865 commit ea3fb44
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 51 deletions.
66 changes: 30 additions & 36 deletions client/src/Pages/Virksomhet/Samarbeid/EndreSamarbeidModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@ import { useHentSamarbeidshistorikk } from "../../../api/lydia-api/virksomhet";
import { useHentAktivSakForVirksomhet } from "../../../api/lydia-api/virksomhet";
import { nyHendelsePåSak } from "../../../api/lydia-api/sak";
import styled from "styled-components";
import { StyledModal } from "../../../components/Modal/StyledModal";
import { TrashIcon } from "@navikt/aksel-icons";
import { useHentSamarbeid } from "../../../api/lydia-api/spørreundersøkelse";
import { StyledSamarbeidModal } from "./NyttSamarbeidModal";

export const ModalBodyInnholdGrid = styled.div`
display: grid;
grid-template-columns: 1fr min-content;
export const ModalBodyInnholdFlex = styled.div`
display: flex;
flex-direction: column;
gap: 0.5rem;
`;

Expand All @@ -40,6 +40,11 @@ export const DetaljerWrapper = styled.div<{ $disabled?: boolean }>`
opacity: ${({ $disabled }) => ($disabled ? 0.25 : 1)};
`;

const SquareButton = styled(Button)`
width: 3rem;
height: 3rem;
`;

interface EndreSamarbeidModalProps {
open: boolean;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
Expand Down Expand Up @@ -122,7 +127,7 @@ export const EndreSamarbeidModal = ({
};

return (
<StyledModal
<StyledSamarbeidModal
open={open}
onClose={() => {
avbrytEndring();
Expand All @@ -134,16 +139,10 @@ export const EndreSamarbeidModal = ({
<Heading size="medium">Administrer samarbeid</Heading>
</Modal.Header>
<Modal.Body>
<ModalBodyInnholdGrid>
<BodyShort
style={{
gridColumn: "1 / span 2",
marginBottom: "0.75rem",
}}
>
Her kan du endre navn på samarbeidet <br />
&quot;
{defaultNavnHvisTomt(samarbeid.navn)}&quot;
<ModalBodyInnholdFlex>
<BodyShort>
Her kan du endre navn på samarbeidet &quot;{defaultNavnHvisTomt(samarbeid.navn)}&quot;<br />
Samarbeidsnavn skal beskrive den avdelingen eller gruppen man samarbeider med. Navnet må være det samme som virksomheten bruker selv.
</BodyShort>
<TextFieldStyled
maxLength={MAX_LENGDE_SAMARBEIDSNAVN}
Expand All @@ -157,29 +156,11 @@ export const EndreSamarbeidModal = ({
}}
hideLabel
/>
<Button
icon={
<TrashIcon
focusable="true"
title={`Slett "${samarbeid.navn}"`}
fontSize="2rem"
/>
}
size={"small"}
variant="tertiary"
title={`Slett "${samarbeid.navn}"`}
onClick={slettSamarbeid}
/>

<DetaljerWrapper>
<Detail>Husk, aldri skriv personopplysninger.</Detail>
<Detail><b>Husk, aldri skriv personopplysninger.</b></Detail>
<Detail>{antallTegn}/{MAX_LENGDE_SAMARBEIDSNAVN} tegn</Detail>
</DetaljerWrapper>
<Detail style={{ gridColumn: "1", marginTop: "1.25rem" }}>
Navnet kan vises på <i>Min Side Arbeidsgiver </i>
og må gjenspeile det virksomheten bruker selv.
</Detail>
</ModalBodyInnholdGrid>
</ModalBodyInnholdFlex>
</Modal.Body>
<Modal.Footer>
<Button
Expand All @@ -199,6 +180,19 @@ export const EndreSamarbeidModal = ({
>
Avbryt
</Button>
<SquareButton
icon={
<TrashIcon
focusable="true"
title={`Slett "${samarbeid.navn}"`}
fontSize="2rem"
/>
}
size={"small"}
variant="danger"
title={`Slett "${samarbeid.navn}"`}
onClick={slettSamarbeid}
/>
{lagreNavnVellykket && (
<div style={{ display: "flex", alignItems: "center" }}>
<Alert inline variant="success" size="small">
Expand All @@ -207,6 +201,6 @@ export const EndreSamarbeidModal = ({
</div>
)}
</Modal.Footer>
</StyledModal>
</StyledSamarbeidModal>
);
};
28 changes: 13 additions & 15 deletions client/src/Pages/Virksomhet/Samarbeid/NyttSamarbeidModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { IASak } from "../../../domenetyper/domenetyper";
import { BodyShort, Button, Checkbox, Detail, Heading, Modal } from "@navikt/ds-react";
import { StyledModal } from "../../../components/Modal/StyledModal";
import React, { useState } from "react";

import { useHentSamarbeidshistorikk } from "../../../api/lydia-api/virksomhet";
Expand All @@ -9,12 +8,13 @@ import { nyHendelsePåSak } from "../../../api/lydia-api/sak";
import {
DetaljerWrapper,
MAX_LENGDE_SAMARBEIDSNAVN,
ModalBodyInnholdGrid,
ModalBodyInnholdFlex,
TextFieldStyled,
} from "./EndreSamarbeidModal";
import { useNavigate } from "react-router-dom";
import { useHentSamarbeid } from "../../../api/lydia-api/spørreundersøkelse";
import { Virksomhet } from "../../../domenetyper/virksomhet";
import styled from "styled-components";

interface NyttSamarbeidProps {
iaSak: IASak;
Expand All @@ -23,6 +23,11 @@ interface NyttSamarbeidProps {
virksomhet: Virksomhet;
}

export const StyledSamarbeidModal = styled(Modal)`
max-width: 42rem;
width: 100%;
`;


export const NyttSamarbeidModal = ({
iaSak,
Expand Down Expand Up @@ -95,7 +100,7 @@ export const NyttSamarbeidModal = ({
}, [åpen]);

return (
<StyledModal
<StyledSamarbeidModal
open={åpen}
onClose={lukkModal}
width={"small"}
Expand All @@ -105,15 +110,13 @@ export const NyttSamarbeidModal = ({
<Heading size="medium">Opprett nytt samarbeid</Heading>
</Modal.Header>
<Modal.Body>
<ModalBodyInnholdGrid>
<ModalBodyInnholdFlex>
<BodyShort
style={{
gridColumn: "1 / span 2",
marginBottom: "0.75rem",
}}
>
Her kan du opprette og navngi ulike samarbeid med
virksomheten.
Samarbeidsnavn skal beskrive den avdelingen eller gruppen man samarbeider med. Navnet må være det samme som virksomheten bruker selv. Er det bare ett samarbeid huker du av for <i>Bruk virksomhetens navn</i>.
</BodyShort>
{
kanBrukeVirksomhetsnavn && (
Expand All @@ -131,7 +134,6 @@ export const NyttSamarbeidModal = ({
}
<div
style={{
gridColumn: "1 / span 2",
marginBottom: "0.25rem",
}}
>
Expand All @@ -156,14 +158,10 @@ export const NyttSamarbeidModal = ({
/>
</div>
<DetaljerWrapper $disabled={brukVirksomhetsnavn}>
<Detail>Husk, aldri skriv personopplysninger.</Detail>
<Detail><b>Husk, aldri skriv personopplysninger.</b></Detail>
<Detail>{antallTegn}/{MAX_LENGDE_SAMARBEIDSNAVN} tegn</Detail>
</DetaljerWrapper>
<Detail style={{ gridColumn: "1", marginTop: "1.25rem" }}>
Navnet kan vises på <i>Min Side Arbeidsgiver </i>
og må gjenspeile det virksomheten bruker selv.
</Detail>
</ModalBodyInnholdGrid>
</ModalBodyInnholdFlex>
</Modal.Body>
<Modal.Footer>
<Button variant={"primary"} onClick={nyttSamarbeid}>
Expand All @@ -173,6 +171,6 @@ export const NyttSamarbeidModal = ({
Avbryt
</Button>
</Modal.Footer>
</StyledModal>
</StyledSamarbeidModal>
);
};

0 comments on commit ea3fb44

Please sign in to comment.