DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: updated Button to v2 design

Browse Source 
wip commit
This commit is contained in:
Samuel Gunter
2024-01-31 00:11:01 -06:00
parent 9cc299ced6
commit cedaa27a2c
10 changed files with 112 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/fonts/roboto-100.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto-300.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto-400.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto-500.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto-700.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/roboto-900.woff2 Normal file
View File

Binary file not shown.

41
src/stories/components/Button.stories.tsx
View File

@@ -39,28 +39,19 @@ export const Grid: Story = {
render: props => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex' }}>
<Button {...props} type='primary' />
<Button {...props} type='secondary' />
<Button {...props} type='tertiary' />
<Button {...props} type='danger' />
<Button {...props} type='warning' />
<Button {...props} type='success' />
<Button {...props} type='info' />
<Button {...props} type='filled' />
<Button {...props} type='outline' />
<Button {...props} type='single' />
</div>
<div style={{ display: 'flex' }}>
<Button {...props} type='primary' disabled />
<Button {...props} type='secondary' disabled />
<Button {...props} type='tertiary' disabled />
<Button {...props} type='danger' disabled />
<Button {...props} type='warning' disabled />
<Button {...props} type='success' disabled />
<Button {...props} type='info' disabled />
<Button {...props} type='filled' disabled />
<Button {...props} type='outline' disabled />
<Button {...props} type='single' disabled />
</div>
</div>
),
};
// TODO: Actually show the buttons as they appear in the design
export const CourseButtons: Story = {
args: {
@@ -69,22 +60,14 @@ export const CourseButtons: Story = {
render: props => (
<div style={{ display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex' }}>
<Button {...props} type='primary' />
<Button {...props} type='secondary' />
<Button {...props} type='tertiary' />
<Button {...props} type='danger' />
<Button {...props} type='warning' />
<Button {...props} type='success' />
<Button {...props} type='info' />
<Button {...props} type='filled' />
<Button {...props} type='outline' />
<Button {...props} type='single' />
</div>
<div style={{ display: 'flex' }}>
<Button {...props} type='primary' disabled />
<Button {...props} type='secondary' disabled />
<Button {...props} type='tertiary' disabled />
<Button {...props} type='danger' disabled />
<Button {...props} type='warning' disabled />
<Button {...props} type='success' disabled />
<Button {...props} type='info' disabled />
<Button {...props} type='filled' disabled />
<Button {...props} type='outline' disabled />
<Button {...props} type='single' disabled />
</div>
</div>
),

48
src/views/components/common/Button/Button.module.scss
View File

@@ -2,15 +2,18 @@
@use 'src/views/styles/colors.module.scss';
.button {
background-color: #000;
color: #fff;
padding: 10px;
padding: 0px 16px;
height: 40px;
margin: 10px;
border-radius: 8px;
border-radius: 4px;
border: none;
cursor: pointer;
transition: all 0.1s ease-in-out;
font-family: 'Inter';
font-family: 'Roboto';
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: flex;
align-items: center;
@@ -34,34 +37,19 @@
}
}
@each $color,
$value
in (
primary: colors.$burnt_orange,
secondary: colors.$charcoal,
tertiary: colors.$bluebonnet,
danger: colors.$speedway_brick,
warning: colors.$tangerine,
success: colors.$turtle_pond,
info: colors.$turquoise
)
{
&.#{$color} {
background-color: $value;
color: #fff;
&:hover {
background-color: color.adjust($value, $lightness: 10%);
&.filled {
background-color: var(--color-primary);
color: var(--color-secondary);
}
&:focus-visible,
&:active {
background-color: color.adjust($value, $lightness: -10%);
&.outline {
background-color: var(--color-secondary);
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
&.disabled {
background-color: $value !important;
}
}
&.single {
background-color: var(--color-secondary);
color: var(--color-primary);
}
}

32
src/views/components/common/Button/Button.tsx
View File

@@ -5,11 +5,16 @@ import styles from './Button.module.scss';
interface Props {
className?: string;
style?: React.CSSProperties;
type?: 'filled' | 'outline' | 'single';
onClick?: () => void;
type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
iconOnly?: boolean;
showSymbol?: boolean;
symbol?: React.ReactNode;
disabled?: boolean;
title?: string;
testId?: string;
primaryColor?: string;
secondaryColor?: string;
}
/**
@@ -17,26 +22,37 @@ interface Props {
* @returns
*/
export function Button({
style,
className,
style,
type,
testId,
children,
onClick,
iconOnly,
showSymbol,
symbol,
disabled,
title,
onClick,
testId,
primaryColor,
secondaryColor,
children,
}: React.PropsWithChildren<Props>): JSX.Element {
return (
<button
style={style}
style={
{
...style,
'--color-primary': primaryColor ?? '#333F48',
'--color-secondary': secondaryColor ?? '#FFFFFF',
} as React.CSSProperties
}
data-testid={testId}
className={classNames(styles.button, className, styles[type ?? 'primary'], {
className={classNames(styles.button, className, styles[type ?? 'filled'], {
[styles.disabled]: disabled,
})}
title={title}
onClick={disabled ? undefined : onClick}
>
{children}
{!iconOnly && children}
</button>
);
}

16
src/views/styles/fonts.module.scss
View File

@@ -1,10 +1,20 @@
@each $weights in '100' '200' '300' '400' '500' '600' '700' '800' '900' {
@each $weight in '100' '200' '300' '400' '500' '600' '700' '800' '900' {
@font-face {
font-family: 'Inter';
src: url('@public/fonts/inter-#{$weights}.woff2') format('woff2');
src: url('@public/fonts/inter-#{$weight}.woff2') format('woff2');
font-display: auto;
font-style: normal;
font-weight: #{$weights};
font-weight: #{$weight};
}
}
@each $weight in '100' '300' '400' '500' '700' '900' {
@font-face {
font-family: 'Roboto';
src: url('@public/fonts/roboto-#{$weight}.woff2') format('woff2');
font-display: auto;
font-style: normal;
font-weight: #{$weight};
}
}