|
|
|
|
@ -1,32 +1,114 @@
|
|
|
|
|
import React, { ReactNode } from 'react';
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
import styled from 'styled-components';
|
|
|
|
|
|
|
|
|
|
export enum SessionButtonType {
|
|
|
|
|
Brand = 'brand',
|
|
|
|
|
BrandOutline = 'brand-outline',
|
|
|
|
|
Default = 'default',
|
|
|
|
|
DefaultOutline = 'default-outline',
|
|
|
|
|
Square = 'square',
|
|
|
|
|
SquareOutline = 'square-outline',
|
|
|
|
|
Outline = 'outline',
|
|
|
|
|
Simple = 'simple',
|
|
|
|
|
Solid = 'solid',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export enum SessionButtonShape {
|
|
|
|
|
Round = 'round',
|
|
|
|
|
Square = 'square',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// NOTE References ts/themes/colors.tsx
|
|
|
|
|
export enum SessionButtonColor {
|
|
|
|
|
Green = 'green',
|
|
|
|
|
Blue = 'blue',
|
|
|
|
|
Yellow = 'yellow',
|
|
|
|
|
Pink = 'pink',
|
|
|
|
|
Purple = 'purple',
|
|
|
|
|
Orange = 'orange',
|
|
|
|
|
Red = 'red',
|
|
|
|
|
White = 'white',
|
|
|
|
|
Primary = 'primary',
|
|
|
|
|
Secondary = 'secondary',
|
|
|
|
|
Success = 'success',
|
|
|
|
|
Danger = 'danger',
|
|
|
|
|
Warning = 'warning',
|
|
|
|
|
None = '',
|
|
|
|
|
None = 'transparent',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const StyledButton = styled.div<{
|
|
|
|
|
color: string | undefined;
|
|
|
|
|
buttonType: SessionButtonType;
|
|
|
|
|
buttonShape: SessionButtonShape;
|
|
|
|
|
}>`
|
|
|
|
|
width: auto;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: var(--font-size-md);
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
user-select: none;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
transition: var(--default-duration);
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
height: 34px;
|
|
|
|
|
padding: 0px 18px;
|
|
|
|
|
background-color: ${props =>
|
|
|
|
|
props.buttonType === SessionButtonType.Solid && props.color
|
|
|
|
|
? `var(--${props.color}-color)`
|
|
|
|
|
: `var(--button-${props.buttonType}-background-color)`};
|
|
|
|
|
color: ${props =>
|
|
|
|
|
props.color
|
|
|
|
|
? props.buttonType !== SessionButtonType.Solid
|
|
|
|
|
? `var(--${props.color}-color)`
|
|
|
|
|
: 'var(--white-color)'
|
|
|
|
|
: `var(--button-${props.buttonType}-text-color)`};
|
|
|
|
|
${props =>
|
|
|
|
|
props.buttonType === SessionButtonType.Outline &&
|
|
|
|
|
`outline: none; border: 1px solid ${
|
|
|
|
|
props.color ? `var(--${props.color}-color)` : 'var(--button-outline-border-color)'
|
|
|
|
|
}`};
|
|
|
|
|
${props =>
|
|
|
|
|
props.buttonType === SessionButtonType.Solid &&
|
|
|
|
|
'box-shadow: 0px 0px 6px var(--button-solid-shadow-color);'}
|
|
|
|
|
border-radius: ${props => (props.buttonShape === SessionButtonShape.Round ? '17px' : '6px')};
|
|
|
|
|
|
|
|
|
|
.session-icon {
|
|
|
|
|
fill: var(--background-primary-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > *:hover:not(svg) {
|
|
|
|
|
filter: brightness(80%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.disabled {
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
outline: none;
|
|
|
|
|
${props =>
|
|
|
|
|
props.buttonType === SessionButtonType.Solid
|
|
|
|
|
? 'background-color: var(--button-solid-disabled-color)'
|
|
|
|
|
: props.buttonType === SessionButtonType.Outline
|
|
|
|
|
? 'border: 1px solid var(--button-outline-disabled-color)'
|
|
|
|
|
: ''};
|
|
|
|
|
color: ${props =>
|
|
|
|
|
props.buttonType === SessionButtonType.Solid
|
|
|
|
|
? 'var(--button-solid-text-color)'
|
|
|
|
|
: `var(--button-${props.buttonType}-disabled-color)`};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:not(.disabled) {
|
|
|
|
|
&:hover {
|
|
|
|
|
${props =>
|
|
|
|
|
props.buttonType &&
|
|
|
|
|
`background-color: var(--button-${props.buttonType}-background-hover-color);`};
|
|
|
|
|
${props => props.color && `color: var(--button-${props.buttonType}-text-color);`}
|
|
|
|
|
${props =>
|
|
|
|
|
props.buttonType === SessionButtonType.Outline &&
|
|
|
|
|
'outline: none; border: 1px solid var(--button-outline-border-hover-color);'};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
text?: string;
|
|
|
|
|
disabled?: boolean;
|
|
|
|
|
buttonType: SessionButtonType;
|
|
|
|
|
buttonColor: SessionButtonColor;
|
|
|
|
|
buttonShape: SessionButtonShape;
|
|
|
|
|
buttonColor?: SessionButtonColor; // will override theme
|
|
|
|
|
onClick: any;
|
|
|
|
|
children?: ReactNode;
|
|
|
|
|
margin?: string;
|
|
|
|
|
@ -34,7 +116,16 @@ type Props = {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export const SessionButton = (props: Props) => {
|
|
|
|
|
const { buttonType, dataTestId, buttonColor, text, disabled, onClick, margin } = props;
|
|
|
|
|
const {
|
|
|
|
|
buttonType,
|
|
|
|
|
buttonShape,
|
|
|
|
|
dataTestId,
|
|
|
|
|
buttonColor,
|
|
|
|
|
text,
|
|
|
|
|
disabled,
|
|
|
|
|
onClick,
|
|
|
|
|
margin,
|
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
|
|
const clickHandler = (e: any) => {
|
|
|
|
|
if (onClick) {
|
|
|
|
|
@ -42,31 +133,33 @@ export const SessionButton = (props: Props) => {
|
|
|
|
|
onClick();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const buttonTypes = [];
|
|
|
|
|
const onClickFn = disabled ? () => null : clickHandler;
|
|
|
|
|
|
|
|
|
|
buttonTypes.push(buttonType);
|
|
|
|
|
if (buttonType.includes('-outline')) {
|
|
|
|
|
buttonTypes.push(buttonType.replace('-outline', ''));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className={classNames('session-button', ...buttonTypes, buttonColor, disabled && 'disabled')}
|
|
|
|
|
<StyledButton
|
|
|
|
|
color={buttonColor}
|
|
|
|
|
buttonShape={buttonShape}
|
|
|
|
|
buttonType={buttonType}
|
|
|
|
|
className={classNames(
|
|
|
|
|
'session-button',
|
|
|
|
|
buttonShape,
|
|
|
|
|
buttonType,
|
|
|
|
|
buttonColor ?? '',
|
|
|
|
|
disabled && 'disabled'
|
|
|
|
|
)}
|
|
|
|
|
role="button"
|
|
|
|
|
onClick={onClickFn}
|
|
|
|
|
data-testid={dataTestId}
|
|
|
|
|
style={{ margin }}
|
|
|
|
|
>
|
|
|
|
|
{props.children || text}
|
|
|
|
|
</div>
|
|
|
|
|
</StyledButton>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
SessionButton.defaultProps = {
|
|
|
|
|
disabled: false,
|
|
|
|
|
buttonType: SessionButtonType.Default,
|
|
|
|
|
buttonColor: SessionButtonColor.Primary,
|
|
|
|
|
buttonShape: SessionButtonShape.Round,
|
|
|
|
|
buttonType: SessionButtonType.Outline,
|
|
|
|
|
onClick: null,
|
|
|
|
|
} as Partial<Props>;
|
|
|
|
|
|
William Grant
3 years ago