Altinn · Magnusrm · Oct 23, 2024 · Oct 25, 2024 · Oct 25, 2024 · Oct 25, 2024
diff --git 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
@@ -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
@@ -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<typeof Card>[0]['color'];
+  children?: React.ReactNode;
+};
+
+export function AppCard({ title, description, footer, media, color, mediaPosition = 'top', children }: AppCardProps) {
+  return (
+    <Card color={color}>
+      {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+      {(title || description) && (
+        <Card.Block>
+          {title && <Heading data-size='md'>{title}</Heading>}
+          {description && <Paragraph>{description}</Paragraph>}
+        </Card.Block>
+      )}
+      {children && (
+        <Card.Block>
+          <Grid
+            container
+            spacing={6}
+          >
+            {children}
+          </Grid>
+        </Card.Block>
+      )}
+      {footer && (
+        <Card.Block>
+          <Paragraph data-size='sm'>{footer}</Paragraph>
+        </Card.Block>
+      )}
+      {media && mediaPosition === 'bottom' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+    </Card>
+  );
+}
diff --git a/src/components/AltinnAppHeader.module.css b/src/components/AltinnAppHeader.module.css
@@ -7,15 +7,15 @@
 }
 
 .blueDark {
-  color: var(--fds-semantic-surface-action-default);
+  color: var(--ds-semantic-surface-action-default);
 }
 
 .default {
   background-color: transparent;
 }
 
 .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
@@ -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
@@ -15,7 +15,7 @@ export function EditIconButton({ id, label, onClick }: IEditIconButtonProps) {
   return (
     <Button
       className={classes.editButton}
-      size='small'
+      size='sm'
       id={id}
       variant='tertiary'
       onClick={onClick}

diff --git a/src/components/atoms/AltinnAttachment.module.css b/src/components/atoms/AltinnAttachment.module.css
@@ -15,7 +15,7 @@
 
 .attachmentLink:hover {
   border-bottom: none;
-  background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
+  background-color: var(--ds-semantic-surface-action-first-no_fill-hover);
 }
 
 .attachmentIcon {

diff --git a/src/components/atoms/AltinnAttachment.tsx b/src/components/atoms/AltinnAttachment.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Link, List } from '@digdir/designsystemet-react';
+import { Heading, Link, List } from '@digdir/designsystemet-react';
 
 import classes from 'src/components/atoms/AltinnAttachment.module.css';
 import { Lang } from 'src/features/language/Lang';
@@ -24,14 +24,14 @@ export function AltinnAttachment({ attachments, id, title }: IAltinnAttachmentPr
     ?.filter((attachment) => attachment.name)
     .sort((a, b) => (a.name && b.name ? a.name.localeCompare(b.name, selectedLanguage, { numeric: true }) : 0));
   return (
-    <List.Root
+    <div
       id={id}
       data-testid='attachment-list'
     >
       {title && (
-        <List.Heading>
+        <Heading>
           <Lang id={title} />
-        </List.Heading>
+        </Heading>
       )}
       <List.Unordered className={classes.attachmentList}>
         {filteredAndSortedAttachments?.map((attachment, index) => (
@@ -51,6 +51,6 @@ export function AltinnAttachment({ attachments, id, title }: IAltinnAttachmentPr
           </List.Item>
         ))}
       </List.Unordered>
-    </List.Root>
+    </div>
   );
 }
diff --git a/src/components/form/Caption.module.css b/src/components/form/Caption.module.css
@@ -1,6 +1,6 @@
 .tableCaption {
   text-align: left;
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-spacing-2);
 }
 
 .captionTitle {
@@ -10,5 +10,5 @@
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-spacing-3);
 }
diff --git a/src/components/form/Fieldset.module.css b/src/components/form/Fieldset.module.css
@@ -8,5 +8,5 @@
 .description {
   font-size: 1.125rem;
   margin: 0;
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-spacing-3);
 }
diff --git a/src/components/form/HelpTextContainer.tsx b/src/components/form/HelpTextContainer.tsx
@@ -15,7 +15,7 @@ export function HelpTextContainer({ helpText, title }: IHelpTextContainerProps)
   return (
     <div className={classes.helpTextContainer}>
       <HelpText
-        title={
+        aria-label={
           title ? `${langAsString('helptext.button_title_prefix')} ${title}` : langAsString('helptext.button_title')
         }
       >

diff --git a/src/components/form/RadioButton.module.css b/src/components/form/RadioButton.module.css
@@ -1,6 +1,6 @@
 .radioLabelContainer {
   display: flex;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-spacing-1);
   align-items: center;
 }
 
@@ -10,10 +10,10 @@
 
 .card {
   border-radius: 6px;
-  background-color: var(--fds-semantic-background-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
   width: 100%;
-  padding: var(--fds-spacing-2);
-  margin-bottom: var(--fds-spacing-3);
+  padding: var(--ds-spacing-2);
+  margin-bottom: var(--ds-spacing-3);
   cursor: pointer;
 }
 
@@ -22,23 +22,23 @@
 }
 
 .card:hover {
-  background: var(--fds-semantic-surface-neutral-subtle-hover);
+  background: var(--ds-color-neutral-surface-hover);
 }
 
 .card:active {
-  background: var(--fds-semantic-border-neutral-subtle);
+  background: var(--ds-color-neutral-surface-active);
 }
 
 .card:is(:checked, :has(:checked)) {
-  background: var(--fds-semantic-surface-neutral-selected);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-first-active);
+  background: var(--ds-color-neutral-surface-default);
+  box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-semantic-border-first-active);
 }
 
 .card:has(:focus-visible) {
-  --fds-focus-border-width: 3px;
-  background: var(--fds-semantic-surface-neutral-selected);
+  --ds-focus-border-width: 3px;
+  background: var(--ds-color-neutral-surface-default);
 
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
+  box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-inner-focus-border-color);
+  outline: var(--ds-focus-border-width) solid var(--ds-outer-focus-border-color);
+  outline-offset: var(--ds-focus-border-width);
 }
