Skip to content

Commit b854c2b

Browse files
marcbonmarcbon
authored
Merge pull request #929 from AppQuality/collection-fixes-s-mini
accordion section ui updates
2 parents 7f869d1 + b256a49 commit b854c2b

File tree

4 files changed

+98
-45
lines changed

4 files changed

+98
-45
lines changed

‎src/locales/en/translation.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -994,6 +994,9 @@
994994
"_TOAST_UNPUBLISHED_MESSAGE": "successfully unpublished",
995995
"Devices ({{count}})_one": "Devices ({{count}})",
996996
"Devices ({{count}})_other": "Devices ({{count}})",
997+
"INSIGHT_PAGE_COLLECTION_OBSERVATIONS_LABEL": "Observations: {{count}}",
998+
"INSIGHT_PAGE_COLLECTION_THEMES_LABEL": "Themes: {{count}}",
999+
"INSIGHT_PAGE_COLLECTION_UNGROUPED_USECASE_SUBTITTLE": "Isolated Observations",
9971000
"INSIGHT_PAGE_COLLECTION_USECASE_SUBTITTLE": "Recurring titles",
9981001
"INSIGHTS_PAGE_COLLECTION_SUBTITLE": "Here you will find all your observations that you have collected so far.",
9991002
"INSIGHTS_PAGE_COLLECTION_TITLE": "Title and Observations",

‎src/locales/it/translation.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1029,6 +1029,9 @@
10291029
"Devices ({{count}})_one": "Dispositivi ({{count}})",
10301030
"Devices ({{count}})_many": "",
10311031
"Devices ({{count}})_other": "Dispositivi ({{count}})",
1032+
"INSIGHT_PAGE_COLLECTION_OBSERVATIONS_LABEL": "Observations: {{count}}",
1033+
"INSIGHT_PAGE_COLLECTION_THEMES_LABEL": "Themes: {{count}}",
1034+
"INSIGHT_PAGE_COLLECTION_UNGROUPED_USECASE_SUBTITTLE": "Osservazioni isolate",
10321035
"INSIGHT_PAGE_COLLECTION_USECASE_SUBTITTLE": "Titoli ricorrenti",
10331036
"INSIGHTS_PAGE_COLLECTION_SUBTITLE": "Qui trovi tutte le tue observation che hai collezionato fin ad ora.",
10341037
"INSIGHTS_PAGE_COLLECTION_TITLE": "Titoli e Osservazioni",

‎src/pages/Insights/Collection/components/AccordionSection.tsx‎

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
import {
2-
Accordion,
3-
getColor,
4-
LG,
5-
Tag,
6-
} from '@appquality/unguess-design-system';
1+
import { Accordion, LG, MD, Tag } from '@appquality/unguess-design-system';
72
import styled from 'styled-components';
83
import { Grape as GrapeType } from 'src/features/api';
94
import { ReactComponent as TitleIcon } from '@zendeskgarden/svg-icons/src/12/copy-fill.svg';
105
import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/12/user-group-fill.svg';
11-
import { ReactComponent as ObservationIcon } from '@zendeskgarden/svg-icons/src/12/tag-stroke.svg';
6+
import { ReactComponent as ObservationIcon } from '@zendeskgarden/svg-icons/src/12/tag-fill.svg';
127
import { useMemo } from 'react';
138
import { appTheme } from 'src/app/theme';
149
import { ArrayHelpers, FieldArray } from 'formik';
@@ -33,12 +28,6 @@ const AccordionSection = styled(Accordion.Section)<{ severity: string }>`
3328
}
3429
`;
3530

