Skip to content

Fix-grapes #939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 1, 2024
Merged

Fix-grapes #939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a664f31
🔨 refactor(AccordionSection.tsx): refactor AccordionSection component
marcbon Aug 1, 2024
45044e9
🎨 style(AccordionSection.tsx): refactor AccordionSection component la…
marcbon Aug 1, 2024
a884be3
🔨 refactor(UsecaseSection.tsx): improve Tag styling and layout in Use…
marcbon Aug 1, 2024
af76547
✨ feat(AccordionSection.tsx): add Pipe component to display separator…
marcbon Aug 1, 2024
27566d4
🔧 chore(AccordionSection.tsx): update icon size and spacing in Grape …
marcbon Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 154 additions & 85 deletions src/pages/Insights/Collection/components/AccordionSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,60 @@ import { Grape as GrapeType } from 'src/features/api';
import { ReactComponent as TitleIcon } from '@zendeskgarden/svg-icons/src/12/copy-fill.svg';
import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/12/user-group-fill.svg';
import { ReactComponent as ObservationIcon } from '@zendeskgarden/svg-icons/src/12/tag-fill.svg';
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
import { appTheme } from 'src/app/theme';
import { ArrayHelpers, FieldArray } from 'formik';
import { getColorWithAlpha } from 'src/common/utils';
import { Pipe } from 'src/common/components/Pipe';
import { ObservationCard } from '../ObservationCard';
import { CardGrid } from './CardGrid';
import { GrapeCheckbox } from './GrapeCheckbox';
import { getBgColor, getSeverityColor } from '../../utils/getSeverityColor';

const Grid = styled.div`
container-type: inline-size;

#container {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: ${({ theme }) => theme.space.md};
}

@container (max-width: ${({ theme }) => theme.breakpoints.lg}) {
#container {
grid-template-columns: auto;
grid-template-rows: auto;
}
}
`;

interface GrapeProps {
id: string;
grape: GrapeType;
isOpen: boolean;
}

