8842627401

Committed 26 Apr 2024 03:20AM UTC coverage: 39.836% (-0.4%) from 40.225%

Build # 8842627401

Build Type

push

github

Committed by

web-flow

Commit Message

Ah.more translations (#350)

* legend translations

* working: need to do add sites forms

* more translations

* locations message

* upload image tweaks

Run Details

232 of 876 branches covered (26.48%)

Branch coverage included in aggregate %.

3 of 23 new or added lines in 13 files covered. (13.04%)

16 existing lines in 6 files now uncovered.

1079 of 2415 relevant lines covered (44.68%)

11.21 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

33.33

/src/components/mapComponents/mapLegend/index.tsx

import React, { useState } from 'react';
import styled from 'styled-components';
import { Button, Typography } from 'antd';
import {
  ADOPTED_TREE_ICON_DESCRIPTION,
  CLOSED_BLOCK_DESCRIPTION,
  OPEN_BLOCK_DESCRIPTION,
  OPEN_SITE_DESCRIPTION,
  PRIVATE_STREET_DESCRIPTION,
  RESERVED_BLOCK_DESCRIPTION,
  TREE_ICON_DESCRIPTION,
  YOUNG_TREE_ICON_DESCRIPTION,
} from './content';
import { MAP_GREEN, MAP_RED, MAP_YELLOW, RED } from '../../../utils/colors';
import { MapViews } from '../ducks/types';
import {
  DESKTOP_FONT_SIZE,
  MOBILE_FONT_SIZE,
  InlineImage,
} from '../../themedComponents';
import { BREAKPOINT_TABLET } from '../../windowDimensions';
import { Languages } from '../../../App';
import { site } from '../../../constants';
import { SITE_OPTIONS_ROADMAP } from '../constants';
import { useTranslation } from 'react-i18next';
import { n } from '../../../utils/stringFormat';

const MapLegendContainer = styled.div`
  margin-bottom: 5px;
  width: 100%;
`;

const FlexibleParagraph = styled(Typography.Paragraph)`
  line-height: 15px;
  font-size: ${DESKTOP_FONT_SIZE};
  display: inline-block;

  @media (max-width: ${BREAKPOINT_TABLET}px) {
    font-size: ${MOBILE_FONT_SIZE};
  }
`;

const LegendHeader = styled(Typography.Text)`
  font-size: ${DESKTOP_FONT_SIZE};

  @media (max-width: ${BREAKPOINT_TABLET}px) {
    font-size: ${MOBILE_FONT_SIZE};
  }
`;

const ToggleTextButton = styled(Button)`
  padding: 0px;
`;

const LegendItem = styled.div`
  width: 100%;
  display: flex;
  gap: 0 40px;

  @media (min-width: ${BREAKPOINT_TABLET}px) {
    gap: 0 20px;
  }
`;

const LegendImage = styled(InlineImage)`
  height: 20px;
  width: 20px;
`;

const RedLineContainer = styled.div`
  height: 20px;
  display: flex;
  align-items: center;
`;

const RedLine = styled.div`
  width: 20px;
  height: 2px;
  display: inline-block;
  background: ${RED};
`;

const ColorBlock = styled.div`
  width: 20px;
  height: 20px;
  display: inline-block;
  background: ${(props: ColorBlockProps) => props.color};
`;

interface ColorBlockProps {
  readonly color: string;
}

interface MapLegendProps {
  readonly view: MapViews;
  readonly canHide?: boolean;
  readonly icons?: string[];
}

const MapLegend: React.FC<MapLegendProps> = ({ view, canHide, icons }) => {
  const [showLegend, setShowLegend] = useState(true);

  const { t } = useTranslation(n(site, ['maps']), {
    keyPrefix: 'mapLegend',
    nsMode: 'fallback',
  });

  const toggleShowLegend = () => {
    setShowLegend((prevState) => !prevState);
  };

  const [youngIcon, standardIcon, adoptedIcon, openIcon] =
    icons ?? SITE_OPTIONS_ROADMAP.map((option) => option.image);

  return (
    <MapLegendContainer>
      {(() => {
        switch (view) {
          case MapViews.TREES:
            return (
              <>
                {showLegend && (
                  <>
                    <LegendHeader strong>{t('header')}</LegendHeader>
                    <br />
                    <LegendItem>
                      <LegendImage src={youngIcon} preview={false} />
                      <FlexibleParagraph>
                        {t('legendDescription.young')}
                      </FlexibleParagraph>
                    </LegendItem>
                    <LegendItem>
                      <LegendImage src={standardIcon} preview={false} />
                      <FlexibleParagraph>
                        {t('legendDescription.older')}
                      </FlexibleParagraph>
                    </LegendItem>
                    <LegendItem>
                      <LegendImage src={adoptedIcon} preview={false} />
                      <FlexibleParagraph>
                        {t('legendDescription.adopted')}
                      </FlexibleParagraph>
                    </LegendItem>
                    <LegendItem>
                      <LegendImage src={openIcon} preview={false} />
                      <FlexibleParagraph>
                        {t('legendDescription.open')}
                      </FlexibleParagraph>
                    </LegendItem>
                  </>
                )}
              </>
            );
          // case MapViews.BLOCKS:
          //   return (
          //     <>
          //       {showLegend && (
          //         <>
          //           <LegendHeader strong>Blocks that are colored</LegendHeader>
          //           <br />
          //           <LegendItem>
          //             <ColorBlock color={MAP_GREEN} />
          //             <FlexibleParagraph>
          //               {OPEN_BLOCK_DESCRIPTION[lang]}
          //             </FlexibleParagraph>
          //           </LegendItem>
          //           <LegendItem>
          //             <ColorBlock color={MAP_YELLOW} />
          //             <FlexibleParagraph>
          //               {RESERVED_BLOCK_DESCRIPTION[lang]}
          //             </FlexibleParagraph>
          //           </LegendItem>
          //           <LegendItem>
          //             <ColorBlock color={MAP_RED} />
          //             <FlexibleParagraph>
          //               {CLOSED_BLOCK_DESCRIPTION[lang]}
          //             </FlexibleParagraph>
          //           </LegendItem>
          //         </>
          //       )}
          //     </>
          //   );
        }
      })()}
      {showLegend && (
        <>
          <LegendHeader strong>{t('warning')}</LegendHeader>
          <br />
          <LegendItem>
            <RedLineContainer>
              <RedLine />
            </RedLineContainer>
            <FlexibleParagraph>
              {t('legendDescription.privateStreet')}
            </FlexibleParagraph>
          </LegendItem>
        </>
      )}
      {canHide && (
        <ToggleTextButton type={'link'} onClick={toggleShowLegend}>
          {showLegend ? 'Hide Legend' : 'Show Legend'}
        </ToggleTextButton>
      )}
    </MapLegendContainer>
  );
};

export default MapLegend;

1	import React, { useState } from 'react';
2	import styled from 'styled-components';
3	import { Button, Typography } from 'antd';
4	import {
5	ADOPTED_TREE_ICON_DESCRIPTION,
6	CLOSED_BLOCK_DESCRIPTION,
7	OPEN_BLOCK_DESCRIPTION,
8	OPEN_SITE_DESCRIPTION,
9	PRIVATE_STREET_DESCRIPTION,
10	RESERVED_BLOCK_DESCRIPTION,
11	TREE_ICON_DESCRIPTION,
12	YOUNG_TREE_ICON_DESCRIPTION,
13	} from './content';
14	import { MAP_GREEN, MAP_RED, MAP_YELLOW, RED } from '../../../utils/colors';
15	import { MapViews } from '../ducks/types';
16	import {
17	DESKTOP_FONT_SIZE,
18	MOBILE_FONT_SIZE,
19	InlineImage,
20	} from '../../themedComponents';
21	import { BREAKPOINT_TABLET } from '../../windowDimensions';
22	import { Languages } from '../../../App';
23	import { site } from '../../../constants';
24	import { SITE_OPTIONS_ROADMAP } from '../constants';
25	import { useTranslation } from 'react-i18next';
26	import { n } from '../../../utils/stringFormat';
27
28	const MapLegendContainer = styled.div`	12✔
29	margin-bottom: 5px;
30	width: 100%;
31	`;
32
33	const FlexibleParagraph = styled(Typography.Paragraph)`	12✔
34	line-height: 15px;
35	font-size: ${DESKTOP_FONT_SIZE};
36	display: inline-block;
37
38	@media (max-width: ${BREAKPOINT_TABLET}px) {
39	font-size: ${MOBILE_FONT_SIZE};
40	}
41	`;
42
43	const LegendHeader = styled(Typography.Text)`	12✔
44	font-size: ${DESKTOP_FONT_SIZE};
45
46	@media (max-width: ${BREAKPOINT_TABLET}px) {
47	font-size: ${MOBILE_FONT_SIZE};
48	}
49	`;
50
51	const ToggleTextButton = styled(Button)`	12✔
52	padding: 0px;
53	`;
54
55	const LegendItem = styled.div`	12✔
56	width: 100%;
57	display: flex;
58	gap: 0 40px;
59
60	@media (min-width: ${BREAKPOINT_TABLET}px) {
61	gap: 0 20px;
62	}
63	`;
64
65	const LegendImage = styled(InlineImage)`	12✔
66	height: 20px;
67	width: 20px;
68	`;
69
70	const RedLineContainer = styled.div`	12✔
71	height: 20px;
72	display: flex;
73	align-items: center;
74	`;
75
76	const RedLine = styled.div`	12✔
77	width: 20px;
78	height: 2px;
79	display: inline-block;
80	background: ${RED};
81	`;
82
83	const ColorBlock = styled.div`	12✔
84	width: 20px;
85	height: 20px;
86	display: inline-block;
87	background: ${(props: ColorBlockProps) => props.color};	×
88	`;
89
90	interface ColorBlockProps {
91	readonly color: string;
92	}
93
94	interface MapLegendProps {
95	readonly view: MapViews;
96	readonly canHide?: boolean;
97	readonly icons?: string[];
98	}
99
100	const MapLegend: React.FC<MapLegendProps> = ({ view, canHide, icons }) => {	12✔
101	const [showLegend, setShowLegend] = useState(true);	×
102
NEW 103	const { t } = useTranslation(n(site, ['maps']), {	×
104	keyPrefix: 'mapLegend',
105	nsMode: 'fallback',
106	});
107
108	const toggleShowLegend = () => {	×
109	setShowLegend((prevState) => !prevState);	×
110	};
111
112	const [youngIcon, standardIcon, adoptedIcon, openIcon] =
113	icons ?? SITE_OPTIONS_ROADMAP.map((option) => option.image);	×
114
115	return (	×
116	<MapLegendContainer>
117	{(() => {
118	switch (view) {	×
119	case MapViews.TREES:
120	return (	×
121	<>
122	{showLegend && (	×
123	<>
124	<LegendHeader strong>{t('header')}</LegendHeader>
125	<br />
126	<LegendItem>
127	<LegendImage src={youngIcon} preview={false} />
128	<FlexibleParagraph>
129	{t('legendDescription.young')}
130	</FlexibleParagraph>
131	</LegendItem>
132	<LegendItem>
133	<LegendImage src={standardIcon} preview={false} />
134	<FlexibleParagraph>
135	{t('legendDescription.older')}
136	</FlexibleParagraph>
137	</LegendItem>
138	<LegendItem>
139	<LegendImage src={adoptedIcon} preview={false} />
140	<FlexibleParagraph>
141	{t('legendDescription.adopted')}
142	</FlexibleParagraph>
143	</LegendItem>
144	<LegendItem>
145	<LegendImage src={openIcon} preview={false} />
146	<FlexibleParagraph>
147	{t('legendDescription.open')}
148	</FlexibleParagraph>
149	</LegendItem>
150	</>
151	)}
152	</>
153	);
154	// case MapViews.BLOCKS:
155	// return (
156	// <>
157	// {showLegend && (
158	// <>
159	// <LegendHeader strong>Blocks that are colored</LegendHeader>
160	// <br />
161	// <LegendItem>
162	// <ColorBlock color={MAP_GREEN} />
163	// <FlexibleParagraph>
164	// {OPEN_BLOCK_DESCRIPTION[lang]}
165	// </FlexibleParagraph>
166	// </LegendItem>
167	// <LegendItem>
168	// <ColorBlock color={MAP_YELLOW} />
169	// <FlexibleParagraph>
170	// {RESERVED_BLOCK_DESCRIPTION[lang]}
171	// </FlexibleParagraph>
172	// </LegendItem>
173	// <LegendItem>
174	// <ColorBlock color={MAP_RED} />
175	// <FlexibleParagraph>
176	// {CLOSED_BLOCK_DESCRIPTION[lang]}
177	// </FlexibleParagraph>
178	// </LegendItem>
179	// </>
180	// )}
181	// </>
182	// );
183	}
184	})()}
185	{showLegend && (	×
186	<>
187	<LegendHeader strong>{t('warning')}</LegendHeader>
188	<br />
189	<LegendItem>
190	<RedLineContainer>
191	<RedLine />
192	</RedLineContainer>
193	<FlexibleParagraph>
194	{t('legendDescription.privateStreet')}
195	</FlexibleParagraph>
196	</LegendItem>
197	</>
198	)}
199	{canHide && (	×
200	<ToggleTextButton type={'link'} onClick={toggleShowLegend}>
201	{showLegend ? 'Hide Legend' : 'Show Legend'}	×
202	</ToggleTextButton>
203	)}
204	</MapLegendContainer>
205	);
206	};
207
208	export default MapLegend;

Code-4-Community / speak-for-the-trees-frontend / 8842627401

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous