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
entur · Jul 13, 2023 · 594cea0 · 594cea0
1 parent ec26922
commit 594cea0
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -0,0 +1,7 @@
+.paragraph {
+    margin-bottom: 1.5em;
+}
+
+.heading {
+    font-size: 2em;
+}