Skip to content

Commit bed32d1

Browse files
garronejgarronej
committed
Iprove color tool
1 parent b44331b commit bed32d1

File tree

3 files changed

+39
-15
lines changed

3 files changed

+39
-15
lines changed

‎src/CallOut.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export type CallOutProps = {
1616
className?: string;
1717
iconId?: FrIconClassName | RiIconClassName;
1818
title?: ReactNode;
19-
description: ReactNode;
2019
buttonProps?: ButtonProps;
2120
colorVariant?: CallOutProps.ColorVariant;
2221
classes?: Partial<Record<"root" | "title" | "text" | "button", string>>;
22+
children: ReactNode;
2323
};
2424

2525
export namespace CallOutProps {
@@ -37,10 +37,10 @@ export const CallOut = memo(
3737
className,
3838
iconId,
3939
title,
40-
description,
4140
buttonProps,
4241
colorVariant,
4342
classes = {},
43+
children,
4444
...rest
4545
} = props;
4646

@@ -63,7 +63,7 @@ export const CallOut = memo(
6363
{title !== undefined && (
6464
<h3 className={cx(fr.cx("fr-callout__title"), classes.title)}>{title}</h3>
6565
)}
66-
<p className={cx(fr.cx("fr-callout__text"), classes.text)}> {description} </p>
66+
<p className={cx(fr.cx("fr-callout__text"), classes.text)}> {children} </p>
6767
{buttonProps !== undefined && (
6868
<Button
6969
{...buttonProps}

‎stories/CallOut.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default meta;
7474
export const Default = getStory({
7575
"title": "Titre mise en avant",
7676
"iconId": "ri-information-line",
77-
"description": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
77+
"children": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
7878
accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires
7979
qui remplissent les conditions.`,
8080
"colorVariant": undefined,
@@ -86,7 +86,7 @@ export const Default = getStory({
8686

8787
export const NoTitle = getStory({
8888
"iconId": "ri-information-line",
89-
"description": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
89+
"children": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
9090
accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires
9191
qui remplissent les conditions.`,
9292
"colorVariant": undefined,
@@ -98,7 +98,7 @@ export const NoTitle = getStory({
9898

9999
export const NoIcon = getStory({
100100
"title": "Titre mise en avant",
101-
"description": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
101+
"children": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
102102
accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires
103103
qui remplissent les conditions.`,
104104
"colorVariant": undefined,
@@ -111,7 +111,7 @@ export const NoIcon = getStory({
111111
export const NoButton = getStory({
112112
"title": "Titre mise en avant",
113113
"iconId": "ri-information-line",
114-
"description": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
114+
"children": `Les parents d’enfants de 11 à 14 ans n’ont aucune démarche à
115115
accomplir : les CAF versent automatiquement l’ARS aux familles déjà allocataires
116116
qui remplissent les conditions.`
117117
});

‎stories/ColorHelper.tsx‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from "react";
22
import { SearchBar } from "../dist/SearchBar";
3+
import { CallOut } from "../dist/CallOut";
34
import { colorDecisionAndCorrespondingOption } from "../dist/fr/generatedFromCss/colorDecisionAndCorrespondingOptions";
45
import type { ColorDecisionAndCorrespondingOption } from "../src/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions";
56
import { useColors } from "../dist/useColors";
@@ -9,6 +10,7 @@ import { Fzf } from "fzf";
910
import { createMakeAndWithStyles } from "tss-react";
1011
import { MuiDsfrThemeProvider } from "../dist/mui";
1112
import Tooltip from "@mui/material/Tooltip";
13+
import { assert } from "tsafe/assert";
1214

1315
const { useStyles } = createMakeAndWithStyles({ "useTheme": useColors });
1416

@@ -55,20 +57,42 @@ export function ColorHelper() {
5557

5658
const { css } = useStyles();
5759

60+
const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
61+
const [searchBarElement, setSearchBarElement] = useState<HTMLDivElement | null>(null);
62+
5863
return (
5964
<MuiDsfrThemeProvider>
6065
<div>
61-
<h1>🎨 Color Helper tool</h1>
62-
<p>
63-
This tool help you find the perfect DSFR color decision for your usecase. <br />
64-
</p>
65-
<p>
66-
If you have the hex code (e.g. #c9191e) of a color that you know belong to the
67-
DSFR palette you can use the filter to find to witch decision it correspond.
68-
</p>
66+
<CallOut
67+
className={css({
68+
"marginBottom": 0
69+
})}
70+
title="Color Helper tool"
71+
iconId="ri-palette-line"
72+
buttonProps={{
73+
"onClick": () => {
74+
inputElement?.focus();
75+
searchBarElement?.scrollIntoView({
76+
"behavior": "smooth",
77+
"block": "start"
78+
});
79+
},
80+
"children": "Start searching"
81+
}}
82+
>
83+
This tool help you find the perfect DSFR color decision for your usecase.
84+
<br />
85+
<br />
86+
If you have the hex code (e.g. <code>#c9191e</code>) of a color that you know
87+
belong to the DSFR palette you can use the filter to find to witch decision it
88+
correspond.
89+
</CallOut>
6990
<SearchBar
91+
className={css({ "paddingTop": fr.spacing("6v") })}
92+
ref={searchBarElement => setSearchBarElement(searchBarElement)}
7093
label="Filter by color code (e.g. #c9191e), CSS variable name (e.g. --text-active-red-marianne) or something else (e.g. marianne)..."
7194
nativeInputProps={{
95+
"ref": inputElement => setInputElement(inputElement),
7296
"value": search,
7397
"onChange": event => setSearch(event.target.value)
7498
}}

0 commit comments

Comments
 (0)