Refactor css (#248)

* Update package-lock.json * Update Angie * Update heading styles * Remove sr-only already covered by tailwind * Move telephone link styling * Don't use index as key * Refactor details / summary css * Move button styling to shared CSS * Move rich text link styling to shared CSS * Restructure CSS and add headings * Remove IE11 edge case * Move paragraph-list class * Remove support for browsers without focus-visible * Remove unused class rich-text-2xl * Move styles to PreCheckNavigation * Remove unused max class * Move ParagraphList ol styling to component * Move list stylings and remove dito styles.css * Make props Readonly * Refactor focus styling * Refactor footer link styling * Change utilities syntax * Change base syntax * Drop old safari support * Change components syntax * Remove superfluous rich text styling * Give Accordion bg-color only on focus-visible * Move body styles to styles.css * Create custom twMerge with ds support and use * Use twMerge in RichText * Make eslint happy * Refactor nested string template * Refactor index principle list styling * Refactor sitemap styling * Adapt remaining lists to new styles * Refactor error page * Refactor principle section on landing * Fix line-height * Unify prop order * Update styles.css * Fix undefined class bug * Fix component names * Give all lists max-width and remove for exceptions * Remove rich-text classes and give link styling * Update RichText.tsx * Remove list-none and ds-label-01-reg from Details * Introduce list-unstyled utility * Remove unused class from links * Inline `rich-text` styles and refactor white links * Fix vitest * Refactor twMerge import * Cache playwright dependencies * Refactor conditional pipeline checks * Revert "Refactor conditional pipeline checks" This reverts commit 5410dd8. * Revert "Cache playwright dependencies" This reverts commit 60b24e5. * Update sitemap.tsx * Remove redundant styles * Move body height / flex styles to tag * Fix support page typo * Unify breadcrumbs spacing * Improve VP index styling * Make visualisation page responsive * Improve visualisation gaps * Fix technicalFeasibility content * Change method page heading styles * Remove rounded border in feedback form * Improve feedback buttons spacing * Change method subpages heading look to h3 * Change labels to subheads where applicable * Improve PrincipleExplanation styling * Change list-unstyled handling * Add spacing between list-items
digitalservicebund · Jan 17, 2025 · bb30a7f · bb30a7f
1 parent 88e883e
commit bb30a7f
Show file tree

Hide file tree

Showing 45 changed files with 283 additions and 329 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -33,6 +33,19 @@ module.exports = {
         endOfLine: "auto",
       },
     ],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "tailwind-merge",
