Skip to content

Commit a452690

Browse files
garronejgarronej
committed
Beter UI for the color resolver
1 parent ffe9925 commit a452690

File tree

6 files changed

+104
-568
lines changed

6 files changed

+104
-568
lines changed

‎package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"format": "yarn _format --write",
2121
"format:check": "yarn _format --list-different",
2222
"grant_exec_perms": "node dist/bin/tools/grant_exec_perms",
23-
"storybook": "yarn build && yarn only-include-used-icons && ((tsc -w -p src) & (start-storybook -p 6006))",
23+
"storybook": "yarn build && yarn only-include-used-icons && start-storybook -p 6006",
2424
"build-storybook": "yarn build && yarn only-include-used-icons && build-storybook",
2525
"only-include-used-icons": "node dist/bin/only-include-used-icons.js"
2626
},
@@ -89,7 +89,6 @@
8989
"@types/node": "^18.7.18",
9090
"@types/react": "18.0.21",
9191
"@types/react-dom": "18.0.6",
92-
"@types/react-syntax-highlighter": "^15.5.5",
9392
"@typescript-eslint/eslint-plugin": "^5.43.0",
9493
"@typescript-eslint/parser": "^5.43.0",
9594
"babel-loader": "^8.3.0",
@@ -107,8 +106,6 @@
107106
"prettier": "^2.3.0",
108107
"react": "18.2.0",
109108
"react-dom": "18.2.0",
110-
"react-markdown": "^8.0.3",
111-
"react-syntax-highlighter": "^15.5.0",
112109
"remixicon": "^2.5.0",
113110
"storybook-dark-mode": "^1.1.2",
114111
"ts-node": "^10.9.1",

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -455,7 +455,7 @@ function toConsistentColor(color: string) {
455455
color = color.toLowerCase();
456456

457457
if (color.length === 4) {
458-
threeDigitColorHexToSixDigitsColorHex(color);
458+
return threeDigitColorHexToSixDigitsColorHex(color);
459459
}
460460

461461
return color;

‎src/scripts/tools/threeDigitColorHexToSixDigitsColorHex.ts‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
export function threeDigitColorHexToSixDigitsColorHex(threeDigitColorHex: string) {
2-
let v, w;
3-
v = parseInt(threeDigitColorHex, 16); // in rrggbb
4-
if (threeDigitColorHex.length == 3) {
5-
// nybble colors - fix to hex colors
6-
// 0x00000rgb -> 0x000r0g0b
7-
// 0x000r0g0b | 0x00r0g0b0 -> 0x00rrggbb
8-
w = ((v & 0xf00) << 8) | ((v & 0x0f0) << 4) | (v & 0x00f);
9-
v = w | (w << 4);
10-
}
11-
return v.toString(16).toUpperCase();
2+
let v = parseInt(threeDigitColorHex.substring(1), 16); // in rrggbb
3+
// nybble colors - fix to hex colors
4+
// 0x00000rgb -> 0x000r0g0b
5+
// 0x000r0g0b | 0x00r0g0b0 -> 0x00rrggbb
6+
const w = ((v & 0xf00) << 8) | ((v & 0x0f0) << 4) | (v & 0x00f);
7+
v = w | (w << 4);
8+
return `#${v.toString(16)}`;
129
}

‎stories/ColorResolver.tsx‎

Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { Input } from "../dist/Input";
33
import { resolveColorHexCodeToDecision } from "../dist/fr/colorResolver";
44
import type { ColorDecision } from "../dist/fr/colorResolver";
55
import { useColors } from "../dist/useColors";
6+
import { fr } from "../dist";
67

78
export function ColorResolver() {
8-
const [hexColorCode, setHexColorCode] = useState("#161616");
9+
const [hexColorCode, setHexColorCode] = useState("#C9191E");
910

1011
const onChange = (event: React.ChangeEvent<HTMLInputElement>) =>
1112
setHexColorCode(event.target.value);
@@ -21,7 +22,7 @@ export function ColorResolver() {
2122
<div>
2223
<Input
2324
label="Hex color code"
24-
hintText="Color code, starting by #"
25+
hintText="A color that you know belongs to the DSFR pallet"
2526
nativeInputProps={{
2627
"value": hexColorCode,
2728
onChange
@@ -40,35 +41,94 @@ export function ColorResolver() {
4041
function ColorDecisionShowcase(props: ColorDecision) {
4142
const { cssVarName, decisionObjectPath, option } = props;
4243

44+
const theme = useColors();
45+
4346
return (
44-
<div>
47+
<div
48+
style={{
49+
"borderWidth": 2,
50+
"borderStyle": "solid",
51+
"borderColor": theme.decisions.border.default.grey.default,
52+
"boxShadow": "0px 6px 10px 0px rgba(0,0,0,0.07)",
53+
"padding": fr.spacing("4v"),
54+
"marginTop": fr.spacing("4v")
55+
}}
56+
>
57+
<h5>Color decision:</h5>
4558
<p>
46-
<span>CSS variable: </span>: {cssVarName}
59+
<span
60+
style={{
61+
"color": theme.decisions.text.mention.grey.default
62+
}}
63+
>
64+
CSS variable:{" "}
65+
</span>
66+
&nbsp;{cssVarName}
4767
</p>
4868
<p>
49-
<span>Decision path: </span>{" "}
50-
<code>theme.decisions.{decisionObjectPath.join(".")}</code>
69+
<span
70+
style={{
71+
"color": theme.decisions.text.mention.grey.default
72+
}}
73+
>
74+
Decision path:{" "}
75+
</span>{" "}
76+
<code>
77+
theme.decisions.<strong>{decisionObjectPath.join(".")}</strong>
78+
</code>
5179
</p>
52-
<p>Corresponding color option:</p>
80+
<h5>Corresponding color option:</h5>
5381
<p>
54-
<span>CSS variable: </span>: {option.cssVarName}
82+
<span
83+
style={{
84+
"color": theme.decisions.text.mention.grey.default
85+
}}
86+
>
87+
CSS variable:{" "}
88+
</span>
89+
: {option.cssVarName}
5590
</p>
56-
<p>
57-
<span>Option path: </span>{" "}
58-
<code>theme.options.{option.optionObjectPath.join(".")}</code>
91+
<p
92+
style={{
93+
"marginBottom": 12
94+
}}
95+
>
96+
<span
97+
style={{
98+
"color": theme.decisions.text.mention.grey.default
99+
}}
100+
>
101+
Option path:{" "}
102+
</span>{" "}
103+
<code>
104+
theme.options.<strong>{option.optionObjectPath.join(".")}</strong>
105+
</code>
59106
</p>
60107

61108
{typeof option.color === "string" ? (
62109
<p>
63110
<span>Colors: </span>: <ColoredSquare hexColorCode={option.color} />
64111
</p>
65112
) : (
66-
<p>
67-
<span>Colors: </span>:<span>Light: </span>
113+
<>
114+
<span
115+
style={{
116+
"color": theme.decisions.text.mention.grey.default
117+
}}
118+
>
119+
Dark mode:{" "}
120+
</span>
68121
<ColoredSquare hexColorCode={option.color.light} />
69-
<span>Dark: </span>
122+
&nbsp; &nbsp;
123+
<span
124+
style={{
125+
"color": theme.decisions.text.mention.grey.default
126+
}}
127+
>
128+
Light mode:{" "}
129+
</span>
70130
<ColoredSquare hexColorCode={option.color.dark} />
71-
</p>
131+
</>
72132
)}
73133
</div>
74134
);
@@ -80,18 +140,26 @@ function ColoredSquare(props: { hexColorCode: string }) {
80140
const theme = useColors();
81141

82142
return (
83-
<>
84-
<span>{hexColorCode}</span>:
143+
<div
144+
style={{
145+
display: "inline"
146+
}}
147+
>
148+
<code>{hexColorCode}</code>
149+
&nbsp;
85150
<div
86151
style={{
87-
"borderWidth": "2",
152+
"display": "inline-block",
153+
"borderWidth": 2,
88154
"borderStyle": "solid",
89155
"borderColor": theme.decisions.border.default.grey.default,
90156
"width": 30,
91157
"height": 30,
92-
"backgroundColor": hexColorCode
158+
"backgroundColor": hexColorCode,
159+
"position": "relative",
160+
"top": 8
93161
}}
94162
/>
95-
</>
163+
</div>
96164
);
97165
}

‎stories/colorHelper.stories.mdx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Meta } from "@storybook/addon-docs";
2-
import { useDarkMode } from "storybook-dark-mode";
32
import { ColorResolver } from "./ColorResolver";
43

54
<Meta
@@ -13,11 +12,10 @@ import { ColorResolver } from "./ColorResolver";
1312
"storybook/viewport": { "hidden": true },
1413
},
1514
}}
16-
17-
1815
/>
1916

20-
<div style={{ "margin": "0 auto", "maxWidth": "600px" }}>
21-
<p>NOTE: This is a work in progress</p>
17+
[How to access the `theme` object.](https://react-dsfr.etalab.studio/css-in-js#colors)
18+
19+
<div style={{ "margin": "0 auto", "maxWidth": 1000 }}>
2220
<ColorResolver />
2321
</div>

0 commit comments

Comments
 (0)