Merge branch 'next' into fix/css-native-accordion

digdir · Sep 10, 2024 · a68d26b · a68d26b
2 parents c2682b1 + 7fd6882
commit a68d26b
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 98 deletions.
diff --git a/.changeset/rich-carrots-deny.md b/.changeset/rich-carrots-deny.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Heading: default level is now 2
diff --git a/.changeset/stupid-tables-applaud.md b/.changeset/stupid-tables-applaud.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Tag: Make neutral default color in CSS
diff --git a/packages/css/tag.css b/packages/css/tag.css
@@ -1,70 +1,62 @@
 .ds-tag {
-  --dsc-tag-background: var(--ds-color-neutral-background-subtle);
+  --dsc-tag-background: var(--ds-color-neutral-surface-default);
   --dsc-tag-color: var(--ds-color-neutral-text-default);
+  --dsc-tag-min-height: var(--ds-sizing-8);
+  --dsc-tag-padding: 0 var(--ds-spacing-2);
 
-  color: var(--dsc-tag-color);
-  padding: 0 var(--ds-spacing-2);
-  min-height: var(--ds-sizing-8);
-  background-color: var(--dsc-tag-background);
-  border-radius: min(1rem, var(--ds-border-radius-sm));
-  display: flex;
   align-items: center;
+  background: var(--dsc-tag-background);
+  border-radius: min(1rem, var(--ds-border-radius-sm));
   box-sizing: border-box;
-  word-break: break-word;
+  color: var(--dsc-tag-color);
+  display: flex;
+  min-height: var(--dsc-tag-min-height);
+  padding: var(--dsc-tag-padding);
   width: max-content;
-}
-
-.ds-tag--sm {
-  padding: 0 var(--ds-spacing-2);
-  min-height: var(--ds-sizing-7);
-}
-
-.ds-tag--md {
-  padding: 0 var(--ds-spacing-2);
-  min-height: var(--ds-sizing-8);
-}
-
-.ds-tag--lg {
-  padding: 0 var(--ds-spacing-3);
-  min-height: var(--ds-sizing-9);
-}
-
-.ds-tag--neutral {
-  --dsc-tag-background: var(--ds-color-neutral-surface-default);
-  --dsc-tag-color: var(--ds-color-neutral-text-default);
-}
-
-.ds-tag--info {
-  --dsc-tag-background: var(--ds-color-info-surface-default);
-  --dsc-tag-color: var(--ds-color-info-text-default);
-}
-
-.ds-tag--success {
-  --dsc-tag-background: var(--ds-color-success-surface-default);
-  --dsc-tag-color: var(--ds-color-success-text-default);
-}
-
-.ds-tag--warning {
-  --dsc-tag-background: var(--ds-color-warning-surface-default);
-  --dsc-tag-color: var(--ds-color-warning-text-default);
-}
-
-.ds-tag--danger {
-  --dsc-tag-background: var(--ds-color-danger-surface-default);
-  --dsc-tag-color: var(--ds-color-danger-text-default);
-}
-
-.ds-tag--brand1 {
-  --dsc-tag-background: var(--ds-color-brand1-surface-default);
-  --dsc-tag-color: var(--ds-color-brand1-text-default);
-}
-
-.ds-tag--brand2 {
-  --dsc-tag-background: var(--ds-color-brand2-surface-default);
-  --dsc-tag-color: var(--ds-color-brand2-text-default);
-}
+  word-break: break-word;
 