diff --git a/src/components/form/RadioButton.tsx b/src/components/form/RadioButton.tsx
@@ -51,7 +51,7 @@ export const RadioButton = ({
       {label && (
         <div className={`${hideLabel ? 'sr-only' : ''} ${classes.radioLabelContainer}`}>
           {label}
-          {helpText ? <HelpText title={elementAsString(helpText)}>{helpText}</HelpText> : null}
+          {helpText ? <HelpText aria-label={elementAsString(helpText)}>{helpText}</HelpText> : null}
         </div>
       )}
     </Radio>

diff --git a/src/components/label/Label.module.css b/src/components/label/Label.module.css
@@ -1,6 +1,6 @@
 .fieldWrapper {
   display: grid;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .fullWidth {

diff --git a/src/components/label/LabelContent.module.css b/src/components/label/LabelContent.module.css
@@ -1,6 +1,6 @@
 .labelContainer {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
   align-items: center;
 }
 
@@ -11,10 +11,10 @@
 .labelWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-spacing-1);
   align-items: flex-start;
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-spacing-3);
 }
diff --git a/src/components/label/LabelContent.tsx b/src/components/label/LabelContent.tsx
@@ -55,7 +55,7 @@ export function LabelContent({
         {help && (
           <HelpText
             id={`${componentId}-helptext`}
-            title={
+            aria-label={
               label ? `${langAsString('helptext.button_title_prefix')} ${label}` : langAsString('helptext.button_title')
             }
           >

diff --git a/src/components/organisms/AltinnAppHeaderMenu.tsx b/src/components/organisms/AltinnAppHeaderMenu.tsx
@@ -29,9 +29,9 @@ const useStyles = makeStyles({
   iconButton: {
     padding: 0,
     '&: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)',
     },
   },
 });

diff --git a/src/components/presentation/Header.tsx b/src/components/presentation/Header.tsx
@@ -33,7 +33,7 @@ const InnerHeader = ({ header, aboveHeader, children }: IInnerHeaderProps) => (
         <Grid item>
           <Heading
             level={1}
-            size='medium'
+            size='md'
             data-testid='presentation-heading'
           >
             {header}

diff --git a/src/components/presentation/NavBar.module.css b/src/components/presentation/NavBar.module.css
@@ -15,7 +15,7 @@
 }
 
 .buttonMargin {
-  margin-top: calc(2 * var(--fds-focus-border-width));
+  margin-top: calc(2 * var(--ds-focus-border-width));
 }
 
 @media only screen and (max-width: 1200px) {

diff --git a/src/components/presentation/NavBar.tsx b/src/components/presentation/NavBar.tsx
@@ -67,8 +67,8 @@ export const NavBar = ({ type }: INavBarProps) => {
             className={classes.buttonMargin}
             onClick={handleBackArrowButton}
             variant='tertiary'
-            color='second'
-            size='small'
+            color='neutral'
+            size='sm'
             aria-label={langAsString('general.back')}
             icon={true}
           >
@@ -88,8 +88,8 @@ export const NavBar = ({ type }: INavBarProps) => {
             className={cn(classes.buttonMargin, { [classes.hideExpandButtonMaxWidth]: !expandedWidth })}
             onClick={toggleExpandedWidth}
             variant='tertiary'
-            color='second'
-            size='small'
+            color='neutral'
+            size='sm'
             aria-label={langAsString('general.expand_form')}
             icon={true}
           >
@@ -114,8 +114,8 @@ export const NavBar = ({ type }: INavBarProps) => {
             className={classes.buttonMargin}
             onClick={handleModalCloseButton}
             variant='tertiary'
-            color='second'
-            size='small'
+            color='neutral'
+            size='sm'
             aria-label={langAsString('general.close_schema')}
             icon={true}
           >

diff --git a/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css b/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .small {