feat: APP-322 add UI for Terrasos project filters

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

@@ -146,7 +146,7 @@ export default {
   component: ArrowDownIcon,
 };
 
-function LabeledIcon(props: {
+export function LabeledIcon(props: {
   icon: React.ReactElement;
   label: string;
 }): JSX.Element {

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Grid } from '@mui/material';
+import { Meta } from '@storybook/react';
+
+import { LabeledIcon } from '../icons.stories';
+import RegionIndicatorIcon from './RegionIndicatorIcon';
+
+export default {
+  title: 'Terassos/Icons',
+  component: RegionIndicatorIcon,
+} as Meta;
+
+export const allIcons = (): JSX.Element => (
+  <Grid container gap={4}>
+    <LabeledIcon
+      label="Pacific"
+      icon={
+        <RegionIndicatorIcon
+          region="PACIFIC"
+          sx={{ height: '60px', width: '60px' }}
+        />
+      }
+    />
+    <LabeledIcon
+      label="Orinoco"
+      icon={
+        <RegionIndicatorIcon
+          region="ORINOCO"
+          sx={{ height: '60px', width: '60px' }}
+        />
+      }
+    />
+    <LabeledIcon
+      label="Caribbean"
+      icon={
+        <RegionIndicatorIcon
+          region="CARIBBEAN"
+          sx={{ height: '60px', width: '60px' }}
+        />
+      }
+    />
+    <LabeledIcon
+      label="Amazon"
+      icon={
+        <RegionIndicatorIcon
+          region="AMAZON"
+          sx={{ height: '60px', width: '60px' }}
+        />
+      }
+    />
+    <LabeledIcon
+      label="Andean"
+      icon={
+        <RegionIndicatorIcon
+          region="ANDEAN"
+          sx={{ height: '60px', width: '60px' }}
+        />
+      }
+    />
+    <LabeledIcon
+      label="Andean (selected)"
+      icon={
+        <RegionIndicatorIcon
+          region="ANDEAN"
+          sx={{ height: '60px', width: '60px' }}
+          isSelected={true}
+        />
+      }
+    />
+  </Grid>
+);

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

@@ -1,8 +1,9 @@
+import { isValidElement } from 'react';
 import { Box, SxProps } from '@mui/material';
 
 import { Theme } from '../../../theme/muiTheme';
 import { sxToArray } from '../../../utils/mui/sxToArray';
-import { ProjectTagType } from './ProjectTag.types';
+import { isImageType, ProjectTagType } from './ProjectTag.types';
 
 export interface Props {
   tag: ProjectTagType;
@@ -28,7 +29,7 @@ const ProjectTag = ({ tag, sx = [] }: Props): JSX.Element => {
         ...sxToArray(sx),
       ]}
     >
-      {icon.src && (
+      {isImageType(icon) && (
         <Box
           component="img"
           src={icon.src}
@@ -40,6 +41,7 @@ const ProjectTag = ({ tag, sx = [] }: Props): JSX.Element => {
           }}
         />
       )}
+      {isValidElement(icon) && icon}
       <Box sx={{ fontWeight: 700, fontSize: { xs: 12, sm: 14 } }}>{name}</Box>
     </Box>
   );

web-components/src/components/molecules/ProjectTag/ProjectTag.types.ts

@@ -1,6 +1,10 @@
 import { ImageType } from '../../../types/shared/imageType';
 
 export type ProjectTagType = {
-  icon: ImageType;
+  icon: ImageType | JSX.Element;
   name: string;
 };
+
+export function isImageType(icon: ImageType | JSX.Element): icon is ImageType {
+  return (icon as ImageType).src !== undefined;
+}

web-components/src/components/organisms/ProjectFilters/ProjectFilters.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryFn } from '@storybook/react';
+
+import ProjectFilters from './ProjectFilters';
+
+export default {
+  title: 'Organisms/ProjectFilters',
+  component: ProjectFilters,
+} as Meta;
+
+const Template: StoryFn = args => <ProjectFilters {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithCustomProps = Template.bind({});
+WithCustomProps.args = {};

web-components/src/components/organisms/ProjectFilters/ProjectFilters.tsx

@@ -0,0 +1,208 @@
+import { Box, Divider, FormControlLabel } from '@mui/material';
+import Checkbox from 'web-components/src/components/inputs/new/CheckBox/Checkbox';
+
+import { ImageType } from 'src/types/shared/imageType';
+
+import RegionIndicatorIcon, {
+  Region,
+} from '../../icons/terassos/RegionIndicatorIcon';
+import { ProjectTag } from '../../molecules/ProjectTag/ProjectTag';
+import { Title } from '../../typography';
+
+export interface ProjectFiltersProps {
+  // Add props here
+}
+
+const regionTags: { name: string; region: Region }[] = [
+  {
+    name: 'Amazon',
+    region: 'AMAZON',
+  },
+  {
+    name: 'Pacific',
+    region: 'PACIFIC',
+  },
+  {
+    name: 'Orinoco',
+    region: 'ORINOCO',
+  },
+  {
+    name: 'Caribbean',
+    region: 'CARIBBEAN',
+  },
+  {
+    name: 'Andean',
+    region: 'ANDEAN',
+  },
+];
+
+const ecosystemTags: { name: string; icon: ImageType | JSX.Element }[] = [
+  {
+    name: 'Tropical very humid forest',
+    icon: { src: '/tag/forest.svg' },
+  },
+  {
+    name: 'Tropical humid forest',
+    icon: { src: '/tag/forest.svg' },
+  },
+  {
+    name: 'Tropical dry forest',
+    icon: { src: '/tag/forest.svg' },
+  },
+  {
+    name: 'Premontane humid forest',
+    icon: { src: '/tag/forest.svg' },
+  },
+  {
+    name: 'Low montane very humid forest',
+    icon: { src: '/tag/forest.svg' },
+  },
+];
+
+function RegionFilters() {
+  return (
+    <div>
+      <Title variant="h5" sx={{ mb: 3 }}>
+        Region
+      </Title>
+      <Box display="flex" flexWrap="wrap" gap={2}>
+        {regionTags.map(({ name, region }) => (
+          <ProjectTag
+            // onClick={() => console.log('clicked')}
+            sx={{
+              cursor: 'pointer',
+              boxShadow:
+                '0px 2px 2px 0px var(--tag-filter-outer-shadow, rgba(0, 0, 0, 0.20))',
+              '&:hover': {
+                filter: 'brightness(0.9)',
+              },
+            }}
+            tag={{
+              name: name,
+              icon: (
+                <RegionIndicatorIcon
+                  region={region}
+                  sx={{
+                    height: '30px',
+                    width: '30px',
+                    mr: 1,
+                  }}
+                />
+              ),
+            }}
+          />
+        ))}
+      </Box>
+      <Divider sx={{ my: 5 }} />
+    </div>
+  );
+}
+
+function EcosystemFilters() {
+  return (
+    <div>
+      <Title variant="h5" sx={{ mb: 3 }}>
+        Ecosystem Type
+      </Title>
+      <Box display="flex" flexWrap="wrap" gap={2}>
+        {ecosystemTags.map(({ name, icon }) => (
+          <ProjectTag
+            // onClick={() => console.log('clicked')}
+            sx={{
+              cursor: 'pointer',
+              // boxShadow: '0px 2px 2px 2px var(--tag-filter-outer-shadow, rgba(0, 0, 0, 0.20))';
+              boxShadow:
+                '0px 2px 2px 0px var(--tag-filter-outer-shadow, rgba(0, 0, 0, 0.20))',
+              '&:hover': {
+                filter: 'brightness(0.9)',
+              },
+            }}
+            tag={{
+              name,
+              icon: icon,
+            }}
+          />
+        ))}
+      </Box>
+      <Divider sx={{ my: 5 }} />
+    </div>
+  );
+}
+
+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,
+      }}
+    >
+      ha.
+    </Box>
+  );
+}
+
+function MarketFilters() {
+  return (
+    <>
+      <Title variant="h5" sx={{ mb: 3 }}>
+        Market
+      </Title>
+      <Box display="flex" flexDirection="column">
+        <FormControlLabel
+          control={<Checkbox />}
+          label={
+            <Box display="flex" alignItems="center">
+              Voluntary
+              <Box
+                component="img"
+                sx={{ width: '24px', ml: 2 }}
+                src="/logos/tebu-badge.png"
+                alt="Tebu"
+              />
+            </Box>
+          }
+          sx={{ mb: 2 }}
+        />
+        <FormControlLabel
+          control={<Checkbox />}
+          label={
+            <Box display="flex" flexWrap="nowrap">
+              Compliance
+              <ComplianceBadge />
+            </Box>
+          }
+          sx={{ mb: 2 }}
+        />
+      </Box>
+    </>
+  );
+}
+
+export default function ProjectFilters({}: ProjectFiltersProps) {
+  return (
+    <div>
+      <Title variant="h4">Filters</Title>
+      <Divider sx={{ my: 5 }} />
+      {/* <Title variant="h5">Region</Title>
+      <Divider sx={{ my: 5 }} /> */}
+      <RegionFilters />
+      {/* <Title variant="h5">Ecosystem Type</Title>
+      <Divider sx={{ my: 5 }} /> */}
+      <EcosystemFilters />
+      {/* <Title variant="h5">Market</Title> */}
+      <MarketFilters />
+    </div>
+  );
+}

web-components/src/components/organisms/ProjectFilters/index.ts

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