Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PSB | button, card, text: changed styles, added some features #45

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

PSB | button, card, text: changed styles, added some features #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92679f0
PSB | changed styles
Bhusnar5044 Jul 9, 2021
df7e4b8
PSB | changed husky command
Bhusnar5044 Jul 9, 2021
82d08d6
PSB | removed yarn.lock
Bhusnar5044 Jul 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,6 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*

.eslintcache
.eslintcache

yarn.lock
13 changes: 6 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@
"react-dom": "^17.0.1"
},
"dependencies": {
"effector": "^21.7.5",
"effector-react": "^21.2.1",
"styled-components": "^5.2.1",
"typescript": "^4.1.2",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
Expand All @@ -26,9 +22,13 @@
"@types/node": "^12.19.7",
"@types/react": "^16.14.2",
"@types/react-dom": "^16.9.10",
"react-transition-group": "^4.4.1",
"@types/react-transition-group": "^4.4.0",
"@types/styled-components": "^5.1.4"
"@types/styled-components": "^5.1.4",
"effector": "^21.7.5",
"effector-react": "^21.2.1",
"react-transition-group": "^4.4.1",
"styled-components": "^5.2.1",
"typescript": "^4.1.2"
},
"devDependencies": {
"@babel/cli": "^7.12.8",
Expand Down Expand Up @@ -76,7 +76,6 @@
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.0.0",
"gh-pages": "^3.1.0",
"husky": "^4.3.0",
"jest": "^26.6.3",
"lint-staged": "^10.5.2",
"npm-run-all": "^4.1.5",
Expand Down
13 changes: 11 additions & 2 deletions src/core/Button/Button.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, TypeMap, SizeMap } from '.';
import { Button, TypeMap, SizeMap, EdgeMap } from '.';
import { Preview, Story, Meta, Props, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { withKnobs, color, boolean, select } from '@storybook/addon-knobs';

Expand All @@ -18,6 +18,15 @@ import { withKnobs, color, boolean, select } from '@storybook/addon-knobs';
options: Object.values(SizeMap)
}
},
edges: {
control: {
type: 'select',
options: Object.values(EdgeMap)
}
},
fullWidth: {
control: { type: 'boolean' }
},
type: {
control: {
type: 'select',
Expand Down Expand Up @@ -74,7 +83,7 @@ export const Template = args => (
);

<Preview>
<Story name="Button" args={{ size: 'S', children: 'Click Me' }}>
<Story name="Button" args={{ size: 'S', edges: 'squared', children: 'Click Me' }}>
{Template.bind({})}
</Story>
</Preview>
Expand Down
29 changes: 19 additions & 10 deletions src/core/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,27 @@ import { Props } from './types';

export const SizeMap: Props['size'][] = ['XS', 'S', 'M', 'L', 'XL'];
export const TypeMap: Props['type'][] = ['primary', 'secondary', 'warning', 'danger', 'success'];
export const EdgeMap: Props['edges'][] = ['squared', 'rounded', 'circle'];

export const Button:React.FC<Props> & WithStyle = React.memo(React.forwardRef( (props, ref) => {
const {type='primary',size='S',textSize, textColor, hoverTextColor} = props;

return <StyledButton ref={ref} type={type} size={size} {...props}>
<Text textSize={textSize} textColor={textColor} hoverColor={hoverTextColor}>{props.children}</Text>
</StyledButton>;
}));
export const Button: React.FC<Props> & WithStyle = React.memo(
React.forwardRef((props, ref) => {
const { type = 'primary', size = 'S', textSize, textColor, hoverTextColor } = props;

Button.displayName="Button";
return (
<StyledButton ref={ref} type={type} size={size} {...props}>
<Text textSize={textSize} textColor={textColor} hoverColor={hoverTextColor}>
{props.children}
</Text>
</StyledButton>
);
})
);

Button.displayName = 'Button';
Button.defaultProps = {
hoverEffect: true
hoverEffect: true,
size: 'S',
edges: 'squared'
};

export default Button
export default Button;
174 changes: 109 additions & 65 deletions src/core/Button/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,155 @@
import styled from 'styled-components';
import { buttonTheme } from '../../theme/core/button';
import { defaultTheme } from "../../theme/theme";
import { Props } from './types';
import { defaultTheme } from '../../theme/theme';
import { ButtonEdges, ComponentSize, Props } from './types';


const SizeMixin = (size:any) => {
const SizeMixin = (size: ComponentSize) => {
switch (size) {
case "XS":
return `padding: 0.6rem 2.4rem 0.8rem;
case 'XS':
return `padding: 0.6rem 1.6rem 0.6rem;
`;
case "S":
return `padding: 0.8rem 2.4rem 1rem;
case 'S':
return `padding: 0.8rem 2.4rem 0.8rem;
`;
case "M":
return `padding: 1rem 2.4rem 1.2rem;

case 'M':
return `padding: 1rem 2.4rem 1rem;
`;

case "L":
return `padding: 1.2rem 2.4rem 1.4rem;
case 'L':
return `padding: 1.2rem 2.4rem 1.2rem;
`;
case "XL":
return `padding: 1.4rem 2.4rem 1.6rem;

case 'XL':
return `padding: 1.4rem 2.4rem 1.4rem;
`;

default:
return `border:1px solid red;`;
}
default:
return `border:1px solid red;`;
}
};

const buttonEdges = (size: ButtonEdges) => {
switch (size) {
case 'squared':
return `border-radius: 0.5rem;
`;
case 'rounded':
return `border-radius: 100rem;
`;

case 'circle':
return `border-radius: 50%;
`;

const hoverPick = (pr:Props) => {
default:
return `border-radius: 50%;`;
}
};

const hoverPick = (pr: Props) => {
switch (pr.type) {
case "primary":{
case 'primary': {
return `background: ${pr.bgColor || buttonTheme.primary.bgColor};
border:none;
span{color:${ pr.textColor || buttonTheme.defaults.textColor};};
${pr.hoverEffect?`&:hover {
span{color:${pr.textColor || buttonTheme.defaults.textColor};};
${
pr.hoverEffect
? `&:hover {
background-color: ${pr.hoverBgColor || buttonTheme.primary.hoverBgColor};
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || buttonTheme.defaults.hoverShadowColor };
span{color:${pr.hoverTextColor || defaultTheme.whiteColor };};
};`:''}
`};
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || buttonTheme.defaults.hoverShadowColor};
span{color:${pr.hoverTextColor || defaultTheme.whiteColor};};
};`
: ''
}
`;
}

case "secondary":
return `background:transparent;
case 'secondary':
return `background:transparent;
border:1px solid ${defaultTheme.secondaryColor};
span{color:${pr.textColor || defaultTheme.secondaryActiveColor};};
${pr.hoverEffect?`&:hover {
${
pr.hoverEffect
? `&:hover {
border:1px solid ${defaultTheme.secondaryActiveColor};
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor };
span{color:${pr.hoverTextColor || defaultTheme.secondaryActiveColor };};
};`:''}
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor};
span{color:${pr.hoverTextColor || defaultTheme.secondaryActiveColor};};
};`
: ''
}
`;
case "warning":

case 'warning':
return `
background: ${ pr.bgColor || defaultTheme.warningColor};
background: ${pr.bgColor || defaultTheme.warningColor};
border:none;
span{color:${pr.textColor || defaultTheme.whiteColor};};
${pr.hoverEffect?`&:hover {
${
pr.hoverEffect
? `&:hover {
background-color: ${pr.hoverBgColor || defaultTheme.warningActiveColor};
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor };
span{color:${pr.hoverTextColor || defaultTheme.whiteColor };};
};`:''}
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor};
span{color:${pr.hoverTextColor || defaultTheme.whiteColor};};
};`
: ''
}
`;

case "danger":
case 'danger':
return `background: ${pr.bgColor || defaultTheme.dangerColor};
border:none;
span{color:${pr.textColor || defaultTheme.whiteColor};}
${pr.hoverEffect?`&:hover {
${
pr.hoverEffect
? `&:hover {
background-color: ${pr.hoverBgColor || defaultTheme.dangerActiveColor};
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor };
span{color:${pr.hoverTextColor || defaultTheme.whiteColor };};
};`:''}
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor};
span{color:${pr.hoverTextColor || defaultTheme.whiteColor};};
};`
: ''
}
`;
case "success":
return `background: ${pr.bgColor || defaultTheme.successColor};

