feat(SW-1806): Implemented design systems button inside buttonLink component and changed teasercard buttons

Approved-by: Matilda Landström

packages/design-system/lib/components/Button/button.module.css

@@ -3,6 +3,9 @@
   border-width: 2px;
   border-style: solid;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .size-large {
@@ -85,10 +88,6 @@
   color: inherit;
   padding: 0;
   margin: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .color-icon-default {

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

@@ -1 +1,3 @@
 export { Button } from './Button'
+// eslint-disable-next-line react-refresh/only-export-components
+export { withButton } from './variants'

packages/design-system/lib/components/Button/variants.ts

@@ -1,7 +1,11 @@
 import { cva } from 'class-variance-authority'
 
-import { withTypography } from '../Typography/variants'
+import {
+  config as typographyConfig,
+  withTypography,
+} from '../Typography/variants'
 
+import { deepmerge } from 'deepmerge-ts'
 import styles from './button.module.css'
 
 export const config = {
@@ -32,3 +36,18 @@ export const config = {
 } as const
 
 export const variants = cva(styles.button, withTypography(config))
+
+const buttonConfig = {
+  variants: {
+    ...config.variants,
+    typography: typographyConfig.variants.variant,
+  },
+  defaultVariants: {
+    ...config.defaultVariants,
+    typography: typographyConfig.defaultVariants.variant,
+  },
+} as const
+
+export function withButton<T>(config: T) {
+  return deepmerge(buttonConfig, config)
+}