-.ds-tag--brand3 {
-  --dsc-tag-background: var(--ds-color-brand3-surface-default);
-  --dsc-tag-color: var(--ds-color-brand3-text-default);
+  &[data-size='sm'] {
+    --dsc-tag-padding: 0 var(--ds-spacing-2);
+    --dsc-tag-min-height: var(--ds-sizing-7);
+  }
+
+  &[data-size='lg'] {
+    --dsc-tag-padding: 0 var(--ds-spacing-3);
+    --dsc-tag-min-height: var(--ds-sizing-9);
+  }
+
+  &[data-color='info'] {
+    --dsc-tag-background: var(--ds-color-info-surface-default);
+    --dsc-tag-color: var(--ds-color-info-text-default);
+  }
+
+  &[data-color='success'] {
+    --dsc-tag-background: var(--ds-color-success-surface-default);
+    --dsc-tag-color: var(--ds-color-success-text-default);
+  }
+
+  &[data-color='warning'] {
+    --dsc-tag-background: var(--ds-color-warning-surface-default);
+    --dsc-tag-color: var(--ds-color-warning-text-default);
+  }
+
+  &[data-color='danger'] {
+    --dsc-tag-background: var(--ds-color-danger-surface-default);
+    --dsc-tag-color: var(--ds-color-danger-text-default);
+  }
+
+  &[data-color='brand1'] {
+    --dsc-tag-background: var(--ds-color-brand1-surface-default);
+    --dsc-tag-color: var(--ds-color-brand1-text-default);
+  }
+
+  &[data-color='brand2'] {
+    --dsc-tag-background: var(--ds-color-brand2-surface-default);
+    --dsc-tag-color: var(--ds-color-brand2-text-default);
+  }
+
+  &[data-color='brand3'] {
+    --dsc-tag-background: var(--ds-color-brand3-surface-default);
+    --dsc-tag-color: var(--ds-color-brand3-text-default);
+  }
 }
diff --git a/packages/react/src/components/Link/Link.mdx b/packages/react/src/components/Link/Link.mdx
@@ -6,12 +6,16 @@ import * as LinkStories from './Link.stories';
 
 # Link
 
