Add FilterChip component

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';