case 'success':
return `background: ${pr.bgColor || defaultTheme.successColor};
border:none;
span{color:${pr.textColor || defaultTheme.whiteColor};};
${pr.hoverEffect?`&:hover {
${
pr.hoverEffect
? `&:hover {
background-color: ${pr.hoverBgColor || defaultTheme.successActiveColor};
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor };
span{color:${pr.hoverTextColor || defaultTheme.whiteColor };};
};`:''}
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor};
span{color:${pr.hoverTextColor || defaultTheme.whiteColor};};
};`
: ''
}
`;

default:
return `background: ${pr.bgColor || defaultTheme.primaryColor};
default:
return `background: ${pr.bgColor || defaultTheme.primaryColor};
border:none;
span{color:${pr.textColor || defaultTheme.whiteColor};};
${pr.hoverEffect?`&:hover {
${
pr.hoverEffect
? `&:hover {
background-color: ${pr.hoverBgColor || defaultTheme.primaryActiveColor};
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor };
span{color:${pr.hoverTextColor || defaultTheme.whiteColor };};
};`:''}`;
box-shadow: 0px 5px 8px ${pr.hoverShadowColor || defaultTheme.shadowColor};
span{color:${pr.hoverTextColor || defaultTheme.whiteColor};};
};`
: ''
}`;
}
};
};

