Remove unused javascript (#2470)
This commit is contained in:
Ajay Bura
GitHub
parent
399b1a373e
commit
90ca8ca2c5
114 changed files with 341 additions and 8768 deletions
|
|
@ -1,69 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Avatar.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
|
||||
import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
|
||||
import { avatarInitials } from '../../../util/common';
|
||||
|
||||
const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
|
||||
let textSize = 's1';
|
||||
if (size === 'large') textSize = 'h1';
|
||||
if (size === 'small') textSize = 'b1';
|
||||
if (size === 'extra-small') textSize = 'b3';
|
||||
|
||||
return (
|
||||
<div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
|
||||
{imageSrc !== null ? (
|
||||
<img
|
||||
draggable="false"
|
||||
src={imageSrc}
|
||||
onLoad={(e) => {
|
||||
e.target.style.backgroundColor = 'transparent';
|
||||
}}
|
||||
onError={(e) => {
|
||||
e.target.src = ImageBrokenSVG;
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
|
||||
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
|
||||
>
|
||||
{iconSrc !== null ? (
|
||||
<RawIcon size={size} src={iconSrc} color={iconColor} />
|
||||
) : (
|
||||
text !== null && (
|
||||
<Text variant={textSize} primary>
|
||||
{avatarInitials(text)}
|
||||
</Text>
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
Avatar.defaultProps = {
|
||||
text: null,
|
||||
bgColor: 'transparent',
|
||||
iconSrc: null,
|
||||
iconColor: null,
|
||||
imageSrc: null,
|
||||
size: 'normal',
|
||||
};
|
||||
|
||||
Avatar.propTypes = {
|
||||
text: PropTypes.string,
|
||||
bgColor: PropTypes.string,
|
||||
iconSrc: PropTypes.string,
|
||||
iconColor: PropTypes.string,
|
||||
imageSrc: PropTypes.string,
|
||||
size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
|
||||
.avatar-container {
|
||||
display: inline-flex;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: var(--bo-radius);
|
||||
position: relative;
|
||||
|
||||
&__large {
|
||||
width: var(--av-large);
|
||||
height: var(--av-large);
|
||||
}
|
||||
&__normal {
|
||||
width: var(--av-normal);
|
||||
height: var(--av-normal);
|
||||
}
|
||||
|
||||
&__small {
|
||||
width: var(--av-small);
|
||||
height: var(--av-small);
|
||||
}
|
||||
|
||||
&__extra-small {
|
||||
width: var(--av-extra-small);
|
||||
height: var(--av-extra-small);
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: inherit;
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.avatar__border {
|
||||
@extend .cp-fx__row--c-c;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
|
||||
.text {
|
||||
color: white;
|
||||
}
|
||||
&--active {
|
||||
@extend .avatar__border;
|
||||
box-shadow: var(--bs-surface-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import { avatarInitials, cssVar } from '../../../util/common';
|
||||
|
||||
// renders the avatar and returns it as an URL
|
||||
export default async function renderAvatar({
|
||||
text, bgColor, imageSrc, size, borderRadius, scale,
|
||||
}) {
|
||||
try {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = size * scale;
|
||||
canvas.height = size * scale;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
ctx.scale(scale, scale);
|
||||
|
||||
// rounded corners
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(size, size);
|
||||
ctx.arcTo(0, size, 0, 0, borderRadius);
|
||||
ctx.arcTo(0, 0, size, 0, borderRadius);
|
||||
ctx.arcTo(size, 0, size, size, borderRadius);
|
||||
ctx.arcTo(size, size, 0, size, borderRadius);
|
||||
|
||||
if (imageSrc) {
|
||||
// clip corners of image
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
|
||||
const img = new Image();
|
||||
img.crossOrigin = 'anonymous';
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
img.onerror = reject;
|
||||
img.onload = resolve;
|
||||
});
|
||||
img.src = imageSrc;
|
||||
await promise;
|
||||
|
||||
ctx.drawImage(img, 0, 0, size, size);
|
||||
} else {
|
||||
// colored background
|
||||
ctx.fillStyle = cssVar(bgColor);
|
||||
ctx.fill();
|
||||
|
||||
// centered letter
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = `${cssVar('--fs-s1')} ${cssVar('--font-primary')}`;
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(avatarInitials(text), size / 2, size / 2);
|
||||
}
|
||||
|
||||
return canvas.toDataURL();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return imageSrc;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './NotificationBadge.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
|
||||
function NotificationBadge({ alert, content }) {
|
||||
const notificationClass = alert ? ' notification-badge--alert' : '';
|
||||
return (
|
||||
<div className={`notification-badge${notificationClass}`}>
|
||||
{content !== null && <Text variant="b3" weight="bold">{content}</Text>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
NotificationBadge.defaultProps = {
|
||||
alert: false,
|
||||
content: null,
|
||||
};
|
||||
|
||||
NotificationBadge.propTypes = {
|
||||
alert: PropTypes.bool,
|
||||
content: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.number,
|
||||
]),
|
||||
};
|
||||
|
||||
export default NotificationBadge;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.notification-badge {
|
||||
min-width: 16px;
|
||||
min-height: 8px;
|
||||
padding: 0 var(--sp-ultra-tight);
|
||||
background-color: var(--bg-badge);
|
||||
border-radius: var(--bo-radius);
|
||||
|
||||
.text {
|
||||
color: var(--tc-badge);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&--alert {
|
||||
background-color: var(--bg-positive);
|
||||
}
|
||||
|
||||
&:empty {
|
||||
min-width: 8px;
|
||||
margin: 0 var(--sp-ultra-tight);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Button.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
import { blurOnBubbling } from './script';
|
||||
|
||||
const Button = React.forwardRef(({
|
||||
id, className, variant, iconSrc,
|
||||
type, onClick, children, disabled,
|
||||
}, ref) => {
|
||||
const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
id={id === '' ? undefined : id}
|
||||
className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
|
||||
onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
|
||||
onClick={onClick}
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
>
|
||||
{iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
|
||||
{typeof children === 'string' && <Text variant="b1">{ children }</Text>}
|
||||
{typeof children !== 'string' && children }
|
||||
</button>
|
||||
);
|
||||
});
|
||||
|
||||
Button.defaultProps = {
|
||||
id: '',
|
||||
className: null,
|
||||
variant: 'surface',
|
||||
iconSrc: null,
|
||||
type: 'button',
|
||||
onClick: null,
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
Button.propTypes = {
|
||||
id: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
|
||||
iconSrc: PropTypes.string,
|
||||
type: PropTypes.oneOf(['button', 'submit', 'reset']),
|
||||
onClick: PropTypes.func,
|
||||
children: PropTypes.node.isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
@use 'state';
|
||||
@use '../../partials/dir';
|
||||
@use '../../partials/text';
|
||||
|
||||
.btn-surface,
|
||||
.btn-primary,
|
||||
.btn-positive,
|
||||
.btn-caution,
|
||||
.btn-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
min-width: 80px;
|
||||
padding: var(--sp-extra-tight) var(--sp-normal);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: var(--bo-radius);
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
|
||||
& .text {
|
||||
@extend .cp-txt__ellipsis;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
@include dir.side(padding, var(--sp-tight), var(--sp-loose));
|
||||
|
||||
}
|
||||
.ic-raw {
|
||||
@include dir.side(margin, 0, var(--sp-extra-tight));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin color($textColor, $iconColor) {
|
||||
.text {
|
||||
color: $textColor;
|
||||
}
|
||||
.ic-raw {
|
||||
background-color: $iconColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-surface {
|
||||
box-shadow: var(--bs-surface-border);
|
||||
@include color(var(--tc-surface-high), var(--ic-surface-normal));
|
||||
@include state.hover(var(--bg-surface-hover));
|
||||
@include state.focus(var(--bs-surface-outline));
|
||||
@include state.active(var(--bg-surface-active));
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--bg-primary);
|
||||
@include color(var(--tc-primary-high), var(--ic-primary-normal));
|
||||
@include state.hover(var(--bg-primary-hover));
|
||||
@include state.focus(var(--bs-primary-outline));
|
||||
@include state.active(var(--bg-primary-active));
|
||||
}
|
||||
.btn-positive {
|
||||
box-shadow: var(--bs-positive-border);
|
||||
@include color(var(--tc-positive-high), var(--ic-positive-normal));
|
||||
@include state.hover(var(--bg-positive-hover));
|
||||
@include state.focus(var(--bs-positive-outline));
|
||||
@include state.active(var(--bg-positive-active));
|
||||
}
|
||||
.btn-caution {
|
||||
box-shadow: var(--bs-caution-border);
|
||||
@include color(var(--tc-caution-high), var(--ic-caution-normal));
|
||||
@include state.hover(var(--bg-caution-hover));
|
||||
@include state.focus(var(--bs-caution-outline));
|
||||
@include state.active(var(--bg-caution-active));
|
||||
}
|
||||
.btn-danger {
|
||||
box-shadow: var(--bs-danger-border);
|
||||
@include color(var(--tc-danger-high), var(--ic-danger-normal));
|
||||
@include state.hover(var(--bg-danger-hover));
|
||||
@include state.focus(var(--bs-danger-outline));
|
||||
@include state.active(var(--bg-danger-active));
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Checkbox.scss';
|
||||
|
||||
function Checkbox({
|
||||
variant, isActive, onToggle,
|
||||
disabled, tabIndex,
|
||||
}) {
|
||||
const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
|
||||
if (onToggle === null) return <span className={className} />;
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button
|
||||
onClick={() => onToggle(!isActive)}
|
||||
className={className}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
tabIndex={tabIndex}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Checkbox.defaultProps = {
|
||||
variant: 'primary',
|
||||
isActive: false,
|
||||
onToggle: null,
|
||||
disabled: false,
|
||||
tabIndex: 0,
|
||||
};
|
||||
|
||||
Checkbox.propTypes = {
|
||||
variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
|
||||
isActive: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
tabIndex: PropTypes.number,
|
||||
};
|
||||
|
||||
export default Checkbox;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
@use './state';
|
||||
|
||||
.checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
background-color: var(--bg-surface-border);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
@extend .cp-fx__row--c-c;
|
||||
|
||||
&--active {
|
||||
background-color: black;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 6px;
|
||||
border: 6px solid white;
|
||||
border-width: 0 0 3px 3px;
|
||||
transform: rotateZ(-45deg) translate(1px, -1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-primary.checkbox--active {
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
.checkbox-positive.checkbox--active {
|
||||
background-color: var(--bg-positive);
|
||||
}
|
||||
.checkbox-caution.checkbox--active {
|
||||
background-color: var(--bg-caution);
|
||||
}
|
||||
.checkbox-danger.checkbox--active {
|
||||
background-color: var(--bg-danger);
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './IconButton.scss';
|
||||
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
import Tooltip from '../tooltip/Tooltip';
|
||||
import { blurOnBubbling } from './script';
|
||||
import Text from '../text/Text';
|
||||
|
||||
const IconButton = React.forwardRef(({
|
||||
variant, size, type,
|
||||
tooltip, tooltipPlacement, src,
|
||||
onClick, tabIndex, disabled, isImage,
|
||||
className,
|
||||
}, ref) => {
|
||||
const btn = (
|
||||
<button
|
||||
ref={ref}
|
||||
className={`ic-btn ic-btn-${variant} ${className}`}
|
||||
onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
|
||||
onClick={onClick}
|
||||
// eslint-disable-next-line react/button-has-type
|
||||
type={type}
|
||||
tabIndex={tabIndex}
|
||||
disabled={disabled}
|
||||
>
|
||||
<RawIcon size={size} src={src} isImage={isImage} />
|
||||
</button>
|
||||
);
|
||||
if (tooltip === null) return btn;
|
||||
return (
|
||||
<Tooltip
|
||||
placement={tooltipPlacement}
|
||||
content={<Text variant="b2">{tooltip}</Text>}
|
||||
>
|
||||
{btn}
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
IconButton.defaultProps = {
|
||||
variant: 'surface',
|
||||
size: 'normal',
|
||||
type: 'button',
|
||||
tooltip: null,
|
||||
tooltipPlacement: 'top',
|
||||
onClick: null,
|
||||
tabIndex: 0,
|
||||
disabled: false,
|
||||
isImage: false,
|
||||
className: '',
|
||||
};
|
||||
|
||||
IconButton.propTypes = {
|
||||
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
|
||||
size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
|
||||
type: PropTypes.oneOf(['button', 'submit', 'reset']),
|
||||
tooltip: PropTypes.string,
|
||||
tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
|
||||
src: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
tabIndex: PropTypes.number,
|
||||
disabled: PropTypes.bool,
|
||||
isImage: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default IconButton;
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@use 'state';
|
||||
|
||||
.ic-btn {
|
||||
padding: var(--sp-extra-tight);
|
||||
border: none;
|
||||
border-radius: var(--bo-radius);
|
||||
background-color: transparent;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
}
|
||||
|
||||
@mixin color($color) {
|
||||
.ic-raw {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
@mixin focus($color) {
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.ic-btn-surface {
|
||||
@include color(var(--ic-surface-normal));
|
||||
@include state.hover(var(--bg-surface-hover));
|
||||
@include focus(var(--bg-surface-hover));
|
||||
@include state.active(var(--bg-surface-active));
|
||||
}
|
||||
.ic-btn-primary {
|
||||
@include color(var(--ic-primary-normal));
|
||||
@include state.hover(var(--bg-primary-hover));
|
||||
@include focus(var(--bg-primary-hover));
|
||||
@include state.active(var(--bg-primary-active));
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
.ic-btn-positive {
|
||||
@include color(var(--ic-positive-normal));
|
||||
@include state.hover(var(--bg-positive-hover));
|
||||
@include focus(var(--bg-positive-hover));
|
||||
@include state.active(var(--bg-positive-active));
|
||||
}
|
||||
.ic-btn-caution {
|
||||
@include color(var(--ic-caution-normal));
|
||||
@include state.hover(var(--bg-caution-hover));
|
||||
@include focus(var(--bg-caution-hover));
|
||||
@include state.active(var(--bg-caution-active));
|
||||
}
|
||||
.ic-btn-danger {
|
||||
@include color(var(--ic-danger-normal));
|
||||
@include state.hover(var(--bg-danger-hover));
|
||||
@include focus(var(--bg-danger-hover));
|
||||
@include state.active(var(--bg-danger-active));
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './RadioButton.scss';
|
||||
|
||||
function RadioButton({ isActive, onToggle, disabled }) {
|
||||
if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button
|
||||
onClick={() => onToggle(!isActive)}
|
||||
className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
RadioButton.defaultProps = {
|
||||
isActive: false,
|
||||
onToggle: null,
|
||||
disabled: false,
|
||||
};
|
||||
|
||||
RadioButton.propTypes = {
|
||||
isActive: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default RadioButton;
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
@use '../../partials/flex';
|
||||
@use './state';
|
||||
|
||||
.radio-btn {
|
||||
@extend .cp-fx__row--c-c;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg-surface-border);
|
||||
border: 2px solid var(--bg-surface-border);
|
||||
cursor: pointer;
|
||||
@include state.disabled;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: var(--bg-surface-border);
|
||||
border-radius: 50%;
|
||||
}
|
||||
&--active {
|
||||
border: 2px solid var(--bg-positive);
|
||||
&::before {
|
||||
background-color: var(--bg-positive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Toggle.scss';
|
||||
|
||||
function Toggle({ isActive, onToggle, disabled }) {
|
||||
const className = `toggle${isActive ? ' toggle--active' : ''}`;
|
||||
if (onToggle === null) return <span className={className} />;
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button
|
||||
onClick={() => onToggle(!isActive)}
|
||||
className={className}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Toggle.defaultProps = {
|
||||
isActive: false,
|
||||
disabled: false,
|
||||
onToggle: null,
|
||||
};
|
||||
|
||||
Toggle.propTypes = {
|
||||
isActive: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
disabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Toggle;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
@use '../../partials/dir';
|
||||
@use './state';
|
||||
|
||||
.toggle {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
padding: 0 var(--sp-ultra-tight);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--bo-radius);
|
||||
box-shadow: var(--bs-surface-border);
|
||||
cursor: pointer;
|
||||
background-color: var(--bg-surface-low);
|
||||
@include state.disabled;
|
||||
|
||||
transition: background 200ms ease-in-out;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--tc-surface-low);
|
||||
border-radius: calc(var(--bo-radius) / 2);
|
||||
transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--bg-positive);
|
||||
|
||||
&::before {
|
||||
--ltr: translateX(calc(125%));
|
||||
--rtl: translateX(calc(-125%));
|
||||
@include dir.prop(transform, var(--ltr), var(--rtl));
|
||||
|
||||
transform: translateX(calc(125%));
|
||||
background-color: var(--bg-surface);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
|
||||
@mixin hover($color) {
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin focus($outline) {
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: $outline;
|
||||
}
|
||||
}
|
||||
@mixin active($color) {
|
||||
&:active {
|
||||
background-color: $color !important;
|
||||
}
|
||||
}
|
||||
@mixin disabled {
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: no-drop;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
/**
|
||||
* blur [selector] element in bubbling path.
|
||||
* @param {Event} e Event
|
||||
* @param {string} selector element selector for Element.matches([selector])
|
||||
* @return {boolean} if blured return true, else return false with warning in console
|
||||
*/
|
||||
|
||||
function blurOnBubbling(e, selector) {
|
||||
const bubblingPath = e.nativeEvent.composedPath();
|
||||
|
||||
for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
|
||||
if (bubblingPath[elIndex] === document) {
|
||||
console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
|
||||
break;
|
||||
}
|
||||
if (bubblingPath[elIndex].matches(selector)) {
|
||||
setTimeout(() => bubblingPath[elIndex].blur(), 50);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
export { blurOnBubbling };
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './InfoCard.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
import IconButton from '../button/IconButton';
|
||||
|
||||
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
||||
|
||||
function InfoCard({
|
||||
className, style,
|
||||
variant, iconSrc,
|
||||
title, content,
|
||||
rounded, requestClose,
|
||||
}) {
|
||||
const classes = [`info-card info-card--${variant}`];
|
||||
if (rounded) classes.push('info-card--rounded');
|
||||
if (className) classes.push(className);
|
||||
return (
|
||||
<div className={classes.join(' ')} style={style}>
|
||||
{iconSrc && (
|
||||
<div className="info-card__icon">
|
||||
<RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
|
||||
</div>
|
||||
)}
|
||||
<div className="info-card__content">
|
||||
<Text>{title}</Text>
|
||||
{content}
|
||||
</div>
|
||||
{requestClose && (
|
||||
<IconButton src={CrossIC} variant={variant} onClick={requestClose} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
InfoCard.defaultProps = {
|
||||
className: null,
|
||||
style: null,
|
||||
variant: 'surface',
|
||||
iconSrc: null,
|
||||
content: null,
|
||||
rounded: false,
|
||||
requestClose: null,
|
||||
};
|
||||
|
||||
InfoCard.propTypes = {
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.shape({}),
|
||||
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
|
||||
iconSrc: PropTypes.string,
|
||||
title: PropTypes.string.isRequired,
|
||||
content: PropTypes.node,
|
||||
rounded: PropTypes.bool,
|
||||
requestClose: PropTypes.func,
|
||||
};
|
||||
|
||||
export default InfoCard;
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
@use '.././../partials/flex';
|
||||
@use '.././../partials/dir';
|
||||
|
||||
.info-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
line-height: 0;
|
||||
padding: var(--sp-tight);
|
||||
@include dir.prop(border-left, 4px solid transparent, none);
|
||||
@include dir.prop(border-right, none, 4px solid transparent);
|
||||
|
||||
& > .ic-btn {
|
||||
padding: 0;
|
||||
border-radius: 4;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin: 0 var(--sp-tight);
|
||||
@extend .cp-fx__item-one;
|
||||
|
||||
& > *:nth-child(2) {
|
||||
margin-top: var(--sp-ultra-tight);
|
||||
}
|
||||
}
|
||||
|
||||
&--rounded {
|
||||
@include dir.prop(
|
||||
border-radius,
|
||||
0 var(--bo-radius) var(--bo-radius) 0,
|
||||
var(--bo-radius) 0 0 var(--bo-radius)
|
||||
);
|
||||
}
|
||||
|
||||
&--surface {
|
||||
border-color: var(--bg-surface-border);
|
||||
background-color: var(--bg-surface-hover);
|
||||
|
||||
}
|
||||
&--primary {
|
||||
border-color: var(--bg-primary);
|
||||
background-color: var(--bg-primary-hover);
|
||||
& .text {
|
||||
color: var(--tc-primary-high);
|
||||
&-b3 {
|
||||
color: var(--tc-primary-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--positive {
|
||||
border-color: var(--bg-positive-border);
|
||||
background-color: var(--bg-positive-hover);
|
||||
& .text {
|
||||
color: var(--tc-positive-high);
|
||||
&-b3 {
|
||||
color: var(--tc-positive-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--caution {
|
||||
border-color: var(--bg-caution-border);
|
||||
background-color: var(--bg-caution-hover);
|
||||
& .text {
|
||||
color: var(--tc-caution-high);
|
||||
&-b3 {
|
||||
color: var(--tc-caution-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
&--danger {
|
||||
border-color: var(--bg-danger-border);
|
||||
background-color: var(--bg-danger-hover);
|
||||
& .text {
|
||||
color: var(--tc-danger-high);
|
||||
&-b3 {
|
||||
color: var(--tc-danger-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Chip.scss';
|
||||
|
||||
import Text from '../text/Text';
|
||||
import RawIcon from '../system-icons/RawIcon';
|
||||
|
||||
function Chip({
|
||||
iconSrc, iconColor, text, children,
|
||||
onClick,
|
||||
}) {
|
||||
return (
|
||||
<button className="chip" type="button" onClick={onClick}>
|
||||
{iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
|
||||
{(text != null && text !== '') && <Text variant="b3">{text}</Text>}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Chip.propTypes = {
|
||||
iconSrc: PropTypes.string,
|
||||
iconColor: PropTypes.string,
|
||||
text: PropTypes.string,
|
||||
children: PropTypes.element,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
Chip.defaultProps = {
|
||||
iconSrc: null,
|
||||
iconColor: null,
|
||||
text: null,
|
||||
children: null,
|
||||
onClick: null,
|
||||
};
|
||||
|
||||
export default Chip;
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue