Skip to content
This repository has been archived by the owner on Aug 31, 2022. It is now read-only.

Commit

Permalink
Merge pull request #63 from Synthetixio/button-refactoring
Browse files Browse the repository at this point in the history 
feat(button): refactored button component
  • Loading branch information
@fritzschoff
fritzschoff authored May 1, 2022
2 parents 7bea038 + 8804f45 commit e73e4ae
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 68 deletions.
131 changes: 65 additions & 66 deletions src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { ButtonHTMLAttributes, MouseEvent, PropsWithChildren } from 'react';
import React, { ButtonHTMLAttributes, MouseEvent } from 'react';
import styled from 'styled-components';

import colors from '../styles/colors';
import fonts from '../styles/fonts';
import theme from '../styles/theme';
Expand All @@ -10,8 +9,6 @@ interface ButtonProps {
type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
size?: 'large' | 'medium' | 'small';
variant?: 'primary' | 'secondary' | 'tertiary';
gradientColor?: keyof typeof colors.gradients;
secondaryBackgroundColor?: string;
disabled?: boolean;
onClick: (e: MouseEvent<HTMLButtonElement>) => void;
}
Expand All @@ -20,33 +17,24 @@ export default function Button({
type,
size,
variant,
secondaryBackgroundColor,
disabled,
onClick,
children,
text,
gradientColor,
...rest
}: PropsWithChildren<ButtonProps>) {
}: ButtonProps) {
return (
<StyledButtonBorder disabled={disabled} variant={variant} {...rest}>
<StyledButton
type={type}
disabled={disabled}
variant={variant}
secondaryBackgroundColor={secondaryBackgroundColor}
size={size}
onClick={onClick}
hasChildren={!!children}
>
{children}
{text && (
<StyledButtonText variant={variant} disabled={disabled} size={size}>
{text}
</StyledButtonText>
)}
</StyledButton>
</StyledButtonBorder>
<StyledButton
type={type}
disabled={disabled}
variant={variant}
size={size}
onClick={onClick}
{...rest}
>
<StyledButtonText variant={variant} disabled={disabled} size={size}>
{text}
</StyledButtonText>
</StyledButton>
);
}

Expand All @@ -63,63 +51,69 @@ const determineHeight = (size: ButtonProps['size']) => {
}
};

const determinePadding = (size: ButtonProps['size']) => {
switch (size) {
case 'large':
return '16px 10px';
case 'medium':
return '11.5px 16px';
case 'small':
return '6.5px 10px';
default:
return '11.5px 16px';
}
};

const determineVariant = (variant: ButtonProps['variant'], disabled: boolean) => {
if (disabled) return 'rgba(86, 86, 99, 0.6);';
switch (variant) {
case 'tertiary':
return colors.darkBlue;
case 'secondary':
return 'none';
default:
return colors.gradients.lightBlue;
}
};

const StyledButtonBorder = styled.div<{
disabled: ButtonProps['disabled'];
variant?: ButtonProps['variant'];
gradientColor?: ButtonProps['gradientColor'];
}>`
display: flex;
justify-content: center;
border-radius: 4px;
padding: 2px;
display: flex;
justify-content: center;
align-items: center;
background: ${({ variant, disabled }) => determineVariant(variant, !!disabled)};
${({ disabled }) => disabled && `border: 2px solid ${colors.disabled}`};
`;