export const StyledButton = styled.button<Props>`
${pr => pr.disabled === true?'pointer-events: none;opacity: 0.4;':''};
${pr=> SizeMixin(pr.size)};
${pr => (pr.disabled ? 'pointer-events: none;opacity: 0.4;' : '')};
${pr => pr.fullWidth && 'width:100%;'}
${pr => pr.size && SizeMixin(pr.size)};
${pr => hoverPick(pr)};
margin: 0.5rem;
/* font-size: 20px; */
border-radius: 0.5rem;
text-align:center;
${pr => pr.edges && buttonEdges(pr.edges)}
text-align: center;
position: relative;
user-select: none;
font-family: inherit;
Expand All @@ -119,4 +160,7 @@ export const StyledButton = styled.button<Props>`
justify-content: center;
-webkit-box-align: center;
align-items: center;
`;
span {
padding: 0;
}
`;
30 changes: 17 additions & 13 deletions src/core/Button/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
import { ElementType, ReactNode } from "react";
import { ElementType, ReactNode } from 'react';
import { HTMLProps, Omit, WithThemeProp } from '../../utils';

export type ComponentSize = 'XS' | 'S' | 'M' | 'L' | 'XL' ;
export type ComponentSize = 'XS' | 'S' | 'M' | 'L' | 'XL';

export type ButtonType = 'primary' | 'secondary' | 'warning' | 'danger'| 'success';
export type ButtonType = 'primary' | 'secondary' | 'warning' | 'danger' | 'success';

export interface Props extends Omit<HTMLProps<HTMLDivElement>,'size' | 'type'>,WithThemeProp {
export type ButtonEdges = 'squared' | 'rounded' | 'circle';

export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'size' | 'type'>, WithThemeProp {
type?: ButtonType;
icon?: ElementType;
textSize?:ComponentSize;
textSize?: ComponentSize;
size?: ComponentSize;
edges?: ButtonEdges;
fullWidth?: boolean;
className?: string;
children?: ReactNode;
loading?: boolean;
bgColor?:string;
textColor?:string;
hoverEffect?:boolean;
hoverTextColor?:string;
hoverBgColor?:string;
hoverShadowColor?:string;
disabled?:boolean;
}
bgColor?: string;
textColor?: string;
hoverEffect?: boolean;
hoverTextColor?: string;
hoverBgColor?: string;
hoverShadowColor?: string;
disabled?: boolean;
}
3 changes: 3 additions & 0 deletions src/core/Card/Card.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import { withKnobs, color, boolean, select } from '@storybook/addon-knobs';
shadowColor: {
control: 'color'
},
disableBorder: {
control: { type: 'boolean' }
},
borderColor: {
control: 'color'
},
Expand Down
Loading