+            importNames: ["twMerge"],
+            message:
+              "Please import { twMerge } from '@digitalcheck/shared/utils/tailwind-merge'.",
+          },
+        ],
+      },
+    ],
   },
 
   overrides: [

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@digitalcheck/shared": "*",
-    "@digitalservice4germany/angie": "^1.1.1",
+    "@digitalservice4germany/angie": "^1.2.0",
     "@digitalservice4germany/style-dictionary": "^2.0.0",
     "@digitalservicebund/icons": "^2.0.0",
     "react": "^18.2.0",

diff --git a/packages/dito/app/components/Accordion.tsx b/packages/dito/app/components/Accordion.tsx
@@ -5,9 +5,9 @@ export default function Accordion({
 }: Readonly<{ items: AccordionItemProps[] }>) {
   return (
     <div className="accordion bg-white border-b-2 border-b-blue-800">
-      {items.map((item, index) => (
+      {items.map((item) => (
         <AccordionItem
-          key={index}
+          key={item.headline}
           headline={item.headline}
           content={item.content}
           id={item.id}

diff --git a/packages/dito/app/components/AccordionItem.tsx b/packages/dito/app/components/AccordionItem.tsx
@@ -12,10 +12,10 @@ export default function AccordionItem({
   headline,
   content,
   id,
-}: AccordionItemProps) {
+}: Readonly<AccordionItemProps>) {
   return (
     <details className="border-t-2 border-t-blue-800 group" id={id}>
-      <summary className="accordion-summary w-full p-24 flex items-center justify-between hover:bg-blue-200 focus:bg-blue-200 focus:outline focus:outline-4 focus:outline-blue-800 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 cursor-pointer group-open:bg-blue-200">
+      <summary className="w-full p-24 flex items-center justify-between cursor-pointer hover:bg-blue-200 group-open:bg-blue-200 focus-visible:bg-blue-200 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 [&::-webkit-details-marker]:hidden">
         <div className="pr-10 font-bold text-left text-16 leading-22 md:text-18 md:leading-24 text-blue-800">
           {headline}
         </div>

diff --git a/packages/dito/app/components/FeedbackForm.tsx b/packages/dito/app/components/FeedbackForm.tsx
@@ -25,7 +25,7 @@ function FeedbackInput({
   ariaLabel: string;
 }>) {
   const classes = twJoin(
-    "rounded-lg px-24 h-64 flex items-center gap-8",
+    "px-16 h-48 sm:px-24 sm:h-64 flex items-center",
     selected ? "bg-blue-800 text-white" : "bg-blue-200 text-blue-800",
   );
 
@@ -103,7 +103,7 @@ function FeedbackQuestion({
           </div>
         ) : (
           <div className="max-w-fit">
-            <div className="flex gap-16">
+            <div className="flex gap-8 sm:gap-16">
               {[1, 2, 3, 4, 5].map((number) => {
                 let ariaLabel: string;
                 switch (number) {
@@ -216,12 +216,12 @@ export default function FeedbackForm() {
           />
           <button
             type="submit"
-            className="mt-16 bg-blue-800 text-white px-24 py-12 rounded-lg"
+            className="mt-16 bg-blue-800 text-white px-24 py-12"
           >
             Feedback absenden
           </button>
         </form>
-        <RichText markdown={feedbackForm.mail} className="ds-label-01-bold" />
+        <RichText markdown={feedbackForm.mail} className="font-bold" />
       </Container>
     </Background>
   );

diff --git a/packages/dito/app/components/ParagraphList.tsx b/packages/dito/app/components/ParagraphList.tsx
@@ -100,9 +100,9 @@ const PrincipleExplanation = ({
   const shouldHighlight = location.hash === `#${id}`;
   const color = HIGHLIGHT_COLORS[erfuellung.Prinzip.Nummer];
   const explanationClasses = twJoin(
-    "p-4 w-fit max-w-[642px]",
+    "w-fit max-w-[642px] px-8",
     color.border,
-    shouldHighlight ? "border-4" : "border-l-4 py-8",
+    shouldHighlight ? "border-4 p-4" : "border-l-4 p-8",
   );
 
   return (
@@ -111,7 +111,7 @@ const PrincipleExplanation = ({
         <Heading
           tagName="h4"
           text={`Prinzip ${erfuellung.Prinzip.Nummer} – ${erfuellung.Prinzip.Name}`}
-          look="ds-label-01-bold pb-4"
+          look="ds-label-01-bold pb-8"
         />
         {highlightID && (
           <Link
@@ -162,7 +162,7 @@ const AbsatzContent = ({
     const content = nestListInListItems(prependNumberToAbsatz(absatzGroup));
 
     return (
-      <div className="paragraph-list">
+      <div className="[&_ol]:list-decimal [&_ol_ol]:list-[lower-alpha]">
         <BlocksRenderer
           content={content}
           modifiers={{
@@ -177,7 +177,7 @@ const AbsatzContent = ({
         />
         {absatzGroup.PrinzipErfuellungen.length > 0 && (
           <div className="ds-stack-8 mt-8">
-            <span className="ds-label-01-bold italic" id={baseLabelID}>
+            <span className="ds-subhead font-bold" id={baseLabelID}>
               {digitalSuitability.paragraphs.explanation}
             </span>
             {absatzGroup.PrinzipErfuellungen.toSorted(
@@ -286,13 +286,14 @@ function Paragraph({
 
   return (
     <div key={paragraph.Nummer}>
-      <div className="ds-stack-8 rich-text">
+      <div className="ds-stack-8">
         <Heading
           tagName="h3"
           text={`§ ${paragraph.Nummer} ${paragraph.Gesetz}`}
-          look="ds-label-01-bold"
+          look="ds-subhead"
+          className="font-bold"
         />
-        <p className="ds-label-01-bold">{paragraph.Titel}</p>
+        <p className="ds-subhead font-bold">{paragraph.Titel}</p>
         <div className="border-l-4 border-gray-300 pl-8 ds-stack-16">
           {groupedAbsaetze.map((absatzGroup) => (
             <AbsatzContent

diff --git a/packages/dito/app/components/SupportBanner.tsx b/packages/dito/app/components/SupportBanner.tsx
@@ -13,7 +13,7 @@ export default function SupportBanner({
           <Box
             heading={{
               tagName: "h2",
-              look: "ds-label-01-bold",
+              look: "ds-subhead font-bold",
               text: supportBanner.feedback.title,
             }}
             content={{
@@ -24,7 +24,7 @@ export default function SupportBanner({
         <Box
           heading={{
             tagName: "h2",
-            look: "ds-label-01-bold",
+            look: "ds-subhead font-bold",
             text: supportBanner.support.title,
           }}
           content={{

diff --git a/packages/dito/app/components/VisualisationItem.tsx b/packages/dito/app/components/VisualisationItem.tsx
@@ -24,8 +24,8 @@ export default function VisualisationItem({
   const visualisationUrl = visualisierung.Bild.url.split("/").pop();
 
   return (
-    <div className="flex max-sm:flex-col mt-16 gap-32 pb-16 rich-text">
-      <div className="w-1/2 max-sm:px-16 max-sm:pt-32">
+    <div className="flex max-sm:flex-col gap-16 sm:gap-32">
+      <div className="sm:w-1/2">
         <Link
           to={`${ROUTE_VISUALISATION.url}/${visualisationUrl}`}
           reloadDocument
@@ -71,7 +71,7 @@ export default function VisualisationItem({
           />
         </div>
       </div>
-      <div className="w-1/2 p-0 mb-12">
+      <div className="sm:w-1/2 mb-12">
         <Heading tagName="h3" look="ds-heading-03-reg" className="mb-16">
           {visualisierung.Titel}
         </Heading>

diff --git a/packages/dito/app/resources/content.ts b/packages/dito/app/resources/content.ts
@@ -238,15 +238,19 @@ Damit die digitale Umsetzung reibungslos klappt, muss die Regelung digitaltaugli
       },
     ],
   },
-  principals: {
+  principles: {
     title: "5 Prinzipien für digitaltaugliche Gesetzgebung",
-    content: `1. Prinzip 1: Digitale Kommunikation sicherstellen
-2. Prinzip 2: Wiederverwendung von Daten und Standards ermöglichen
-3. Prinzip 3: Datenschutz und Informationssicherheit gewährleisten
-4. Prinzip 4: Klare Regelungen für eine digitale Ausführung finden
-5. Prinzip 5: Automatisierung ermöglichen
-
-[Details und Beispiele](${ROUTE_METHODS_FIVE_PRINCIPLES.url})`,
+    content: [
+      "Prinzip 1: Digitale Kommunikation sicherstellen",
+      "Prinzip 2: Wiederverwendung von Daten und Standards ermöglichen",
+      "Prinzip 3: Datenschutz und Informationssicherheit gewährleisten",
+      "Prinzip 4: Klare Regelungen für eine digitale Ausführung finden",
+      "Prinzip 5: Automatisierung ermöglichen",
+    ],
+    link: {
+      text: "Details und Beispiele",
+      href: ROUTE_METHODS_FIVE_PRINCIPLES.url,
+    },
   },
 };
 
@@ -659,7 +663,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
 - in der **formellen Beteiligung** eine wirkungsvolle Umsetzung zu besprechen.`,
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: { text: "2.1. Zuständige Akteurinnen und Akteure auflisten" },
         info: [
           {
@@ -676,7 +680,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         ],
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.2. Aufgaben und Abläufe gemeinsam erfassen",
         },
@@ -703,7 +707,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         ],
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.3. IT-Systeme gemeinsam erfassen",
         },
@@ -735,7 +739,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         text: "Mit einem guten Verständnis des Ist-Zustandes erarbeiten Sie nun Ihre Regelung. Jetzt geht es darum, Möglichkeiten zur Digitalisierung zu finden und Hindernisse aus dem Weg zu räumen — eine gute digitale Umsetzung spart langfristig Zeit und Geld und erfüllt die heutigen Erwartungen der Betroffenen an den Staat.",
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.4. Möglichkeiten und Hindernisse der digitalen Umsetzung identifizieren",
         },
@@ -754,7 +758,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         ],
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.5. Technische Umsetzbarkeit sicherstellen",
         },
@@ -791,7 +795,7 @@ Die Erkenntnisse und Ergebnisse aus den vorigen Schritten helfen Ihnen dabei,
 - den **Umsetzungsprozess einfach besprechbar** zu machen in Abstimmungen anhand von Visualisierungen.`,
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: { text: "Schreiben Sie die Regelung" },
         text: "Nutzen Sie Ihre gewohnten Programme und Arbeitshilfen, um die Regelung zu schreiben — z. B. eNorm und das Handbuch der Rechtsförmigkeit.",
       },
@@ -1276,13 +1280,13 @@ export const technicalFeasibility = {
     icon: DrawOutlined,
     title: "Verstehen Sie die Auswirkungen auf IT-Systeme",
     text: `Vergleichen Sie gemeinsam mit den [zuständigen Akteurinnen und Akteuren](${ROUTE_METHODS_RESPONSIBLE_ACTORS.url}) das geplante Vorhaben mit den Möglichkeiten der bestehenden IT-Systeme. Überprüfen Sie die Informationen mithilfe neutraler IT-Expertinnen und -Experten. 
-<br class="block content-[''] !mb-24" />
+
 So erfahren Sie
 - welche IT-Systeme für Ihr Vorhaben verwendet werden können
 - und an welchen Stellen Änderungen nötig sind.
 <br class="block content-[''] !mb-24" />
 
-### Sie müssen nicht alles allein bewältigen
+<h3 class="ds-subhead font-bold">Sie müssen nicht alles allein bewältigen</h3>
 
 Bei kleinen Fragen rufen Sie den Digitalcheck-Support an unter 0151/40 76 78 39.
 Für ein unterstützendes, einstündiges Videotelefonat schreiben Sie eine E-Mail an [email protected] oder buchen Sie direkt einen Termin.`,

diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
@@ -44,7 +44,6 @@ import {
 import { PLAUSIBLE_DOMAIN, PLAUSIBLE_SCRIPT } from "utils/constants.server";
 import { getFeatureFlags } from "utils/featureFlags.server";
 import { useNonce } from "utils/nonce";
-import styles from "./styles.css?url";
 
 export function loader({ request }: LoaderFunctionArgs) {
   const featureFlags = getFeatureFlags();
@@ -158,7 +157,6 @@ export const headers: HeadersFunction = () => ({
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: sharedStyles },
-  { rel: "stylesheet", href: styles },
   { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
   {
     rel: "icon",
@@ -220,11 +218,11 @@ const PageHeader = ({
 }) => (
   <header>
     <div className="min-h-64 p-16 flex justify-between items-center">
-      <Link to={ROUTE_LANDING.url} className="ds-label-01-bold">
+      <Link to={ROUTE_LANDING.url}>
         <img src={bundLogo} alt="Logo des Bundes" width={54} />
       </Link>
       <div className="flex items-center max-lg:hidden">
-        <div className="ds-label-02-reg text-lg">
+        <div className="text-lg">
           <span className="font-bold">{header.title}</span>
           <span className="mx-8">|</span>
           <Button href="/unterstuetzung" look="link">
@@ -236,13 +234,13 @@ const PageHeader = ({
         <PhoneOutlined className="mx-8 w-18" />
         <a
           href={`tel:${header.contact.number}`}
-          className="ds-link-01-bold text-lg underline plausible-event-name=Phone+Click plausible-event-position=header"
+          className="ds-link-01-bold plausible-event-name=Phone+Click plausible-event-position=header"
         >
           {header.contact.number}
         </a>
       </div>
       <div className="lg:hidden">
-        <a href="/unterstuetzung" className="ds-link-01-bold text-lg underline">
+        <a href="/unterstuetzung" className="ds-link-01-bold">
           Kontakt & Unterstützung
         </a>
       </div>
@@ -352,15 +350,9 @@ Vielen Dank für Ihr Verständnis.`;
         <div className="border-t-2 border-t-gray-400">
           <Container>
             <div className="ds-stack-8 mb-32">
-              <Heading
-                text={errorStatus}
-                tagName="div"
-                className="ds-label-01-bold"
-              />
+              <span className="ds-label-01-bold">{errorStatus}</span>
               <Heading text={errorTitle} className="ds-heading-02-reg" />
-              <div className="ds-subhead">
-                <RichText markdown={errorMessage} />
-              </div>
+              <RichText markdown={errorMessage} className="ds-subhead" />
             </div>
             <Button
               id="error-back-button"