-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor project filters story and add active filter toggling
- Loading branch information
Showing
11 changed files
with
289 additions
and
225 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
111 changes: 11 additions & 100 deletions
111
.../terassos/ColombiaRegionIndicatorIcon.tsx → ...egionIcon/ColombiaRegionIcon.constants.ts
Large diffs are not rendered by default.
Oops, something went wrong.
101 changes: 101 additions & 0 deletions
101
web-components/src/components/icons/terassos/ColombiaRegionIcon/ColombiaRegionIcon.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
1 change: 1 addition & 0 deletions
1
web-components/src/components/icons/terassos/ColombiaRegionIcon/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './ColombiaRegionIcon'; |
26 changes: 26 additions & 0 deletions
26
web-components/src/components/icons/terassos/ComplianceBadge.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
web-components/src/components/icons/utils/SvgColorOverride.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
25 changes: 25 additions & 0 deletions
25
web-components/src/components/icons/utils/SvgWithSelectedColor.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} | ||
/> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.