const AccordionSection = styled(Accordion.Section)<{ severity: string }>`
const AccordionSection = styled(Accordion.Section)<{
severity: string;
isOpen: boolean;
}>`
margin-bottom: ${({ theme }) => theme.space.md};
border-radius: ${({ theme }) => theme.borderRadii.lg};
border: 2px solid;
border-color: ${({ severity }) => getSeverityColor(severity)};
box-shadow: 4px 4px ${({ severity }) => getBgColor(severity)};
${({ isOpen, severity }) =>
`box-shadow: ${
isOpen
? `4px 4px ${getColorWithAlpha(getBgColor(severity), 0.2)}`
: `4px 4px ${getBgColor(severity)}`
};`}
svg[data-garden-id='accordions.rotate_icon'] {
color: ${({ severity }) => getSeverityColor(severity)};
}
`;

export const Grape = ({ grape, isOpen }: GrapeProps) => {
export const Grape = ({ grape, id }: GrapeProps) => {
const [isOpen, setIsOpen] = useState(false);

const memoizedGrape = useMemo(() => {
const observations = grape.observations.map((obs) => {
// cerchiamo il tag severity in the middle of the shit
Expand Down Expand Up @@ -60,86 +89,126 @@ export const Grape = ({ grape, isOpen }: GrapeProps) => {
}, [grape]);

return (
<AccordionSection
severity={memoizedGrape.severity}
{...(!isOpen && {
style: {
backgroundColor: appTheme.palette.white,
},
})}
<Accordion
level={3}
isExpandable
defaultExpandedSections={[]}
isBare
id={id}
onChange={() => setIsOpen(!isOpen)}
>
<Accordion.Header>
<Accordion.Label>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: appTheme.space.sm,
marginBottom: appTheme.space.xs,
}}
>
<FieldArray name="observations">
{({ push, remove }: ArrayHelpers) => (
<GrapeCheckbox
push={push}
remove={remove}
grapeObservations={memoizedGrape.observations}
/>
)}
</FieldArray>
<TitleIcon color={getSeverityColor(memoizedGrape.severity)} />
<LG isBold>{memoizedGrape.title}</LG>
</div>
<div style={{ marginLeft: appTheme.space.xxl }}>
<Tag
isPill
size="large"
hue={getBgColor(memoizedGrape.severity)}
style={{ marginLeft: appTheme.space.xxs }}
>
<ObservationIcon
color={getSeverityColor(memoizedGrape.severity)}
style={{ width: '24px' }}
/>
<MD isBold color={getSeverityColor(memoizedGrape.severity)}>
{memoizedGrape.severity}
{memoizedGrape.severityFrequencies[memoizedGrape.severity] &&
` (${
memoizedGrape.severityFrequencies[memoizedGrape.severity]
})`}
</MD>
</Tag>
<MD
isBold
color={appTheme.palette.grey[700]}
style={{ display: 'inline', marginRight: appTheme.space.sm }}
>
{memoizedGrape.severityFrequencies[memoizedGrape.severity]
? `/${memoizedGrape.observations.length} tot.`
: `${memoizedGrape.observations.length} obs.`}
</MD>
<Tag size="large" isPill>
<UserIcon
color={appTheme.palette.grey[600]}
style={{ width: '24px' }}
/>
<MD>
Users:{' '}
<strong style={{ fontWeight: appTheme.fontWeights.semibold }}>
{memoizedGrape.usersNumber}
</strong>
</MD>
</Tag>
</div>
</Accordion.Label>
</Accordion.Header>
<Accordion.Panel>
<CardGrid>
{memoizedGrape.observations.map((observation) => (
<ObservationCard key={observation.id} observation={observation} />
))}
</CardGrid>
</Accordion.Panel>
</AccordionSection>
<AccordionSection
severity={memoizedGrape.severity}
isOpen={isOpen}
{...(!isOpen && {
style: {
backgroundColor: appTheme.palette.white,
},
})}
>
<Accordion.Header>
<Accordion.Label>
<Grid>
<div id="container">
<div
style={{
display: 'flex',
alignItems: 'center',
gap: appTheme.space.xs,
}}
>
<FieldArray name="observations">
{({ push, remove }: ArrayHelpers) => (
<GrapeCheckbox
push={push}
remove={remove}
grapeObservations={memoizedGrape.observations}
/>
)}
</FieldArray>
<TitleIcon color={getSeverityColor(memoizedGrape.severity)} />
<LG
isBold
{...(isOpen && {
style: {
color: appTheme.palette.blue[600],
},
})}
>
{memoizedGrape.title}
</LG>
</div>
<div style={{ marginLeft: appTheme.space.xxl }}>
<Tag
isPill
size="large"
hue={getBgColor(memoizedGrape.severity)}
style={{ marginLeft: appTheme.space.xxs }}
>
<ObservationIcon
color={getSeverityColor(memoizedGrape.severity)}
style={{
width: appTheme.space.base * 4,
height: appTheme.space.base * 4,
marginRight: appTheme.space.xxs,
}}
/>
<MD isBold color={getSeverityColor(memoizedGrape.severity)}>
{memoizedGrape.severity}
{memoizedGrape.severityFrequencies[
memoizedGrape.severity
] &&
` (${
memoizedGrape.severityFrequencies[
memoizedGrape.severity
]
})`}
</MD>
</Tag>
<MD
isBold
color={appTheme.palette.grey[700]}
style={{
display: 'inline',
marginRight: appTheme.space.sm,
}}
>
{memoizedGrape.severityFrequencies[memoizedGrape.severity]
? `/${memoizedGrape.observations.length} tot.`
: `${memoizedGrape.observations.length} obs.`}
</MD>
<Pipe />
<Tag size="large" isPill>
<UserIcon
color={appTheme.palette.grey[600]}
style={{
width: appTheme.space.base * 5,
height: appTheme.space.base * 5,
marginRight: appTheme.space.xxs,
}}
/>
<MD>
Users:{' '}
<strong
style={{ fontWeight: appTheme.fontWeights.semibold }}
>
{memoizedGrape.usersNumber}
</strong>
</MD>
</Tag>
</div>
</div>
</Grid>
</Accordion.Label>
</Accordion.Header>
<Accordion.Panel>
<CardGrid>
{memoizedGrape.observations.map((observation) => (
<ObservationCard key={observation.id} observation={observation} />
))}
</CardGrid>
</Accordion.Panel>
</AccordionSection>
</Accordion>
);
};
Loading