Buttons inside Forms

README.md

@@ -93,9 +93,9 @@ function App() {
 
 ### Buttons
 
-- [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/Button)
-- [Icon Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/IconButton)
-- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Buttons/CloseButton)
+- [Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Buttons/Button)
+- [Icon Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Buttons/IconButton)
+- [Close Button](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Buttons/CloseButton)
 
 ### Controls
 

src/App.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
 import SwitchDemo from './components/Switch/SwitchDemo'
-import ButtonDemo from './components/Buttons/Button/ButtonDemo'
+import ButtonDemo from './components/Forms/Buttons/Button/ButtonDemo'
 import RadioDemo from './components/Radio/RadioDemo'
 import TabBarDemo from './components/TabBar/TabBarDemo'
 import CheckboxDemo from './components/Checkbox/CheckboxDemo'
@@ -10,8 +10,8 @@ import TagDemo from './components/Tag/TagDemo'
 import InlineMessageDemo from './components/InlineMessage/InlineMessageDemo'
 import TextInputDemo from './components/TextInput/TextInputDemo'
 import TextareaDemo from './components/Textarea/TextareaDemo'
-import CloseButtonDemo from './components/Buttons/CloseButton/CloseButtonDemo'
-import IconButtonDemo from './components/Buttons/IconButton/IconButtonDemo'
+import CloseButtonDemo from './components/Forms/Buttons/CloseButton/CloseButtonDemo'
+import IconButtonDemo from './components/Forms/Buttons/IconButton/IconButtonDemo'
 import SliderDemo from './components/Slider/SliderDemo'
 import QualitativeDemo from './components/Legend/QualitativeLegend/QualitativeLegendDemo'
 import LayerParametersDemo from './components/Legend/LayerParameters/LayerParametersDemo'

