From 218244988ee57cc33aa164809ad81e8ec6085bf0 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Fri, 29 Sep 2023 11:16:16 +0200
Subject: [PATCH] Capitalize headlines & button texts in Advanced Search app
 using css

This way we make sure that whatever the input text is, even in all lower
case - it will be taken care of and capitalized.
---
 .../Blocks/advanced-search/AdvancedSearch.tsx    | 14 +++++++++-----
 .../Library/input-preview/InputPreview.tsx       | 16 ++++++++++++----
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
index 7e486c994..b205059e8 100644
--- a/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
+++ b/src/stories/Blocks/advanced-search/AdvancedSearch.tsx
@@ -24,7 +24,7 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
 }) => {
   return (
     <div className="advanced-search">
-      <h1 className="text-header-h2 advanced-search__title">
+      <h1 className="text-header-h2 advanced-search__title capitalize-first">
         {isCqlSearch ? "CQL søgning" : "Avanceret søgning"}
       </h1>
       {!isCqlSearch && (
@@ -67,13 +67,17 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
               isAContainer={false}
               className="input-and-preview__preview"
             >
-              <div className="text-body-medium-medium mb-24">
+              <div className="text-body-medium-medium mb-24 capitalize-first">
                 CQL søgestreng
               </div>
               <p className="text-body-medium-regular mb-32">{cqlPreviewText}</p>
               <section>
-                <button className="link-tag mr-16">Nulstil</button>
-                <button className="link-tag mr-16">Kopier streng</button>
+                <button className="link-tag mr-16 capitalize-first">
+                  Nulstil
+                </button>
+                <button className="link-tag mr-16 capitalize-first">
+                  Kopier streng
+                </button>
                 <Links href="/" linkText="Rediger CQL" classNames="link-tag" />
               </section>
             </Pagefold>
@@ -125,7 +129,7 @@ export const AdvancedSearch: React.FC<AdvancedSearchProps> = ({
       </footer>
       <div className="advanced-search__divider" />
       <section>
-        <h2 className="text-header-h2 advanced-search__title">
+        <h2 className="text-header-h2 advanced-search__title capitalize-first">
           Viser materialer (20)
         </h2>
         <button className="link-tag mb-16">Link til søgninget</button>
diff --git a/src/stories/Library/input-preview/InputPreview.tsx b/src/stories/Library/input-preview/InputPreview.tsx
index 0d1efac60..5f555d9d4 100644
--- a/src/stories/Library/input-preview/InputPreview.tsx
+++ b/src/stories/Library/input-preview/InputPreview.tsx
@@ -20,12 +20,20 @@ const InputPreview: React.FC<InputPreviewProps> = ({
         "input-and-preview__preview--mobile": isMobile,
       })}
     >
-      <h3 className="text-body-medium-medium mb-24">CQL søgestreng</h3>
+      <h3 className="text-body-medium-medium mb-24 capitalize-first">
+        CQL søgestreng
+      </h3>
       <p className="text-body-medium-regular mb-32">{cqlPreviewText}</p>
       <footer>
-        <button className="link-tag mr-16">Nulstil</button>
-        <button className="link-tag mr-16">Kopier streng</button>
-        <Links href="/" linkText="Rediger CQL" classNames="link-tag" />
+        <button className="link-tag mr-16 capitalize-first">Nulstil</button>
+        <button className="link-tag mr-16 capitalize-first">
+          Kopier streng
+        </button>
+        <Links
+          href="/"
+          linkText="Rediger CQL capitalize-first"
+          classNames="link-tag"
+        />
       </footer>
     </Pagefold>
   );