const StyledButton = styled.button<{
disabled?: ButtonProps['disabled'];
variant?: ButtonProps['variant'];
secondaryBackgroundColor?: ButtonProps['secondaryBackgroundColor'];
size?: ButtonProps['size'];
hasChildren: boolean;
}>`
outline: 0;
width: 100%;
min-height: ${theme.rem};
text-align: center;
height: ${({ size }) => determineHeight(size)};
outline: 0;
border: 0;
background: ${({ variant, disabled, secondaryBackgroundColor }) =>
variant === 'secondary' && !disabled ? secondaryBackgroundColor : 'none'};
border-radius: 2.5px;
text-align: center;
background: ${({ variant, disabled }) => determineVariant(variant, !!disabled)};
cursor: pointer;
padding: ${({ size }) => determinePadding(size)};
height: ${({ size, hasChildren }) => (hasChildren ? '100%' : determineHeight(size))};
width: 100%;
border-radius: 2.5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
position: relative;
${({ variant, disabled }) => {
if (variant === 'secondary' && !disabled)
return `::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2.5px;
border: 2.5px solid transparent;
background: ${colors.gradients.lightBlue} border-box;
-webkit-mask: ${colors.gradients.lightBlue} padding-box,
${colors.gradients.lightBlue};
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}`;
else if (disabled)
return `::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2.5px;
border: 2.5px solid transparent;
background: ${colors.gradients.grey} border-box;
-webkit-mask: ${colors.gradients.grey} padding-box,
${colors.gradients.grey};
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}`;
return;
}}
`;