src/components/Buttons/Button/Button.stories.tsx → src/components/Forms/Buttons/Button/Button.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import Button from '.'
-import { CheckIcon } from '../../icons'
+import { CheckIcon } from '../../../icons'
 
 const meta = {
   title: 'Forms/Buttons/Button',

src/components/Buttons/Button/ButtonDemo.tsx → src/components/Forms/Buttons/Button/ButtonDemo.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../..'
+import { Button } from '../../..'
 
 const ButtonDemo = () => (
   <div

src/components/Buttons/Button/README.md → src/components/Forms/Buttons/Button/README.md

@@ -2,7 +2,7 @@
 
 [Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/forms-buttons-button--docs)
 
-[ButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Buttons/Button/ButtonDemo.tsx)
+[ButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Forms/Buttons/Button/ButtonDemo.tsx)
 
 ## Import
 

src/components/Buttons/Button/styled.ts → src/components/Forms/Buttons/Button/styled.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { Button } from '@chakra-ui/react'
-import { getThemedColor } from '../../../lib/theme'
+import { getThemedColor } from '../../../../lib/theme'
 import { ButtonProps } from './types'
 
 export const BaseButton = styled(Button)<ButtonProps>`

src/components/Buttons/CloseButton/CloseButtonDemo.tsx → src/components/Forms/Buttons/CloseButton/CloseButtonDemo.tsx

@@ -1,4 +1,4 @@
-import { CloseButton } from '../..'
+import { CloseButton } from '../../..'
 
 const CloseButtonDemo = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>

src/components/Buttons/CloseButton/README.md → src/components/Forms/Buttons/CloseButton/README.md

@@ -2,7 +2,7 @@
 
 [Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/forms-buttons-close-button--docs)
 
-[CloseButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Buttons/CloseButton/CloseButtonDemo.tsx)
+[CloseButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Forms/Buttons/CloseButton/CloseButtonDemo.tsx)
 
 ## Import
 

src/components/Buttons/CloseButton/index.tsx → src/components/Forms/Buttons/CloseButton/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import { StyledCloseButton } from './styled'
 import { CloseButtonProps } from './types'
-import { CloseIcon } from '../../icons'
+import { CloseIcon } from '../../../icons'
 
 const CloseButton = ({ disabled, ...rest }: CloseButtonProps) => (
   <StyledCloseButton

src/components/Buttons/CloseButton/styled.ts → src/components/Forms/Buttons/CloseButton/styled.ts

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { getThemedColor } from '../../../lib/theme'
+import { getThemedColor } from '../../../../lib/theme'
 import IconButton from '../IconButton'
 
 export const StyledCloseButton = styled(IconButton)`

src/components/Buttons/IconButton/IconButton.stories.tsx → src/components/Forms/Buttons/IconButton/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import IconButton from '.'
-import { ChevronDownIcon, MenuDotsIcon } from '../../icons'
+import { ChevronDownIcon, MenuDotsIcon } from '../../../icons'
 
 const meta = {
   title: 'Forms/Buttons/Icon Button',

src/components/Buttons/IconButton/IconButtonDemo.tsx → src/components/Forms/Buttons/IconButton/IconButtonDemo.tsx

@@ -1,5 +1,5 @@
-import { IconButton } from '../..'
-import { CheckIcon, InfoIcon, MenuDotsIcon } from '../../icons'
+import { IconButton } from '../../..'
+import { CheckIcon, InfoIcon, MenuDotsIcon } from '../../../icons'
 
 const IconButtonDemo = () => (
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>

src/components/Buttons/IconButton/README.md → src/components/Forms/Buttons/IconButton/README.md

@@ -2,7 +2,7 @@
 
 [Storybook Ref](https://wri.github.io/wri-design-systems/?path=/docs/forms-buttons-icon-button--docs)
 
-[IconButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Buttons/IconButton/IconButtonDemo.tsx)
+[IconButtonDemo](https://github.com/wri/wri-design-systems/blob/main/src/components/Forms/Buttons/IconButton/IconButtonDemo.tsx)
 
 ## Import
 

src/components/Buttons/IconButton/styled.ts → src/components/Forms/Buttons/IconButton/styled.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
 import { Button } from '@chakra-ui/react'
-import { getThemedColor } from '../../../lib/theme'
+import { getThemedColor } from '../../../../lib/theme'
 
 export const StyledIconButton = styled(Button)`
   width: 20px !important;

src/components/InlineMessage/index.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react'
 
-import Button from '../Buttons/Button'
+import Button from '../Forms/Buttons/Button'
 import { InfoIcon } from '../icons'
 import {
   InfoWhiteInlineMessage,

src/components/Layer/LayerItem/index.tsx

@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { Box } from '@chakra-ui/react'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 import Switch from '../../Switch'
 import Radio from '../../Radio'
 import { LayerItemProps } from './types'

src/components/Legend/LegendItem/index.tsx

@@ -10,9 +10,9 @@ import {
   LegendItemLayerName,
   LegendItemButtonsContainer,
 } from './styled'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 import { ChevronDownIcon, CloseIcon, DotsIcon, InfoIcon } from '../../icons'
-import IconButton from '../../Buttons/IconButton'
+import IconButton from '../../Forms/Buttons/IconButton'
 import OpacityControl from '../OpacityControl'
 
 const LegendItem = ({

src/components/Legend/LegendPanel/DraggableItem.tsxaaa

@@ -0,0 +1,74 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { DraggableItemProps } from './types'
+
+type Props = {
+  item: DraggableItemProps
+  removeItem: (id: number) => void
+  forceDragging?: boolean
+}
+
+const DraggableItem = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  item,
+  removeItem,
+  forceDragging = false,
+}: Props) => {
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+  } = useSortable({
+    id: item.sequence,
+  })
+
+  const parentStyles = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition || undefined,
+    opacity: isDragging ? '0.4' : '1',
+    lineHeight: '4',
+  }
+
+  const draggableStyles = {
+    cursor: isDragging || forceDragging ? 'grabbing' : 'grab',
+  }
+
+  return (
+    <div style={parentStyles} ref={setNodeRef}>
+      <div
+        ref={setActivatorNodeRef}
+        className='flex-grow p-2'
+        style={draggableStyles}
+        {...attributes}
+        {...listeners}
+      >
+        {item.child}
+      </div>
+
+      <p>{item.sequence}</p>
+
+      <div
+        ref={setActivatorNodeRef}
+        className='flex-grow p-2'
+        style={draggableStyles}
+        {...attributes}
+        {...listeners}
+      >
+        <p>{item.id}</p>
+      </div>
+
+      <button type='button' onClick={() => removeItem(item.id)}>
+        X
+      </button>
+    </div>
+  )
+}
+
+export default DraggableItem

src/components/Legend/OpacityControl/index.tsx

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 
 import { Popover as ChakraPopover } from '@chakra-ui/react'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 import { InfoIcon } from '../../icons'
 import TextInput from '../../TextInput'
 import Slider from '../../Slider'

src/components/Legend/QualitativeLegend/index.tsx

@@ -13,7 +13,7 @@ import {
   RasterIndicator,
 } from './styled'
 import { HideIcon, ShowIcon } from '../../icons'
-import Button from '../../Buttons/Button'
+import Button from '../../Forms/Buttons/Button'
 
 const QualitativeLegend = ({
   type,

src/components/index.ts

@@ -1,5 +1,5 @@
 export { default as Switch } from './Switch'
-export { default as Button } from './Buttons/Button'
+export { default as Button } from './Forms/Buttons/Button'
 export { default as NavigationRail } from './NavigationRail'
 export { default as Radio } from './Radio'
 export { default as RadioGroup } from './Radio/RadioGroup'
@@ -13,8 +13,8 @@ export { default as Tag } from './Tag'
 export { default as InlineMessage } from './InlineMessage'
 export { default as TextInput } from './TextInput'
 export { default as Textarea } from './Textarea'
-export { default as CloseButton } from './Buttons/CloseButton'
-export { default as IconButton } from './Buttons/IconButton'
+export { default as CloseButton } from './Forms/Buttons/CloseButton'
+export { default as IconButton } from './Forms/Buttons/IconButton'
 export { default as Slider } from './Slider'
 export { default as QualitativeLegend } from './Legend/QualitativeLegend'
 export { default as LayerParameters } from './Legend/LayerParameters'