Chore/update ds

.github/pull_request_template.md

@@ -40,6 +40,7 @@
   - [ ] The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
   - [ ] I don't have permissions to do that, please help me out
 - Labels
+
   - [ ] I have added a `kind/*` and `backport*` label to this PR for proper release notes grouping
   - [ ] I don't have permissions to add labels, please help me out
   <!---

package.json

@@ -132,10 +132,9 @@
   "dependencies": {
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "1.2.0",
-    "@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.6",
+    "@digdir/designsystemet-react": "1.0.6",
+    "@digdir/designsystemet-theme": "1.0.6",
     "@navikt/aksel-icons": "^7.17.4",
     "@tanstack/react-query": "5.75.2",
     "ajv": "8.17.1",

src/app-components/Button/Button.tsx

@@ -16,14 +16,14 @@ export type ButtonProps = {
   isLoading?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
+  fullWidth?: boolean;
   textAlign?: TextAlign;
 } & Pick<
   DesignSystemButtonProps,
   | 'id'
   | 'title'
   | 'disabled'
   | 'icon'
-  | 'fullWidth'
   | 'onClick'
   | 'style'
   | 'tabIndex'
@@ -37,8 +37,22 @@ export type ButtonProps = {
   | 'aria-describedby'
   | 'onKeyUp'
   | 'asChild'
+  | 'popovertarget'
 >;
 
+type DSButtonColor = 'accent' | 'neutral' | 'success' | 'danger' | 'brand1' | 'brand2' | 'brand3' | undefined;
+
+function mapColorNames(color: ButtonColor): DSButtonColor {
+  switch (color) {
+    case 'first':
+      return 'accent';
+    case 'second':
+      return 'neutral';
+    default:
+      return color ?? 'accent';
+  }
+}
+
 export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(function Button(
   {
     id,
@@ -59,6 +73,7 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
     onKeyUp,
     asChild,
     textAlign,
+    popovertarget,
     'aria-label': ariaLabel,
     'aria-busy': ariaBusy,
     'aria-controls': ariaControls,
@@ -76,19 +91,20 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       id={id}
       disabled={disabled || isLoading}
       variant={variant}
-      color={color}
-      size={size}
+      data-color={mapColorNames(color)}
+      data-size={size}
+      data-fullwidth={fullWidth ? true : undefined}
       ref={ref}
       className={className}
       title={title}
       icon={icon}
-      fullWidth={fullWidth}
       onClick={onClick}
       style={expandedStyle}
       tabIndex={tabIndex}
       onMouseDown={onMouseDown}
       onKeyUp={onKeyUp}
       asChild={asChild}
+      popovertarget={popovertarget}
       aria-label={ariaLabel}
       aria-busy={ariaBusy}
       aria-controls={ariaControls}
@@ -101,9 +117,9 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
         <>
           <Spinner
             aria-hidden='true'
-            color={color}
-            size={size === 'lg' ? 'sm' : 'xs'}
-            title={langAsString('general.loading')}
+            data-color={color}
+            data-size={size === 'lg' ? 'sm' : 'xs'}
+            aria-label={langAsString('general.loading')}
           />
           {children}
         </>

src/app-components/Card/Card.module.css

@@ -0,0 +1,7 @@
+.mediaCard {
+  padding: 0;
+  margin-bottom: -7px;
+}
+.mediaCard img {
+  object-fit: cover;
+}

src/app-components/Card/Card.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+
+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;
+  variant?: 'tinted' | 'default';
+};
+
+export function AppCard({
+  title,
+  description,
+  footer,
+  media,
+  color = 'neutral',
+  mediaPosition = 'top',
+  children,
+  variant = 'tinted',
+}: AppCardProps) {
+  return (
+    <Card
+      data-color={color}
+      variant={variant}
+    >
+      {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+      <Card.Block>
+        {title && <Heading data-size='md'>{title}</Heading>}
+        {description && <Paragraph>{description}</Paragraph>}
+
+        {children}
+      </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>
+  );
+}

src/app-components/Datepicker/Calendar.module.css

@@ -1,52 +1,32 @@
-.calendarToggleButton {
-  margin: 1px;
-  min-height: 36px;
-  min-width: 36px;
-  border-radius: 2px;
-}
-
-.calendarDay {
-  width: 48px;
-  height: 48px;
-  text-align: center;
-}
-.calendarDay:hover {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
-}
-
-.calendarDayButton {
-  height: 46px;
-  width: 46px;
-  background: transparent;
-  border: none;
+.datepickerLabelWrapper span[id*='description-'] {
+  margin-bottom: 0;
 }
 
 .focusedDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-color-accent-surface-active);
 }
 .today {
-  border-radius: var(--fds-border_radius-medium);
-  border: var(--fds-border_width-default) solid var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  border: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
 }
 
 .selectedDate {
-  background-color: var(--fds-colors-blue-900);
+  background-color: var(--ds-color-accent-base-active);
   color: white;
   font-weight: normal;
-  border-radius: var(--fds-border_radius-medium);
+  border-radius: var(--ds-border-radius-md);
 }
 .selectedDate:hover {
-  background: var(--fds-colors-blue-800);
+  background: var(--ds-color-accent-base-active);
 }
 .selectedDate button {
   color: white;
 }
 
 .disabledDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-grey-100);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-color-neutral-surface-tinted);
   cursor: not-allowed;
 }
 .disabledDate button {
@@ -57,7 +37,8 @@
 }
 
 .calendarWrapper {
-  max-width: 363px;
+  max-width: 380px;
+  box-sizing: content-box;
 }
 .calendar {
   width: 350px;
@@ -73,40 +54,61 @@
   font: inherit;
   font-weight: 500;
 }
+.calendarDay:hover {
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-color-accent-surface-hover);
+  cursor: pointer;
+}
+.calendarDay {
+  width: 48px;
+  height: 48px;
+  text-align: center;
+}
+.calendarDayButton {
+  height: 46px;
+  width: 46px;
+  background: transparent;
+  border: none;
+}
 .monthWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-size-2);