-`Link` er basert på HTML-taggen `<a>`, som brukes til å lage en lenke til andre sider.
+`Link` er en klikkbar tekst eller grafikk, 
+som gjør det enkelt og raskt for brukerne å navigere til filer eller sider internt eller eksternt.
+Komponenten er basert på [anchor HTML-taggen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
 
 <Primary />
 <Controls />
 
-## Bruk
+## Slik bruker du `Link`
+
+`Link` støtter de samme attributter som en vanlig anchor tag, men har i tillegg også `color` for å velge fargen på linken.
 
 ```tsx
 import { Link } from '@digdir/designsystemet-react';
@@ -25,6 +29,13 @@ En lenke brukes ofte som en del av en tekst. Teksten som omfattes av lenken bør
 
 <Canvas of={LinkStories.InText} />
 
+### Med ikon
+
+Ikonet legges på venstre side. Dette er et funksjonelt ikon som forteller brukerne hva lenken leder dem til. 
+Ikonet burde være skjult skjermleser, ved å legge på `aria-hidden`.
+
+<Canvas of={LinkStories.WithIcon} />
+
 ### Flere linjer
 
 <Canvas of={LinkStories.LongLink} />
@@ -33,6 +44,42 @@ En lenke brukes ofte som en del av en tekst. Teksten som omfattes av lenken bør
 
 <Canvas of={LinkStories.Neutral} />
 
+## Retningslinjer for `Link`
+
+Når vi legger `Link` på siden, kan brukerne gå direkte til en annen relevant nettside, 
+eller direkte til annen informasjon på samme nettside. Det er viktig å ikke overbruke lenker,
+det kan gjøre det vanskelig for brukerne å finne veien videre.
+### Åpne lenker i ny fane/vindu
+
+Både interne og eksterne lenker bør åpnes i samme fane/vindu. Da sikrer vi en forutsigbar brukeropplevelse fordi brukerens egne lenkeinnstillinger i nettleseren videreføres. Flere bruker Tilbake-knappen i nettleseren hvis lenken ikke førte dit de trodde, men det fungerer ikke når lenken ble åpnet i en ny fane.
+
+Unntaket er hvis brukeren risikerer å miste innhold ved å klikke på lenken, for eksempel ved utfylling av et skjema. Det skal da informeres om at lenken åpnes i en ny fane. 
+
+[Les mer om lenker på uutilsynet.no](https://www.uutilsynet.no/veiledning/lenker/214)
+
+<br/>
+
+## Tekst i komponenten
+
+Pass på at teksten i lenken er beskriverne og forklarende på hvor lenken går. 
+Gode lenker er selvforklarende og forteller umiddelbart brukerne hvor de kommer ved å trykke på lenken.
+- Bruk triggerord tidlig i lenketeksten.
+- Vi lager ikke flere lenker enn de brukerne trenger
+
+Vi bruker aldri lenketekster som “Klikk her”, “Se her” og “Les mer”. Det er fordi brukerne ofte skanner teksten og leter etter veier videre. 
+Når brukerne kan lese et meningsbærende innhold i lenketeksten, finner de raskt det innholdet de leter etter. 
+
+<br/>
+
+## Tilgjengelighet
+
+`Link` fungerer som anchor tag, og det er ikke endret på funksjonalitet.
+Fokus legger på ein bakgrunn rundt lenken.
+
+Når brukeren har besøkt en lenke tidligere, vil fargen på lenken endres.
+
+<br/>
+
 ## Kjente mangler
 
 I Safari vil ikke understreken på lenken bli tykkere når man har musepekeren over den. For å lese mer om dette, følg lenken under:

diff --git a/packages/react/src/components/Link/Link.stories.tsx b/packages/react/src/components/Link/Link.stories.tsx
@@ -29,24 +29,28 @@ export const Normal: Story = {
   },
 };
 
-export const InText: StoryFn<typeof Link> = () => (
+export const InText: StoryFn = (args) => (
   <>
     <Paragraph>
       Vi bruker komponenter fra{' '}
-      <Link href={designsystemetLink}>et fantastisk designsystem</Link>.
-    </Paragraph>
-    <Paragraph>
-      <Link href='mailto:[email protected]'>
-        <EnvelopeClosedIcon aria-hidden />
-        Kontakt oss
+      <Link href={designsystemetLink} {...args}>
+        et fantastisk designsystem
       </Link>
+      .
     </Paragraph>
   </>
 );
 
-export const LongLink: StoryFn<typeof Link> = () => (
+export const WithIcon: StoryFn = (args) => (
+  <Link href='mailto:[email protected]' {...args}>
+    <EnvelopeClosedIcon aria-hidden />
+    Kontakt oss
+  </Link>
+);
+
+export const LongLink: StoryFn = (args) => (
   <Paragraph>
-    <Link href={designsystemetLink}>
+    <Link href={designsystemetLink} {...args}>
       Dette er en lenke som brekker over flere linjer
     </Link>
   </Paragraph>

diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
@@ -33,25 +33,19 @@ export type TagProps = {
  * @example
  * <Tag color='success'>Success</Tag>
  */
-export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ size = 'md', color = 'neutral', children, className, ...rest }, ref) => {
-    return (
-      <Paragraph asChild size={size}>
-        <span
-          className={cl(
-            'ds-tag',
-            `ds-tag--${color}`,
-            `ds-tag--${size}`,
-            className,
-          )}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </span>
-      </Paragraph>
-    );
-  },
-);
-
-Tag.displayName = 'Tag';
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
+  { size = 'md', color = 'neutral', className, ...rest },
+  ref,
+) {
+  return (
+    <Paragraph asChild size={size}>
+      <span
+        className={cl('ds-tag', className)}
+        data-color={size}
+        data-size={size}
+        ref={ref}
+        {...rest}
+      />
+    </Paragraph>
+  );
+});
diff --git a/packages/react/src/components/Typography/Heading/Heading.tsx b/packages/react/src/components/Typography/Heading/Heading.tsx
@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 export type HeadingProps = {
   /**
    * Heading level. This will translate into any h1-6 level unless `asChild` is `true`
-   * @default 1
+   * @default 2
    */
   level?: 1 | 2 | 3 | 4 | 5 | 6;
   /** Changes text sizing
@@ -31,10 +31,10 @@ export type HeadingProps = {
  */
 export const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(
   (
-    { size = 'xl', level = 1, spacing = false, className, asChild, ...rest },
+    { size = 'xl', level = 2, spacing = false, className, asChild, ...rest },
     ref,
   ) => {
-    const Component = asChild ? Slot : (`h${level ?? 1}` as ElementType);
+    const Component = asChild ? Slot : (`h${level}` as ElementType);
 
     return (
       <Component