const StyledButtonText = styled.span<{
Expand All @@ -136,5 +130,10 @@ const StyledButtonText = styled.span<{
${({ variant, disabled }) =>
variant === 'secondary' &&
!disabled &&
`background-image: ${colors.gradients.lightBlue}; background-size: 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent;`}
`background-image: ${colors.gradients.lightBlue};
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;`}
`;
72 changes: 72 additions & 0 deletions src/components/NavBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React, { PropsWithChildren } from 'react';
import styled from 'styled-components';
import colors from '../styles/colors';

export default function NavBar({ children }: PropsWithChildren<{}>) {
return (
<StyledNavBar>
<StyledSynthetixLogo>
<svg
width="166"
height="12"
viewBox="0 0 166 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.9562 5.69094C15.2511 5.00184 14.4037 4.65745 13.4137 4.65745H3.59997C3.4177 4.65745 3.26133 4.59413 3.13055 4.46718C2.99976 4.34055 2.93453 4.1861 2.93453 4.00384V3.20793C2.93453 3.03397 2.99976 2.88336 3.13055 2.75641C3.26133 2.62979 3.4177 2.56615 3.59997 2.56615H16.2533C16.2849 2.56615 16.3105 2.55624 16.3303 2.53641C16.3502 2.51691 16.3601 2.49484 16.3601 2.47118V0.0949716C16.3601 0.0633144 16.3502 0.0396514 16.3303 0.023663C16.3105 0.00799424 16.2846 0 16.2533 0H3.59997C2.60197 0 1.75234 0.344712 1.0514 1.03382C0.350468 1.72292 0 2.55432 0 3.52866V3.68311C0 4.66544 0.350468 5.501 1.0514 6.1901C1.75234 6.87921 2.60197 7.2236 3.59997 7.2236H13.4137C13.588 7.2236 13.7405 7.28499 13.871 7.40778C14.0018 7.53058 14.067 7.68311 14.067 7.86537V8.66128C14.067 8.84355 14.0018 8.99608 13.871 9.11887C13.7402 9.24166 13.5877 9.30306 13.4137 9.30306H0.748581C0.724918 9.30306 0.702854 9.31297 0.683348 9.3328C0.663523 9.35262 0.65361 9.37852 0.65361 9.41018V11.7864C0.65361 11.8101 0.663523 11.8321 0.683348 11.8516C0.703174 11.8714 0.724918 11.8814 0.748581 11.8814H13.4137C14.4037 11.8814 15.2511 11.5351 15.9562 10.8418C16.661 10.1488 17.0137 9.31521 17.0137 8.34087V8.1861C17.0134 7.21177 16.661 6.38004 15.9562 5.69094Z"
fill="#00D1FF"
/>
<path
d="M37.2618 0H34.5172C34.4935 0 34.4714 0.00799424 34.4519 0.023663C34.4321 0.0396514 34.4222 0.0633144 34.4222 0.0949716V3.11264C34.4222 3.37389 34.2873 3.57215 34.0183 3.70677L28.5413 5.97586L23.0643 3.70677C22.7951 3.57215 22.6604 3.37421 22.6604 3.11264V0.0949716C22.6604 0.0633144 22.6524 0.0396514 22.6368 0.023663C22.6205 0.00799424 22.5968 0 22.5651 0H19.8206C19.7969 0 19.7748 0.00799424 19.7553 0.023663C19.7355 0.0396514 19.7256 0.0633144 19.7256 0.0949716V3.55232C19.7256 4.06747 19.8682 4.53849 20.1534 4.96602C20.4387 5.39388 20.8266 5.71045 21.3177 5.91638L27.0681 8.32808V11.7739C27.0681 11.8056 27.0781 11.8315 27.0979 11.8513C27.1177 11.8711 27.1433 11.881 27.1749 11.881H29.9195C29.9432 11.881 29.9649 11.8711 29.9848 11.8513C30.0046 11.8315 30.0145 11.8059 30.0145 11.7739V8.3284L35.7649 5.92853C36.2558 5.7146 36.6443 5.39579 36.9292 4.9721C37.2144 4.5484 37.3567 4.0793 37.3567 3.56415V0.0949716C37.3567 0.0633144 37.3468 0.0396514 37.327 0.023663C37.3072 0.00799424 37.2854 0 37.2618 0Z"
fill="#00D1FF"
/>
<path
d="M57.6479 0H54.9033C54.8716 0 54.8476 0.00991286 54.832 0.0297386C54.816 0.0495643 54.8083 0.0713087 54.8083 0.0949716V9.31457H53.6559C53.4419 9.31457 53.2597 9.2196 53.1094 9.02934L47.7868 1.24742C47.2163 0.447678 46.4281 0.0316572 45.4224 0H40.8366C40.805 0 40.7791 0.00991286 40.7592 0.0297386C40.7394 0.0495643 40.7295 0.0713087 40.7295 0.0949716V11.7858C40.7295 11.8094 40.7394 11.8315 40.7592 11.851C40.7791 11.8708 40.8046 11.8807 40.8366 11.8807H43.5812C43.6049 11.8807 43.6266 11.8708 43.6464 11.851C43.6663 11.8315 43.6762 11.8094 43.6762 11.7858V2.56615H44.8286C45.0425 2.56615 45.2245 2.66528 45.3751 2.86322L50.6977 10.6451C51.2681 11.4452 52.0561 11.8571 53.0621 11.8807H57.6482C57.6799 11.8807 57.7035 11.8708 57.7195 11.851C57.7352 11.8315 57.7432 11.8094 57.7432 11.7858V0.0949716C57.7432 0.0713087 57.7352 0.0495643 57.7195 0.0297386C57.7032 0.00991286 57.6795 0 57.6479 0Z"
fill="#00D1FF"
/>
<path
d="M77.4847 0H60.6731C60.6414 0 60.6175 0.00991286 60.6018 0.0297386C60.5858 0.0495643 60.5781 0.0713087 60.5781 0.0949716V2.47118C60.5781 2.49484 60.5858 2.51691 60.6018 2.53641C60.6175 2.55624 60.6414 2.56615 60.6731 2.56615H67.6115V11.7858C67.6115 11.8094 67.6192 11.8315 67.6351 11.851C67.6508 11.8708 67.6748 11.8807 67.7065 11.8807H70.451C70.4827 11.8807 70.5064 11.8708 70.5223 11.851C70.538 11.8315 70.546 11.8094 70.546 11.7858V2.56615H77.4844C77.5161 2.56615 77.5416 2.55624 77.5615 2.53641C77.5813 2.51659 77.5912 2.49484 77.5912 2.47118V0.0949716C77.5912 0.0713087 77.5813 0.0495643 77.5615 0.0297386C77.5423 0.00991286 77.5164 0 77.4847 0Z"
fill="#00D1FF"
/>
<path
d="M97.8704 0H95.1258C95.1022 0 95.0801 0.00991286 95.0606 0.0297386C95.0408 0.0495643 95.0309 0.0713087 95.0309 0.0949716V4.65713H83.9102V0.0949716C83.9102 0.0713087 83.9003 0.0495643 83.8805 0.0297386C83.8607 0.0102326 83.8348 0 83.8034 0H81.0588C81.0352 0 81.0131 0.00991286 80.9936 0.0297386C80.9738 0.0495643 80.9639 0.0713087 80.9639 0.0949716V11.7858C80.9639 11.8094 80.9738 11.8315 80.9936 11.851C81.0134 11.8708 81.0352 11.8807 81.0588 11.8807H83.8034C83.8351 11.8807 83.8607 11.8708 83.8805 11.851C83.9003 11.8312 83.9102 11.8094 83.9102 11.7858V7.2236H95.0309V11.7858C95.0309 11.8094 95.0408 11.8315 95.0606 11.851C95.0804 11.8708 95.1022 11.8807 95.1258 11.8807H97.8704C97.9021 11.8807 97.9276 11.8708 97.9475 11.851C97.9673 11.8312 97.9772 11.8094 97.9772 11.7858V0.0949716C97.9772 0.0713087 97.967 0.0495643 97.9475 0.0297386C97.9276 0.00991286 97.9017 0 97.8704 0Z"
fill="#00D1FF"
/>
<path
d="M118.183 0H104.865C103.874 0 103.027 0.344392 102.322 1.0335C101.617 1.7226 101.265 2.55432 101.265 3.52866V8.34023C101.265 9.32257 101.617 10.1581 102.322 10.8472C103.027 11.5363 103.874 11.881 104.865 11.881H118.183C118.207 11.881 118.228 11.8711 118.248 11.8513C118.268 11.8315 118.278 11.8097 118.278 11.7861V9.40986C118.278 9.3782 118.268 9.35454 118.248 9.33855C118.228 9.32289 118.207 9.31489 118.183 9.31489H104.865C104.682 9.31489 104.528 9.25158 104.401 9.12495C104.274 8.99832 104.211 8.84771 104.211 8.67343V7.2236H118.174C118.206 7.2236 118.23 7.21368 118.246 7.19386C118.261 7.17403 118.269 7.15229 118.269 7.12863V4.75242C118.269 4.72076 118.261 4.6971 118.246 4.68111C118.23 4.66544 118.206 4.65745 118.174 4.65745H104.211V3.20793C104.211 3.03365 104.274 2.88336 104.401 2.75641C104.528 2.62979 104.682 2.56615 104.865 2.56615H118.183C118.207 2.56615 118.228 2.55624 118.248 2.53641C118.268 2.51691 118.278 2.49484 118.278 2.47118V0.0949716C118.278 0.0713086 118.268 0.0495643 118.248 0.0297386C118.228 0.0102326 118.207 0 118.183 0Z"
fill="#00D1FF"
/>
<path
d="M138.473 0H121.661C121.63 0 121.606 0.00991286 121.59 0.0297386C121.574 0.0495643 121.566 0.0713087 121.566 0.0949716V2.47118C121.566 2.49484 121.574 2.51691 121.59 2.53641C121.606 2.55624 121.63 2.56615 121.661 2.56615H128.6V11.7858C128.6 11.8094 128.607 11.8315 128.623 11.851C128.639 11.8708 128.663 11.8807 128.695 11.8807H131.439C131.471 11.8807 131.495 11.8708 131.511 11.851C131.527 11.8315 131.534 11.8094 131.534 11.7858V2.56615H138.473C138.504 2.56615 138.53 2.55624 138.55 2.53641C138.57 2.51659 138.579 2.49484 138.579 2.47118V0.0949716C138.579 0.0713087 138.57 0.0495643 138.55 0.0297386C138.53 0.00991286 138.504 0 138.473 0Z"
fill="#00D1FF"
/>
<path
d="M144.863 0.023663C144.847 0.00799424 144.823 0 144.792 0H142.047C142.015 0 141.991 0.00799424 141.976 0.023663C141.96 0.0396515 141.952 0.0633144 141.952 0.0949716V11.7858C141.952 11.8094 141.96 11.8315 141.976 11.851C141.991 11.8708 142.015 11.8807 142.047 11.8807H144.792C144.823 11.8807 144.847 11.8708 144.863 11.851C144.879 11.8312 144.887 11.8094 144.887 11.7858V0.0949716C144.887 0.0636342 144.879 0.0396515 144.863 0.023663Z"
fill="#00D1FF"
/>
<path
d="M152.44 2.88739C152.321 2.75276 152.174 2.68529 152 2.68529H148.436C148.404 2.68529 148.378 2.67538 148.359 2.65555C148.339 2.63605 148.329 2.61398 148.329 2.59032V0.214112C148.329 0.190449 148.339 0.168705 148.359 0.148879C148.378 0.129373 148.404 0.119141 148.436 0.119141H152.202C153.152 0.119141 153.972 0.503504 154.661 1.27159L155.576 2.3764L153.794 4.52685L152.44 2.88739ZM159.022 1.25976C159.711 0.499347 160.534 0.119141 161.493 0.119141H165.247C165.279 0.119141 165.302 0.127135 165.318 0.142804C165.334 0.158792 165.342 0.182455 165.342 0.214112V2.59032C165.342 2.61398 165.334 2.63605 165.318 2.65555C165.302 2.67538 165.279 2.68529 165.247 2.68529H161.683C161.509 2.68529 161.362 2.75276 161.243 2.88739L158.618 6.04767L161.255 9.23162C161.374 9.35857 161.516 9.42188 161.683 9.42188H165.247C165.279 9.42188 165.302 9.4318 165.318 9.45162C165.334 9.47145 165.342 9.49735 165.342 9.52869V11.9049C165.342 11.9286 165.334 11.9506 165.318 11.9701C165.302 11.99 165.279 11.9999 165.247 11.9999H161.493C160.535 11.9999 159.715 11.6158 159.034 10.8474L156.848 8.20996L154.661 10.8474C153.972 11.6158 153.149 11.9999 152.19 11.9999H148.436C148.404 11.9999 148.38 11.99 148.365 11.9701C148.349 11.9503 148.341 11.9247 148.341 11.8927V9.51654C148.341 9.49287 148.349 9.47113 148.365 9.4513C148.38 9.43148 148.404 9.42156 148.436 9.42156H152C152.166 9.42156 152.313 9.35441 152.44 9.21947L155.018 6.10683L159.022 1.25976Z"
fill="#00D1FF"
/>
</svg>
</StyledSynthetixLogo>
{children}
</StyledNavBar>
);
}

const StyledNavBar = styled.nav`
background-color: ${colors.backgroundColor};
display: flex;
align-items: center;
padding: 40px;
border-bottom: 1px solid #333333;
max-height: 96px;
`;

const StyledSynthetixLogo = styled.svg`
margin-right: 55px;
width: 166px;
height: 12px;
`;
2 changes: 2 additions & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { default as theme } from './styles/theme';
export { Colors } from './types';

// Icons
export { default as ArrowLinkOffIcon } from './components/Icons/ArrowLinkOffIcon';
Expand Down Expand Up @@ -62,3 +63,4 @@ export { default as SpotlightButton } from './components/SpotlightButton';
export { default as Modal } from './components/Modal';
export { default as Flex } from './components/Flex';
export { default as ButtonCard } from './components/ButtonCard';
export { default as NavBar } from './components/NavBar';
7 changes: 5 additions & 2 deletions stories/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@ export default {
decorators: [withDesign],
} as ComponentMeta<typeof Button>;

export const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
export const Template: ComponentStory<typeof Button> = (args) => (
<div style={{ backgroundColor: 'red', padding: '10px' }}>
<Button {...args} />
</div>
);

Template.args = {
text: 'I am a Button',
variant: 'primary',
type: 'button',
size: 'large',
secondaryBackgroundColor: 'white',
disabled: false,
};

Expand Down
19 changes: 19 additions & 0 deletions stories/NavBar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import NavBar from '../src/components/NavBar';

export default {
title: 'Nav Bar',
component: NavBar,
} as ComponentMeta<typeof NavBar>;

export const Template: ComponentStory<typeof NavBar> = (args) => <NavBar {...args} />;

Template.args = {
children: [
<div style={{ color: 'white' }}>some buttons</div>,
<div style={{ color: 'white' }}>some buttons</div>,
<div style={{ color: 'white' }}>some buttons</div>,
<div style={{ color: 'white' }}>some buttons</div>,
],
};

0 comments on commit e73e4ae

Please sign in to comment.