From babe6d52e01a9b357be1667887496bf904ad9d3e Mon Sep 17 00:00:00 2001 From: Betsy Carina Traran Date: Mon, 17 Feb 2025 16:42:04 +0100 Subject: [PATCH 1/7] Kontaktinfo-panel --- .../js/src/assets/icons/custom/SlackLogo.svg | 14 ++++ .../src/components/feedback/Forbedring.less | 2 +- .../js/src/components/feedback/Forbedring.tsx | 27 +++++-- .../components/feedback/KontaktinfoPanel.tsx | 75 +++++++++++++++++++ .../main/js/src/components/ui/icon/Icon.tsx | 4 + 5 files changed, 116 insertions(+), 6 deletions(-) create mode 100644 apps/dolly-frontend/src/main/js/src/assets/icons/custom/SlackLogo.svg create mode 100644 apps/dolly-frontend/src/main/js/src/components/feedback/KontaktinfoPanel.tsx diff --git a/apps/dolly-frontend/src/main/js/src/assets/icons/custom/SlackLogo.svg b/apps/dolly-frontend/src/main/js/src/assets/icons/custom/SlackLogo.svg new file mode 100644 index 00000000000..38fb6500dd5 --- /dev/null +++ b/apps/dolly-frontend/src/main/js/src/assets/icons/custom/SlackLogo.svg @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.less b/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.less index 2a10e6f547c..3abcc2684e2 100644 --- a/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.less +++ b/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.less @@ -18,7 +18,7 @@ } .btn-modal:hover { - background-color: @fokusFarge; + background-color: @color-darkblue; } .modal-content { diff --git a/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.tsx b/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.tsx index c3149085888..8d6bfc4b759 100644 --- a/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.tsx +++ b/apps/dolly-frontend/src/main/js/src/components/feedback/Forbedring.tsx @@ -6,20 +6,37 @@ import useBoolean from '@/utils/hooks/useBoolean' import Icon from '@/components/ui/icon/Icon' import { ErrorBoundary } from '@/components/ui/appError/ErrorBoundary' import { TestComponentSelectors } from '#/mocks/Selectors' +import { Popover } from '@navikt/ds-react' +import { useRef, useState } from 'react' +import { KontaktinfoPanel } from '@/components/feedback/KontaktinfoPanel' export const Forbedring = () => { - const [isForbedringModalOpen, openForbedringModal, closeForbedringModal] = useBoolean(false) + const buttonRef = useRef(null) + const [openState, setOpenState] = useState(false) + const [isKontaktskjemaOpen, openKontaktskjema, closeKontaktskjema] = useBoolean(false) return ( - {isForbedringModalOpen && } + setOpenState(false)} + anchorEl={buttonRef.current} + arrow={false} + placement={'top-end'} + style={{ border: 'none' }} + > + + + {isKontaktskjemaOpen && } ) } diff --git a/apps/dolly-frontend/src/main/js/src/components/feedback/KontaktinfoPanel.tsx b/apps/dolly-frontend/src/main/js/src/components/feedback/KontaktinfoPanel.tsx new file mode 100644 index 00000000000..2dc3a973741 --- /dev/null +++ b/apps/dolly-frontend/src/main/js/src/components/feedback/KontaktinfoPanel.tsx @@ -0,0 +1,75 @@ +import { Button, VStack } from '@navikt/ds-react' +import styled from 'styled-components' +import { ChatElipsisIcon, EnvelopeClosedIcon } from '@navikt/aksel-icons' +import '@/styles/variables.less' +import Icon from '@/components/ui/icon/Icon' + +const Panel = styled.div` + background-color: #0067c5; + color: white; + padding: 5px 20px 25px 20px; + border-radius: 8px; + width: 300px; +` + +const Header = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: -15px; + + h2 { + font-size: 1.8em; + } +` + +export const KontaktinfoPanel = ({ setOpenState, openKontaktskjema }: any) => { + const closePanel = () => setOpenState(false) + + return ( + +
+

Kontakt oss

+ +
+

+ Team Dolly er tilgjengelige på Slack (#dolly), e-post (dolly@nav.no), og via kontaktskjema. +

+ + + + + + + + + + + ) +} diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/icon/Icon.tsx b/apps/dolly-frontend/src/main/js/src/components/ui/icon/Icon.tsx index 1323ff82796..dc92e80e0e0 100644 --- a/apps/dolly-frontend/src/main/js/src/components/ui/icon/Icon.tsx +++ b/apps/dolly-frontend/src/main/js/src/components/ui/icon/Icon.tsx @@ -74,6 +74,7 @@ import CheckCircle from '@/assets/icons/custom/CheckCircle.svg?raw' import Dolly from '@/assets/icons/custom/Dolly.svg?raw' import DollyPanic from '@/assets/icons/custom/DollyPanic.svg?raw' import TenorLogo from '@/assets/icons/custom/TenorLogo.svg?raw' +import SlackLogo from '@/assets/icons/custom/SlackLogo.svg?raw' import Playwright from '@/assets/img/playwright.png' import './Icon.less' @@ -88,6 +89,7 @@ export const icons = { dollyPanic: DollyPanic, playwright: Playwright, tenor: TenorLogo, + slack: SlackLogo, trashcan: TrashIcon, 'add-circle': PlusCircleIcon, @@ -109,6 +111,7 @@ export const icons = { synchronize: ArrowsCirclepathIcon, kryss: XMarkIcon, 'chevron-down': ChevronDownIcon, + collapse: ChevronDownIcon, 'chevron-up': ChevronUpIcon, 'chevron-down-double-circle': ChevronDownDoubleCircleIcon, 'chevron-up-double-circle': ChevronUpDoubleCircleIcon, @@ -209,6 +212,7 @@ const Icon = ({ 'dollyPanic', 'playwright', 'tenor', + 'slack', ] if (halvannenRemIkoner.includes(kind)) { From 09ea1c71649f8099c12e0087d55b9793927c06ec Mon Sep 17 00:00:00 2001 From: Betsy Carina Traran Date: Thu, 20 Feb 2025 10:14:26 +0100 Subject: [PATCH 2/7] Omskrivning kontaktskjema --- .../src/main/js/src/app/App.tsx | 4 +-- .../{ForbedringModal.tsx => KontaktModal.tsx} | 35 ++++++++++--------- .../{Forbedring.less => Kontaktinfo.less} | 2 +- .../{Forbedring.tsx => Kontaktinfo.tsx} | 8 ++--- 4 files changed, 26 insertions(+), 23 deletions(-) rename apps/dolly-frontend/src/main/js/src/components/feedback/{ForbedringModal.tsx => KontaktModal.tsx} (69%) rename apps/dolly-frontend/src/main/js/src/components/feedback/{Forbedring.less => Kontaktinfo.less} (96%) rename apps/dolly-frontend/src/main/js/src/components/feedback/{Forbedring.tsx => Kontaktinfo.tsx} (85%) diff --git a/apps/dolly-frontend/src/main/js/src/app/App.tsx b/apps/dolly-frontend/src/main/js/src/app/App.tsx index 9ed3c97eb7b..69989a915be 100644 --- a/apps/dolly-frontend/src/main/js/src/app/App.tsx +++ b/apps/dolly-frontend/src/main/js/src/app/App.tsx @@ -5,7 +5,7 @@ import Loading from '@/components/ui/loading/Loading' import allRoutes from '@/allRoutes' import { VarslingerModal } from '@/components/varslinger/VarslingerModal' import './App.less' -import { Forbedring } from '@/components/feedback/Forbedring' +import { Kontaktinfo } from '@/components/feedback/Kontaktinfo' import ToastConnector from '@/components/ui/toast/ToastConnector' import { Breadcrumbs } from '@/components/layout/breadcrumb/Breadcrumb' import { useBrukerProfil, useCurrentBruker } from '@/utils/hooks/useBruker' @@ -74,7 +74,7 @@ export const App = () => { - + ) diff --git a/apps/dolly-frontend/src/main/js/src/components/feedback/ForbedringModal.tsx b/apps/dolly-frontend/src/main/js/src/components/feedback/KontaktModal.tsx similarity index 69% rename from apps/dolly-frontend/src/main/js/src/components/feedback/ForbedringModal.tsx rename to apps/dolly-frontend/src/main/js/src/components/feedback/KontaktModal.tsx index 942c3c79550..a23ce53324b 100644 --- a/apps/dolly-frontend/src/main/js/src/components/feedback/ForbedringModal.tsx +++ b/apps/dolly-frontend/src/main/js/src/components/feedback/KontaktModal.tsx @@ -12,19 +12,19 @@ import { Textarea } from '@navikt/ds-react' import { Logger } from '@/logger/Logger' import { TestComponentSelectors } from '#/mocks/Selectors' -export const ForbedringModal = ({ closeModal }) => { +export const KontaktModal = ({ closeModal }) => { const { brukerBilde } = useBrukerProfilBilde() const { currentBruker } = useCurrentBruker() const MAX_LENGTH = 2000 const [uuid] = useState(_uuid()) - const [forbedring, setForbedring] = useState('') + const [melding, setMelding] = useState('') const [isAnonym, toggleAnonym] = useToggle(false) - const sendForbedring = () => { + const sendMelding = () => { Logger.log({ - event: `Ønsket forbedring fra Dollybruker`, - message: forbedring, + event: `Melding fra Dollybruker`, + message: melding, uuid: uuid, isAnonym: isAnonym, brukerType: currentBruker.brukertype, @@ -35,13 +35,16 @@ export const ForbedringModal = ({ closeModal }) => { return ( -

Ønske om forbedring eller ny funksjonalitet

+

Kontakt team Dolly


+

+ Her kan du sende oss tilbakemeldinger, komme med ønsker eller forslag til ny + funksjonalitet, eller melde fra om feil og mangler. NB! Om du ønsker svar på meldingen kan + du ikke velge å være anonym. +

{isAnonym ? ( -
- -
+ ) : ( Profilbilde )} @@ -49,12 +52,12 @@ export const ForbedringModal = ({ closeModal }) => {