refactor(tooltip): to use an action instead of a component (runme-io#126

)

* refactor(tooltip): to use an action instead of a component

* fix: review suggestions

src/assets/style/_tippy.sass

@@ -0,0 +1,22 @@
+$background-color: #eee
+
+.tippy-box
+  user-select: text
+  cursor: default
+  font-size: 1.1rem
+
+  &[role='popover'],
+  &[role='popover'] .tippy-content
+    padding: 0
+
+  &[role='popover'][data-placement^=bottom] > .tippy-arrow:before
+    border-bottom-color: $background-color !important
+
+  .popover-title
+    border-bottom: .1rem solid #e2e2e2
+    padding: .7rem 1rem
+    font-size: 1.2rem
+    background: $background-color
+
+  .popover-content
+    padding: 1rem

src/assets/style/global.sass

@@ -53,3 +53,4 @@ body
     padding-right: $spacing
 
 @import "form"
+@import "tippy"

src/components/Actions/tooltip.js

@@ -0,0 +1,77 @@
+import 'tippy.js/dist/tippy.css'
+import 'tippy.js/themes/light-border.css'
+
+export async function tooltip (elem, {
+  enabled = true,
+  content,
+  componentProps,
+  asPopover = false,
+  popoverTooltip,
+  title = '',
+  ...opts
+}) {
+  if (!enabled) { return }
+
+  let component, componentObject
+
+  // defaults
+  opts = {
+    placement: asPopover ? 'bottom' : 'auto',
+    allowHTML: asPopover,
+    trigger: asPopover ? 'click' : 'mouseenter focus',
+    theme: asPopover ? 'light-border' : '',
+    animation: 'fade',
+    interactive: asPopover,
+    role: asPopover ? 'popover' : 'tooltip',
+    delay: 100,
+    ...opts,
+  }
+
+  // in case we want also a tooltip when having a popover
+  if (asPopover && popoverTooltip) {
+    tooltip(elem, popoverTooltip)
+  }
+
+  // if we are dealing with a Svelte component, parse the content with an empty body
+  // then onCreate we are binding the new Svelte component to the tippy/popover selector with the component props
+  if (typeof content === 'function') {
+    componentObject = content
+    content = ''
+
+    opts.onCreate = instance => {
+      const selector = asPopover ? '.popover-content' : '.tippy-content'
+      // eslint-disable-next-line new-cap
+      component = new componentObject({
+        target: instance.popper.querySelector(selector),
+        props: componentProps,
+      })
+    }
+  }
+
+  opts.content = formatContent(content, asPopover, title)
+
+  const { default: tippy } = await import('tippy.js')
+  const tippyInstance = tippy(elem, opts)
+
+  return {
+    update ({ componentProps, content, asPopover, title }) {
+      if (component) {
+        component.$set(componentProps)
+      } else {
+        const updatedContent = formatContent(content, asPopover, title)
+        tippyInstance.setContent(updatedContent)
+      }
+    },
+    destroy () {
+      tippyInstance.destroy()
+      if (component) {
+        component.$destroy()
+      }
+    },
+  }
+}
+
+function formatContent (content, asPopover, title) {
+  const popoverTitle = asPopover && title ? `<div class="popover-title">${title}</div>` : ''
+  return asPopover ? `${popoverTitle}<div class="popover-content">${content}</div>` : content
+}

src/components/UI/Button.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { tooltip } from '../Actions/tooltip.js'
+
   export let type = 'button'
   export let href = null
   export let target = null
@@ -7,6 +9,10 @@
   export let flex = false
   export let big = false
   export let small = false
+  export let tooltipOptions = {}
+
+  // set the marker if we have a tooltip
+  tooltipOptions.enabled = !!tooltipOptions.content
 
   let restProps
 
@@ -95,6 +101,7 @@
     class:big
     class:small
     class={classes}
+    use:tooltip={tooltipOptions}
   >
     <slot/>
   </a>
@@ -108,6 +115,7 @@
     {type}
     {disabled}
     on:click
+    use:tooltip={tooltipOptions}
   >
     <slot/>
   </button>

src/components/UI/ButtonIcon.svelte

@@ -5,6 +5,7 @@
   export let icon = null
   export let label = ''
   export let mode = 'default'
+  export let tooltipOptions = {}
 
   $: classes = $$restProps.class || ''
 </script>
@@ -33,6 +34,7 @@
   class="button-icon {classes}"
   {...$$restProps}
   {mode}
+  {tooltipOptions}
   on:click
 >
   <Icon class="button-icon-icon" {icon} />

src/components/UI/Layout/FixedHeader.svelte

@@ -4,7 +4,7 @@
   import CountDown from '../Counter/CountDown.svelte'
   import CountUp from '../Counter/CountUp.svelte'
   import Button from '../Button.svelte'
-  import Tooltip from '../Tooltip.svelte'
+  import PopoverCopy from '../Popover/PopoverCopy.svelte'
 
   export let title = 'Run your application from any public Git-repo with one click'
   export let timerTitle = ''
@@ -16,6 +16,16 @@
   let failedStatus = ''
   let deployUrl = ''
   let dockerPullCommand = ''
+  let dockerTooltip
+
+  $: dockerTooltip = {
+    content: PopoverCopy,
+    popoverTooltip: { content: 'Run you application locally with Docker' },
+    asPopover: true,
+    title: 'Run following docker command',
+    componentProps: { content: dockerPullCommand },
+    maxWidth: 'auto',
+  }
 
   const unsubscribe = header.subscribe(header => {
     countDown = header.countDown
@@ -54,7 +64,7 @@
     <h1>{title}</h1>
     {#if deployUrl}
       <Button
-        title="Deploy your application to Jexia"
+        tooltipOptions={{ content: 'Deploy your application to Jexia' }}
         mode="outline"
         small={true}
         target="_blank"
@@ -63,14 +73,7 @@
     {/if}
 
     {#if dockerPullCommand}
-      <Button mode="outline" small={true}>
-        <Tooltip
-          asPopover={true}
-          popoverTitle="Run following docker command"
-          bind:content={dockerPullCommand}
-          maxWidth="auto"
-        >Run locally</Tooltip>
-      </Button>
+      <Button tooltipOptions={dockerTooltip} mode="outline" small={true}>Run locally</Button>
     {/if}
   </div>
 

src/components/UI/Popover/PopoverCopy.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { faCopy } from '@fortawesome/free-solid-svg-icons'
+  import ButtonIcon from '../ButtonIcon.svelte'
+
+  export let content = ''
+
+  async function copy () {
+    try {
+      await navigator.clipboard.writeText(content)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+</script>
+
+{content}
+<ButtonIcon
+  aria-label="copy"
+  icon={faCopy}
+  on:click={copy}
+  tooltipOptions={{ content: 'Copy' }}
+/>