feat(deletetile): modal for deleting a tile (#1108)

* feat(tiledelete): new file for tile modal

* feat(deletetile): deleting tile modal with functions

* chore(deletingtile): added style for deleting tile modal

* chore(deletetile): rename of component and added styling

* chore(deletetile): edit modal size and button

* chore(deltetile): edit style in modal

next-tavla/package.json

@@ -35,6 +35,7 @@
         "@entur/icons": "6.3.0",
         "@entur/layout": "2.1.33",
         "@entur/loader": "0.4.31",
+        "@entur/modal": "1.7.3",
         "@entur/tokens": "3.8.1",
         "@entur/typography": "1.8.0",
         "@firebase/database-types": "0.10.4",

next-tavla/src/Admin/scenarios/TilesSettings/components/DeleteButton/index.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { ButtonGroup, SecondaryButton } from '@entur/button'
+import { Modal } from '@entur/modal'
+import { Paragraph } from '@entur/typography'
+import { PrimaryButton, TertiaryButton } from '@entur/button'
+import { DeleteIcon } from '@entur/icons'
+import { useSettingsDispatch } from 'Admin/utils/contexts'
+
+function DeleteButton({ uuid }: { uuid: string }) {
+    const dispatch = useSettingsDispatch()
+    const [isOpen, setOpen] = useState(false)
+
+    return (
+        <>
+            <Modal
+                open={isOpen}
+                onDismiss={() => setOpen(false)}
+                size="small"
+                align="center"
+            >
+                <Paragraph>
+                    Er du sikker på at du vil slette denne holdeplassen?
+                </Paragraph>
+                <ButtonGroup>
+                    <SecondaryButton onClick={() => setOpen(false)}>
+                        Avbryt
+                    </SecondaryButton>
+                    <PrimaryButton
+                        onClick={() => {
+                            setOpen(false)
+                            dispatch({
+                                type: 'removeTile',
+                                tileId: uuid,
+                            })
+                        }}
+                    >
+                        Ja, slett
+                    </PrimaryButton>
+                </ButtonGroup>
+            </Modal>
+
+            <TertiaryButton onClick={() => setOpen(true)}>
+                <DeleteIcon />
+                {'Slett'}
+            </TertiaryButton>
+        </>
+    )
+}
+
+export { DeleteButton }

next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/index.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import classes from './styles.module.css'
-import { useSettingsDispatch } from 'Admin/utils/contexts'
-import { DeleteIcon } from '@entur/icons'
 import { Loader } from '@entur/loader'
 import { Tile } from 'components/Tile'
-import { TavlaButton } from 'Admin/components/Button'
+import { DeleteButton } from '../DeleteButton'
 
 function TileSettingsWrapper({
     uuid,
@@ -15,25 +13,14 @@ function TileSettingsWrapper({
     name: string | undefined
     children: React.ReactNode
 }) {
-    const dispatch = useSettingsDispatch()
-
     return (
         <Tile>
             <div className={classes.heading}>
                 {!name ? <Loader /> : name}
-                <div className={classes.buttons}>
-                    <TavlaButton
-                        onClick={() =>
-                            dispatch({
-                                type: 'removeTile',
-                                tileId: uuid,
-                            })
-                        }
-                    >
-                        <DeleteIcon size={16} />
-                    </TavlaButton>
-                </div>
+
+                <DeleteButton uuid={uuid} />
             </div>
+
             {children}
         </Tile>
     )

next-tavla/src/Admin/scenarios/TilesSettings/components/TileSettingsHeader/styles.module.css

@@ -2,10 +2,5 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-bottom: 0.5em;
-}
-
-.buttons {
-    display: flex;
-    flex: 0;
+    padding-bottom: 1em;
 }

next-tavla/src/Shared/styles/imports.css

@@ -11,3 +11,4 @@
 @import '@entur/expand/dist/styles.css';
 @import '@entur/tokens/dist/styles.css';
 @import '@entur/alert/dist/styles.css';
+@import '@entur/modal/dist/styles.css';