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
This commit is contained in:
Rasmus Langvad
@@ -1,106 +1,106 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
||||
import type { Meta, StoryObj } from "@storybook/nextjs-vite"
|
||||
|
||||
import { Theme } from '@scandic-hotels/common/utils/theme'
|
||||
import { InfoCard } from './InfoCard.tsx'
|
||||
import { infoCardConfig } from './variants.ts'
|
||||
import { Theme } from "@scandic-hotels/common/utils/theme"
|
||||
import { InfoCard } from "./InfoCard.tsx"
|
||||
import { infoCardConfig } from "./variants.ts"
|
||||
|
||||
const DEFAULT_ARGS = {
|
||||
topTitle: "Here's to your health!",
|
||||
heading: 'Gym & Wellness',
|
||||
heading: "Gym & Wellness",
|
||||
primaryButton: {
|
||||
href: '#',
|
||||
text: 'Primary button',
|
||||
href: "#",
|
||||
text: "Primary button",
|
||||
},
|
||||
secondaryButton: {
|
||||
href: '#',
|
||||
text: 'Secondary button',
|
||||
href: "#",
|
||||
text: "Secondary button",
|
||||
},
|
||||
bodyText:
|
||||
'Our gym is open 24/7 and offers state-of-the-art equipment to help you stay fit during your stay.',
|
||||
"Our gym is open 24/7 and offers state-of-the-art equipment to help you stay fit during your stay.",
|
||||
}
|
||||
|
||||
const meta: Meta<typeof InfoCard> = {
|
||||
title: 'Product Components/InfoCard',
|
||||
title: "Product Components/InfoCard",
|
||||
component: InfoCard,
|
||||
argTypes: {
|
||||
topTitle: {
|
||||
control: 'text',
|
||||
control: "text",
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
type: { summary: "string" },
|
||||
},
|
||||
},
|
||||
topTitleAngled: {
|
||||
control: 'boolean',
|
||||
control: "boolean",
|
||||
description:
|
||||
'Whether the top title should be angled. Only applies when `hotelTheme` is set to `Theme.scandic`.',
|
||||
type: 'boolean',
|
||||
"Whether the top title should be angled. Only applies when `hotelTheme` is set to `Theme.scandic`.",
|
||||
type: "boolean",
|
||||
},
|
||||
heading: {
|
||||
control: 'text',
|
||||
control: "text",
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
type: { summary: "string" },
|
||||
},
|
||||
},
|
||||
bodyText: {
|
||||
control: 'text',
|
||||
control: "text",
|
||||
table: {
|
||||
type: { summary: 'string' },
|
||||
type: { summary: "string" },
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
control: 'select',
|
||||
control: "select",
|
||||
options: Object.keys(infoCardConfig.variants.theme),
|
||||
table: {
|
||||
type: {
|
||||
summary: Object.keys(infoCardConfig.variants.theme).join(' | '),
|
||||
summary: Object.keys(infoCardConfig.variants.theme).join(" | "),
|
||||
},
|
||||
},
|
||||
},
|
||||
height: {
|
||||
control: 'select',
|
||||
control: "select",
|
||||
options: Object.keys(infoCardConfig.variants.height),
|
||||
table: {
|
||||
type: {
|
||||
summary: Object.keys(infoCardConfig.variants.height).join(' | '),
|
||||
summary: Object.keys(infoCardConfig.variants.height).join(" | "),
|
||||
},
|
||||
},
|
||||
},
|
||||
hotelTheme: {
|
||||
control: 'select',
|
||||
control: "select",
|
||||
options: Object.keys(infoCardConfig.variants.hotelTheme),
|
||||
description:
|
||||
'The hotel theme to adjust button colors for better contrast.',
|
||||
"The hotel theme to adjust button colors for better contrast.",
|
||||
table: {
|
||||
type: { summary: 'Theme', detail: Object.values(Theme).join(' | ') },
|
||||
type: { summary: "Theme", detail: Object.values(Theme).join(" | ") },
|
||||
},
|
||||
},
|
||||
backgroundImage: {
|
||||
control: 'object',
|
||||
control: "object",
|
||||
table: {
|
||||
type: {
|
||||
summary: 'InfoCardBackgroundImage',
|
||||
summary: "InfoCardBackgroundImage",
|
||||
detail:
|
||||
'{ src: string, alt?: string, focalPoint?: { x: number, y: number }, dimensions?: { width: number, height: number, aspectRatio?: number } }',
|
||||
"{ src: string, alt?: string, focalPoint?: { x: number, y: number }, dimensions?: { width: number, height: number, aspectRatio?: number } }",
|
||||
},
|
||||
},
|
||||
},
|
||||
primaryButton: {
|
||||
control: 'object',
|
||||
control: "object",
|
||||
table: {
|
||||
type: {
|
||||
summary: 'InfoCardButton',
|
||||
summary: "InfoCardButton",
|
||||
detail:
|
||||
'{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
|
||||
"{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }",
|
||||
},
|
||||
},
|
||||
},
|
||||
secondaryButton: {
|
||||
control: 'object',
|
||||
control: "object",
|
||||
table: {
|
||||
type: {
|
||||
summary: 'InfoCardButton',
|
||||
summary: "InfoCardButton",
|
||||
detail:
|
||||
'{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }',
|
||||
"{ href: string, text: string, openInNewTab?: boolean, scrollOnClick?: boolean, onClick?: MouseEventHandler }",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -108,26 +108,26 @@ const meta: Meta<typeof InfoCard> = {
|
||||
args: { ...DEFAULT_ARGS },
|
||||
decorators: [
|
||||
(Story, context) => {
|
||||
if (context.name.toLowerCase().indexOf('all themes') >= 0) {
|
||||
if (context.name.toLowerCase().indexOf("all themes") >= 0) {
|
||||
return (
|
||||
<div
|
||||
className={context.args.hotelTheme!}
|
||||
style={{ display: 'grid', gap: '1rem' }}
|
||||
style={{ display: "grid", gap: "1rem" }}
|
||||
>
|
||||
{Object.keys(infoCardConfig.variants.theme).map((theme) => {
|
||||
console.log(theme)
|
||||
const args = {
|
||||
...context.args,
|
||||
backgroundImage:
|
||||
theme === 'Image'
|
||||
theme === "Image"
|
||||
? {
|
||||
src: './img/img1.jpg',
|
||||
alt: 'Image alt text',
|
||||
src: "./img/img1.jpg",
|
||||
alt: "Image alt text",
|
||||
}
|
||||
: undefined,
|
||||
}
|
||||
return (
|
||||
<div style={{ display: 'grid', gap: '0.5rem' }}>
|
||||
<div style={{ display: "grid", gap: "0.5rem" }}>
|
||||
<h3>{theme}</h3>
|
||||
<InfoCard
|
||||
{...args}
|
||||
@@ -141,7 +141,7 @@ const meta: Meta<typeof InfoCard> = {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div style={{ display: "flex" }}>
|
||||
<Story />
|
||||
</div>
|
||||
)
|
||||
@@ -162,35 +162,35 @@ export const Default: Story = {
|
||||
export const Primary_1: Story = {
|
||||
args: {
|
||||
...meta.args,
|
||||
theme: 'Primary 1',
|
||||
theme: "Primary 1",
|
||||
},
|
||||
}
|
||||
|
||||
export const Primary_2: Story = {
|
||||
args: {
|
||||
...meta.args,
|
||||
theme: 'Primary 2',
|
||||
theme: "Primary 2",
|
||||
},
|
||||
}
|
||||
|
||||
export const Primary_3: Story = {
|
||||
args: {
|
||||
...meta.args,
|
||||
theme: 'Primary 3',
|
||||
theme: "Primary 3",
|
||||
},
|
||||
}
|
||||
|
||||
export const Accent: Story = {
|
||||
args: {
|
||||
...meta.args,
|
||||
theme: 'Accent',
|
||||
theme: "Accent",
|
||||
},
|
||||
}
|
||||
|
||||
export const White: Story = {
|
||||
args: {
|
||||
...meta.args,
|
||||
theme: 'White',
|
||||
theme: "White",
|
||||
},
|
||||
}
|
||||
|
||||
@@ -198,10 +198,10 @@ export const Image: Story = {
|
||||
args: {
|
||||
...meta.args,
|
||||
backgroundImage: {
|
||||
src: './img/img1.jpg',
|
||||
alt: 'Image alt text',
|
||||
src: "./img/img1.jpg",
|
||||
alt: "Image alt text",
|
||||
},
|
||||
theme: 'Image',
|
||||
theme: "Image",
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user