Skip to content

Commit 400ae6d

Browse files
MaxenceeeMaxenceee
authored
Tile support of native pictogram (#428)
* [fix] rename IconProps in Picto props * native pictogram support in Tile * Tile picto support test * update Tile story for native picto * Update Tile.stories.tsx
1 parent 3f62491 commit 400ae6d

File tree

110 files changed

+442
-343
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+442
-343
lines changed

‎scripts/picto-builder.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,9 +126,9 @@ async function generateComponent(svgPath: string, outputDir: string): Promise<st
126126
const cleanedSvg = extractSvgInnerContent(await cleanSvgContent(svgData));
127127

128128
const template = `import React from 'react';
129-
import { createIcon } from './utils/IconWrapper';
129+
import { createPicto } from './utils/PictoWrapper';
130130
131-
export default createIcon(
131+
export default createPicto(
132132
<>
133133
{{& svgContent }}
134134
</>,
@@ -167,7 +167,7 @@ async function generateTypes(outputDir: string): Promise<string> {
167167
const iconNames = files.map(f => pascalCaseName(path.basename(f, ".tsx")));
168168
const filePath = path.join(outputDir, "index.d.ts");
169169

170-
const header = `import { IconWrapper } from './utils/IconWrapper';\n\ntype SvgIconComponent = typeof IconWrapper;\n\n`;
170+
const header = `import { PictoWrapper } from './utils/PictoWrapper';\n\ntype SvgIconComponent = typeof PictoWrapper;\n\n`;
171171
const lines = iconNames.map(name => `export const ${name}: SvgIconComponent;`);
172172

173173
const content = `${header}${lines.join("\n")}\n`;

‎src/Tile.tsx‎

Lines changed: 56 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,6 @@ export type TileProps = {
2121
desc?: ReactNode;
2222
detail?: ReactNode;
2323
start?: ReactNode;
24-
imageUrl?: string;
25-
imageAlt?: string;
26-
/**
27-
* @deprecated imageWidth has no effect
28-
*/
29-
imageWidth?: string | number;
30-
/**
31-
* @deprecated imageHeight has no effect
32-
*/
33-
imageHeight?: string | number;
34-
imageSvg?: boolean;
3524
grey?: boolean;
3625
/** make the whole tile clickable */
3726
enlargeLinkOrButton?: boolean;
@@ -60,7 +49,8 @@ export type TileProps = {
6049
noBackground?: boolean;
6150
disabled?: boolean;
6251
style?: CSSProperties;
63-
} & (TileProps.WithLink | TileProps.WithButton | TileProps.Unclickable);
52+
} & (TileProps.WithImage | TileProps.WithPicto) &
53+
(TileProps.WithLink | TileProps.WithButton | TileProps.Unclickable);
6454

6555
export namespace TileProps {
6656
export type Unclickable = {
@@ -78,6 +68,30 @@ export namespace TileProps {
7868
linkProps?: never;
7969
buttonProps: ComponentProps<"button">;
8070
};
71+
72+
export type WithImage = {
73+
imageUrl?: string;
74+
imageAlt?: string;
75+
/**
76+
* @deprecated imageWidth has no effect
77+
*/
78+
imageWidth?: string | number;
79+
/**
80+
* @deprecated imageHeight has no effect
81+
*/
82+
imageHeight?: string | number;
83+
imageSvg?: boolean;
84+
pictogram?: never;
85+
};
86+
87+
export type WithPicto = {
88+
imageUrl?: never;
89+
imageAlt?: never;
90+
imageWidth?: never;
91+
imageHeight?: never;
92+
imageSvg?: never;
93+
pictogram: ReactNode;
94+
};
8195
}
8296

8397
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-tile> */
@@ -99,6 +113,7 @@ export const Tile = memo(
99113
imageWidth,
100114
imageHeight,
101115
imageSvg = false,
116+
pictogram,
102117
orientation = "vertical",
103118
small = false,
104119
noBorder = false,
@@ -189,33 +204,37 @@ export const Tile = memo(
189204
</div>
190205
</div>
191206

192-
{imageUrl !== undefined && imageUrl.length > 0 && (
207+
{((imageUrl !== undefined && imageUrl.length > 0) || pictogram !== undefined) && (
193208
<div className={cx(fr.cx("fr-tile__header"), classes.header)}>
194-
{imageSvg ? (
209+
{imageSvg || pictogram !== undefined ? (
195210
<div className={cx(fr.cx("fr-tile__pictogram"), classes.img)}>
196-
<svg
197-
aria-hidden={true}
198-
className={cx(fr.cx("fr-artwork"), classes.artwork)}
199-
viewBox="0 0 80 80"
200-
width="80px"
201-
height="80px"
202-
xmlns="http://www.w3.org/2000/svg"
203-
xmlnsXlink="http://www.w3.org/1999/xlink"
204-
>
205-
{(
206-
[
207-
"artwork-decorative",
208-
"artwork-minor",
209-
"artwork-major"
210-
] as const
211-
).map(label => (
212-
<use
213-
key={label}
214-
className={fr.cx(`fr-${label}`)}
215-
xlinkHref={`${imageUrl}#${label}`}
216-
/>
217-
))}
218-
</svg>
211+
{pictogram !== undefined ? (
212+
pictogram
213+
) : (
214+
<svg
215+
aria-hidden={true}
216+
className={cx(fr.cx("fr-artwork"), classes.artwork)}
217+
viewBox="0 0 80 80"
218+
width="80px"
219+
height="80px"
220+
xmlns="http://www.w3.org/2000/svg"
221+
xmlnsXlink="http://www.w3.org/1999/xlink"
222+
>
223+
{(
224+
[
225+
"artwork-decorative",
226+
"artwork-minor",
227+
"artwork-major"
228+
] as const
229+
).map(label => (
230+
<use
231+
key={label}
232+
className={fr.cx(`fr-${label}`)}
233+
xlinkHref={`${imageUrl}#${label}`}
234+
/>
235+
))}
236+
</svg>
237+
)}
219238
</div>
220239
) : (
221240
<div className={cx(fr.cx("fr-tile__img"), classes.img)}>

‎src/picto/Accessibility.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path

‎src/picto/Airport.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path

‎src/picto/Application.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path d="M33 38H29C28.4477 38 28 38.4477 28 39V41C28 41.5523 28.4477 42 29 42H33C33.5523 42 34 41.5523 34 41V39C34 38.4477 33.5523 38 33 38Z" />

‎src/picto/Archive.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path

‎src/picto/ArmyTank.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path d="M19 51C20.1046 51 21 50.1046 21 49C21 47.8954 20.1046 47 19 47C17.8954 47 17 47.8954 17 49C17 50.1046 17.8954 51 19 51Z" />

‎src/picto/Art.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path

‎src/picto/Astronaut.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path

‎src/picto/Audio.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import { createIcon } from "./utils/IconWrapper";
2+
import { createPicto } from "./utils/PictoWrapper";
33

4-
export default createIcon(
4+
export default createPicto(
55
<>
66
<g className="fr-artwork-minor">
77
<path

0 commit comments

Comments
 (0)