feat(BOOK-113): Synced hover/focus states for buttons and added better examples to storybook

* fix(BOOK-113): Updated hover colors after blend/mix has been removed

Approved-by: Christel Westerberg

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

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+
+import { expect } from 'storybook/test'
+
+import { BackToTopButton } from '.'
+import { config as backToTopButtonConfig } from './variants'
+
+const meta: Meta<typeof BackToTopButton> = {
+  title: 'Components/BackToTopButton',
+  component: BackToTopButton,
+  argTypes: {
+    onPress: {
+      table: {
+        disable: true,
+      },
+    },
+    position: {
+      control: 'select',
+      options: Object.keys(backToTopButtonConfig.variants.position),
+      table: {
+        type: {
+          summary: 'string',
+          detail: Object.keys(backToTopButtonConfig.variants.position).join(
+            ' | '
+          ),
+        },
+        defaultValue: {
+          summary: backToTopButtonConfig.defaultVariants.position,
+        },
+      },
+    },
+    label: {
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof BackToTopButton>
+
+const globalStoryPropsInverted = {
+  backgrounds: { value: 'scandicPrimaryDark' },
+}
+
+export const Default: Story = {
+  args: {
+    onPress: () => alert('Back to top button pressed!'),
+    label: 'Back to top',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PositionLeft: Story = {
+  args: {
+    ...Default.args,
+    position: 'left',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PositionCenter: Story = {
+  args: {
+    ...Default.args,
+    position: 'center',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const PositionRight: Story = {
+  args: {
+    ...Default.args,
+    position: 'right',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}
+
+export const OnDarkBackground: Story = {
+  globals: globalStoryPropsInverted,
+  args: {
+    onPress: () => alert('Back to top button pressed!'),
+    label: 'Back to top',
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
+}