Etu 63197 oppdatere badge og tag i kode

apps/documentation/src/data/props/feedback-props.tsx

@@ -51,4 +51,10 @@ export const badgeprops = [
     defaultValue: 'status',
     type: 'dropdown',
   },
+  {
+    name: 'size',
+    options: ['small', 'medium', 'large'],
+    defaultValue: 'medium',
+    type: 'dropdown',
+  },
 ];

apps/documentation/src/pages/komponenter/feedback/badge.mdx

@@ -11,6 +11,7 @@ tags: hjelpetekst, tooltip, verktøyhjelp, popover
 import { SubtractIcon } from '@entur/icons';
 import { badgeprops } from '@data/props/feedback-props';
 import { SEO } from '@components/seo/SEO';
+import { BannerAlertBox } from '@entur/alert';
 
 export const Head = ( props ) => {
   return <SEO title={props.pageContext.frontmatter.title} description={props.pageContext.frontmatter.description} pathname={props.pageContext.frontmatter.route} />
@@ -31,6 +32,8 @@ Badge inneholder varslene `StatusBadge`, `BulletBadge` og `NotificationBadge`. T
 
 ### Status badge
 
+<BannerAlertBox variant="warning" title="Deprecated">`StatusBadge` og `Badge` med `type="status"` er avviklet. Bruk `Tag` fra `@entur/layout` i stedet.</BannerAlertBox>
+
 `StatusBadge` er en visuell indikator som brukes til å vise statusen til et element.
 Komponenten tilbys i ulike farger for å indikere hvilke status et element har.
 `StatusBadge` kan gi melding om advarsler, bekreftelser eller om noe er feil.

apps/documentation/src/pages/komponenter/layout-og-flater/tag.mdx

@@ -35,6 +35,33 @@ export const Head = ( props ) => {
   }
 ```
 
+## Varianter
+
+Tag kommer i seks varianter: `primary`, `neutral` (standard), `success`, `warning`, `negative` og `information`.
+
+```jsx
+<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+  <Tag variant="primary">Primary</Tag>
+  <Tag variant="neutral">Neutral</Tag>
+  <Tag variant="success">Success</Tag>
+  <Tag variant="warning">Warning</Tag>
+  <Tag variant="negative">Negative</Tag>
+  <Tag variant="information">Information</Tag>
+</div>
+```
+
+## Størrelser
+
+Tag finnes i tre størrelser: `small`, `medium` (standard) og `large`.
+
+```jsx
+<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+  <Tag size="small">Small</Tag>
+  <Tag size="medium">Medium</Tag>
+  <Tag size="large">Large</Tag>
+</div>
+```
+
 ## Retningslinjer for bruk
 
 Tags brukes for å kategorisere eller organisere elementer ved hjelp av nøkkelord som beskriver dem. Bruk tags når innholdet har mange kategorier, og brukeren trenger en måte å skille mellom dem. For enkel skanning av de ulike, bør teksten ikke være på mer enn to ord.