Pictograms documentation

.storybook/main.js

@@ -3,7 +3,8 @@ module.exports = {
         "../stories/*.stories.mdx",
         "../stories/*.stories.@(ts|tsx)",
         "../stories/blocks/*.stories.@(ts|tsx)",
-        "../stories/charts/*.stories.@(ts|tsx)"
+        "../stories/charts/*.stories.@(ts|tsx)",
+        "../stories/picto/*.stories.@(ts|tsx)",
     ],
     "addons": [
         "@storybook/addon-links",

src/picto/utils/IconWrapper.tsx

@@ -8,11 +8,11 @@ export type IconProps = {
 const getSize = (size: IconSize) => {
     switch (size) {
         case "small":
-            return "1.25rem";
+            return "1.25em";
         case "medium":
-            return "1.5rem";
+            return "1.5em";
         case "large":
-            return "2.5rem";
+            return "2.5em";
         case "inherit":
             return "inherit";
         default:

stories/Pictograms.stories.mdx

@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/addon-docs";
+import { Pictograms } from "./picto/Pictograms";
+
+<Meta
+    title="🖼️ Pictograms"
+    parameters={{
+        "viewMode": "docs",
+        "previewTabs": {
+            "canvas": { "hidden": true },
+            "zoom": { "hidden": true },
+            "storybook/background": { "hidden": true },
+            "storybook/viewport": { "hidden": true },
+        },
+    }}
+/>
+
+<div style={{ "margin": "0 auto", "maxWidth": 1000 }}>
+    <Pictograms />
+</div>

stories/picto/Pictograms.tsx

@@ -0,0 +1,201 @@
+import { createElement, useState } from "react";
+import { Source } from "@storybook/components";
+import { Search } from "./Search";
+import { useConst } from "powerhooks/useConst";
+import { Evt } from "evt";
+import { tss } from "tss-react";
+import { fr } from "../../dist/fr";
+import * as Picto from "../../dist/picto";
+import { createModal } from "../../dist/Modal";
+import { Tooltip } from "../../dist/Tooltip";
+import CallOut from "../../dist/CallOut";
+import { getLink } from "../../dist/link";
+
+const pictogrameEntries = Object.entries(Picto);
+
+const modal = createModal({
+    id: "foo-modal",
+    isOpenedByDefault: false
+});
+
+export function Pictograms() {
+    const [search, setSearch] = useState("");
+
+    const { css, classes } = useStyles();
+
+    const filteredPictograms = pictogrameEntries.filter(([key]) =>
+        key.toLowerCase().includes(search.toLowerCase())
+    );
+    const [selectedPicto, setSelectedPicto] = useState<{ key: string } | null>(null);
+
+    const evtSearchAction = useConst(() => Evt.create<"scroll to">());
+
+    const { Link } = getLink();
+
+    return (
+        <div>
+            <CallOut
+                className={css({ "marginBottom": 0 })}
+                title="Pictograms"
+                iconId="fr-icon-search-line"
+                buttonProps={{
+                    "onClick": () => evtSearchAction.post("scroll to"),
+                    "children": "Start searching"
+                }}
+            >
+                This tool help you find the perfect DSFR compliant pictogram for your project.
+                <br />
+                <br />
+                <Link
+                    target="_blank"
+                    href="https://www.systeme-de-design.gouv.fr/fondamentaux/pictogramme"
+                >
+                    Learn more about pictograms
+                </Link>
+            </CallOut>
+            <Search evtAction={evtSearchAction} onSearchChange={setSearch} search={search} />
+            <h3 style={{ marginTop: fr.spacing("6v") }}>
+                {search === ""
+                    ? `${filteredPictograms.length} pictograms`
+                    : `Found ${filteredPictograms.length} pictogram${
+                          filteredPictograms.length > 1 ? "s" : ""
+                      }`}
+            </h3>
+            <div className={classes.pictogramsWrapper}>
+                <div className={classes.pictogramsContainer}>
+                    {filteredPictograms.map(([key, PictoComponent]) => (
+                        <div
+                            key={key}
+                            className={classes.pictoTile}
+                            onClick={() => {
+                                setSelectedPicto({ key });
+                                modal.open();
+                            }}
+                        >
+                            {typeof PictoComponent === "function" && (
+                                <PictoComponent fontSize="inherit" />
+                            )}
+                            <div className={classes.pictoTileLabel}>{key}</div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <modal.Component title={selectedPicto?.key ?? "Pictogramme"}>
+                {selectedPicto !== null && (
+                    <>
+                        <div style={{ textAlign: "center" }}>
+                            <Source
+                                language="tsx"
+                                code={`import { ${selectedPicto.key} } from "@codegouvfr/react-dsfr/picto";`}
+                            />
+                            <div
+                                style={{
+                                    display: "flex",
+                                    justifyContent: "space-around",
+                                    alignItems: "center",
+                                    marginTop: fr.spacing("2v")
+                                }}
+                            >
+                                <div>
+                                    {selectedPicto &&
+                                        createElement(
+                                            Picto[selectedPicto.key] as React.ElementType,
+                                            {
+                                                style: {
+                                                    backgroundSize: "30px 30px",
+                                                    backgroundColor: "transparent",
+                                                    backgroundPosition:
+                                                        "0px 0px, 0px 15px, 15px -15px, -15px 0px",
+                                                    backgroundImage:
+                                                        "linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%), linear-gradient(-45deg, rgb(230, 230, 230) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(230, 230, 230) 75%), linear-gradient(-45deg, transparent 75%, rgb(230, 230, 230) 75%)"
+                                                },
+                                                fontSize: 210
+                                            }
+                                        )}
+                                </div>
+                                <div
+                                    style={{
+                                        display: "flex",
+                                        justifyContent: "space-between",
+                                        alignItems: "flex-end",
+                                        marginTop: fr.spacing("2v"),
+                                        fontSize: "1.5rem",
+                                        gap: fr.spacing("4v")
+                                    }}
+                                >
+                                    <Tooltip kind="hover" title="fontSize small">
+                                        <div
+                                            style={{
+                                                padding: fr.spacing("1w")
+                                            }}
+                                        >
+                                            {createElement(
+                                                Picto[selectedPicto.key] as React.ElementType,
+                                                { fontSize: "small" }
+                                            )}
+                                        </div>
+                                    </Tooltip>
+                                    <Tooltip kind="hover" title="fontSize medium">
+                                        <div
+                                            style={{
+                                                padding: fr.spacing("1w")
+                                            }}
+                                        >
+                                            {createElement(
+                                                Picto[selectedPicto.key] as React.ElementType,
+                                                { fontSize: "medium" }
+                                            )}
+                                        </div>
+                                    </Tooltip>
+                                    <Tooltip kind="hover" title="fontSize large">
+                                        <div
+                                            style={{
+                                                padding: fr.spacing("1w")
+                                            }}
+                                        >
+                                            {createElement(
+                                                Picto[selectedPicto.key] as React.ElementType,
+                                                { fontSize: "large" }
+                                            )}
+                                        </div>
+                                    </Tooltip>
+                                </div>
+                            </div>
+                        </div>
+                    </>
+                )}
+            </modal.Component>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ Pictograms }).create(() => ({
+    pictoTile: {
+        textAlign: "center",
+        width: 150,
+        cursor: "pointer",
+        "&:hover": {
+            borderRadius: 8,
+            backgroundColor: "var(--background-default-grey-hover)"
+        }
+    },
+    pictoTileLabel: {
+        marginTop: 8,
+        fontSize: 12,
+        padding: "0 4px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+    },
+    pictogramsContainer: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: fr.spacing("4v"),
+        fontSize: 72
+    },
+    pictogramsWrapper: {
+        padding: fr.spacing("1w"),
+        borderRadius: "8px",
+        backgroundColor: "var(--background-default-grey)"
+    }
+}));

stories/picto/Search.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { tss } from "tss-react";
+import { SearchBar } from "../../dist/SearchBar";
+import { fr } from "../../dist/fr";
+import { NonPostableEvt } from "evt";
+import { useEvt } from "evt/hooks";
+
+export type Props = {
+    className?: string;
+    search: string;
+    onSearchChange: (search: string) => void;
+    evtAction: NonPostableEvt<"scroll to">;
+};
+
+export function Search(props: Props) {
+    const { className, search, onSearchChange, evtAction } = props;
+
+    const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
+    const [searchBarWrapperElement, setSearchBarWrapperElement] = useState<HTMLDivElement | null>(
+        null
+    );
+
+    useEvt(
+        ctx => {
+            evtAction.attach(
+                action => action === "scroll to",
+                ctx,
+                () => {
+                    inputElement?.focus();
+                    searchBarWrapperElement?.scrollIntoView({
+                        "behavior": "smooth",
+                        "block": "start"
+                    });
+                }
+            );
+        },
+        [evtAction, inputElement, searchBarWrapperElement]
+    );
+
+    const { classes, cx } = useStyles();
+
+    return (
+        <>
+            <div
+                className={cx(classes.root, className)}
+                ref={searchBarWrapperElement => setSearchBarWrapperElement(searchBarWrapperElement)}
+            >
+                <SearchBar
+                    className={classes.searchBar}
+                    label="Filter by name"
+                    renderInput={({ className, id, placeholder, type }) => (
+                        <input
+                            ref={setInputElement}
+                            value={search}
+                            onChange={event => onSearchChange(event.target.value)}
+                            className={className}
+                            id={id}
+                            placeholder={placeholder}
+                            type={type}
+                        />
+                    )}
+                />
+            </div>
+        </>
+    );
+}
+
+const useStyles = tss.withName({ Search }).create(() => ({
+    "root": {
+        "display": "flex",
+        "paddingTop": fr.spacing("6v")
+    },
+    "searchBar": {
+        "flex": 1
+    }
+}));