feat: add cookie notice (#795)

* feat: add cookie notice

* fix: remove wrong text

* fix: prevent flickering of cookie notice

* fix: move display logic

packages/site/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@emotion/styled": "^10.0.6",
-    "@meetalva/alva-design": "^1.4.4",
+    "@meetalva/alva-design": "^1.6.2",
     "@types/react": "16.4.11",
     "@types/react-helmet": "5.0.6",
     "react": "16.4.2",

packages/site/src/cookie-notice.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as D from '@meetalva/alva-design';
+
+export class CookieNotice extends React.Component {
+	public state = {
+		display:
+			typeof document !== 'undefined' && document.cookie.indexOf('hidecookienotice=1') === -1
+	};
+
+	public render() {
+		return (
+			this.state.display === true && (
+				<D.CookieNotice
+					text="This website uses cookies to ensure you get the best experience on our website."
+					linkText="Learn more"
+					linkHref="doc/docs/privacypolicy"
+					buttonText="Got it"
+					buttonOnClick={() => {
+						document.cookie = 'hidecookienotice=1;path=/';
+						this.setState({ display: false });
+					}}
+				/>
+			)
+		);
+	}
+}

packages/site/src/site.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import * as D from '@meetalva/alva-design';
 import { Releases } from './releases';
+import { CookieNotice } from './cookie-notice';
 
 export * from './render';
 
@@ -155,13 +156,6 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 				}
 			/>
 			<D.Space size={D.SpaceSize.XL} />
-			<D.Feature
-				featureLevel={D.FeatureLevel.Medium}
-				headline="Sketch Integration (coming soon)"
-				copy="Integrate Sketch into your prototyping workflow and seamlessly export code to Sketch and import your design drafts to the prototype. Coming later this year."
-				layout={D.FeatureLayout.Center}
-			/>
-			<D.Space size={D.SpaceSize.XL} />
 			<D.Space size={D.SpaceSize.XL} />
 
 			<D.Teaser
@@ -334,6 +328,7 @@ const Page: React.StatelessComponent<void> = (): JSX.Element => {
 					href="./doc/docs/privacypolicy?guides-enabled=true"
 				/>
 			</D.Footer>
+			<CookieNotice />
 		</div>
 	);
 };

yarn.lock

@@ -1013,10 +1013,10 @@
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
-"@meetalva/alva-design@^1.4.4":
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/@meetalva/alva-design/-/alva-design-1.4.4.tgz#e48d307e5927453f790d8d651bb8bb8c6e3b7e06"
-  integrity sha512-rc22upg5LUMx8r1MW+tHUjh3kajiA4PhI/jFxG4K+30r8OmR6hlD8C9FunN2yldMO7oFhnLdHwJLhTM3ymV4RQ==
+"@meetalva/alva-design@^1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@meetalva/alva-design/-/alva-design-1.6.2.tgz#c9890817b8cfa443e99bcb72994a7d6d50babd64"
+  integrity sha512-XnpY/WA/TYluWftDoKybhFPzWViRFQg83aYDEbU7uILLgrWYe1zPWVf+nJztrpr+1PYR5r6iisWpDoqhcIhm5g==
   dependencies:
     "@emotion/core" "^10.0.6"
     "@emotion/styled" "^10.0.6"