refactor project filters story and add active filter toggling

web-components/src/components/icons/terassos/ColombiaRegionIcon/ColombiaRegionIcon.tsx

@@ -0,0 +1,101 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+import { sxToArray } from '../../../../utils/mui/sxToArray';
+import {
+  activeFill,
+  activeStroke,
+  AMAZON_PATH,
+  ANDEAN_PATH,
+  CARIBBEAN_PATH,
+  inactiveFill,
+  inactiveStroke,
+  ORINOCO_PATH,
+  PACIFIC_PATH,
+  selectedFill,
+  selectedStroke,
+} from './ColombiaRegionIcon.constants';
+
+export type Region = 'PACIFIC' | 'ORINOCO' | 'CARIBBEAN' | 'AMAZON' | 'ANDEAN';
+
+interface RegionPaths {
+  PACIFIC: string;
+  ORINOCO: string;
+  CARIBBEAN: string;
+  AMAZON: string;
+  ANDEAN: string;
+}
+
+export const regionPaths: RegionPaths = {
+  PACIFIC: PACIFIC_PATH,
+  ORINOCO: ORINOCO_PATH,
+  CARIBBEAN: CARIBBEAN_PATH,
+  AMAZON: AMAZON_PATH,
+  ANDEAN: ANDEAN_PATH,
+};
+
+interface RegionIndicatorIconProps extends SvgIconProps {
+  region: Region;
+  isSelected?: boolean;
+}
+
+const RegionPath = ({
+  path,
+  fill = inactiveFill,
+  stroke = inactiveStroke,
+}: {
+  path: string;
+  fill?: string;
+  stroke?: string;
+}) => (
+  <path
+    d={path}
+    fill={fill}
+    stroke={stroke}
+    strokeWidth="0.2"
+    strokeLinejoin="round"
+  />
+);
+
+export default function RegionIndicatorIcon({
+  region,
+  sx,
+  isSelected = false,
+  ...props
+}: RegionIndicatorIconProps): JSX.Element {
+  const activeRegionPath = Object.entries(regionPaths).filter(
+    ([key, value]) => key === region,
+    // TODO: review this
+  )[0][1];
+  const otherRegionPaths = Object.entries(regionPaths)
+    .filter(([key, value]) => key !== region)
+    .map(([_, value]) => value);
+  return (
+    <SvgIcon
+      sx={[
+        { color: '#4FB573', mr: 1, width: '30px', height: '30px' },
+        ...sxToArray(sx),
+      ]}
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_1479_22775)">
+        {otherRegionPaths.map((path: string, index: number) => (
+          <RegionPath key={index} path={path} />
+        ))}
+        <RegionPath
+          path={activeRegionPath}
+          fill={isSelected ? selectedFill : activeFill}
+          stroke={isSelected ? selectedStroke : activeStroke}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1479_22775">
+          <rect width="30" height="30" fill="white" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  );
+}

web-components/src/components/icons/terassos/ColombiaRegionIcon/index.ts

@@ -0,0 +1 @@
+export { default } from './ColombiaRegionIcon';

web-components/src/components/icons/terassos/ComplianceBadge.tsx

@@ -0,0 +1,26 @@
+import { Box } from '@mui/material';
+
+export default function ComplianceBadge() {
+  return (
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      width="24px"
+      height="24px"
+      padding="3px"
+      borderRadius="50%"
+      fontSize="12px"
+      fontWeight={700}
+      sx={{
+        borderRadius: '40px',
+        border: '1px dashed var(--surface-stroke, #D2D5D9)',
+        background: 'var(--surface-selected-item-background, #EFEFEF)',
+        ml: 2,
+      }}
+      // eslint-disable-next-line lingui/no-unlocalized-strings
+    >
+      ha.
+    </Box>
+  );
+}

web-components/src/components/icons/terassos/terassosIcons.stories.tsx

@@ -3,7 +3,7 @@ import { Grid } from '@mui/material';
 import { Meta } from '@storybook/react';
 
 import { LabeledIcon } from '../icons.stories';
-import RegionIndicatorIcon from './ColombiaRegionIndicatorIcon';
+import RegionIndicatorIcon from './ColombiaRegionIcon/ColombiaRegionIcon';
 
 export default {
   title: 'Terassos/Icons',

web-components/src/components/icons/utils/SvgColorOverride.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { SvgIcon, SxProps } from '@mui/material';
+
+export default function SvgThemeWrapper({
+  src,
+  sx,
+  color,
+}: {
+  src: string;
+  sx?: SxProps;
+  color: string;
+}) {
+  const maskId = useMemo(() => `mask_${Math.random()}`, []);
+  return (
+    <SvgIcon sx={sx}>
+      <mask id={maskId}>
+        <image
+          href={src}
+          // filter: 'brightness(10)' is used to make the image full intensity for the mask
+          style={{ filter: 'brightness(10)' }}
+          height="100%"
+          width="100%"
+        />
+      </mask>
+      <rect mask={`url(#${maskId})`} width="100%" height="100%" fill={color} />
+    </SvgIcon>
+  );
+}

web-components/src/components/icons/utils/SvgWithSelectedColor.tsx

@@ -0,0 +1,25 @@
+import { SxProps } from '@mui/system';
+
+import SvgColorOverride from './SvgColorOverride';
+
+export default function SvgWithIsSelectedColor({
+  src,
+  sx,
+  isSelected = false,
+  unselectedColor,
+  selectedColor,
+}: {
+  src: string;
+  sx?: SxProps;
+  isSelected?: boolean;
+  unselectedColor: string;
+  selectedColor: string;
+}) {
+  return (
+    <SvgColorOverride
+      src={src}
+      sx={sx}
+      color={isSelected ? selectedColor : unselectedColor}
+    />
+  );
+}

web-components/src/components/molecules/ProjectTag/ProjectTag.tsx

@@ -8,9 +8,10 @@ import { isImageType, ProjectTagType } from './ProjectTag.types';
 export interface Props {
   tag: ProjectTagType;
   sx?: SxProps<Theme>;
+  onClick?: () => void;
 }
 
-const ProjectTag = ({ tag, sx = [] }: Props): JSX.Element => {
+const ProjectTag = ({ tag, sx = [], onClick }: Props): JSX.Element => {
   const { icon, name } = tag;
 
   return (
@@ -28,6 +29,7 @@ const ProjectTag = ({ tag, sx = [] }: Props): JSX.Element => {
         },
         ...sxToArray(sx),
       ]}
+      onClick={onClick}
     >
       {isImageType(icon) && (
         <Box