+  align-items: center;
 }
 .dropdownCaption {
   display: flex;
   margin-bottom: 10px;
+  margin-left: 10px;
+  margin-right: 10px;
   gap: 4px;
 }
 
 .calendarInputWrapper {
   display: flex;
   border-radius: 4px;
-  border: var(--fds-border_width-default, 1px) solid var(--fds-semantic-border-neutral-default);
-  gap: var(--fds-spacing-1);
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-strong);
+  gap: var(--ds-size-1);
   background: white;
 }
+
+.calendarInputWrapper button {
+  margin: 1px;
+}
+
 .calendarInputWrapper:hover {
-  border-color: var(--fds-semantic-border-input-hover);
-  box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
+  box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
 }
 .calendarInput {
   padding: 1px;
 }
-.calendarInput,
-.calendarInput * {
-  height: 36px;
-}
 
-.calendarInput input:not(:focus-visible) {
+.calendarInput input:not(:focus-visible),
+.calendarInput button {
   border: none;
   background: white;
 }
+
 .calendarInput input:not(:focus-visible):hover {
   box-shadow: none;
 }

src/app-components/Datepicker/DatePickerCalendar.tsx

@@ -7,7 +7,6 @@ import { getLocale } from 'src/app-components/Datepicker/utils/dateHelpers';
 
 export interface CalendarDialogProps {
   id: string;
-  isOpen?: boolean;
   selectedDate: Date | undefined;
   onSelect: (value: Date) => void;
   maxDate?: Date;

src/app-components/Datepicker/DatePickerInput.tsx

@@ -57,6 +57,7 @@ function DatePickerInputRef(
       getInputRef={ref}
       format={getFormatAsPatternFormat(datepickerFormat)}
       customInput={Textfield}
+      data-size='sm'
       mask='_'
       className={styles.calendarInput}
       type='text'

src/app-components/Datepicker/Datepicker.tsx

@@ -4,7 +4,6 @@ import type { MonthCaption } from 'react-day-picker';
 import { CalendarIcon } from '@navikt/aksel-icons';
 import { isValid as isValidDate } from 'date-fns';
 
-import { Button } from 'src/app-components/Button/Button';
 import styles from 'src/app-components/Datepicker/Calendar.module.css';
 import { DatePickerCalendar } from 'src/app-components/Datepicker/DatePickerCalendar';
 import { DatePickerDialog } from 'src/app-components/Datepicker/DatepickerDialog';
@@ -78,32 +77,17 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
           autoComplete={autoComplete}
         />
         <DatePickerDialog
+          id={id}
+          buttonAriaLabel={buttonAriaLabel}
+          readOnly={readOnly}
           isDialogOpen={isDialogOpen}
           setIsDialogOpen={setIsDialogOpen}
-          trigger={
-            <Button
-              id={`${id}-button`}
-              className={styles.calendarToggleButton}
-              variant='tertiary'
-              icon={true}
-              aria-controls='dialog'
-              aria-haspopup='dialog'
-              onClick={() => setIsDialogOpen(!isDialogOpen)}
-              aria-label={buttonAriaLabel}
-              aria-expanded={isDialogOpen}
-              disabled={readOnly}
-              color='first'
-              size='sm'
-            >
-              <CalendarIcon title={calendarIconTitle} />
-            </Button>
-          }
+          trigger={<CalendarIcon title={calendarIconTitle} />}
         >
           <DatePickerCalendar
             id={id}
             locale={locale}
             selectedDate={dayPickerDate}
-            isOpen={isDialogOpen}
             onSelect={(date) => {
               handleDayPickerSelect(date);
               setIsDialogOpen(false);