Endret en del av dolly komponenter og ikoner til å benytte designbibl…

…ioteket istedenfor egne varianter Fikset på breddevisningen dersom man har veldig høy oppløsning Fikset kalenderkomponent til at kalender ikon ikke absorberer klikk, men heller åpner datepicker
navikt · Sep 5, 2023 · c4ed247 · c4ed247
1 parent a7d27b1
commit c4ed247
Show file tree

Hide file tree

Showing 23 changed files with 373 additions and 369 deletions.
diff --git a/apps/dolly-frontend/src/main/js/package-lock.json b/apps/dolly-frontend/src/main/js/package-lock.json
diff --git a/apps/dolly-frontend/src/main/js/src/app/App.less b/apps/dolly-frontend/src/main/js/src/app/App.less
@@ -3,7 +3,16 @@
 main {
   width: 100%;
   padding: @page-padding;
-  max-width: @page-max-width;
+  max-width: 960px;
+
+  @media screen and (min-width: 2000px) {
+    max-width: 1400px;
+  }
+
+  @media screen and (min-width: 3000px) {
+    max-width: 2000px;
+  }
+
   margin: 0 auto;
 }
 

diff --git a/...ly-frontend/src/main/js/src/components/bestillingsveileder/startModal/NyIdent/NyIdent.tsx b/...ly-frontend/src/main/js/src/components/bestillingsveileder/startModal/NyIdent/NyIdent.tsx
@@ -131,7 +131,7 @@ export const NyIdent = ({ brukernavn, onAvbryt, onSubmit }: NyBestillingProps) =
 								</Alert>
 							)}
 							<div className="mal-admin">
-								<Button kind="designsystem-maler">
+								<Button kind="designsystem-maler" fontSize={'1.2rem'}>
 									<NavLink to="/minside">Administrer maler</NavLink>
 								</Button>
 							</div>

diff --git a/...tend/src/main/js/src/components/bestillingsveileder/stegVelger/Navigation/Navigation.less b/...tend/src/main/js/src/components/bestillingsveileder/stegVelger/Navigation/Navigation.less
@@ -1,31 +1,34 @@
 @import (reference) '@/styles/variables.less';
 
 .step-navknapper-wrapper {
-	background-color: @color-bg-grey;
-	border-top: 1px solid @color-bg-grey-border;
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 2;
+  background-color: @color-bg-grey;
+  border-top: 1px solid @color-bg-grey-border;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
 }
 
 .step-navknapper {
-	max-width: @page-max-width;
-	margin: 0 auto;
-	display: flex;
-	flex-direction: row;
-	padding: 10px 20px;
+  max-width: 960px;
+  @media screen and (min-width: 2000px) {
+    max-width: 65vh;
+  }
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  padding: 10px 20px;
 
-	> button {
-		margin-right: 10px;
-	}
+  > button {
+    margin-right: 10px;
+  }
 
-	&--right {
-		margin-left: auto;
+  &--right {
+    margin-left: auto;
 
-		:not(:last-child) {
-			margin-right: 5px;
-		}
-	}
+    :not(:last-child) {
+      margin-right: 5px;
+    }
+  }
 }
diff --git a/apps/dolly-frontend/src/main/js/src/components/rating/ThumbsRating.less b/apps/dolly-frontend/src/main/js/src/components/rating/ThumbsRating.less
@@ -8,16 +8,6 @@
   }
 
   &__icon {
-    &__left {
-      padding-top: 3px;
-      position: relative;
-      bottom: 3px;
-    }
-
-    &__right {
-      padding-top: 3px;
-      position: relative;
-      top: 4px;
-    }
+    padding-top: 3px;
   }
 }
