From 4f7c257246d188a5467f465f0d91f296f83a66ed Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 2 Aug 2022 11:41:30 +0200
Subject: [PATCH] Add class that capitalizes whole text, and one for just the
 first letter

This is not anything wew have a specific task for, but we decided that
it is a useful utility class that we would like to use for our buttons.
---
 src/stories/Library/Buttons/button/Button.tsx          | 4 +++-
 src/stories/Library/material-header/MaterialHeader.tsx | 2 ++
 src/styles/scss/shared.scss                            | 8 ++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/stories/Library/Buttons/button/Button.tsx b/src/stories/Library/Buttons/button/Button.tsx
index dde5307b1..110103c83 100644
--- a/src/stories/Library/Buttons/button/Button.tsx
+++ b/src/stories/Library/Buttons/button/Button.tsx
@@ -8,6 +8,7 @@ export type ButtonProps = {
   size: "large" | "medium" | "small" | "xsmall";
   variant: "outline" | "filled";
   onClick?: () => void;
+  classNames?: string;
 };
 
 export const Button: React.FC<ButtonProps> = ({
@@ -18,6 +19,7 @@ export const Button: React.FC<ButtonProps> = ({
   size,
   variant,
   onClick,
+  classNames,
 }) => {
   const iconClassName = `btn-icon ${collapsible ? "btn-collapsible" : ""}`;
 
@@ -62,7 +64,7 @@ export const Button: React.FC<ButtonProps> = ({
   return (
     <button
       type="button"
-      className={`btn-primary ${getVariant()} ${getSize()} arrow__hover--right-small`}
+      className={`btn-primary ${getVariant()} ${getSize()} arrow__hover--right-small ${classNames}`}
       disabled={disabled}
       onClick={onClick}
     >
diff --git a/src/stories/Library/material-header/MaterialHeader.tsx b/src/stories/Library/material-header/MaterialHeader.tsx
index 90e651670..b17296192 100644
--- a/src/stories/Library/material-header/MaterialHeader.tsx
+++ b/src/stories/Library/material-header/MaterialHeader.tsx
@@ -72,6 +72,7 @@ const MaterialHeader: React.FC<MaterialHeaderProps> = ({
             disabled={false}
             collapsible={false}
             size="large"
+            classNames="capitalize-all"
           />
           <Button
             label="FIND PÅ HYLDEN"
@@ -80,6 +81,7 @@ const MaterialHeader: React.FC<MaterialHeaderProps> = ({
             disabled={false}
             collapsible={false}
             size="large"
+            classNames="capitalize-all"
           />
         </div>
         {ctaText && <p className="mt-16 text-small-caption">{ctaText}</p>}
diff --git a/src/styles/scss/shared.scss b/src/styles/scss/shared.scss
index 4ab386cc5..3eda32c3d 100644
--- a/src/styles/scss/shared.scss
+++ b/src/styles/scss/shared.scss
@@ -106,3 +106,11 @@
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
 }
+
+.capitalize-all {
+  text-transform: uppercase;
+}
+
+.capitalize-first:first-letter {
+  text-transform: uppercase;
+}