diff --git a/package.json b/package.json index b62b06eef1..3c5501073a 100644 --- a/package.json +++ b/package.json @@ -128,9 +128,9 @@ "@babel/polyfill": "7.12.1", "@date-fns/tz": "^1.1.2", "@digdir/design-system-react": "0.54.0", - "@digdir/designsystemet-css": "0.10.0", - "@digdir/designsystemet-react": "0.63.1", - "@digdir/designsystemet-theme": "0.15.3", + "@digdir/designsystemet-css": "1.0.0-next.35", + "@digdir/designsystemet-react": "1.0.0-next.35", + "@digdir/designsystemet-theme": "1.0.0-next.35", "@material-ui/core": "4.12.4", "@material-ui/pickers": "3.3.11", "@navikt/aksel-icons": "^7.0.0", diff --git a/src/app-components/Card/Card.module.css b/src/app-components/Card/Card.module.css new file mode 100644 index 0000000000..860a4fbfbf --- /dev/null +++ b/src/app-components/Card/Card.module.css @@ -0,0 +1,4 @@ +.mediaCard { + padding: 0; + margin-bottom: -7px; +} diff --git a/src/app-components/Card/Card.tsx b/src/app-components/Card/Card.tsx new file mode 100644 index 0000000000..6c038e810b --- /dev/null +++ b/src/app-components/Card/Card.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import { Card, Heading, Paragraph } from '@digdir/designsystemet-react'; +import Grid from '@material-ui/core/Grid'; + +import classes from 'src/app-components/Card/Card.module.css'; + +type AppCardProps = { + title?: React.ReactNode; + description?: React.ReactNode; + footer?: React.ReactNode; + media?: React.ReactNode; + mediaPosition?: 'top' | 'bottom'; + color?: Parameters[0]['color']; + children?: React.ReactNode; +}; + +export function AppCard({ title, description, footer, media, color, mediaPosition = 'top', children }: AppCardProps) { + return ( + + {media && mediaPosition === 'top' && {media}} + {(title || description) && ( + + {title && {title}} + {description && {description}} + + )} + {children && ( + + + {children} + + + )} + {footer && ( + + {footer} + + )} + {media && mediaPosition === 'bottom' && {media}} + + ); +} diff --git a/src/components/AltinnAppHeader.module.css b/src/components/AltinnAppHeader.module.css index dc55afab79..2683e3aa55 100644 --- a/src/components/AltinnAppHeader.module.css +++ b/src/components/AltinnAppHeader.module.css @@ -7,7 +7,7 @@ } .blueDark { - color: var(--fds-semantic-surface-action-default); + color: var(--ds-semantic-surface-action-default); } .default { @@ -15,7 +15,7 @@ } .headerLink { - color: var(--fds-semantic-surface-action-default); + color: var(--ds-semantic-surface-action-default); font-size: 1.25rem; line-height: 1.5; margin-left: 2.25rem; @@ -30,13 +30,13 @@ } & a { - color: var(--fds-semantic-surface-action-default); + color: var(--ds-semantic-surface-action-default); border-bottom: 0; } & a:hover { - color: var(--fds-semantic-surface-action-default); - border-bottom: 3px solid var(--fds-semantic-surface-action-default); + color: var(--ds-semantic-surface-action-default); + border-bottom: 3px solid var(--ds-semantic-surface-action-default); } } diff --git a/src/components/CircleIcon.module.css b/src/components/CircleIcon.module.css index a8381bd8aa..806fda5e93 100644 --- a/src/components/CircleIcon.module.css +++ b/src/components/CircleIcon.module.css @@ -3,7 +3,7 @@ display: flex; justify-content: center; align-items: center; - background-color: var(--fds-semantic-surface-action-default); + background-color: var(--ds-semantic-surface-action-default); width: calc(var(--icon-size) * 0.75); height: calc(var(--icon-size) * 0.75); padding: calc(var(--icon-size) * 0.25); diff --git a/src/components/EditIconButton.tsx b/src/components/EditIconButton.tsx index 2562be0918..e6d3edd424 100644 --- a/src/components/EditIconButton.tsx +++ b/src/components/EditIconButton.tsx @@ -15,7 +15,7 @@ export function EditIconButton({ id, label, onClick }: IEditIconButtonProps) { return ( - - + + ); } diff --git a/src/features/devtools/DevToolsControls.tsx b/src/features/devtools/DevToolsControls.tsx index 1949884dc8..4650268259 100644 --- a/src/features/devtools/DevToolsControls.tsx +++ b/src/features/devtools/DevToolsControls.tsx @@ -30,7 +30,7 @@ export const DevToolsControls = () => { return ( @@ -52,7 +52,7 @@ export const DevToolsControls = () => { {isInForm && {DevToolsTab.Expressions}} {/* {DevToolsTab.FeatureToggles} */} - +
@@ -63,24 +63,24 @@ export const DevToolsControls = () => {
- - + + - + {isInForm && ( - + - + )} {isInForm && ( - + - + )} {isInForm && ( - + - + )} { // diff --git a/src/features/devtools/DevToolsPanel.tsx b/src/features/devtools/DevToolsPanel.tsx index 0b09b54cb0..01855430f1 100644 --- a/src/features/devtools/DevToolsPanel.tsx +++ b/src/features/devtools/DevToolsPanel.tsx @@ -81,8 +81,8 @@ export const DevToolsPanel = ({ isOpen, close, children }: IDevToolsPanelProps)
setFilter(e.target.value)} placeholder='Filtrer logger' @@ -81,8 +81,8 @@ export const DevToolsLogs = () => { diff --git a/src/layout/Datepicker/DatepickerDialog.tsx b/src/layout/Datepicker/DatepickerDialog.tsx index ea13c7119c..e1ca81c363 100644 --- a/src/layout/Datepicker/DatepickerDialog.tsx +++ b/src/layout/Datepicker/DatepickerDialog.tsx @@ -22,40 +22,38 @@ export function DatePickerDialog({ if (isMobile) { return ( - <> - {trigger} + + {trigger} setIsDialogOpen(false)} + backdropClose style={{ width: 'fit-content', minWidth: 'fit-content' }} > - {children} + {children} - + ); } return ( - setIsDialogOpen(false)} - size='lg' - placement='top' - > + setIsDialogOpen(!isDialogOpen)} - asChild={true} + asChild > {trigger} - setIsDialogOpen(false)} + size='lg' + placement='top' className={styles.calendarWrapper} aria-modal autoFocus={true} > {children} - - + + ); } diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx index f71a82dca5..3663830490 100644 --- a/src/layout/Datepicker/DropdownCaption.tsx +++ b/src/layout/Datepicker/DropdownCaption.tsx @@ -42,12 +42,12 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
@@ -55,7 +55,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => { handleMonthChange(months[0])} aria-label={langAsString('date_picker.aria_label_month_dropdown')} @@ -79,7 +79,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => { handleYearChange(years[0])} aria-label={langAsString('date_picker.aria_label_year_dropdown')} @@ -103,12 +103,12 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx b/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx index 3110dbc9d2..0f1daa67ca 100644 --- a/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx +++ b/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Button } from '@digdir/designsystemet-react'; -import { PencilIcon, TrashIcon } from '@navikt/aksel-icons'; +import { Delete, Edit } from '@navikt/ds-icons'; import { ConditionalWrapper } from 'src/components/ConditionalWrapper'; import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover'; @@ -76,9 +76,9 @@ export function FileTableButtons({ node, attachment, mobileView, editWindowIsOpe >
); diff --git a/src/layout/LikertItem/LikertItemComponent.module.css b/src/layout/LikertItem/LikertItemComponent.module.css index bf9f9fe9f0..626afc960d 100644 --- a/src/layout/LikertItem/LikertItemComponent.module.css +++ b/src/layout/LikertItem/LikertItemComponent.module.css @@ -18,7 +18,7 @@ Altinn, and making sure they are consistent. */ } .likertTable thead th { - background-color: var(--fds-colors-grey-100); + background-color: var(--ds-colors-grey-100); } .likertTable tr:not(:last-of-type) td { @@ -47,7 +47,7 @@ Altinn, and making sure they are consistent. */ .likertHeading { text-align: left; - padding-bottom: var(--fds-spacing-4); + padding-bottom: var(--ds-spacing-4); } .likertMobileGroup { diff --git a/src/layout/Link/LinkComponent.tsx b/src/layout/Link/LinkComponent.tsx index f74df59551..43ec471b2e 100644 --- a/src/layout/Link/LinkComponent.tsx +++ b/src/layout/Link/LinkComponent.tsx @@ -15,8 +15,8 @@ import type { LinkStyle } from 'src/layout/Link/config.generated'; export const buttonStyles: { [style in Exclude]: { color: ButtonColor; variant: ButtonVariant }; } = { - primary: { variant: 'primary', color: 'success' }, - secondary: { variant: 'secondary', color: 'first' }, + primary: { variant: 'primary', color: 'accent' }, //success + secondary: { variant: 'secondary', color: 'accent' }, //first }; export type ILinkComponent = PropsFromGenericComponent<'Link'>; @@ -48,7 +48,7 @@ export function LinkComponent({ node }: ILinkComponent) { style={style} color={buttonStyles[linkStyle].color} variant={buttonStyles[linkStyle].variant} - size='small' + size='sm' onClick={LinkButtonOnClick()} > diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css index 06635649f0..0f28543fc5 100644 --- a/src/layout/List/ListComponent.module.css +++ b/src/layout/List/ListComponent.module.css @@ -5,7 +5,7 @@ .listTable caption { text-align: left; - padding-bottom: var(--fds-spacing-4); + padding-bottom: var(--ds-spacing-4); } .listTable th:first-of-type { @@ -13,7 +13,7 @@ } .listTable th { - background-color: var(--fds-colors-grey-100); + background-color: var(--ds-colors-grey-100); } .listTable tr { @@ -32,7 +32,7 @@ .selectedRow, .selectedRowCell { - background-color: var(--fds-colors-blue-100); + background-color: var(--ds-colors-blue-100); } .pagination { @@ -40,7 +40,7 @@ display: flex; justify-content: end; align-items: center; - background-color: var(--fds-colors-grey-100); + background-color: var(--ds-colors-grey-100); } .paginationMobile { @@ -53,17 +53,17 @@ } .mobileRadioGroup > div :hover { - background-color: var(--fds-colors-grey-100); + background-color: var(--ds-colors-grey-100); } .mobileRadio { - border-top: 1px solid var(--fds-colors-grey-200); - padding: var(--fds-spacing-4); - gap: var(--fds-spacing-8); + border-top: 1px solid var(--ds-colors-grey-200); + padding: var(--ds-spacing-4); + gap: var(--ds-spacing-8); } .mobileRadio input:checked:hover { - background-color: var(--fds-radio-border-color); + background-color: var(--ds-radio-border-color); } .mobileRadio label { @@ -73,11 +73,11 @@ .mobileRadio span { display: flex; flex-direction: column; - gap: var(--fds-spacing-4); + gap: var(--ds-spacing-4); } .mobileRadio label div { display: flex; flex-direction: column; - gap: var(--fds-spacing-2); + gap: var(--ds-spacing-2); } diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx index 19af1c5417..6abde271aa 100644 --- a/src/layout/List/ListComponent.tsx +++ b/src/layout/List/ListComponent.tsx @@ -151,9 +151,8 @@ export const ListComponent = ({ node }: IListProps) => { {Object.entries(tableHeaders).map(([key, value]) => ( { + sort={sortableColumns?.includes(key) && sortColumn === key ? sortDirection : undefined} + onClick={() => { if (sortColumn === key) { setSortDirection(sortDirection === 'ascending' ? 'descending' : 'ascending'); } else { diff --git a/src/layout/Map/MapComponent.module.css b/src/layout/Map/MapComponent.module.css index 897405ec24..92bd060b75 100644 --- a/src/layout/Map/MapComponent.module.css +++ b/src/layout/Map/MapComponent.module.css @@ -53,7 +53,7 @@ } .map-error { - border-color: var(--fds-semantic-border-danger-default); + border-color: var(--ds-semantic-border-danger-default); border-width: 2px; border-style: solid; } diff --git a/src/layout/Map/Summary2/MapSummary.module.css b/src/layout/Map/Summary2/MapSummary.module.css index 780a08ce60..bbcdcaa9b4 100644 --- a/src/layout/Map/Summary2/MapSummary.module.css +++ b/src/layout/Map/Summary2/MapSummary.module.css @@ -7,7 +7,7 @@ .summaryItemWrapper { display: flex; flex-direction: column; - gap: var(--fds-spacing-2); + gap: var(--ds-spacing-2); break-inside: avoid; } @@ -17,7 +17,7 @@ } .error { - border-bottom: var(--fds-semantic-border-danger-default) solid 2px; + border-bottom: var(--ds-semantic-border-danger-default) solid 2px; } .editButton { diff --git a/src/layout/Map/Summary2/MapSummary.tsx b/src/layout/Map/Summary2/MapSummary.tsx index 90fc5cca43..aca40ffb20 100644 --- a/src/layout/Map/Summary2/MapSummary.tsx +++ b/src/layout/Map/Summary2/MapSummary.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ErrorMessage } from '@digdir/designsystemet-react'; +import { ValidationMessage } from '@digdir/designsystemet-react'; import { Typography } from '@material-ui/core'; import cn from 'classnames'; @@ -83,13 +83,13 @@ export function MapSummary({ componentNode, emptyFieldText, isCompact }: MapSumm )} {errors?.map(({ message }) => ( - + - + ))} ); diff --git a/src/layout/NavigationBar/NavigationBarComponent.tsx b/src/layout/NavigationBar/NavigationBarComponent.tsx index bcbb9ef955..86c05f2781 100644 --- a/src/layout/NavigationBar/NavigationBarComponent.tsx +++ b/src/layout/NavigationBar/NavigationBarComponent.tsx @@ -55,9 +55,9 @@ const useStyles = makeStyles((theme) => ({ outline: `3px solid ${theme.altinnPalette.primary.blueMedium}`, }, '&:focus-within': { - outline: 'var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color)', - outlineOffset: 'var(--fds-focus-border-width)', - boxShadow: '0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color)', + outline: 'var(--ds-focus-border-width) solid var(--ds-outer-focus-border-color)', + outlineOffset: 'var(--ds-focus-border-width)', + boxShadow: '0 0 0 var(--ds-focus-border-width) var(--ds-inner-focus-border-color)', }, }, buttonSelected: { diff --git a/src/layout/NavigationButtons/NavigationButtonsComponent.tsx b/src/layout/NavigationButtons/NavigationButtonsComponent.tsx index 33fdcd5f76..a7bf96f0fd 100644 --- a/src/layout/NavigationButtons/NavigationButtonsComponent.tsx +++ b/src/layout/NavigationButtons/NavigationButtonsComponent.tsx @@ -120,7 +120,7 @@ export function NavigationButtonsComponent({ node }: INavigationButtons) { - diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css index 8107e50074..8440a96cd0 100644 --- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css +++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css @@ -1,8 +1,8 @@ .infoContainer { display: flex; - gap: var(--fds-spacing-3); + gap: var(--ds-spacing-3); flex-direction: row; - padding: var(--fds-spacing-3) 0; + padding: var(--ds-spacing-3) 0; } .infoDetailsContainer { @@ -13,7 +13,7 @@ .senderReceiverInfoContainer { display: flex; width: 100%; - gap: var(--fds-spacing-4); + gap: var(--ds-spacing-4); table { width: 100%; @@ -27,5 +27,5 @@ .paymentSummaryContainer { display: flex; flex-direction: column; - gap: var(--fds-spacing-4); + gap: var(--ds-spacing-4); } diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx index 75016754e3..0f759bd7c2 100644 --- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx +++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx @@ -22,17 +22,13 @@ type PaymentInfoTableRowProps = { const PaymentInfoTableRow = ({ labelId, value }: PaymentInfoTableRowProps) => ( - +