Skip to content

Commit 0b3c72a

Browse files
garronejgarronej
committed
Improve color picker
1 parent ed9773b commit 0b3c72a

File tree

3 files changed

+78
-37
lines changed

3 files changed

+78
-37
lines changed

‎src/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ export function generateColorDecisionAndCorrespondingOptionsTsCode(rawCssCode: s
2222
})
2323
.filter(exclude(undefined))
2424
.map(
25-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2625
([
26+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2727
{ optionThemePath, ...colorDecision },
2828
colorOption
2929
]): ColorDecisionAndCorrespondingOption => ({

‎stories/ColorHelper.tsx‎

Lines changed: 77 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ import { useColors } from "../dist/useColors";
66
import { fr } from "../dist/fr";
77
import { createUseDebounce } from "powerhooks/useDebounce";
88
import { Fzf } from "fzf";
9+
import { createMakeAndWithStyles } from "tss-react";
10+
import { MuiDsfrThemeProvider } from "../dist/mui";
11+
import Tooltip from "@mui/material/Tooltip";
12+
13+
const { useStyles } = createMakeAndWithStyles({ "useTheme": useColors });
914

1015
const { useDebounce } = createUseDebounce({ "delay": 400 });
1116

@@ -48,48 +53,71 @@ export function ColorHelper() {
4853
)
4954
});
5055

56+
const { css } = useStyles();
57+
5158
return (
52-
<div>
53-
<SearchBar
54-
label="Filter by color code (e.g. #c9191e), CSS variable name (e.g. --text-active-red-marianne) or something else (e.g. marianne)..."
55-
nativeInputProps={{
56-
"value": search,
57-
"onChange": event => setSearch(event.target.value)
58-
}}
59-
/>
60-
<h3
61-
style={{
62-
"marginTop": fr.spacing("5v")
63-
}}
64-
>
65-
{search === ""
66-
? `${colorDecisionAndCorrespondingOption.length} color decisions`
67-
: `Found ${filteredColorDecisionAndCorrespondingOption.length} decisions matching your query`}
68-
</h3>
69-
{filteredColorDecisionAndCorrespondingOption.map((entry, i) => (
70-
<ColorDecisionShowcase {...entry} key={i} />
71-
))}
72-
</div>
59+
<MuiDsfrThemeProvider>
60+
<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>
69+
<SearchBar
70+
label="Filter by color code (e.g. #c9191e), CSS variable name (e.g. --text-active-red-marianne) or something else (e.g. marianne)..."
71+
nativeInputProps={{
72+
"value": search,
73+
"onChange": event => setSearch(event.target.value)
74+
}}
75+
/>
76+
<h3
77+
style={{
78+
"marginTop": fr.spacing("6v")
79+
}}
80+
>
81+
{search === ""
82+
? `${colorDecisionAndCorrespondingOption.length} color decisions`
83+
: `Found ${filteredColorDecisionAndCorrespondingOption.length} decisions matching your query`}
84+
</h3>
85+
{filteredColorDecisionAndCorrespondingOption.map((entry, i) => (
86+
<ColorDecisionShowcase
87+
{...entry}
88+
key={i}
89+
className={css({
90+
"marginTop": fr.spacing("4v")
91+
})}
92+
/>
93+
))}
94+
</div>
95+
</MuiDsfrThemeProvider>
7396
);
7497
}
7598

76-
function ColorDecisionShowcase(props: ColorDecisionAndCorrespondingOption) {
77-
const { colorDecisionName, themePath, colorOption } = props;
99+
function ColorDecisionShowcase(
100+
props: { className?: string } & ColorDecisionAndCorrespondingOption
101+
) {
102+
const { className, colorDecisionName, themePath, colorOption } = props;
78103

79104
const theme = useColors();
80105

106+
const { cx, css } = useStyles();
107+
81108
return (
82109
<div
83-
style={{
84-
"borderWidth": 2,
85-
"borderStyle": "solid",
86-
"borderColor": theme.decisions.border.default.grey.default,
87-
"boxShadow": "0px 6px 10px 0px rgba(0,0,0,0.07)",
88-
"padding": fr.spacing("4v"),
89-
"marginTop": fr.spacing("4v")
90-
}}
110+
className={cx(
111+
css({
112+
"borderWidth": 2,
113+
"borderStyle": "solid",
114+
"borderColor": theme.decisions.border.default.grey.default,
115+
"boxShadow": "0px 6px 10px 0px rgba(0,0,0,0.07)",
116+
"padding": fr.spacing("4v")
117+
}),
118+
className
119+
)}
91120
>
92-
<h5>Color decision:</h5>
93121
<p>
94122
<span
95123
style={{
@@ -106,13 +134,28 @@ function ColorDecisionShowcase(props: ColorDecisionAndCorrespondingOption) {
106134
"color": theme.decisions.text.mention.grey.default
107135
}}
108136
>
109-
Decision path:{" "}
137+
Decision path{" "}
138+
<Tooltip
139+
title={
140+
<a
141+
href="https://react-dsfr.etalab.studio/css-in-js#colors"
142+
target="_blank"
143+
>
144+
How to access the <code>theme</code> object
145+
</a>
146+
}
147+
placement="top"
148+
arrow
149+
>
150+
<i className={fr.cx("ri-information-line")} />
151+
</Tooltip>{" "}
152+
:
110153
</span>{" "}
111154
<code>
112155
theme.decisions.<strong>{themePath.join(".")}</strong>
113156
</code>
114157
</p>
115-
<h5>Corresponding color option:</h5>
158+
<h6>Corresponding color option:</h6>
116159
<p>
117160
<span
118161
style={{

‎stories/colorHelper.stories.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import { ColorHelper } from "./ColorHelper";
1414
}}
1515
/>
1616

17-
[How to access the `theme` object.](https://react-dsfr.etalab.studio/css-in-js#colors)
18-
1917
<div style={{ "margin": "0 auto", "maxWidth": 1000 }}>
2018
<ColorHelper />
2119
</div>

0 commit comments

Comments
 (0)