36-
const AccordionLabel = styled(Accordion.Label)`
37-
display: grid;
38-
grid-template-columns: 1fr auto;
39-
gap: ${({ theme }) => theme.space.sm};
40-
`;
41-
4231
export const Grape = ({ grape, isOpen }: GrapeProps) => {
4332
const memoizedGrape = useMemo(() => {
4433
const observations = grape.observations.map((obs) => {
@@ -80,12 +69,13 @@ export const Grape = ({ grape, isOpen }: GrapeProps) => {
8069
})}
8170
>
8271
<Accordion.Header>
83-
<AccordionLabel>
72+
<Accordion.Label>
8473
<div
8574
style={{
8675
display: 'flex',
8776
alignItems: 'center',
8877
gap: appTheme.space.sm,
78+
marginBottom: appTheme.space.xs,
8979
}}
9080
>
9181
<FieldArray name="observations">
@@ -100,17 +90,43 @@ export const Grape = ({ grape, isOpen }: GrapeProps) => {
10090
<TitleIcon color={getSeverityColor(memoizedGrape.severity)} />
10191
<LG isBold>{memoizedGrape.title}</LG>
10292
</div>
103-
<div>
104-
<Tag isPill size="large" hue={getBgColor(memoizedGrape.severity)}>
105-
<ObservationIcon />
106-
{memoizedGrape.observations.length}
93+
<div style={{ marginLeft: appTheme.space.xxl }}>
94+
<Tag
95+
isPill
96+
size="large"
97+
hue={getBgColor(memoizedGrape.severity)}
98+
style={{ marginLeft: appTheme.space.xxs }}
99+
>
100+
<ObservationIcon
101+
color={getSeverityColor(memoizedGrape.severity)}
102+
style={{ width: '24px' }}
103+
/>
104+
<MD isBold color={getSeverityColor(memoizedGrape.severity)}>
105+
{memoizedGrape.severity}{' '}
106+
{memoizedGrape.severityFrequencies[memoizedGrape.severity] || 0}
107+
</MD>
107108
</Tag>
109+
<MD
110+
isBold
111+
color={appTheme.palette.grey[700]}
112+
style={{ display: 'inline', marginRight: appTheme.space.sm }}
113+
>
114+
/{memoizedGrape.observations.length} tot.
115+
</MD>
108116
<Tag size="large" isPill>
109-
<UserIcon color={getColor(appTheme.colors.accentHue, 600)} />
110-
{memoizedGrape.usersNumber}
117+
<UserIcon
118+
color={appTheme.palette.grey[600]}
119+
style={{ width: '24px' }}
120+
/>
121+
<MD>
122+
Users:{' '}
123+
<strong style={{ fontWeight: appTheme.fontWeights.semibold }}>
124+
{memoizedGrape.usersNumber}
125+
</strong>
126+
</MD>
111127
</Tag>
112128
</div>
113-
</AccordionLabel>
129+
</Accordion.Label>
114130
</Accordion.Header>
115131
<Accordion.Panel>
116132
<CardGrid>

‎src/pages/Insights/Collection/components/UsecaseSection.tsx‎

Lines changed: 55 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { Accordion, LG, SM, Tag, XL } from '@appquality/unguess-design-system';
22
import { v4 as uuidv4 } from 'uuid';
33
import { useMemo, useState } from 'react';
44
import { styled } from 'styled-components';
5-
import { useTranslation } from 'react-i18next';
5+
import { Trans, useTranslation } from 'react-i18next';
66
import { Grape as GrapeType } from 'src/features/api';
7-
import { ReactComponent as TitleIcon } from '@zendeskgarden/svg-icons/src/12/copy-stroke.svg';
7+
import { ReactComponent as TitleIcon } from '@zendeskgarden/svg-icons/src/12/copy-fill.svg';
8+
import { ReactComponent as ObservationsIcon } from '@zendeskgarden/svg-icons/src/12/tag-fill.svg';
89
import { appTheme } from 'src/app/theme';
9-
import { ReactComponent as ObservationsIcon } from '@zendeskgarden/svg-icons/src/12/tag-stroke.svg';
1010
import { ObservationCard } from '../ObservationCard';
1111
import { CardGrid } from './CardGrid';
1212
import { Grape } from './AccordionSection';
@@ -63,26 +63,32 @@ export const UsecaseSection = ({
6363
</XL>
6464
<div style={{ flex: '0 0 auto' }}>
6565
<Tag style={{ marginRight: '4px' }} isRound hue="" size="medium">
66-
<TitleIcon />
66+
<TitleIcon color={appTheme.palette.grey[600]} />
6767
</Tag>{' '}
68-
<SM isBold style={{ display: 'inline', marginRight: '20px' }}>
69-
{grapes.length}{' '}
68+
<SM
69+
isBold
70+
color={appTheme.palette.grey[700]}
71+
style={{ display: 'inline', marginRight: appTheme.space.md }}
72+
>
73+
<Trans i18nKey="INSIGHT_PAGE_COLLECTION_THEMES_LABEL">
74+
Themes: {{ count: grapes.length }}
75+
</Trans>
7076
</SM>
7177
<Tag style={{ marginRight: '4px' }} isRound hue="" size="medium">
72-
<ObservationsIcon />
78+
<ObservationsIcon color={appTheme.palette.grey[600]} />
7379
</Tag>{' '}
74-
<SM isBold style={{ display: 'inline' }}>
75-
{observationsCount} obs
80+
<SM
81+
isBold
82+
color={appTheme.palette.grey[700]}
83+
style={{ display: 'inline' }}
84+
>
85+
<Trans i18nKey="INSIGHT_PAGE_COLLECTION_OBSERVATIONS_LABEL">
86+
Observations: {{ count: observationsCount }}
87+
</Trans>
7688
</SM>
7789
</div>
7890
</UsecaseTitle>
79-
<LG
80-
isBold
81-
color={appTheme.palette.grey[600]}
82-
style={{ marginBottom: appTheme.space.md }}
83-
>
84-
{t('INSIGHT_PAGE_COLLECTION_USECASE_SUBTITTLE')}
85-
</LG>
91+
8692
<Accordion
8793
id={usecaseId.toString()}
8894
level={3}
@@ -91,14 +97,39 @@ export const UsecaseSection = ({
9197
onChange={() => setIsOpen(!isOpen)}
9298
isBare
9399
>
94-
{memoizedGrapes.map((grape) => (
95-
<Grape isOpen={isOpen} key={grape.internalId} grape={grape} />
96-
))}
97-
<CardGrid>
98-
{ungrouped.map((observation) => (
99-
<ObservationCard key={observation.id} observation={observation} />
100-
))}
101-
</CardGrid>
100+
{memoizedGrapes.length > 0 && (
101+
<>
102+
<LG
103+
isBold
104+
color={appTheme.palette.grey[600]}
105+
style={{ marginBottom: appTheme.space.md }}
106+
>
107+
{t('INSIGHT_PAGE_COLLECTION_USECASE_SUBTITTLE')}
108+
</LG>
109+
{memoizedGrapes.map((grape) => (
110+
<Grape isOpen={isOpen} key={grape.internalId} grape={grape} />
111+
))}
112+
</>
113+
)}
114+
{ungrouped.length > 0 && (
115+
<>
116+
<LG
117+
isBold
118+
color={appTheme.palette.grey[600]}
119+
style={{ marginBottom: appTheme.space.md }}
120+
>
121+
{t('INSIGHT_PAGE_COLLECTION_UNGROUPED_USECASE_SUBTITTLE')}
122+
</LG>
123+
<CardGrid>
124+
{ungrouped.map((observation) => (
125+
<ObservationCard
126+
key={observation.id}
127+
observation={observation}
128+
/>
129+
))}
130+
</CardGrid>
131+
</>
132+
)}
102133
</Accordion>
103134
</StyledSection>
104135
);

0 commit comments

Comments
 (0)