scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: added progress bar wrapper and handling of loading type according to button props

Browse Source
This commit is contained in:
Tobias Johansson
2025-04-24 13:54:10 +02:00
committed by Simon Emanuelsson
parent 32ce7d819b
commit 29abc3cba6
4 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/design-system/lib/components/Button/Button.stories.tsx
View File

@@ -157,6 +157,13 @@ export const SecondaryDisabled: Story = {
},
}
export const SecondaryLoading: Story = {
args: {
...SecondaryDefault.args,
isPending: true,
},
}
export const SecondaryLarge: Story = {
args: {
...SecondaryDefault.args,

27
packages/design-system/lib/components/Button/Button.tsx
View File

@@ -3,7 +3,6 @@ import { Loading, type LoadingProps } from '../Loading/Loading'
import { variants } from './variants'
import type { ButtonProps } from './types'
import styles from './button.module.css'
export function Button({
variant,
@@ -25,17 +24,19 @@ export function Button({
className,
})
let loadingType: LoadingProps['type'] = 'Dark'
switch (color) {
case 'Primary':
loadingType = 'Dark'
break
case 'Inverted':
let loadingType: LoadingProps['type'] = 'White'
if (variant === 'Secondary') {
if (color === 'Inverted') {
loadingType = 'White'
break
default:
} else {
loadingType = 'Dark'
}
} else {
if (color === 'Inverted') {
loadingType = 'Dark'
} else {
loadingType = 'White'
}
}
return (
@@ -44,11 +45,7 @@ export function Button({
return (
<>
{children}
{isPending && (
<div className={styles.spinnerWrapper}>
<Loading size={20} type={loadingType} />
</div>
)}
{isPending && <Loading size={20} type={loadingType} />}
</>
)
}}

36
packages/design-system/lib/components/Loading/Loading.tsx
View File

@@ -2,6 +2,7 @@ import styles from './loading.module.css'
import { VariantProps } from 'class-variance-authority'
import { variants } from './variants'
import { ProgressBar } from 'react-aria-components'
export interface LoadingProps extends VariantProps<typeof variants> {
size?: number
@@ -13,22 +14,23 @@ export function Loading({ type, size = 20 }: LoadingProps) {
})
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 20 21"
fill="none"
className={classNames}
>
<circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
<circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
</svg>
<ProgressBar isIndeterminate className={classNames}>
<svg
xmlns="http://www.w3.org/2000/svg"
width={size}
height={size}
viewBox="0 0 20 21"
fill="none"
>
<circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
<circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
<circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
<circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
</svg>
</ProgressBar>
)
}

3
packages/design-system/lib/components/Loading/loading.module.css
View File

@@ -1,5 +1,6 @@
.loading {
display: inline-block;
display: flex;
align-items: center;
}
.dot {