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/IconButton/IconButton.stories.tsx

@@ -1,99 +1,99 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 
-import { expect, fn } from 'storybook/test'
+import { expect, fn } from "storybook/test"
 
-import { IconButton } from './IconButton'
-import { iconButtonIconNames, IconButtonProps } from './types'
-import { config } from './variants'
+import { IconButton } from "./IconButton"
+import { iconButtonIconNames, IconButtonProps } from "./types"
+import { config } from "./variants"
 
 const meta: Meta<typeof IconButton> = {
-  title: 'Core Components/IconButton',
+  title: "Core Components/IconButton",
   component: IconButton,
   argTypes: {
     onPress: {
       table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
+        type: { summary: "function" },
+        defaultValue: { summary: "undefined" },
       },
-      description: 'Callback function to handle button press events.',
+      description: "Callback function to handle button press events.",
     },
     variant: {
-      control: 'select',
+      control: "select",
       options: Object.keys(config.variants.variant),
       table: {
         defaultValue: {
           summary: config.defaultVariants.variant,
         },
         type: {
-          summary: Object.keys(config.variants.variant).join(' | '),
+          summary: Object.keys(config.variants.variant).join(" | "),
         },
       },
     },
     size: {
-      control: 'select',
+      control: "select",
       options: Object.keys(config.variants.size),
       table: {
         defaultValue: {
           summary: config.defaultVariants.size,
         },
         type: {
-          summary: Object.keys(config.variants.size).join(' | '),
+          summary: Object.keys(config.variants.size).join(" | "),
         },
       },
       description:
-        'The size of the `IconButton`. Please note that you control the size of the icon inside the button separately. Please check the examples below for recommended icon sizes for each button size.',
+        "The size of the `IconButton`. Please note that you control the size of the icon inside the button separately. Please check the examples below for recommended icon sizes for each button size.",
     },
     emphasis: {
-      control: 'boolean',
+      control: "boolean",
       options: Object.keys(config.variants.emphasis),
       table: {
         defaultValue: {
           summary: config.defaultVariants.emphasis.toString(),
         },
         type: {
-          summary: 'boolean',
+          summary: "boolean",
         },
       },
     },
     iconName: {
-      control: 'select',
+      control: "select",
       options: iconButtonIconNames,
       table: {
-        type: { summary: iconButtonIconNames.join(' | ') },
-        defaultValue: { summary: 'undefined' },
+        type: { summary: iconButtonIconNames.join(" | ") },
+        defaultValue: { summary: "undefined" },
       },
-      description: 'Name of the Material Icon to use as icon.',
+      description: "Name of the Material Icon to use as icon.",
     },
     isDisabled: {
-      control: 'boolean',
+      control: "boolean",
       table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
       },
     },
   },
 }
 
 const globalStoryPropsInverted = {
-  backgrounds: { value: 'scandicPrimaryDark' },
+  backgrounds: { value: "scandicPrimaryDark" },
 }
 export default meta
 
 type Story = StoryObj<typeof IconButton>
 
 function renderAllSizesFn(
-  args: Story['args'],
-  iconName: IconButtonProps['iconName'] = 'search'
+  args: Story["args"],
+  iconName: IconButtonProps["iconName"] = "search"
 ) {
   return (
-    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       {Object.keys(config.variants.size).map((size) => (
         <div
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '8px',
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "8px",
           }}
           key={size}
         >
@@ -113,10 +113,10 @@ function renderAllSizesFn(
 export const Default: Story = {
   args: {
     onPress: fn(),
-    iconName: 'search',
+    iconName: "search",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -124,136 +124,136 @@ export const Default: Story = {
 export const Examples: Story = {
   render: () => {
     return (
-      <div style={{ display: 'grid', gap: '16px', justifyContent: 'center' }}>
+      <div style={{ display: "grid", gap: "16px", justifyContent: "center" }}>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Filled</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
-            {renderAllSizesFn({ ...Default.args, variant: 'Filled' })}
+          <h3 style={{ marginBottom: "8px" }}>Filled</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
+            {renderAllSizesFn({ ...Default.args, variant: "Filled" })}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Filled with emphasis</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Filled with emphasis</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Filled',
+                variant: "Filled",
                 emphasis: true,
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Outlined</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Outlined</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Outlined',
+                variant: "Outlined",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Elevated</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Elevated</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Elevated',
+                variant: "Elevated",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            backgroundColor: '#4D001B',
-            color: 'white',
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            backgroundColor: "#4D001B",
+            color: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Faded</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Faded</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Faded',
+                variant: "Faded",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            backgroundColor: '#4D001B',
-            color: 'white',
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            backgroundColor: "#4D001B",
+            color: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Muted</h3>
+          <h3 style={{ marginBottom: "8px" }}>Muted</h3>
           <div
             style={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              gap: '8px',
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "8px",
             }}
           >
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Muted',
+                variant: "Muted",
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
         <div
           style={{
-            padding: '16px',
-            borderRadius: '8px',
-            border: '1px solid #4D001B',
+            padding: "16px",
+            borderRadius: "8px",
+            border: "1px solid #4D001B",
           }}
         >
-          <h3 style={{ marginBottom: '8px' }}>Muted with emphasis</h3>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+          <h3 style={{ marginBottom: "8px" }}>Muted with emphasis</h3>
+          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
             {renderAllSizesFn(
               {
                 ...Default.args,
-                variant: 'Muted',
+                variant: "Muted",
                 emphasis: true,
               },
-              'arrow_forward'
+              "arrow_forward"
             )}
           </div>
         </div>
@@ -265,10 +265,10 @@ export const Examples: Story = {
 export const Filled: Story = {
   args: {
     ...Default.args,
-    variant: 'Filled',
+    variant: "Filled",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -279,7 +279,7 @@ export const FilledDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -290,7 +290,7 @@ export const FilledOnDarkBackground: Story = {
     ...Filled.args,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -298,11 +298,11 @@ export const FilledOnDarkBackground: Story = {
 export const FilledWithEmphasis: Story = {
   args: {
     ...Filled.args,
-    iconName: 'arrow_forward',
+    iconName: "arrow_forward",
     emphasis: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -313,7 +313,7 @@ export const FilledWithEmphasisDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -321,11 +321,11 @@ export const FilledWithEmphasisDisabled: Story = {
 export const Outlined: Story = {
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Outlined',
+    iconName: "arrow_forward",
+    variant: "Outlined",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -336,7 +336,7 @@ export const OutlinedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -344,11 +344,11 @@ export const OutlinedDisabled: Story = {
 export const Elevated: Story = {
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Elevated',
+    iconName: "arrow_forward",
+    variant: "Elevated",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -359,7 +359,7 @@ export const ElevatedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -368,11 +368,11 @@ export const Faded: Story = {
   globals: globalStoryPropsInverted,
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Faded',
+    iconName: "arrow_forward",
+    variant: "Faded",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -384,7 +384,7 @@ export const FadedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -393,11 +393,11 @@ export const Muted: Story = {
   globals: globalStoryPropsInverted,
   args: {
     ...Default.args,
-    iconName: 'arrow_forward',
-    variant: 'Muted',
+    iconName: "arrow_forward",
+    variant: "Muted",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -409,7 +409,7 @@ export const MutedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -420,7 +420,7 @@ export const MutedWithEmphasis: Story = {
     emphasis: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -431,7 +431,7 @@ export const MutedWithEmphasisDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole('button'))
+    await userEvent.click(canvas.getByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }