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.
reload · Sep 29, 2023 · 2182449 · 2182449
1 parent cf30fda
commit 2182449
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git 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
@@ -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>
   );