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

@@ -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}
     >

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>}

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;
+}