Atlas #4 - Adding className prop to PlaceLayersSelector

packages/core-data/package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@samvera/clover-iiif": "^2.3.2",
     "@turf/turf": "^6.5.0",
+    "clsx": "^2.1.0",
     "dequal": "^2.0.3",
     "i18next": "^23.8.2",
     "instantsearch.js": "^4.66.0",
@@ -57,4 +58,4 @@
     "vite": "^5.1.4",
     "vite-plugin-copy": "^0.1.6"
   }
-}
+}

packages/core-data/src/components/PlaceLayersSelector.js

@@ -1,13 +1,15 @@
 // @flow
 
 import * as Checkbox from '@radix-ui/react-checkbox';
+import clsx from 'clsx';
 import { CheckSquare2, Square } from 'lucide-react';
 import React, { useCallback, useState } from 'react';
 import _ from 'underscore';
 import OverlayLayers from './OverlayLayers';
 import type { Layer as LayerType } from '../types/RuntimeConfig';
 
 type Props = {
+  className?: string | Array<string>,
   label: string,
   layers: Array<LayerType>
 };
@@ -41,7 +43,7 @@ const PlaceLayersSelector = (props: Props) => {
 
   return (
     <div
-      className='px-3 pb-2 pt-4 text-sm border-t'
+      className={clsx('px-3', 'pb-2', 'pt-4', 'text-sm', 'border-t', props.className)}
     >
       <OverlayLayers
         overlays={selectedLayers}
@@ -52,7 +54,7 @@ const PlaceLayersSelector = (props: Props) => {
         { props.label }
       </h2>
       <ul
-        className='py-3 leading-relaxed'
+        className='leading-relaxed'
       >
         { _.map(props.layers, (layer, index) => (
           <li

yarn.lock

@@ -7036,7 +7036,7 @@ clsx@^1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-clsx@^2.0.0:
+clsx@^2.0.0, clsx@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
   integrity sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==