feat: adds a flag for transparent background of ToggleButton

terrestris · May 6, 2024 · ef77c9d · ef77c9d
1 parent ea48bb3
commit ef77c9d
Show file tree

Hide file tree

Showing 10 changed files with 2,733 additions and 3,233 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,95 +69,97 @@
   },
   "dependencies": {
     "@camptocamp/inkmap": "^1.4.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@terrestris/base-util": "^1.1.0",
-    "@terrestris/ol-util": "^16.0.0",
-    "@terrestris/react-util": "^4.0.0-beta.3",
+    "@terrestris/ol-util": "^17.0.0",
+    "@terrestris/react-util": "^4.0.0",
+    "@types/geojson": "^7946.0.14",
+    "@types/lodash": "^4.17.0",
     "ag-grid-community": "^31.1.1",
-    "ag-grid-react": "^31.1.1",
+    "ag-grid-react": "^31.3.1",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
-    "moment": "^2.29.4",
-    "proj4": "^2.9.2"
+    "moment": "^2.30.1",
+    "proj4": "^2.11.0",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.24.0",
-    "@babel/eslint-parser": "^7.22.15",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/eslint-parser": "^7.24.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.23.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@cfaester/enzyme-adapter-react-18": "^0.7.1",
-    "@commitlint/cli": "^18.1.0",
-    "@commitlint/config-conventional": "^18.1.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@terrestris/eslint-config-typescript": "^5.0.0",
     "@terrestris/eslint-config-typescript-react": "^2.0.0",
-    "@testing-library/dom": "^9.3.3",
+    "@terrestris/ol-util": "^17.0.0",
+    "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/enzyme": "^3.10.15",
-    "@types/geojson": "^7946.0.12",
-    "@types/jest": "^29.5.6",
-    "@types/lodash": "^4.14.200",
-    "@types/node": "^20.11.24",
-    "@types/react": "^18.2.63",
-    "@types/react-dom": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "antd": "^5.10.2",
+    "@testing-library/react": "^15.0.5",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/enzyme": "^3.10.18",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "antd": "^5.16.5",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "buffer": "^6.0.3",
     "canvas": "^2.11.2",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "copy-to-clipboard": "^3.3.3",
     "copy-webpack-plugin": "^12.0.2",
     "coveralls": "^3.1.1",
-    "css-loader": "^6.8.1",
+    "css-loader": "^7.1.1",
     "enzyme": "^3.11.0",
     "eslint": "^8.57.0",
-    "eslint-plugin-jest-dom": "^5.1.0",
-    "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-testing-library": "^6.1.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-markdown": "^4.0.1",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-testing-library": "^6.2.2",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^9.0.0",
-    "husky": "^8.0.3",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "less-loader": "^12.0.0",
-    "np": "^9.0.0",
-    "ol": "^9.0.0",
-    "ol-mapbox-style": "^12.1.1",
-    "react": "^18.2.0",
+    "np": "^10.0.5",
+    "ol": "^9.1.0",
+    "ol-mapbox-style": "^12.3.2",
+    "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
-    "react-dom": "^18.2.0",
-    "react-styleguidist": "13.1.1",
+    "react-dom": "^18.3.1",
+    "react-styleguidist": "13.1.2",
     "rimraf": "^5.0.5",
-    "semantic-release": "^23.0.0",
-    "style-loader": "^3.3.3",
+    "semantic-release": "^23.0.8",
+    "style-loader": "^4.0.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
     "use-resize-observer": "^9.1.0",
-    "webpack": "^5.90.3",
-    "whatwg-fetch": "^3.6.19"
+    "webpack": "^5.91.0",
+    "whatwg-fetch": "^3.6.20"
   },
   "peerDependencies": {
-    "@terrestris/ol-util": ">=16",
+    "@terrestris/ol-util": ">=17",
     "@types/react": ">=18",
     "antd": "^5",
     "ol": ">=9",

diff --git a/src/Button/RotationButton/RotationButton.example.md b/src/Button/RotationButton/RotationButton.example.md
@@ -1,17 +1,15 @@
 This demonstrates the use of the RotationButton
 
 ```jsx
-import { useEffect, useState } from "react";
-
-import OlMap from "ol/Map";
-import OlView from "ol/View";
-import OlLayerTile from "ol/layer/Tile";
-import OlSourceOsm from "ol/source/OSM";
-import { fromLonLat } from "ol/proj";
-
-import MapComponent from "@terrestris/react-util/dist/Components/MapComponent/MapComponent";
-import MapContext from "@terrestris/react-util/dist/Context/MapContext/MapContext";
-import RotationButton from "@terrestris/react-geo/dist/Button/RotationButton/RotationButton";
+import RotationButton from '@terrestris/react-geo/dist/Button/RotationButton/RotationButton';
+import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
+import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
+import OlLayerTile from 'ol/layer/Tile';
+import OlMap from 'ol/Map';
+import { fromLonLat } from 'ol/proj';
+import OlSourceOsm from 'ol/source/OSM';
+import OlView from 'ol/View';
+import { useEffect, useState } from 'react';
 
 const RotationButtonExample = () => {
   const [map, setMap] = useState();
@@ -22,7 +20,7 @@ const RotationButtonExample = () => {
       new OlMap({
         layers: [
           new OlLayerTile({
-            name: "OSM",
+            name: 'OSM',
             source: new OlSourceOsm(),
           }),
         ],
@@ -44,7 +42,7 @@ const RotationButtonExample = () => {
         <MapComponent
           map={map}
           style={{
-            height: "400px",
+            height: '400px',
           }}
         />
         <RotationButton

diff --git a/src/Button/RotationButton/RotationButton.tsx b/src/Button/RotationButton/RotationButton.tsx
@@ -1,11 +1,9 @@
-import React from 'react';
-
 import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
+import { useOlInteraction } from '@terrestris/react-util/';
 import { DragRotateAndZoom } from 'ol/interaction.js';
+import React from 'react';
 
-import { useOlInteraction } from '@terrestris/react-util/';
 import ToggleButton, {
   ToggleButtonProps
 } from '../ToggleButton/ToggleButton';

diff --git a/src/Button/SimpleButton/SimpleButton.spec.tsx b/src/Button/SimpleButton/SimpleButton.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent,render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 
 import SimpleButton from './SimpleButton';

diff --git a/src/Button/ToggleButton/ToggleButton.tsx b/src/Button/ToggleButton/ToggleButton.tsx
@@ -58,6 +58,11 @@ interface OwnProps {
    * The onChange callback.
    */
   onChange?: (evt: MouseEvent<HTMLButtonElement>, value?: string) => void;
+
+  /**
+   * Sets button background to transparent instead of primary color.
+   */
+  buttonTransparent?: boolean;
 }
 
 export type ToggleButtonProps = OwnProps & Omit<SimpleButtonProps, 'onChange' | 'value'>;
@@ -77,6 +82,7 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
   value,
   onClick,
   onChange = () => {},
+  buttonTransparent = true,
   ...passThroughProps
 }) => {
 
@@ -113,9 +119,12 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
     >
       <Button
         style={{
-          backgroundColor: pressed ?
-            token.token.colorPrimaryActive :
-            token.token.colorPrimary
+          backgroundColor:
+            buttonTransparent
+              ? 'transparent'
+              : pressed
+                ? token.token.colorPrimaryActive
+                : token.token.colorPrimary
         }}
         type={type}
         onClick={handleChange}

diff --git a/src/Button/ToggleGroup/ToggleGroup.tsx b/src/Button/ToggleGroup/ToggleGroup.tsx
@@ -38,7 +38,7 @@ export type ToggleGroupProps<T extends ToggleButtonProps = ToggleButtonProps> =
    * The children of this group. Typically a set of `ToggleButton`s.
    */
   children?: ReactElement<T>[];
-} & React.ComponentProps<'div'>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
 
 export const ToggleGroupContext = React.createContext<boolean>(false);
 

diff --git a/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx b/src/Grid/AgFeatureGrid/AgFeatureGrid.tsx
@@ -15,7 +15,7 @@ import {
   RowStyle,
   SelectionChangedEvent
 } from 'ag-grid-community';
-import { ColDef, ColDefField, ColGroupDef } from 'ag-grid-community/dist/lib/entities/colDef';
+import { ColDef, ColDefField, ColGroupDef } from 'ag-grid-community';
 import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import _differenceWith from 'lodash/differenceWith';
 import _has from 'lodash/has';

diff --git a/src/LayerSwitcher/LayerSwitcher.example.md b/src/LayerSwitcher/LayerSwitcher.example.md
@@ -5,7 +5,7 @@ The passed layers are handled like only one of it can be visible.
 ```jsx
 import LayerSwitcher from '@terrestris/react-geo/dist/LayerSwitcher/LayerSwitcher';
 import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
-import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext'
+import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
 import OlLayerTile from 'ol/layer/Tile';
 import OlMap from 'ol/Map';
 import { fromLonLat } from 'ol/proj';

diff --git a/styleguide.config.js b/styleguide.config.js
@@ -47,7 +47,7 @@ module.exports = {
   require: [
     'whatwg-fetch',
     'ol/ol.css',
-    // 'antd/dist/antd.variable.css'
+    'antd/dist/reset.css'
   ],
   pagePerSection: true,
   sections: [{