Merged in monorepo-step-1 (pull request #1080)
Migrate to a monorepo setup - step 1 * Move web to subfolder /apps/scandic-web * Yarn + transitive deps - Move to yarn - design-system package removed for now since yarn doesn't support the parameter for token (ie project currently broken) - Add missing transitive dependencies as Yarn otherwise prevents these imports - VS Code doesn't pick up TS path aliases unless you open /apps/scandic-web instead of root (will be fixed with monorepo) * Pin framer-motion to temporarily fix typing issue https://github.com/adobe/react-spectrum/issues/7494 * Pin zod to avoid typ error There seems to have been a breaking change in the types returned by zod where error is now returned as undefined instead of missing in the type. We should just handle this but to avoid merge conflicts just pin the dependency for now. * Pin react-intl version Pin version of react-intl to avoid tiny type issue where formatMessage does not accept a generic any more. This will be fixed in a future commit, but to avoid merge conflicts just pin for now. * Pin typescript version Temporarily pin version as newer versions as stricter and results in a type error. Will be fixed in future commit after merge. * Setup workspaces * Add design-system as a monorepo package * Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN * Fix husky for monorepo setup * Update netlify.toml * Add lint script to root package.json * Add stub readme * Fix react-intl formatMessage types * Test netlify.toml in root * Remove root toml * Update netlify.toml publish path * Remove package-lock.json * Update build for branch/preview builds Approved-by: Linus Flood
This commit is contained in:
Anton Gunnarsson
committed by
Linus Flood
Linus Flood
parent
667cab6fb6
commit
80100e7631
@@ -0,0 +1,82 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react'
|
||||
|
||||
import { Button } from './Button'
|
||||
import { TestIcon } from '../Icon/TestIcon'
|
||||
|
||||
import '../../../style-current.css'
|
||||
|
||||
const meta = {
|
||||
title: 'Current web/Controls/Button',
|
||||
component: Button,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies Meta<typeof Button>
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
children: 'Primary Button',
|
||||
},
|
||||
}
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
children: 'Secondary Button',
|
||||
intent: 'secondary',
|
||||
},
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: {
|
||||
children: 'Large Button',
|
||||
size: 'large',
|
||||
},
|
||||
}
|
||||
|
||||
export const Small: Story = {
|
||||
args: {
|
||||
children: 'Small Button',
|
||||
size: 'small',
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: {
|
||||
children: 'Disabled Button',
|
||||
isDisabled: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const LeadingIcon: Story = {
|
||||
args: {
|
||||
children: [<TestIcon color="var(--Base-Text-Inverted)" />, 'Button'],
|
||||
},
|
||||
}
|
||||
|
||||
export const TrailingIcon: Story = {
|
||||
args: {
|
||||
children: ['Button', <TestIcon color="var(--Base-Text-Inverted)" />],
|
||||
},
|
||||
}
|
||||
|
||||
export const WithIcons: Story = {
|
||||
args: {
|
||||
children: [
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
'Button',
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
<TestIcon color="var(--Base-Text-Inverted)" />,
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
'use client'
|
||||
|
||||
import styles from './button.module.css'
|
||||
|
||||
import { Button as ButtonComponent } from 'react-aria-components'
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
import type { ButtonProps as ButtonComponentProps } from 'react-aria-components'
|
||||
import type { ComponentProps } from '../../../types'
|
||||
|
||||
const config = {
|
||||
variants: {
|
||||
intent: {
|
||||
primary: styles.primary,
|
||||
secondary: styles.secondary,
|
||||
},
|
||||
size: {
|
||||
small: styles.small,
|
||||
normal: styles.normal,
|
||||
large: styles.large,
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
intent: 'primary',
|
||||
size: 'normal',
|
||||
},
|
||||
} as const
|
||||
|
||||
const button = cva(styles.button, config)
|
||||
|
||||
export type ButtonProps = ComponentProps<
|
||||
ButtonComponentProps,
|
||||
typeof button,
|
||||
never,
|
||||
'intent' | 'size'
|
||||
>
|
||||
|
||||
export function Button({
|
||||
children,
|
||||
className,
|
||||
intent = config.defaultVariants.intent,
|
||||
size = config.defaultVariants.size,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<ButtonComponent className={button({ className, intent, size })} {...props}>
|
||||
{children}
|
||||
</ButtonComponent>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 24px;
|
||||
background: none;
|
||||
color: var(--Base-Text-Inverted);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: background-color 300ms ease;
|
||||
font-family: Helvetica;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Primary styles */
|
||||
.primary {
|
||||
background-color: var(--Primary-Fill-Strong-Default);
|
||||
border: 2px solid transparent;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
background: var(--Primary-Fill-Strong-Hovered);
|
||||
}
|
||||
|
||||
.primary:active,
|
||||
.primary:focus {
|
||||
border: 2px solid var(--Base-Text-Inverted);
|
||||
outline: 1px solid var(--Primary-Border-Strong);
|
||||
}
|
||||
|
||||
/* Secondary styles */
|
||||
.secondary {
|
||||
border: 1px solid var(--Base-Border-Normal);
|
||||
background-color: var(--Base-Background-Normal);
|
||||
color: var(--Primary-Text-Strong);
|
||||
}
|
||||
|
||||
.secondary:hover {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
outline: 2px solid var(--Primary-Border-Hovered);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.secondary:active,
|
||||
.secondary:focus {
|
||||
border: 1px solid var(--Primary-Border-Strong);
|
||||
outline: 1px solid var(--Base-Border-Normal);
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
/* Disabled styles */
|
||||
.button:disabled {
|
||||
background-color: var(--Base-Fill-Disabled);
|
||||
color: var(--Base-Text-Disabled);
|
||||
cursor: not-allowed;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Sizes */
|
||||
.large {
|
||||
font-size: var(--typography-body-regular-font-size);
|
||||
line-height: var(--typography-body-regular-line-height);
|
||||
letter-spacing: var(--typography-body-regular-letter-spacing);
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.096px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.096px;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { Button } from './Button'
|
||||
@@ -0,0 +1,29 @@
|
||||
export function TestIcon({ color = '#291710' }: { color?: string }) {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_69_3287"
|
||||
style={{ maskType: 'alpha' }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="0"
|
||||
width="24"
|
||||
height="24"
|
||||
>
|
||||
<rect width="24" height="24" fill="#D9D9D9" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_69_3287)">
|
||||
<path
|
||||
d="M11.075 12.95V15.9375C11.075 16.1958 11.1667 16.4167 11.35 16.6C11.5333 16.7833 11.7542 16.875 12.0125 16.875C12.2708 16.875 12.4917 16.7833 12.675 16.6C12.8583 16.4167 12.95 16.1958 12.95 15.9375V12.95H15.9375C16.1958 12.95 16.4167 12.8583 16.6 12.675C16.7833 12.4917 16.875 12.2708 16.875 12.0125C16.875 11.7542 16.7833 11.5333 16.6 11.35C16.4167 11.1667 16.1958 11.075 15.9375 11.075H12.95V8.0625C12.95 7.80417 12.8583 7.58333 12.675 7.4C12.4917 7.21667 12.2708 7.125 12.0125 7.125C11.7542 7.125 11.5333 7.21667 11.35 7.4C11.1667 7.58333 11.075 7.80417 11.075 8.0625V11.075H8.0625C7.80417 11.075 7.58333 11.1667 7.4 11.35C7.21667 11.5333 7.125 11.7542 7.125 12.0125C7.125 12.2708 7.21667 12.4917 7.4 12.675C7.58333 12.8583 7.80417 12.95 8.0625 12.95H11.075ZM12 21.75C10.6516 21.75 9.38434 21.4936 8.19838 20.9809C7.01239 20.4682 5.98075 19.7724 5.10345 18.8934C4.22615 18.0145 3.53125 16.9826 3.01875 15.7978C2.50625 14.613 2.25 13.3471 2.25 12C2.25 10.6516 2.50636 9.38434 3.01908 8.19838C3.53179 7.01239 4.22762 5.98075 5.10658 5.10345C5.98553 4.22615 7.01739 3.53125 8.20218 3.01875C9.38698 2.50625 10.6529 2.25 12 2.25C13.3484 2.25 14.6157 2.50636 15.8016 3.01908C16.9876 3.53179 18.0193 4.22762 18.8966 5.10658C19.7739 5.98553 20.4688 7.01739 20.9813 8.20217C21.4938 9.38697 21.75 10.6529 21.75 12C21.75 13.3484 21.4936 14.6157 20.9809 15.8016C20.4682 16.9876 19.7724 18.0193 18.8934 18.8966C18.0145 19.7739 16.9826 20.4688 15.7978 20.9813C14.613 21.4938 13.3471 21.75 12 21.75ZM12 19.875C14.1917 19.875 16.0521 19.1104 17.5813 17.5813C19.1104 16.0521 19.875 14.1917 19.875 12C19.875 9.80833 19.1104 7.94792 17.5813 6.41875C16.0521 4.88958 14.1917 4.125 12 4.125C9.80833 4.125 7.94792 4.88958 6.41875 6.41875C4.88958 7.94792 4.125 9.80833 4.125 12C4.125 14.1917 4.88958 16.0521 6.41875 17.5813C7.94792 19.1104 9.80833 19.875 12 19.875Z"
|
||||
fill={color}
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { TestIcon } from './TestIcon'
|
||||
Reference in New Issue
Block a user