a70a9281eb
* merge squashed - A couple of CJS modules into ESM (config mostly) - Vite complains about node.js modules: fixed `useIsMatchingLocation.ts` > or use rollupOptions in vite.config.ts > ref: https://github.com/saleor/saleor-dashboard/blob/f0e4f59d97e2a8c3e22bd2af7b7ce68a361fc9a4/vite.config.js#L6 - Adjust Storybook to work with Vite: use @storybook/test - Use SWC for jest tranformations - Remove unused deps: - ts-jest: replaced with @swc/jest, typecheck by `tsc` - babel plugins - @svgr/plugin-jsx: not used - @testing-library/user-event: handled by @storybook/test - @typescript-eslint/utils: was not plugged in - tsup, esbuild-plugin-svgr: will look into that later - Install Vite required deps, and remove craco/webpack deps - Adjust SVG to work with Vite as components - Fixed `Step.tsx`: I dont know if one should be swaped for the other, but there should be no slash - Initial formating and linting: - removed empty object params - sorting imports, etc.. * prettier: fix pattern * coverage: sb coverage report isnt working * Add missing pieces * `yarn lint --fix` * fix: scripts permissions * tsc: cut errors in half * fix: remove `react-app-env.d.ts` * tsc: all fixed, except `react-data-grid` types issue * eslint: ignore env-config.js * eslint: Align ci with config * msw: bypass testing warnings ref: https://stackoverflow.com/questions/68024935/msw-logging-warnings-for-unhandled-supertest-requests * rebase: and fix things * Adjust to current `graphql-codegen` no ESM support * Remove vite plugin and use built-in methods * rebase: and some fixes * quick fix + `corepack use [email protected]` * Fix build errors --------- Co-authored-by: Charles Bochet <[email protected]>
113 lines
3.0 KiB
TypeScript
113 lines
3.0 KiB
TypeScript
import { ComponentProps, MouseEvent } from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
|
|
|
export type LightIconButtonAccent = 'secondary' | 'tertiary';
|
|
export type LightIconButtonSize = 'small' | 'medium';
|
|
|
|
export type LightIconButtonProps = {
|
|
className?: string;
|
|
testId?: string;
|
|
Icon?: IconComponent;
|
|
title?: string;
|
|
size?: LightIconButtonSize;
|
|
accent?: LightIconButtonAccent;
|
|
active?: boolean;
|
|
disabled?: boolean;
|
|
focus?: boolean;
|
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
} & Pick<ComponentProps<'button'>, 'aria-label' | 'title'>;
|
|
|
|
const StyledButton = styled.button<
|
|
Pick<LightIconButtonProps, 'accent' | 'active' | 'size' | 'focus'>
|
|
>`
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
|
|
border: ${({ disabled, theme, focus }) =>
|
|
!disabled && focus ? `1px solid ${theme.color.blue}` : 'none'};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
box-shadow: ${({ disabled, theme, focus }) =>
|
|
!disabled && focus ? `0 0 0 3px ${theme.color.blue10}` : 'none'};
|
|
color: ${({ theme, accent, active, disabled, focus }) => {
|
|
switch (accent) {
|
|
case 'secondary':
|
|
return active || focus
|
|
? theme.color.blue
|
|
: !disabled
|
|
? theme.font.color.secondary
|
|
: theme.font.color.extraLight;
|
|
case 'tertiary':
|
|
return active || focus
|
|
? theme.color.blue
|
|
: !disabled
|
|
? theme.font.color.tertiary
|
|
: theme.font.color.extraLight;
|
|
}
|
|
}};
|
|
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
font-weight: ${({ theme }) => theme.font.weight.regular};
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
|
|
justify-content: center;
|
|
padding: 0;
|
|
transition: background 0.1s ease;
|
|
|
|
white-space: nowrap;
|
|
|
|
width: ${({ size }) => (size === 'small' ? '24px' : '32px')};
|
|
|
|
&:hover {
|
|
background: ${({ theme, disabled }) =>
|
|
!disabled ? theme.background.transparent.light : 'transparent'};
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:active {
|
|
background: ${({ theme, disabled }) =>
|
|
!disabled ? theme.background.transparent.medium : 'transparent'};
|
|
}
|
|
`;
|
|
|
|
export const LightIconButton = ({
|
|
'aria-label': ariaLabel,
|
|
className,
|
|
testId,
|
|
Icon,
|
|
active = false,
|
|
size = 'small',
|
|
accent = 'secondary',
|
|
disabled = false,
|
|
focus = false,
|
|
onClick,
|
|
title,
|
|
}: LightIconButtonProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<StyledButton
|
|
data-testid={testId}
|
|
aria-label={ariaLabel}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
focus={focus && !disabled}
|
|
accent={accent}
|
|
className={className}
|
|
size={size}
|
|
active={active}
|
|
title={title}
|
|
>
|
|
{Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
|
|
</StyledButton>
|
|
);
|
|
};
|