feat(Ingress): remove component (#2515)

part of #2503 

Ingress on storeront now has wrong size, but this is noted and will be
fixed when we do a separate PR for storefront fixes.
This will not be deployed to production when merged

.changeset/hot-weeks-tease.md

@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Ingress: Remove component
+- Use `Paragraph variant='long'` instead

apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx

@@ -1,9 +1,4 @@
-import {
-  Heading,
-  Ingress,
-  Link,
-  Paragraph,
-} from '@digdir/designsystemet-react';
+import { Heading, Link, Paragraph } from '@digdir/designsystemet-react';
 import { Container } from '@repo/components';
 import type * as React from 'react';
 
@@ -54,7 +49,9 @@ function PostLayout({
         <main id='main' className={classes.main}>
           <div className={classes.intro}>
             <Heading level={1}>{heading}</Heading>
-            <Ingress className={classes.ingress}>{ingress}</Ingress>
+            <Paragraph className={classes.ingress} variant='long'>
+              {ingress}
+            </Paragraph>
             <Paragraph size='sm' className={classes.meta}>
               <span>{date}</span>
               <span aria-hidden className={classes.metaSquare} />

apps/storefront/components/Banner/Banner.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Heading, Ingress } from '@digdir/designsystemet-react';
+import { Heading, Paragraph } from '@digdir/designsystemet-react';
 import type { HeadingProps } from '@digdir/designsystemet-react';
 import cl from 'clsx/lite';
 import { type HTMLAttributes, createContext, useContext } from 'react';
@@ -44,7 +44,8 @@ type BannerIngressProps = HTMLAttributes<HTMLParagraphElement>;
 
 const BannerIngress = ({ className, ...props }: BannerIngressProps) => {
   return (
-    <Ingress
+    <Paragraph
+      variant='long'
       className={cl(classes.ingress, 'ds-ingress--sm', className)}
       {...props}
     />

apps/theme/components/Previews/Landing/Landing.tsx

@@ -1,4 +1,4 @@
-import { Button, Heading, Ingress } from '@digdir/designsystemet-react';
+import { Button, Heading, Paragraph } from '@digdir/designsystemet-react';
 import { MagnifyingGlassIcon, MenuHamburgerIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 
@@ -55,11 +55,15 @@ export const Landing = () => {
             <Heading size='md' className={classes.bannerTitle}>
               A need explain have out been making it
             </Heading>
-            <Ingress size='sm' className={classes.bannerIngress}>
+            <Paragraph
+              variant='long'
+              size='sm'
+              className={classes.bannerIngress}
+            >
               Multitude a hung structure return her belt of fixed had because a
               been ahead well logbook the accept as effort consideration with
               derived indulged of the all and more soon will you there.
-            </Ingress>
+            </Paragraph>
             <Button>Les mer</Button>
           </div>
           <div className={classes.bannerRight}>

apps/theme/components/TokenModal/TokenModal.tsx

@@ -3,7 +3,6 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import {
   Heading,
-  Ingress,
   Link,
   Modal,
   Paragraph,
@@ -86,10 +85,10 @@ export const TokenModal = ({
           <img src='img/emblem.svg' alt='' className={classes.emblem} />
           <span className={classes.headerText}>Kopier fargetema</span>
         </Heading>
-        <Ingress size='xs' spacing>
+        <Paragraph variant='long' size='xs' spacing>
           Velg et av alternativene under for å ta i bruk design-tokens med ditt
           tema.
-        </Ingress>
+        </Paragraph>
         <Heading level={3} size='xs' spacing>
           Alt 1. Design tokens
         </Heading>

packages/css/baseline/typography.css

@@ -49,49 +49,6 @@
   }
 }
 
-/** Ingress */
-.ds-ingress {
-  --dsc-bottom-spacing: var(--ds-spacing-5);
-
-  color: var(--ds-color-neutral-text-default);
-  font-size: var(--ds-ingress-md-font-size);
-  font-weight: var(--ds-ingress-md-font-weight);
-  letter-spacing: var(--ds-ingress-md-letter-spacing);
-  line-height: var(--ds-ingress-md-line-height);
-  margin: 0;
-
-  &[data-spacing] {
-    margin-bottom: var(--dsc-bottom-spacing);
-  }
-
-  &[data-size='xs'] {
-    --dsc-bottom-spacing: var(--ds-spacing-8);
-
-    font-weight: var(--ds-ingress-xs-font-weight);
-    line-height: var(--ds-ingress-xs-line-height);
-    font-size: var(--ds-ingress-xs-font-size);
-    letter-spacing: var(--ds-ingress-xs-letter-spacing);
-  }
-
-  &[data-size='sm'] {
-    --dsc-bottom-spacing: var(--ds-spacing-7);
-
-    font-weight: var(--ds-ingress-sm-font-weight);
-    line-height: var(--ds-ingress-sm-line-height);
-    font-size: var(--ds-ingress-sm-font-size);
-    letter-spacing: var(--ds-ingress-sm-letter-spacing);
-  }
-
-  &[data-size='lg'] {
-    --dsc-bottom-spacing: var(--ds-spacing-6);
-
-    font-weight: var(--ds-ingress-lg-font-weight);
-    line-height: var(--ds-ingress-lg-line-height);
-    font-size: var(--ds-ingress-lg-font-size);
-    letter-spacing: var(--ds-ingress-lg-letter-spacing);
-  }
-}
-
 /** Paragraph */
 .ds-paragraph {
   @composes ds-body-text--md from '../utilities.css';

packages/react/src/components/Typography/Typography.mdx

@@ -4,7 +4,6 @@ import * as typographyStories from './Typography.stories';
 import * as HeadingStories from './Heading/Heading.stories';
 import * as ParagraphStories from './Paragraph/Paragraph.stories';
 import * as LabelStories from './Label//Label.stories';
-import * as IngressStories from './Ingress/Ingress.stories';
 import * as ValidationMessageStories from './ValidationMessage/ValidationMessage.stories';
 
 <Meta of={typographyStories} />
@@ -55,13 +54,6 @@ Brukes når det trengs tekst over flere linjer. Mesteparten av teksten på et ne
 <Canvas of={ParagraphStories.Preview} />
 <Controls of={ParagraphStories.Preview} />
 
-## Ingress
-
-`Ingress` kommer ofte mellom `Heading`- og `Paragraph`-komponenten, og er ment å innlede en artikkel eller et avsnitt. Det er ofte et kort sammendrag av en større enhet, og skiller seg litt ut fra `Paragraph` ved at den har litt høyere linjehøyde og større font-størrelse.
-
-<Canvas of={IngressStories.Preview} />
-<Controls of={IngressStories.Preview} />
-
 ## Label
 
 `Label` blir brukt for å framheve tekst, ofte sammen med `Paragraph`. Den har mindre linjehøyde enn `Paragraph`, og fungerer slik fint inne i komponenter. Ofte brukt som navn på skjemakomponenter.

packages/react/src/components/Typography/Typography.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
-import { Heading, Ingress, Paragraph } from './';
+import { Heading, Paragraph } from './';
 
 const meta: Meta = {
   title: 'Komponenter/Typography',
@@ -14,12 +14,12 @@ export const EksempelTekst: StoryFn = () => (
       Samordnet registermelding (H1)
     </Heading>
 
-    <Ingress spacing>
+    <Paragraph spacing variant='long'>
       Her kan du registrere nye virksomheter, som for eksempel
       enkeltpersonforetak, foreninger, aksjeselskap, ansvarlige selskap,
       samvirkeforetak og stiftelser. De aller fleste organisasjonsformene kan
       bruke denne tjenesten.
-    </Ingress>
+    </Paragraph>
 
     <Heading level={2} size='lg' spacing>
       Når skal du bruke skjemaet? (H2)

packages/react/src/components/Typography/index.ts

@@ -1,5 +1,4 @@
 export * from './Paragraph';
 export * from './Heading';
-export * from './Ingress';
 export * from './Label';
 export * from './ValidationMessage';