feat: remove Span component in favor of a twind class (#1141)

* feat: remove Span component in favor of a twind class

* fix: fix Tile component usage of classnames

* fix: fix lint

* fix: fix lint

Author: DasProffi

landing-page/components/Footer.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import * as CookieConsent from 'vanilla-cookieconsent'
-import { Span } from '@helpwave/common/components/Span'
 import { Helpwave } from '@helpwave/common/icons/Helpwave'
 import { tw } from '@helpwave/common/twind'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
@@ -116,7 +115,7 @@ const Footer = () => {
       <div
         className={tw('flex flex-row justify-center w-full h-[128px] items-center justify-center mx-auto font-space')}>
         <Helpwave color="white" size={128}/>
-        <Span type="subsectionTitle">&copy; {year} helpwave</Span>
+        <span className={tw('textstyle-title-normal')}>&copy; {year} helpwave</span>
       </div>
     </div>
   )

landing-page/components/Header.tsx

@@ -1,4 +1,3 @@
-import { Span } from '@helpwave/common/components/Span'
 import { Helpwave } from '@helpwave/common/icons/Helpwave'
 import { tw } from '@helpwave/common/twind'
 import { Menu as MenuIcon, X } from 'lucide-react'
@@ -102,8 +101,6 @@ const Header = () => {
   const [navbarOpen, setNavbarOpen] = useState(false)
   const translation = useTranslation(defaultHeaderTranslation, {})
 
-  const navigationItemStyle = tw('!font-bold font-space')
-
   return (
     <>
       <div className={tw('absolute flex flex-row justify-center top-0 w-screen z-[50] bg-hw-grayscale-50 mobile:px-6 tablet:px-12 desktop:px-24')}>
@@ -122,18 +119,18 @@ const Header = () => {
                 <div key={name}>
                   {subpage === undefined ? (
                     <Link href={url}>
-                      <Span className={navigationItemStyle}>
+                      <span className={tw('textstyle-navigation-item')}>
                         {translation[name]}
-                      </Span>
+                      </span>
                     </Link>
                   ) : (
                     <Menu<HTMLDivElement>
                       alignment="tl"
                       trigger={(onClick, ref) => (
                         <div ref={ref} onClick={onClick} className={tw('cursor-pointer select-none')}>
-                          <Span className={navigationItemStyle}>
+                          <span className={tw('textstyle-navigation-item')}>
                             {translation[name]}
-                          </Span>
+                          </span>
                         </div>
                       )}
                       showOnHover={true}
@@ -146,9 +143,9 @@ const Header = () => {
                         (
                         <Link key={subPageName} className={tw('cursor-pointer')} href={subPageExternal ? subPageUrl : url + subPageUrl}>
                           <MenuItem alignment="left">
-                            <Span className={navigationItemStyle}>
+                            <span className={tw('textstyle-navigation-item')}>
                               {translation[subPageName]}
-                            </Span>
+                            </span>
                           </MenuItem>
                         </Link>
                         ))}
@@ -183,9 +180,9 @@ const Header = () => {
 
             <div className={tw('w-full p-2')}>
               <Link href="/" onClick={() => setNavbarOpen(false)}>
-                <Span type="heading">
+                <span className={tw('textstyle-title-lg')}>
                   home
-                </Span>
+                </span>
               </Link>
             </div>
 
@@ -197,16 +194,16 @@ const Header = () => {
               <div key={name} className={tw('w-full p-2')}>
                 {subpage === undefined ? (
                   <Link href={url} onClick={() => setNavbarOpen(false)}>
-                    <Span type="heading">
+                    <span className={tw('textstyle-title-lg')}>
                       {translation[name]}
-                    </Span>
+                    </span>
                   </Link>
                 ) : (
                   <Menu<HTMLDivElement> alignment="tl" trigger={(onClick, ref) => (
                     <div ref={ref} onClick={onClick} className={tw('cursor-pointer select-none')}>
-                      <Span type="heading">
+                      <span className={tw('textstyle-title-lg')}>
                         {translation[name]}
-                      </Span>
+                      </span>
                     </div>
                   )}>
                     {subpage.map(({
@@ -218,9 +215,9 @@ const Header = () => {
                       <Link key={subPageName} className={tw('cursor-pointer')} onClick={() => setNavbarOpen(false)}
                         href={subPageExternal ? subPageUrl : url + subPageUrl}>
                         <MenuItem alignment="left">
-                          <Span type="heading">
+                          <span className={tw('textstyle-title-lg')}>
                             {translation[subPageName]}
-                          </Span>
+                          </span>
                         </MenuItem>
                       </Link>
                       ))}

landing-page/components/NewsLetterForm.tsx

@@ -2,7 +2,6 @@ import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import { tw } from '@helpwave/common/twind'
-import { Span } from '@helpwave/common/components/Span'
 import { Input } from '@helpwave/common/components/user-input/Input'
 import { useState } from 'react'
 import { Select } from '@helpwave/common/components/user-input/Select'
@@ -119,8 +118,8 @@ export const NewsLetterForm = ({
   return (
     <div className={tw('rounded-lg py-2 px-4 w-full bg-[#FFFFFFEE] border border-2')}>
       <div className={tw('flex flex-col')}>
-        <Span type="title">{translation.title}</Span>
-        <Span type="formDescription">{translation.subtitle}</Span>
+        <span className={tw('textstyle-title-md')}>{translation.title}</span>
+        <span className={tw('textstyle-form-description')}>{translation.subtitle}</span>
         <div className={tw('flex flex-col my-2 gap-y-1')}>
         <form>
           <Input

landing-page/components/PartnerList.tsx

@@ -1,6 +1,5 @@
 import { tw } from '@twind/core'
 import Image from 'next/image'
-import { Span } from '@helpwave/common/components/Span'
 import { Carousel } from '@helpwave/common/components/layout/Carousel'
 
 export type Partner = {
@@ -22,7 +21,7 @@ export const PartnerList = ({
 }: PartnerListProps) => {
   return (
     <div className={tw('flex flex-col gap-y-4 items-center w-full')}>
-      <Span type="title" className={tw('!text-2xl')}>{title}</Span>
+      <span className={tw('textstyle-title-lg')}>{title}</span>
       <Carousel
         hintNext={true} isLooping={true} isAutoLooping={true}
         heights={{

landing-page/components/sections/landing/MarketStatsSection.tsx

@@ -2,7 +2,6 @@ import { tw } from '@helpwave/common/twind'
 import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
-import { Span } from '@helpwave/common/components/Span'
 import type { PropsWithChildren } from 'react'
 import Image from 'next/image'
 import { SectionBase } from '@/components/sections/SectionBase'
@@ -16,8 +15,8 @@ const MarketStatsItem = ({ children, stat, title }: MarketStatsItemProps) => {
   return (
     <div className={tw('flex flex-col items-center')}>
       {children}
-      <Span className={tw('text-3xl mobile:text-xl mt-2 mobile:font-semibold')}>{stat}</Span>
-      <h4><Span type="description" className={tw('text-xl mobile:!text-base')}>{title}</Span></h4>
+      <span className={tw('text-3xl mobile:text-xl mt-2 mobile:font-semibold')}>{stat}</span>
+      <h4><span className={tw('textstyle-description text-xl mobile:!text-base')}>{title}</span></h4>
     </div>
   )
 }
@@ -52,7 +51,7 @@ const MarketStatsSection = ({ overwriteTranslation }: PropsForTranslation<Market
   return (
     <SectionBase backgroundColor="darkSecondary" className={tw('flex flex-col text-white pb-24 font-space')}>
       <h1 className={tw('w-full text-3xl text-center font-space')}>{translation.germanyHealthcareSystem}</h1>
-      <Span type="description" className={tw('text-center')}>{translation.marketPotential}</Span>
+      <span className={tw('text-center textstyle-description')}>{translation.marketPotential}</span>
       <div className={tw('mt-8 w-full flex flex-wrap gap-y-16 gap-x-32 justify-evenly items-center')}>
         <MarketStatsItem stat="1.800" title={translation.hospitals}>
           {/* Image needs attribution to https://www.flaticon.com/free-icon/hospital_3809392?term=hospital&page=1&position=8&origin=search&related_id=3809392 */}

landing-page/components/sections/landing/StartSection.tsx

@@ -3,7 +3,6 @@ import type { PropsForTranslation } from '@helpwave/common/hooks/useTranslation'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import Image from 'next/image'
-import { Span } from '@helpwave/common/components/Span'
 import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
 import { SectionBase } from '@/components/sections/SectionBase'
 
@@ -32,8 +31,8 @@ const StartSection = ({ overwriteTranslation }: PropsForTranslation<LandingPageT
     >
       <div className={tw('flex flex-col items-center flex-1')}>
         <div className={tw('flex flex-col gap-y-2 max-w-[600px]')}>
-          <h1><Span type="title" className={tw('!text-4xl')}>{translation.title}</Span></h1>
-          <Span className={tw('font-space font-semibold !text-2xl')}><MarkdownInterpreter text={translation.description}/></Span>
+          <h1 className={tw('textstyle-title-2xl')}>{translation.title}</h1>
+          <span className={tw('textstyle-title-lg')}><MarkdownInterpreter text={translation.description}/></span>
         </div>
       </div>
       <div className={tw('desktop:relative desktop:right-0 p-4 pr-0 mobile:pr-4 rounded-l-3xl mobile:rounded-3xl bg-white w-2/5 tablet:min-w-[360px] mobile:w-4/5 z-10 h-fit shadow-around-lg')}>

landing-page/components/sections/landing/StepsToDigitalizationSection.tsx

@@ -1,7 +1,6 @@
 import { tw } from '@helpwave/common/twind'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
-import { Span } from '@helpwave/common/components/Span'
 import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
 import type { TextImageProps } from '@helpwave/common/components/TextImage'
 import { TextImage } from '@helpwave/common/components/TextImage'
@@ -97,8 +96,8 @@ export const StepsToDigitalizationSection = () => {
   return (
     <SectionBase className={tw('flex flex-col gap-y-8 w-full !max-w-[1600px]')} outerClassName={tw('!px-0')}>
       <div className={tw('flex flex-col items-center text-center gap-y-2')}>
-        <h2><Span type="title" className={tw('!text-3xl')}><MarkdownInterpreter text={translation.title}/></Span></h2>
-        <Span className={tw('font-space font-semibold')}><MarkdownInterpreter text={translation.description}/></Span>
+        <h2 className={tw('textstyle-title-xl')}><MarkdownInterpreter text={translation.title}/></h2>
+        <span className={tw('textstyle-title-sm')}><MarkdownInterpreter text={translation.description}/></span>
       </div>
       <Carousel hintNext={true} isLooping={true} isAutoLooping={true} heights={{ tablet: 300 }} blurColor="hw-grayscale-50">
         {items.map((value, index) => (

landing-page/components/sections/landing/TasksDemoSection.tsx

@@ -2,7 +2,6 @@ import { tw } from '@helpwave/common/twind'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import { HelpwaveBadge } from '@helpwave/common/components/HelpwaveBadge'
-import { Span } from '@helpwave/common/components/Span'
 import Link from 'next/link'
 import Image from 'next/image'
 import { ItemGrid } from '@helpwave/common/components/layout/ItemGrid'
@@ -55,7 +54,7 @@ export const TasksDemoSection = () => {
       <div className={tw('flex flex-col desktop:flex-row w-full items-end justify-between gap-x-16 gap-y-8')}>
         <div className={tw('flex flex-col gap-y-4 desktop:max-w-[70%]')}>
           <HelpwaveBadge className={tw('!text-hw-primary-800 !bg-hw-primary-200 !w-fit')} title={translation.helpwaveTasks}/>
-          <Span type="title" className={tw('!text-2xl')}>{translation.workflowManagement}</Span>
+          <span className={tw('textstyle-title-lg')}>{translation.workflowManagement}</span>
           <ItemGrid columns={1} className={tw('font-medium mt-2')}>
             {translation.feature1}
             {translation.feature2}

landing-page/components/sections/landing/VisionSection.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from '@helpwave/common/hooks/useTranslation'
 import type { Languages } from '@helpwave/common/hooks/useLanguage'
 import Image from 'next/image'
 import { Chip } from '@helpwave/common/components/ChipList'
-import { Span } from '@helpwave/common/components/Span'
 import { MarkdownInterpreter } from '@helpwave/common/components/MarkdownInterpreter'
 import { SectionBase } from '@/components/sections/SectionBase'
 
@@ -38,8 +37,8 @@ const StartSection = ({ overwriteTranslation }: PropsForTranslation<VisionSectio
     >
       <div className={tw('flex flex-col w-1/2 mobile:w-full gap-y-2')}>
         <Chip className={tw('!w-fit bg-gray-200 font-semibold px-4')}>{translation.ourVision}</Chip>
-        <h2><Span type="title" className={tw('!text-3xl')}>{translation.title}</Span></h2>
-        <Span className={tw('font-inter font-semibold')}><MarkdownInterpreter text={translation.description}/></Span>
+        <h2 className={tw('textstyle-title-xl')}>{translation.title}</h2>
+        <span className={tw('font-inter font-semibold')}><MarkdownInterpreter text={translation.description}/></span>
       </div>
       <Image src={imageURL} alt="" width={0} height={0} className={tw('mobile:w-full w-1/2')}/>
     </SectionBase>

landing-page/components/sections/mediQuu/BrandInformationSection.tsx

@@ -52,16 +52,16 @@ export const BrandDescriptionsSection = () => {
   return (
     <SectionBase className={tw('flex flex-col gap-8 justify-center')} backgroundColor="gray">
       <Tile
-        title={{ value: translation.aboutMediQuuTitle, type: 'title' }}
-        description={{ value: translation.aboutMediQuuDescription, type: 'normal' }}
+        title={{ value: translation.aboutMediQuuTitle, className: 'textstyle-title-lg' }}
+        description={{ value: translation.aboutMediQuuDescription, className: '' }}
         prefix={(
           <Image src="https://cdn.helpwave.de/mediquu/logo_2021.png" alt="" width={220} height={64} />
         )}
         className={tw('bg-white rounded-3xl px-6 mobile:py-6 tablet:py-12 desktop:py-16 !gap-6 !w-fit shadow-md mobile:flex-col tablet:flex-col')}
       />
       <Tile
-        title={{ value: translation.aboutHelpwaveTitle, type: 'title' }}
-        description={{ value: translation.aboutHelpwaveDescription, type: 'normal' }}
+        title={{ value: translation.aboutHelpwaveTitle, className: 'textstyle-title-lg' }}
+        description={{ value: translation.aboutHelpwaveDescription, className: '' }}
         prefix={(
           <div className={tw('min-w-[220px]')}>
             <HelpwaveBadge