diff --git a/apps/dolly-frontend/src/main/js/src/components/rating/ThumbsRating.tsx b/apps/dolly-frontend/src/main/js/src/components/rating/ThumbsRating.tsx
@@ -41,11 +41,21 @@ interface IconButton {
 
 const ThumpsUp = ({ className }: IconButton) => (
 	// @ts-ignore
-	<Icon className={className} kind="designsystem-thumbs-up" title="tommel opp" size={24} />
+	<Icon
+		className={className}
+		kind="designsystem-thumbs-up"
+		title="tommel opp"
+		fontSize={'1.6rem'}
+	/>
 )
 const ThumpsDown = ({ className }: IconButton) => (
 	// @ts-ignore
-	<Icon className={className} kind="designsystem-thumbs-down" title="tommel ned" size={24} />
+	<Icon
+		className={className}
+		kind="designsystem-thumbs-down"
+		title="tommel ned"
+		fontSize={'1.6rem'}
+	/>
 )
 
 export const ThumbsRating = ({ label, ratingFor, onClick, uuid, children }: ThumbsRatingProps) => {

diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/button/Button.tsx b/apps/dolly-frontend/src/main/js/src/components/ui/button/Button.tsx
@@ -11,6 +11,7 @@ interface Button extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	kind?: string
 	onClick?: () => void
 	iconSize?: number
+	fontSize?: string
 	loading?: boolean
 }
 
@@ -20,6 +21,7 @@ const Button = ({
 	children,
 	className,
 	iconSize = 16,
+	fontSize = '1rem',
 	loading = false,
 	disabled,
 	...rest
@@ -34,7 +36,7 @@ const Button = ({
 	const renderIcon = loading ? (
 		<Loading onlySpinner size={iconSize} />
 	) : kind ? (
-		<Icon size={iconSize} kind={kind} />
+		<Icon size={iconSize} kind={kind} fontSize={fontSize} />
 	) : null
 
 	return (

diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/textInput/TextInput.tsx b/apps/dolly-frontend/src/main/js/src/components/ui/form/inputs/textInput/TextInput.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components'
 import React from 'react'
 
 const StyledIcon = styled(Icon)`
+	pointer-events: none;
 	position: absolute;
 	top: 7px;
 	right: 7px;
@@ -29,15 +30,14 @@ export const TextInput = React.forwardRef(
 			feil?: any
 			isDisabled?: boolean
 		},
-		ref
+		ref,
 	) => {
 		const css = cn('skjemaelement__input', className, {
 			'skjemaelement__input--harFeil': props.feil,
 		})
 
 		return (
 			<>
-				{/*@ts-ignore*/}
 				<input
 					ref={ref}
 					disabled={isDisabled}
@@ -46,10 +46,10 @@ export const TextInput = React.forwardRef(
 					placeholder={placeholder}
 					{...props}
 				/>
-				{icon && <StyledIcon size={20} kind={icon} />}
+				{icon && <StyledIcon fontSize={'1.5rem'} kind={icon} />}
 			</>
 		)
-	}
+	},
 )
 
 export const DollyTextInput = (props: {

diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/header/Header.tsx b/apps/dolly-frontend/src/main/js/src/components/ui/header/Header.tsx
@@ -5,7 +5,7 @@ import './header.less'
 
 type HeaderProps = {
 	icon?: string
-	iconSize?: number
+	iconSize?: string
 	className?: string
 	iconClassName?: string
 	children: any
@@ -14,14 +14,14 @@ type HeaderProps = {
 export const Header = ({
 	children,
 	className,
-	icon = 'man',
+	icon = 'designsystem-man',
 	iconClassName,
-	iconSize = 36,
+	iconSize = '2.5rem',
 }: HeaderProps) => {
 	return (
 		<header className={cn('content-header', className)}>
 			<div className={`content-header_icon ${iconClassName}`}>
-				<Icon kind={icon} size={iconSize} />
+				<Icon kind={icon} fontSize={iconSize} />
 			</div>
 			<div className="content-header_content">{children}</div>
 		</header>

diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/header/header.less b/apps/dolly-frontend/src/main/js/src/components/ui/header/header.less
@@ -11,7 +11,7 @@
     background-color: @color-faded-blue;
     display: flex;
     align-items: center;
-    padding: 0 12px;
+    padding: 0 9px;
   }
 
   &_content {

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
@@ -12,17 +12,16 @@ import {
 	Buldings2Icon,
 	Buldings3Icon,
 	CalendarIcon,
+	CandleIcon,
 	ChatElipsisIcon,
 	CheckmarkCircleIcon,
 	ChevronDownIcon,
 	ChevronUpIcon,
 	EarthIcon,
 	EnvelopeClosedIcon,
 	EraserIcon,
-	FigureInwardFillIcon,
 	FigureInwardIcon,
 	FigureOutwardIcon,
-	FileCheckmarkFillIcon,
 	FileCheckmarkIcon,
 	FileCodeIcon,
 	FileLoadingIcon,
@@ -51,14 +50,12 @@ import {
 	PiggybankIcon,
 	PlusCircleIcon,
 	SackKronerIcon,
-	SilhouetteFillIcon,
 	SilhouetteIcon,
 	StarFillIcon,
 	StarIcon,
-	TenancyFillIcon,
 	TenancyIcon,
-	ThumbDownIcon,
-	ThumbUpIcon,
+	ThumbDownFillIcon,
+	ThumbUpFillIcon,
 	TrashIcon,
 	WrenchIcon,
 	XMarkIcon,
@@ -101,25 +98,24 @@ export const icons = {
 	'designsystem-details': InformationSquareIcon,
 	'designsystem-synchronize': ArrowsCirclepathIcon,
 	'designsystem-kryss': XMarkIcon,
-	'chevron-down': ChevronDownIcon,
-	'chevron-up': ChevronUpIcon,
-	'designsystem-thumbs-up': ThumbUpIcon,
-	'designsystem-thumbs-down': ThumbDownIcon,
+	'designsystem-chevron-down': ChevronDownIcon,
+	'designsystem-chevron-up': ChevronUpIcon,
+	'designsystem-thumbs-up': ThumbUpFillIcon,
+	'designsystem-thumbs-down': ThumbDownFillIcon,
 	'designsystem-lock': PadlockLockedIcon,
 	'designsystem-logout': LeaveIcon,
 
-	'designsystem-man': FigureInwardFillIcon,
+	'designsystem-man': FigureInwardIcon,
 	'designsystem-man-light': FigureInwardIcon,
-	'designsystem-man-silhouette': SilhouetteFillIcon,
-	'designsystem-man-silhouette-light': SilhouetteIcon,
+	'designsystem-man-silhouette': SilhouetteIcon,
 	'designsystem-woman': FigureOutwardIcon,
 	'designsystem-person': PersonIcon,
-	'designsystem-group': PersonGroupFillIcon,
+	'designsystem-group': PersonGroupIcon,
 	'designsystem-group-light': PersonGroupIcon,
 	'designsystem-group-dark': PersonGroupFillIcon,
 	'designsystem-locked-group': PadlockLockedIcon,
 	'designsystem-sikkerhetstiltak': PadlockLockedIcon,
-	'designsystem-bestilling': FileCheckmarkFillIcon,
+	'designsystem-bestilling': FileCheckmarkIcon,
 	'designsystem-bestilling-light': FileCheckmarkIcon,
 	'designsystem-new-file': FilePlusIcon,
 	'designsystem-maler': FileLoadingIcon,
@@ -132,7 +128,7 @@ export const icons = {
 	'designsystem-adresse': HouseIcon,
 	'designsystem-postadresse': InboxDownIcon,
 	'designsystem-midlertidig-adresse': HourglassIcon,
-	'designsystem-doedsbo': HouseIcon,
+	'designsystem-doedsbo': CandleIcon,
 	'designsystem-krr': EnvelopeClosedIcon,
 	'designsystem-arena': CheckmarkCircleIcon,
 	'designsystem-institusjon': Buldings3Icon,
@@ -154,8 +150,7 @@ export const icons = {
 	'designsystem-vergemaal': PersonGroupIcon,
 	'designsystem-vis-tps-data': MagnifyingGlassIcon,
 	'designsystem-vis-org-data': MagnifyingGlassIcon,
-	'designsystem-organisasjon': TenancyFillIcon,
-	'designsystem-organisasjon-light': TenancyIcon,
+	'designsystem-organisasjon': TenancyIcon,
 	'designsystem-fullmakt': PersonGroupIcon,
 	'designsystem-link': LinkIcon,
 	'designsystem-link-broken': LinkBrokenIcon,

diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/icon/IconItem/IconItem.less b/apps/dolly-frontend/src/main/js/src/components/ui/icon/IconItem/IconItem.less
@@ -1,29 +1,30 @@
 @import (reference) '@/styles/variables.less';
 
 .icon-item {
-	background-color: #e9ecef;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 50px;
-	margin-right: 10px;
-	&--designsystem-man {
-		background-color: #d1f3fc;
-	}
+  background-color: #e9ecef;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 50px;
+  margin-right: 10px;
 
-	&--designsystem-woman {
-		background-color: #f5e9fc;
-	}
+  &--man {
+    background-color: #d1f3fc;
+  }
 
-	&--designsystem-unknown {
-		background-color: #e9ecef;
-	}
+  &--woman {
+    background-color: #f5e9fc;
+  }
 
-	&--designsystem-group {
-		background-color: @color-faded-blue;
-	}
+  &--unknown {
+    background-color: #e9ecef;
+  }
 
-	&--designsystem-org {
-		background-color: @navOransjeLighten60;
-	}
+  &--group {
+    background-color: @color-faded-blue;
+  }
+
+  &--org {
+    background-color: @navOransjeLighten60;
+  }
 }
diff --git a/apps/dolly-frontend/src/main/js/src/components/ui/icon/IconItem/index.tsx b/apps/dolly-frontend/src/main/js/src/components/ui/icon/IconItem/index.tsx
@@ -2,13 +2,13 @@ import './IconItem.less'
 import IconItem from './IconItem'
 
 const WomanIconItem = () => (
-	<IconItem className={'icon-item--woman'} icon={'designsystem-woman'} fontSize={'1.5rem'} />
+	<IconItem className={'icon-item--woman'} icon={'designsystem-woman'} fontSize={'2rem'} />
 )
 const ManIconItem = () => (
-	<IconItem className={'icon-item--man'} icon={'designsystem-man'} fontSize={'1.5rem'} />
+	<IconItem className={'icon-item--man'} icon={'designsystem-man'} fontSize={'2rem'} />
 )
 const UnknownIconItem = () => (
-	<IconItem className={'icon-item--unknown'} icon={'designsystem-person'} fontSize={'1.5rem'} />
+	<IconItem className={'icon-item--unknown'} icon={'designsystem-person'} fontSize={'2rem'} />
 )
 const BestillingIconItem = () => (
 	<IconItem
@@ -18,13 +18,13 @@ const BestillingIconItem = () => (
 	/>
 )
 const GruppeIconItem = () => (
-	<IconItem className={'icon-item--group'} icon={'designsystem-group'} fontSize={'1.5rem'} />
+	<IconItem className={'icon-item--group'} icon={'designsystem-group'} fontSize={'2rem'} />
 )
 const LaastGruppeIconItem = () => (
-	<IconItem className={'icon-item--group'} icon={'designsystem-locked-group'} fontSize={'1.5rem'} />
+	<IconItem className={'icon-item--group'} icon={'designsystem-locked-group'} fontSize={'2rem'} />
 )
 const OrganisasjonItem = () => (
-	<IconItem className={'icon-item--org'} icon={'organisasjon'} fontSize={'1.5rem'} />
+	<IconItem className={'icon-item--org'} icon={'designsystem-organisasjon'} fontSize={'2rem'} />
 )
 
 export {