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.4",
+    "@digdir/designsystemet-react": "1.0.4",
+    "@digdir/designsystemet-theme": "1.0.4",
     "@navikt/aksel-icons": "^7.17.4",
     "@tanstack/react-query": "5.74.4",
     "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'
@@ -76,13 +76,13 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
       id={id}
       disabled={disabled || isLoading}
       variant={variant}
-      color={color}
-      size={size}
+      data-color={color}
+      data-size={size}
+      data-fullwidth={fullWidth}
       ref={ref}
       className={className}
       title={title}
       icon={icon}
-      fullWidth={fullWidth}
       onClick={onClick}
       style={expandedStyle}
       tabIndex={tabIndex}
@@ -101,9 +101,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,4 @@
+.mediaCard {
+  padding: 0;
+  margin-bottom: -7px;
+}

src/app-components/Card/Card.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+
+import classes from 'src/app-components/Card/Card.module.css';
+import { Flex } from 'src/app-components/Flex/Flex';
+
+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>
+          <Flex
+            container
+            spacing={6}
+          >
+            {children}
+          </Flex>
+        </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,8 +1,5 @@
-.calendarToggleButton {
-  margin: 1px;
-  min-height: 36px;
-  min-width: 36px;
-  border-radius: 2px;
+.datepickerLabelWrapper span[id*='description-'] {
+  margin-bottom: 0;
 }
 
 .calendarDay {
@@ -32,10 +29,10 @@
 }
 
 .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);
@@ -45,19 +42,28 @@
 }
 
 .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-1);
   cursor: not-allowed;
 }
 .disabledDate button {
   text-decoration: line-through;
 }
+.focusedDate {
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-blue-2);
+}
+.today {
+  border-radius: var(--ds-border-radius-md);
+  border: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
+}
 .disabledDate:hover button {
   cursor: not-allowed;
 }
 
 .calendarWrapper {
-  max-width: 363px;
+  max-width: 380px;
+  box-sizing: content-box;
 }
 .calendar {
   width: 350px;
@@ -73,40 +79,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

@@ -58,6 +58,7 @@ export function DatePickerInput({
     <PatternFormat
       format={formatPattern}
       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';
@@ -75,32 +74,17 @@ export const DatePickerControl: React.FC<DatePickerControlProps> = ({
           readOnly={readOnly}
         />
         <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);