feat(react-components): help button in toolbar (#3564)

* Mouse help navigation added * added keyboard & touch navigation help graphics * Added styling to the help navigation card * removed unused styled element * exported help button from toolbar * positioned help screen centered to button, resturctured graphics with help container and addressed review comments * css alignment adjusted * Made changes to accomodate reduced Help screen width * lint error fix --------- Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>
cognitedata · Aug 10, 2023 · 8bdfb84 · 8bdfb84
1 parent 344c2fa
commit 8bdfb84
Show file tree

Hide file tree

Showing 11 changed files with 783 additions and 1 deletion.
diff --git a/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx b/react-components/src/components/RevealToolbar/Help/Graphics/Keyboard.tsx
@@ -0,0 +1,265 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement, type SVGProps } from 'react';
+
+const UpArrowKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M22.9999 14.3652V34.3793M22.9999 14.3652L28.992 20.1758M22.9999 14.3652L17.0078 20.1758"
+      stroke="white"
+      strokeWidth="2.41806"
+    />
+  </svg>
+);
+
+const RightArrowKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M32.4424 22.6757L12.4283 22.6757M32.4424 22.6757L26.6319 28.6678M32.4424 22.6757L26.6319 16.6836"
+      stroke="white"
+      strokeWidth="2.41806"
+    />
+  </svg>
+);
+
+const DownArrowKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M23.0001 29.8184L23.0001 9.80432M23.0001 29.8184L17.008 24.0078M23.0001 29.8184L28.9922 24.0078"
+      stroke="white"
+      strokeWidth="2.41806"
+    />
+  </svg>
+);
+
+const LeftArrowKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M13.96 20.7481L33.974 20.7481M13.96 20.7481L19.7705 14.756M13.96 20.7481L19.7705 26.7402"
+      stroke="white"
+      strokeWidth="2.41806"
+    />
+  </svg>
+);
+
+const QKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M22.0463 26.9534H24.8307L26.7908 29.5088L27.7159 30.6446L30.8392 34.7205H27.9449L25.8566 32.0002L25.1421 31.011L22.0463 26.9534ZM31.4437 23.656C31.4437 25.6589 31.0774 27.3808 30.3446 28.8219C29.6119 30.2568 28.6074 31.3621 27.3312 32.1375C26.0611 32.9069 24.617 33.2916 22.9989 33.2916C21.3746 33.2916 19.9244 32.9069 18.6482 32.1375C17.3781 31.3621 16.3767 30.2538 15.6439 28.8127C14.9112 27.3717 14.5448 25.6528 14.5448 23.656C14.5448 21.6532 14.9112 19.9343 15.6439 18.4993C16.3767 17.0583 17.3781 15.9531 18.6482 15.1837C19.9244 14.4082 21.3746 14.0204 22.9989 14.0204C24.617 14.0204 26.0611 14.4082 27.3312 15.1837C28.6074 15.9531 29.6119 17.0583 30.3446 18.4993C31.0774 19.9343 31.4437 21.6532 31.4437 23.656ZM28.641 23.656C28.641 22.1295 28.3937 20.8441 27.8991 19.8C27.4106 18.7497 26.7389 17.9559 25.884 17.4185C25.0353 16.8751 24.0735 16.6034 22.9989 16.6034C21.9181 16.6034 20.9533 16.8751 20.1045 17.4185C19.2558 17.9559 18.5841 18.7497 18.0895 19.8C17.601 20.8441 17.3567 22.1295 17.3567 23.656C17.3567 25.1826 17.601 26.471 18.0895 27.5213C18.5841 28.5654 19.2558 29.3592 20.1045 29.9027C20.9533 30.44 21.9181 30.7087 22.9989 30.7087C24.0735 30.7087 25.0353 30.44 25.884 29.9027C26.7389 29.3592 27.4106 28.5654 27.8991 27.5213C28.3937 26.471 28.641 25.1826 28.641 23.656Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const WKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M16.1271 33.0352L10.9246 14.2769H13.9014L17.5559 28.8036H17.73L21.5311 14.2769H24.4804L28.2815 28.8127H28.4555L32.1009 14.2769H35.0868L29.8752 33.0352H27.0267L23.079 18.9848H22.9325L18.9848 33.0352H16.1271Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const EKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M17.2903 33.0352V14.2769H29.0509V16.7133H20.1205V22.4287H28.4372V24.8559H20.1205V30.5988H29.1608V33.0352H17.2903Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const AKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M17.6155 33.0352H14.6112L21.3616 14.2769H24.6315L31.3819 33.0352H28.3777L23.0744 17.6842H22.9279L17.6155 33.0352ZM18.1192 25.6894H27.8647V28.0708H18.1192V25.6894Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const SKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M26.9923 19.2046C26.8946 18.3375 26.4916 17.6658 25.7833 17.1896C25.075 16.7072 24.1835 16.466 23.1088 16.466C22.3394 16.466 21.6738 16.5881 21.112 16.8323C20.5503 17.0705 20.1137 17.4002 19.8023 17.8216C19.4969 18.2368 19.3443 18.71 19.3443 19.2412C19.3443 19.687 19.4481 20.0717 19.6557 20.3953C19.8694 20.7189 20.1473 20.9907 20.4892 21.2105C20.8373 21.4242 21.2097 21.6043 21.6066 21.7509C22.0035 21.8913 22.3852 22.0074 22.7516 22.0989L24.5834 22.5752C25.1818 22.7218 25.7955 22.9202 26.4244 23.1706C27.0534 23.4209 27.6365 23.7507 28.1739 24.1598C28.7112 24.5689 29.1447 25.0757 29.4745 25.6802C29.8103 26.2848 29.9782 27.0083 29.9782 27.851C29.9782 28.9135 29.7035 29.8569 29.1539 30.6812C28.6105 31.5056 27.8197 32.1559 26.7816 32.6321C25.7497 33.1084 24.501 33.3466 23.0355 33.3466C21.6311 33.3466 20.4159 33.1237 19.3901 32.6779C18.3642 32.2322 17.5613 31.6002 16.9812 30.782C16.4011 29.9576 16.0805 28.9806 16.0195 27.851H18.8589C18.9138 28.5288 19.1336 29.0936 19.5183 29.5455C19.9091 29.9912 20.4068 30.324 21.0113 30.5438C21.6219 30.7575 22.2905 30.8644 23.0172 30.8644C23.8171 30.8644 24.5285 30.7392 25.1513 30.4889C25.7802 30.2324 26.2748 29.8782 26.6351 29.4264C26.9954 28.9684 27.1755 28.4341 27.1755 27.8235C27.1755 27.2678 27.0167 26.8129 26.6992 26.4588C26.3878 26.1046 25.9634 25.8115 25.4261 25.5795C24.8948 25.3474 24.2934 25.1429 23.6217 24.9658L21.4051 24.3613C19.903 23.9522 18.7123 23.3507 17.833 22.5569C16.9598 21.7631 16.5232 20.7128 16.5232 19.4061C16.5232 18.3253 16.8163 17.3819 17.4025 16.5759C17.9887 15.7699 18.7825 15.144 19.7839 14.6982C20.7854 14.2464 21.915 14.0204 23.1729 14.0204C24.443 14.0204 25.5635 14.2433 26.5343 14.6891C27.5113 15.1348 28.2807 15.7485 28.8425 16.5301C29.4043 17.3056 29.6974 18.1971 29.7218 19.2046H26.9923Z"
+      fill="white"
+    />
+  </svg>
+);
+
+const DKey = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <rect
+      x="1.20903"
+      y="1.20903"
+      width="43.5819"
+      height="43.5819"
+      rx="4.79097"
+      stroke="#ABB9FB"
+      strokeWidth="2.41806"
+    />
+    <path
+      d="M21.8265 33.0352H15.7538V14.2769H22.0188C23.8568 14.2769 25.4352 14.6524 26.7542 15.4035C28.0731 16.1485 29.0837 17.2201 29.7859 18.6184C30.4942 20.0106 30.8484 21.6807 30.8484 23.6286C30.8484 25.5825 30.4912 27.2617 29.7767 28.6662C29.0684 30.0706 28.0426 31.1514 26.6992 31.9086C25.3558 32.6596 23.7316 33.0352 21.8265 33.0352ZM18.5841 30.5621H21.6708C23.0996 30.5621 24.2873 30.2935 25.2337 29.7561C26.1802 29.2127 26.8885 28.428 27.3587 27.4022C27.8289 26.3702 28.0639 25.1124 28.0639 23.6286C28.0639 22.157 27.8289 20.9082 27.3587 19.8824C26.8946 18.8566 26.2016 18.078 25.2795 17.5468C24.3575 17.0155 23.2126 16.7499 21.8448 16.7499H18.5841V30.5621Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const ArrowKeysNavigation = {
+  Up: UpArrowKey,
+  Down: DownArrowKey,
+  Left: LeftArrowKey,
+  Right: RightArrowKey
+};
+
+export const QWEASDKeysNavigation = {
+  Q: QKey,
+  W: WKey,
+  E: EKey,
+  A: AKey,
+  S: SKey,
+  D: DKey
+};
diff --git a/react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx b/react-components/src/components/RevealToolbar/Help/Graphics/Mouse.tsx
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2023 Cognite AS
+ */
+
+import { type ReactElement, type SVGProps } from 'react';
+
+export const Mouse = (props: SVGProps<SVGSVGElement>): ReactElement => (
+  <svg
+    width="78"
+    height="119"
+    viewBox="0 0 78 119"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <path
+      d="M38.9666 117C18.635 117 2 100.422 2 80.1595V38.8405C2 18.5782 18.635 2 38.9666 2C59.2982 2 75.9332 18.5782 75.9332 38.8405V80.1595C75.9332 100.422 59.2982 117 38.9666 117Z"
+      stroke="#ABB9FB"
+      strokeWidth="3"
+      strokeMiterlimit="10"
+    />
+    <path
+      d="M38.9666 49.8932C34.9002 49.8932 31.5732 46.5776 31.5732 42.5251V20.4208C31.5732 16.3684 34.9002 13.0527 38.9666 13.0527C43.0329 13.0527 46.3599 16.3684 46.3599 20.4208V42.5251C46.3599 46.5776 43.0329 49.8932 38.9666 49.8932Z"
+      stroke="#ABB9FB"
+      strokeWidth="3"
+      strokeMiterlimit="10"
+    />
+    <path d="M38.9668 13.0521V2" stroke="#ABB9FB" strokeWidth="3" strokeMiterlimit="10" />
+    <path d="M38.9658 49.8926V66.194" stroke="#ABB9FB" strokeWidth="3" strokeMiterlimit="10" />
+    <path
+      d="M2 60.9453C2 60.9453 2.74644 66.1945 38.9666 66.1945C75.9332 66.1945 75.9332 60.9453 75.9332 60.9453"
+      stroke="#ABB9FB"
+      strokeWidth="3"
+      strokeMiterlimit="10"
+    />
+  </svg>
+);