fixes #467 add data error alert notice

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [unreleased](https://github.com/mozilla/glam/compare/2020.4.2...HEAD) (date TBD)
 
--
+- adds prototype app warning dialog ([#478](https://github.com/mozilla/glam/pull/478))
 
 ## [2020.4.2](https://github.com/mozilla/glam/compare/2020.4.1...2020.4.2) (2020-04-30)
 

package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@auth0/auth0-spa-js": "1.6.0",
+    "@graph-paper/icons": "0.0.0-alpha.8",
     "d3-format": "1.4.1",
     "d3-scale": "3.1.0",
     "d3-scale-chromatic": "1.5.0",

src/components/controls/AlertNotice.svelte

@@ -0,0 +1,82 @@
+<script>
+  import { fly } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { Cancel } from '@graph-paper/icons';
+
+  export let dismissText = 'dismiss'; // Label of 'dismiss' button.
+  // Required: Which localStorage key to check whether this notice has been dismissed.
+  export let toggleKey = '';
+
+  const today = new Date().getDate();
+
+  // So we don't pollute the entire LS namespace.
+  const KEY_PREFIX = 'alertNotice-';
+
+  // Intentional loose (coerced) comparison.
+  // This will fail if you continually visit on the same day of the month and that's fine.
+  let alertVisible = window.localStorage.getItem(KEY_PREFIX + toggleKey) != today;
+
+  function dismissNotice() {
+    alertVisible = false;
+    window.localStorage.setItem(KEY_PREFIX + toggleKey, today);
+  }
+</script>
+
+<style>
+  .alert-notice {
+    position: fixed;
+    left: var(--space-6x);
+    bottom: var(--space-6x);
+    border: 1px solid var(--bright-yellow-500);
+    background-color: var(--bright-yellow-100);
+    color: var(--bright-yellow-700);
+    border-radius: var(--border-radius-base);
+    padding: var(--space-2x);
+    box-shadow: var(--depth-small);
+    z-index: 10;
+  }
+
+  .alert-notice-content {
+    line-height: 1.5;
+    font-size: var(--text-015);
+    width: 400px;
+  }
+
+  .alert-notice-content > * {
+    margin: 0;
+  }
+
+  .alert-notice-action {
+    position: absolute;
+    right: var(--space-1h);
+    top: var(--space-1h);
+    padding: var(--space-1h); /* makes the click target a bit larger */
+    cursor: pointer;
+    border-radius: 50%;
+  }
+
+  .alert-notice-action button {
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--border-radius-base);
+    font-size: var(--text-01);
+    margin: 0;
+    cursor: pointer;
+    color: var(--bright-yellow-700);
+  }
+
+  .alert-notice-action:hover button {
+    color: var(--bright-yellow-600);
+  }
+</style>
+
+{#if alertVisible}
+  <div class="alert-notice" transition:fly={{ y: 10, duration: 200, easing: cubicOut }}>
+    <div class="alert-notice-content">
+      <slot></slot>
+    </div>
+    <div class="alert-notice-action" on:click={dismissNotice}>
+      <button><Cancel size={24} /></button>
+    </div>
+  </div>
+{/if}

src/routing/wrappers/Layout.svelte

@@ -13,6 +13,7 @@
   import ProbeViewControl from '../../components/controls/ProbeViewControl.svelte';
   import ProbeDetails from '../../components/regions/ProbeDetails.svelte';
   import SlackLogo from '../../components/SlackLogo.svelte';
+  import AlertNotice from '../../components/controls/AlertNotice.svelte';
 
   import { store } from '../../state/store';
 
@@ -71,4 +72,12 @@
       <Footer />
     </ContentFooter>
   </Content>
+  <AlertNotice toggleKey="dataErrorsWarning">
+    <p>Thank you for testing the GLAM prototype!</p>
+    <p>
+      This tool is still in active development so UX bugs and data issues may
+      exist. Help us make it suit your needs by directing questions or feedback
+      to the <a href="https://app.slack.com/client/T027LFU12/CB1EQ437S">#glam</a> Slack channel.
+    </p>
+  </AlertNotice>
 </App>

src/udgl/layout/Content.svelte

@@ -4,11 +4,11 @@ export let contentHeader = true;
 export let contentFooter = true;
 </script>
 
-<div 
+<div
   class=content
   class:content--centered-body={centered}
-  class:content--no-header={!contentHeader}  
-  class:content--no-footer={!contentFooter}  
+  class:content--no-header={!contentHeader}
+  class:content--no-footer={!contentFooter}
 >
   <slot></slot>
-</div>
+</div>

src/udgl/layout/ContentBody.svelte

@@ -1,3 +1,3 @@
 <main class=content-content>
   <slot></slot>
-</main>
+</main>