diff options
3 files changed, 81 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx new file mode 100644 index 0000000000..88ab151608 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx @@ -0,0 +1,79 @@ +import { forwardRef } from 'react'; +import styled, { WebTarget } from 'styled-components'; + +import { Colors, Radius, Spacings } from '../../foundations'; +import { buttonReset } from '../../styles'; +import { Flex } from '../flex'; +import { LabelTiny } from '../typography'; + +export interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { + trailing?: React.ReactNode; + as?: WebTarget; +} + +const variables = { + background: Colors.blue, + hover: Colors.blue60, + disabled: Colors.blue50, +} as const; + +const StyledButton = styled.button({ + ...buttonReset, + + display: 'flex', + alignItems: 'center', + + borderRadius: Radius.radius8, + minWidth: '32px', + minHeight: '24px', + background: 'var(--background)', + '&:not(:disabled):hover': { + background: 'var(--hover)', + }, + '&:disabled': { + background: 'var(--disabled)', + }, + '&:focus-visible': { + outline: `2px solid ${Colors.white}`, + }, +}); + +export const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>( + ({ trailing, children, disabled, style, onClick, ...props }, ref) => { + return ( + <StyledButton + ref={ref} + style={ + { + '--background': variables.background, + '--hover': onClick ? variables.hover : variables.background, + '--disabled': variables.disabled, + ...style, + } as React.CSSProperties + } + disabled={disabled} + onClick={onClick} + {...props}> + <Flex + $flex={1} + $gap={Spacings.spacing1} + $justifyContent="space-between" + $padding={{ + horizontal: Spacings.spacing3, + }} + $alignItems="center"> + <Flex $flex={1} $justifyContent="center" $alignItems="center"> + {typeof children === 'string' ? ( + <LabelTiny color={disabled ? Colors.white40 : Colors.white}>{children}</LabelTiny> + ) : ( + children + )} + </Flex> + {trailing} + </Flex> + </StyledButton> + ); + }, +); + +FilterChip.displayName = 'Chip'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/index.ts new file mode 100644 index 0000000000..51fc121fcf --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/index.ts @@ -0,0 +1 @@ +export * from './FilterChip'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts index ac92f7c622..045fa16316 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts @@ -1,5 +1,6 @@ export * from './box'; export * from './button'; +export * from './filter-chip'; export * from './container'; export * from './flex'; export * from './icon'; |