diff --git a/front/src/modules/companies/__stories__/Board.stories.tsx b/front/src/modules/companies/__stories__/Board.stories.tsx index bb2e68406..85dd689c6 100644 --- a/front/src/modules/companies/__stories__/Board.stories.tsx +++ b/front/src/modules/companies/__stories__/Board.stories.tsx @@ -1,3 +1,4 @@ +import { MemoryRouter } from 'react-router-dom'; import { Meta, StoryObj } from '@storybook/react'; import { EntityBoard } from '@/pipeline/components/EntityBoard'; @@ -17,12 +18,15 @@ type Story = StoryObj; export const OneColumnBoard: Story = { render: getRenderWrapperForComponent( - { - return; - }} - />, + + { + return; + }} + /> + , + , ), parameters: { msw: graphqlMocks, diff --git a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx index 928c7ed13..b132d800d 100644 --- a/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx +++ b/front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx @@ -1,3 +1,4 @@ +import { MemoryRouter } from 'react-router-dom'; import { Meta, StoryObj } from '@storybook/react'; import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard'; @@ -15,7 +16,11 @@ export default meta; type Story = StoryObj; const FakeSelectableCompanyBoardCard = () => { - return ; + return ( + + + + ); }; export const CompanyCompanyBoardCard: Story = { diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index 4ab220cc3..fee249175 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -11,6 +11,7 @@ import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgres import { selectedBoardCardsState } from '@/pipeline/states/selectedBoardCardsState'; import { BoardCardEditableFieldDate } from '@/ui/board/card-field/components/BoardCardEditableFieldDate'; import { BoardCardEditableFieldText } from '@/ui/board/card-field/components/BoardCardEditableFieldText'; +import { ChipVariant } from '@/ui/chip/components/EntityChip'; import { IconCurrencyDollar } from '@/ui/icon'; import { IconCalendarEvent } from '@/ui/icon'; import { Checkbox } from '@/ui/input/components/Checkbox'; @@ -21,6 +22,8 @@ import { } from '~/generated/graphql'; import { getLogoUrlFromDomainName } from '~/utils'; +import { CompanyChip } from './CompanyChip'; + const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => selected ? theme.selectedCard : theme.background.secondary}; @@ -129,11 +132,13 @@ export function CompanyBoardCard() { - {`${company.name}-company-logo`} - {company.name}
diff --git a/front/src/modules/companies/components/CompanyChip.tsx b/front/src/modules/companies/components/CompanyChip.tsx index 4e01286e3..ff3990b8b 100644 --- a/front/src/modules/companies/components/CompanyChip.tsx +++ b/front/src/modules/companies/components/CompanyChip.tsx @@ -1,13 +1,20 @@ -import { EntityChip } from '@/ui/chip/components/EntityChip'; +import { ChipVariant, EntityChip } from '@/ui/chip/components/EntityChip'; type OwnProps = { id: string; name: string; picture?: string; clickable?: boolean; + variant?: ChipVariant; }; -export function CompanyChip({ id, name, picture, clickable }: OwnProps) { +export function CompanyChip({ + id, + name, + picture, + clickable, + variant = ChipVariant.opaque, +}: OwnProps) { return ( ); } diff --git a/front/src/modules/ui/chip/components/EntityChip.tsx b/front/src/modules/ui/chip/components/EntityChip.tsx index daf6a6f56..a447111c5 100644 --- a/front/src/modules/ui/chip/components/EntityChip.tsx +++ b/front/src/modules/ui/chip/components/EntityChip.tsx @@ -5,6 +5,11 @@ import styled from '@emotion/styled'; import { Avatar, AvatarType } from '@/users/components/Avatar'; +export enum ChipVariant { + opaque = 'opaque', + transparent = 'transparent', +} + const baseStyle = ({ theme }: { theme: Theme }) => ` align-items: center; border-radius: ${theme.spacing(1)}; @@ -26,12 +31,15 @@ const baseStyle = ({ theme }: { theme: Theme }) => ` white-space: nowrap; `; -const StyledContainerLink = styled.div` +const StyledContainerLink = styled.div<{ variant: string }>` ${baseStyle} - - background-color: ${(props) => props.theme.background.tertiary}; + background-color: ${({ theme, variant }) => + variant === ChipVariant.opaque ? theme.background.tertiary : 'transparent'}; :hover { - filter: brightness(95%); + background-color: ${({ variant, theme }) => + variant === ChipVariant.opaque + ? theme.background.quaternary + : theme.background.transparent.light}; } `; @@ -52,6 +60,7 @@ type OwnProps = { picture?: string; clickable?: boolean; avatarType?: AvatarType; + variant?: ChipVariant; }; export function EntityChip({ @@ -61,6 +70,7 @@ export function EntityChip({ picture, clickable, avatarType = 'rounded', + variant = ChipVariant.opaque, }: OwnProps) { const navigate = useNavigate(); @@ -72,7 +82,11 @@ export function EntityChip({ } return clickable && linkToEntity ? ( - +