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

packages/design-system/lib/components/ButtonLink/index.tsx

@@ -7,22 +7,30 @@ import { variants } from './variants'
 import type { VariantProps } from 'class-variance-authority'
 import Link from 'next/link'
 import { useIntl } from 'react-intl'
+import { ButtonIconName } from '../Button/types'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
 
 export interface ButtonLinkProps
   extends
     Omit<ComponentProps<typeof Link>, 'color'>,
-    VariantProps<typeof variants> {}
+    VariantProps<typeof variants> {
+  leadingIconName?: ButtonIconName | null
+  trailingIconName?: ButtonIconName | null
+}
 
 export default function ButtonLink({
   variant,
   color,
   size,
-  typography,
   wrapping,
   fullWidth,
   className,
   href,
   target,
+  leadingIconName,
+  trailingIconName,
+  children,
   ...props
 }: ButtonLinkProps) {
   const classNames = variants({
@@ -30,7 +38,6 @@ export default function ButtonLink({
     color,
     size,
     wrapping,
-    typography,
     fullWidth,
     className,
   })
@@ -42,12 +49,36 @@ export default function ButtonLink({
   })
 
   return (
-    <Link
-      className={classNames}
-      href={href}
-      target={target}
-      title={target === '_blank' ? newTabText : ''}
-      {...props}
-    />
+    <Typography
+      variant={
+        size === 'sm'
+          ? 'Body/Supporting text (caption)/smBold'
+          : 'Body/Paragraph/mdBold'
+      }
+    >
+      <Link
+        className={classNames}
+        href={href}
+        target={target}
+        title={target === '_blank' ? newTabText : ''}
+        {...props}
+      >
+        {leadingIconName ? (
+          <MaterialIcon
+            icon={leadingIconName}
+            color="CurrentColor"
+            size={size === 'sm' ? 20 : 24}
+          />
+        ) : null}
+        {children}
+        {trailingIconName ? (
+          <MaterialIcon
+            icon={trailingIconName}
+            color="CurrentColor"
+            size={size === 'sm' ? 20 : 24}
+          />
+        ) : null}
+      </Link>
+    </Typography>
   )
 }