feat: améliore config antd

IGNF · Jun 24, 2024 · c1e66ec · c1e66ec
1 parent 3a9d445
commit c1e66ec
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 6 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.14.0
diff --git a/src/components/DsfrAntdConfig.tsx b/src/components/DsfrAntdConfig.tsx
@@ -13,33 +13,77 @@ const DsfrAntdConfig: FC<PropsWithChildren> = ({ children }) => {
             theme={{
                 token: {
                     colorPrimary: options.blueFrance.sun113_625.default,
+                    colorPrimaryHover: options.blueFrance.sun113_625.hover,
+                    colorPrimaryActive: options.blueCumulus.sun368moon732.active,
+
                     colorSuccess: options.success._950_100.default,
+                    colorSuccessHover: options.success._950_100.hover,
+                    colorSuccessActive: options.success._950_100.active,
+
                     colorError: options.error._950_100.default,
+                    colorErrorHover: options.error._950_100.hover,
+                    colorErrorActive: options.error._950_100.active,
+
                     colorWarning: options.warning._950_100.default,
+                    colorWarningHover: options.warning._950_100.hover,
+                    colorWarningActive: options.warning._950_100.active,
+
                     colorInfo: options.info._950_100.default,
+                    colorInfoHover: options.info._950_100.hover,
+                    colorInfoActive: options.info._950_100.active,
 
                     colorBgBase: decisions.background.default.grey.default,
                     colorBorder: decisions.border.default.grey.default,
                     colorText: decisions.text.default.grey.default,
                     colorTextDisabled: decisions.text.disabled.grey.default,
                     colorTextLabel: decisions.text.label.grey.default,
 
+                    borderRadius: 0,
+                    colorBorderBg: decisions.border.plain.grey.default,
+
+                    fontFamily: "Marianne, arial, sans-serif",
+                    fontSize: 16,
+
                     fontSizeHeading1: 40,
+                    lineHeightHeading1: 48,
+
                     fontSizeHeading2: 32,
+                    lineHeightHeading2: 40,
+
                     fontSizeHeading3: 28,
+                    lineHeightHeading3: 36,
+
                     fontSizeHeading4: 24,
+                    lineHeightHeading4: 32,
+
                     fontSizeHeading5: 22,
+                    lineHeightHeading5: 28,
 
-                    borderRadius: 0,
-                    fontFamily: "Marianne, arial, sans-serif",
-                    fontSize: 16,
                     // margin: fr.spacing("10v")
+                    padding: 16,
                 },
                 components: {
-                    Input: {
-                        colorBgBase: decisions.background.raised.grey.default,
-                        colorBgContainer: decisions.background.raised.grey.default,
+                    Button: {
+                        defaultShadow: "none",
+                        primaryShadow: "none",
+                        padding: 16,
+                        paddingBlock: 16,
+                        paddingInline: 16,
                     },
+                    // Input: {
+                    //     padding: 16,
+                    //     paddingBlock: 8,
+                    //     paddingInline: 16,
+                    //     colorBgContainer: decisions.background.contrast.grey.default,
+                    //     // colorBorder: decisions.border.plain.grey.default,
+                    //     // borderRadius: 5,
+                    // },
+                    // InputNumber: {
+                    //     padding: 16,
+                    //     paddingBlock: 8,
+                    //     paddingInline: 16,
+                    //     colorBgContainer: decisions.background.contrast.grey.default,
+                    // },
                 },
             }}
         >

diff --git a/src/components/GeostylerEditor.tsx b/src/components/GeostylerEditor.tsx
@@ -1,11 +1,14 @@
 import { fr } from "@codegouvfr/react-dsfr";
+import { Button } from "@codegouvfr/react-dsfr/Button";
+import { Input } from "@codegouvfr/react-dsfr/Input";
 import { Tabs } from "@codegouvfr/react-dsfr/Tabs";
 import { CardStyle, CodeEditor, GeoStylerContext, GeoStylerContextInterface, Style, locale } from "geostyler";
 import MapboxStyleParser from "geostyler-mapbox-parser";
 import QGISStyleParser from "geostyler-qgis-parser";
 import SldStyleParser from "geostyler-sld-parser";
 import { Style as GsStyle } from "geostyler-style";
 import { FC } from "react";
+import { Input as AntdInput } from "antd";
 
 import DsfrAntdConfig from "./DsfrAntdConfig";
 
@@ -85,6 +88,10 @@ const GeostylerEditor: FC<GeostylerEditorProps> = ({ gsStyle, onStyleChange }) =
                         },
                     ]}
                 />
+                <Button>Hello</Button>
+                <Input label="Input DSFR disabled" disabled />
+                <Input label="Input DSFR" />
+                <AntdInput title="Input Antd" />
             </DsfrAntdConfig>
         </GeoStylerContext.Provider>
     );

diff --git a/src/css/geostyler.css b/src/css/geostyler.css
@@ -1,3 +1,11 @@
 .code-editor-container {
     height: 600px;
 }
+
+/* .gs-renderer > .gs-symbolizer-olrenderer {
+    height: 40px;
+}
+
+.gs-renderer .gs-symbolizer-olrenderer {
+    height: 40px;
+} */