From 594cea03862978b4b0a2e0eaf2a51d8c27436253 Mon Sep 17 00:00:00 2001
From: vildeopp <64434819+vildeopp@users.noreply.github.com>
Date: Thu, 13 Jul 2023 15:00:08 +0200
Subject: [PATCH] feat(edit): share table section (#1121)

* feat(edit): made copy-link to be a button and made own scenario for sharing a table

* fix(sharetable): changed heading to be h1

* chore(edit): removed unused imports

* fix(sharetable): changed paragraf text
---
 .../src/Admin/components/CopyText/index.tsx   | 26 +++++++++----------
 .../components/CopyText/styles.module.css     | 19 --------------
 next-tavla/src/Admin/scenarios/Edit/index.tsx |  6 +++--
 .../src/Admin/scenarios/ShareTable/index.tsx  | 17 ++++++++++++
 .../scenarios/ShareTable/styles.module.css    |  7 +++++
 5 files changed, 40 insertions(+), 35 deletions(-)
 delete mode 100644 next-tavla/src/Admin/components/CopyText/styles.module.css
 create mode 100644 next-tavla/src/Admin/scenarios/ShareTable/index.tsx
 create mode 100644 next-tavla/src/Admin/scenarios/ShareTable/styles.module.css

diff --git a/next-tavla/src/Admin/components/CopyText/index.tsx b/next-tavla/src/Admin/components/CopyText/index.tsx
index a7a352e48..6a0d4b85b 100644
--- a/next-tavla/src/Admin/components/CopyText/index.tsx
+++ b/next-tavla/src/Admin/components/CopyText/index.tsx
@@ -1,24 +1,22 @@
 import { CopyIcon } from '@entur/icons'
-import classes from './styles.module.css'
 import { useToast } from '@entur/alert'
-import { TavlaButton } from '../Button'
+import { Button } from '@entur/button'
 
 function CopyText({ text, toastText }: { text: string; toastText: string }) {
     const { addToast } = useToast()
 
     return (
-        <div className={classes.copyText}>
-            <p>{text}</p>
-            <TavlaButton
-                className={classes.copyIcon}
-                onClick={() => {
-                    navigator.clipboard.writeText(text)
-                    addToast(toastText)
-                }}
-            >
-                <CopyIcon size={16} />
-            </TavlaButton>
-        </div>
+        <Button
+            width="auto"
+            variant={'primary'}
+            onClick={() => {
+                navigator.clipboard.writeText(text)
+                addToast(toastText)
+            }}
+        >
+            {text}
+            <CopyIcon size={16} />
+        </Button>
     )
 }
 
diff --git a/next-tavla/src/Admin/components/CopyText/styles.module.css b/next-tavla/src/Admin/components/CopyText/styles.module.css
deleted file mode 100644
index 9a5a15121..000000000
--- a/next-tavla/src/Admin/components/CopyText/styles.module.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.copyText {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5em;
-    align-items: center;
-    width: max-content;
-    background-color: var(--colors-brand-white);
-    color: var(--main-background-color);
-    border-radius: 0.25em;
-    padding: 0 0.5em;
-}
-
-.copyIcon {
-    color: var(--main-background-color);
-}
-
-.copyIcon:hover {
-    background-color: var(--primary-button-hover-color);
-}
diff --git a/next-tavla/src/Admin/scenarios/Edit/index.tsx b/next-tavla/src/Admin/scenarios/Edit/index.tsx
index 7818b623c..8288cadd0 100644
--- a/next-tavla/src/Admin/scenarios/Edit/index.tsx
+++ b/next-tavla/src/Admin/scenarios/Edit/index.tsx
@@ -8,9 +8,9 @@ import { setBoardSettings } from 'utils/firebase'
 import { SettingsDispatchContext } from 'Admin/utils/contexts'
 import { settingsReducer } from './reducer'
 import { ToastProvider } from '@entur/alert'
-import { CopyText } from 'Admin/components/CopyText'
 import { FloatingButton } from '@entur/button'
 import { StyledLink } from 'Admin/components/StyledLink'
+import { ShareTable } from '../ShareTable'
 
 function Edit({
     initialSettings,
@@ -28,7 +28,9 @@ function Edit({
                 <div className={classes.settings}>
                     <AddTile />
                     <TilesOverview tiles={settings.tiles} />
-                    <CopyText text={linkUrl} toastText="Kopiert lenke" />
+
+                    <ShareTable text={linkUrl} />
+
                     <div className={classes.floatingButtonWrapper}>
                         <FloatingButton
                             className={classes.saveButton}
diff --git a/next-tavla/src/Admin/scenarios/ShareTable/index.tsx b/next-tavla/src/Admin/scenarios/ShareTable/index.tsx
new file mode 100644
index 000000000..a9ae9877d
--- /dev/null
+++ b/next-tavla/src/Admin/scenarios/ShareTable/index.tsx
@@ -0,0 +1,17 @@
+import { Heading1, Paragraph } from '@entur/typography'
+import { CopyText } from 'Admin/components/CopyText'
+import classes from './styles.module.css'
+
+function ShareTable({ text }: { text: string }) {
+    return (
+        <div>
+            <Heading1 className={classes.heading}>Del avganstavla</Heading1>
+            <Paragraph className={classes.paragraph}>
+                Trykk på knappen for å kopiere linken til avganstavla.
+            </Paragraph>
+            <CopyText text={text} toastText="Kopiert lenke" />
+        </div>
+    )
+}
+
+export { ShareTable }
diff --git a/next-tavla/src/Admin/scenarios/ShareTable/styles.module.css b/next-tavla/src/Admin/scenarios/ShareTable/styles.module.css
new file mode 100644
index 000000000..a708914a5
--- /dev/null
+++ b/next-tavla/src/Admin/scenarios/ShareTable/styles.module.css
@@ -0,0 +1,7 @@
+.paragraph {
+    margin-bottom: 1.5em;
+}
+
+.heading {
+    font-size: 2em;
+}