Merged in fix/3697-prettier-configs (pull request #3396)

fix(SW-3691): Setup one prettier config for whole repo

* Setup prettierrc in root and remove other configs


Approved-by: Joakim Jäderberg
Approved-by: Linus Flood

packages/design-system/lib/components/Avatar/Avatar.stories.tsx

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 
-import { Avatar } from '.'
-import { config } from './variants'
+import { Avatar } from "."
+import { config } from "./variants"
 
 const meta: Meta<typeof Avatar> = {
-  title: 'Core Components/Avatar',
+  title: "Core Components/Avatar",
   component: Avatar,
   parameters: {
-    layout: 'centered',
+    layout: "centered",
   },
   argTypes: {
     size: {
-      control: { type: 'select' },
+      control: { type: "select" },
       options: Object.keys(config.variants.size),
     },
   },
@@ -20,31 +20,31 @@ const meta: Meta<typeof Avatar> = {
 export default meta
 
 type Story = StoryObj<typeof Avatar>
-const imageFile = './img/profile-picture.png' as const
+const imageFile = "./img/profile-picture.png" as const
 export const WithImage: Story = {
   args: {
     src: imageFile,
-    alt: 'Profile photo',
-    size: 'md',
+    alt: "Profile photo",
+    size: "md",
   },
 }
 
 export const WithInitials: Story = {
   args: {
-    initials: 'FR',
-    size: 'md',
+    initials: "FR",
+    size: "md",
   },
 }
 
 export const Fallback: Story = {
   args: {
-    size: 'md',
+    size: "md",
   },
 }
 
 export const SmallSize: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       <Avatar src={imageFile} alt="Profile photo" size="sm" />
       <Avatar initials="FR" size="sm" />
       <Avatar size="sm" />
@@ -54,7 +54,7 @@ export const SmallSize: Story = {
 
 export const MediumSize: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       <Avatar src={imageFile} alt="Profile photo" size="md" />
       <Avatar initials="FR" size="md" />
       <Avatar size="md" />
@@ -64,7 +64,7 @@ export const MediumSize: Story = {
 
 export const LargeSize: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       <Avatar src={imageFile} alt="Profile photo" size="lg" />
       <Avatar initials="FR" size="lg" />
       <Avatar size="lg" />
@@ -74,39 +74,39 @@ export const LargeSize: Story = {
 
 export const AllSizes: Story = {
   render: () => (
-    <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
+    <div style={{ display: "flex", gap: "24px", alignItems: "center" }}>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '8px',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          alignItems: "center",
         }}
       >
         <Avatar initials="FR" size="sm" />
-        <span style={{ fontSize: '12px' }}>Small (20px)</span>
+        <span style={{ fontSize: "12px" }}>Small (20px)</span>
       </div>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '8px',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          alignItems: "center",
         }}
       >
         <Avatar initials="FR" size="md" />
-        <span style={{ fontSize: '12px' }}>Medium (32px)</span>
+        <span style={{ fontSize: "12px" }}>Medium (32px)</span>
       </div>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '8px',
-          alignItems: 'center',
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          alignItems: "center",
         }}
       >
         <Avatar initials="FR" size="lg" />
-        <span style={{ fontSize: '12px' }}>Large (55px)</span>
+        <span style={{ fontSize: "12px" }}>Large (55px)</span>
       </div>
     </div>
   ),

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

@@ -1,28 +1,28 @@
-import { MaterialIcon } from '../Icons/MaterialIcon'
-import { Typography } from '../Typography'
-import Image from '../Image'
+import { MaterialIcon } from "../Icons/MaterialIcon"
+import { Typography } from "../Typography"
+import Image from "../Image"
 
-import { variants } from './variants'
-import type { AvatarProps } from './types'
+import { variants } from "./variants"
+import type { AvatarProps } from "./types"
 
 export function Avatar({
   src,
   alt,
   initials,
-  size = 'md',
+  size = "md",
   className,
 }: AvatarProps) {
   const classNames = variants({ size, className })
-  const pixelSize = size === 'sm' ? 24 : size === 'md' ? 32 : 55
-  const iconSize = size === 'sm' ? 16 : 24
+  const pixelSize = size === "sm" ? 24 : size === "md" ? 32 : 55
+  const iconSize = size === "sm" ? 16 : 24
 
   return (
     <div className={classNames}>
       {src ? (
-        <Image src={src} alt={alt || ''} width={pixelSize} height={pixelSize} />
+        <Image src={src} alt={alt || ""} width={pixelSize} height={pixelSize} />
       ) : initials ? (
         <Typography
-          variant={size === 'lg' ? 'Title/Overline/sm' : 'Tag/sm'}
+          variant={size === "lg" ? "Title/Overline/sm" : "Tag/sm"}
           className={variants.initials}
         >
           <span data-hj-suppress>{initials}</span>

packages/design-system/lib/components/Avatar/types.ts

@@ -15,7 +15,7 @@ export interface AvatarProps {
    * Size of the avatar
    * @default 'md'
    */
-  size?: 'sm' | 'md' | 'lg'
+  size?: "sm" | "md" | "lg"
   /**
    * Additional CSS class names
    */

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

@@ -1,17 +1,17 @@
-import { cva } from 'class-variance-authority'
+import { cva } from "class-variance-authority"
 
-import styles from './avatar.module.css'
+import styles from "./avatar.module.css"
 
 export const config = {
   variants: {
     size: {
-      sm: styles['size-sm'],
-      md: styles['size-md'],
-      lg: styles['size-lg'],
+      sm: styles["size-sm"],
+      md: styles["size-md"],
+      lg: styles["size-lg"],
     },
   },
   defaultVariants: {
-    size: 'md',
+    size: "md",
   },
 } as const