Lerna versionbump [ci skip]

- @navikt/ds-react@0.11.5
 - @navikt/ds-react-internal@0.6.5

.storybook/stories/introduction.stories.mdx

@@ -20,3 +20,16 @@ import "@navikt/ds-css"
 Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
 
 Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
+
+## Bruke styled-components eller emotion
+
+Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
+Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
+
+Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
+
+### Løsninger
+
+[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
+
+> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/core/react/src/alert/Alert.tsx

@@ -81,7 +81,6 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
         focusable="false"
         role="img"
         variant={variant}
-        alt={`${variant}-ikon`}
         className="navds-alert__icon"
       />
       <BodyLong as="div" size={size} className="navds-alert__wrapper">

@navikt/core/react/src/loader/Loader.tsx

@@ -39,11 +39,11 @@ const Loader = forwardRef<SVGSVGElement, LoaderProps>(
     },
     ref
   ) => {
-    const internalId = useId(id);
+    const internalId = useId();
 
     return (
       <svg
-        aria-labelledby={internalId}
+        aria-labelledby={id ?? `loader-${internalId}`}
         ref={ref}
         className={cl(
           "navds-loader",

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "private": false,
   "description": "NAV internal designsystem react components",
   "author": "NAV Designsystem team",
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@navikt/ds-icons": "^0.5.6",
-    "@navikt/ds-react": "^0.11.3",
+    "@navikt/ds-react": "^0.11.5",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.1",