Merged in fix/BOOK-293-button-variants (pull request #3371)

fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -113,12 +113,8 @@ export default function PasswordInput({
                   }
                   aria-controls={field.name}
                   className={styles.toggleButton}
-                >
-                  <MaterialIcon
-                    icon={isPasswordVisible ? "visibility_off" : "visibility"}
-                    size={24}
-                  />
-                </IconButton>
+                  iconName={isPasswordVisible ? "visibility_off" : "visibility"}
+                />
               ) : null}
             </div>
 

apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx

@@ -17,8 +17,7 @@ interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
 export default function ShowMoreButton({
   variant = "Text",
   color = "Primary",
-  size = "Medium",
-  typography = "Body/Paragraph/mdBold",
+  size = "md",
   showLess,
   textShowMore,
   textShowLess,
@@ -47,7 +46,6 @@ export default function ShowMoreButton({
       color={color}
       size={size}
       onPress={loadMoreData}
-      typography={typography}
       {...props}
     >
       {showLess ? (

apps/scandic-web/components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -27,8 +27,7 @@ export default function TeaserCardSidepeek({
         onPress={() => setSidePeekIsOpen(true)}
         variant="Secondary"
         color="Primary"
-        size="Small"
-        typography="Body/Supporting text (caption)/smBold"
+        size="sm"
       >
         {button.call_to_action_text}
         <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
@@ -54,8 +53,7 @@ export default function TeaserCardSidepeek({
             <ButtonLink
               variant="Primary"
               color="Primary"
-              size="Small"
-              typography="Body/Supporting text (caption)/smBold"
+              size="sm"
               href={primary_button.href}
               target={primary_button.openInNewTab ? "_blank" : undefined}
             >
@@ -66,8 +64,7 @@ export default function TeaserCardSidepeek({
             <ButtonLink
               variant="Secondary"
               color="Primary"
-              size="Small"
-              typography="Body/Supporting text (caption)/smBold"
+              size="sm"
               href={secondary_button.href}
               target={secondary_button.openInNewTab ? "_blank" : undefined}
             >

apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx

@@ -57,8 +57,7 @@ export default function TeaserCard({
               <ButtonLink
                 variant="Tertiary"
                 color="Primary"
-                size="Small"
-                typography="Body/Supporting text (caption)/smBold"
+                size="sm"
                 className={styles.ctaButton}
                 href={primaryButton.href}
                 target={primaryButton.openInNewTab ? "_blank" : undefined}
@@ -70,8 +69,7 @@ export default function TeaserCard({
               <ButtonLink
                 variant="Secondary"
                 color="Primary"
-                size="Small"
-                typography="Body/Supporting text (caption)/smBold"
+                size="sm"
                 className={styles.ctaButton}
                 href={secondaryButton.href}
                 target={secondaryButton.openInNewTab ? "_blank" : undefined}