Add ModalHint

Author: aryanpingle

src/client/lazy-app/Modal/ModalHelpIcon/index.tsx

@@ -0,0 +1,56 @@
+import { h, Component, VNode } from 'preact';
+import Modal from '..';
+import { InfoIcon } from 'client/lazy-app/icons';
+import { linkRef } from 'shared/prerendered-app/util';
+
+import * as style from './style.css';
+import 'add-css:./style.css';
+
+interface Props {
+  modalTitle: string;
+  content: VNode;
+  text?: string;
+}
+
+interface State {}
+
+export default class ModalHint extends Component<Props, State> {
+  private modalComponent?: Modal;
+
+  private onclick = (event: Event) => {
+    if (!this.modalComponent)
+      throw new Error('ModalHelpIcon is missing a modalComponent');
+
+    // Stop bubbled events from triggering the modal
+    if (!(event.currentTarget as Element).matches('button')) return;
+
+    this.modalComponent.showModal();
+  };
+
+  render({ modalTitle, content }: Props) {
+    return (
+      <span
+        class={style.modalHint}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopImmediatePropagation();
+        }}
+      >
+        <button
+          class={style.modalButton}
+          onClick={this.onclick}
+          title="Learn more"
+        >
+          <InfoIcon></InfoIcon>
+          {this.props.children}
+        </button>
+        <Modal
+          ref={linkRef(this, 'modalComponent')}
+          icon={<InfoIcon></InfoIcon>}
+          title={modalTitle}
+          content={content}
+        ></Modal>
+      </span>
+    );
+  }
+}

src/client/lazy-app/Modal/ModalHelpIcon/style.css

@@ -0,0 +1,29 @@
+span.modal-hint {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.modal-button {
+  composes: unbutton from global;
+
+  color: inherit;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  text-decoration: underline dashed 1px currentColor;
+  text-underline-offset: 0.25em;
+  margin-right: 0.5rem;
+}
+
+.modal-button:focus {
+  outline: white solid 1px;
+  outline-offset: 0.25em;
+}
+
+.modal-button > svg {
+  vertical-align: middle;
+  width: 1em;
+  height: 1em;
+}

src/client/lazy-app/icons/index.tsx

@@ -13,7 +13,11 @@ const Icon = (props: preact.JSX.HTMLAttributes) => (
 
 export const InfoIcon = (props: preact.JSX.HTMLAttributes) => (
   <svg viewBox="0 0 512 512" fill="currentColor">
-    <path d="M255.992,0.008C114.626,0.008,0,114.626,0,256s114.626,255.992,255.992,255.992 C397.391,511.992,512,397.375,512,256S397.391,0.008,255.992,0.008z M300.942,373.528c-10.355,11.492-16.29,18.322-27.467,29.007 c-16.918,16.177-36.128,20.484-51.063,4.516c-21.467-22.959,1.048-92.804,1.597-95.449c4.032-18.564,12.08-55.667,12.08-55.667 s-17.387,10.644-27.709,14.419c-7.613,2.782-16.225-0.871-18.354-8.234c-1.984-6.822-0.404-11.161,3.774-15.822 c10.354-11.484,16.289-18.314,27.467-28.999c16.934-16.185,36.128-20.483,51.063-4.524c21.467,22.959,5.628,60.732,0.064,87.497 c-0.548,2.653-13.742,63.627-13.742,63.627s17.387-10.645,27.709-14.427c7.628-2.774,16.241,0.887,18.37,8.242 C306.716,364.537,305.12,368.875,300.942,373.528z M273.169,176.123c-23.886,2.096-44.934-15.564-47.031-39.467 c-2.08-23.878,15.58-44.934,39.467-47.014c23.87-2.097,44.934,15.58,47.015,39.458 C314.716,152.979,297.039,174.043,273.169,176.123z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M64 0C28.6538 0 0 28.6538 0 64V448C0 483.346 28.6538 512 64 512H448C483.346 512 512 483.346 512 448V64C512 28.6538 483.346 0 448 0H64ZM297.543 377.307C298.628 376.1 299.756 374.845 300.942 373.528C305.12 368.875 306.716 364.537 304.731 357.714C302.602 350.359 293.989 346.698 286.361 349.472C276.039 353.254 258.652 363.899 258.652 363.899C258.652 363.899 271.846 302.925 272.394 300.272C273.405 295.411 274.754 290.186 276.158 284.752C282.481 260.273 289.898 231.564 272.33 212.775C257.395 196.816 238.201 201.114 221.267 217.299C211.391 226.739 205.608 233.171 197.254 242.461C196.152 243.686 195.006 244.961 193.8 246.298C189.622 250.959 188.042 255.298 190.026 262.12C192.155 269.483 200.767 273.136 208.38 270.354C218.702 266.579 236.089 255.935 236.089 255.935C236.089 255.935 228.041 293.038 224.009 311.602C223.965 311.814 223.781 312.453 223.491 313.463C220.145 325.103 202.659 385.926 222.412 407.051C237.347 423.019 256.557 418.712 273.475 402.535C283.372 393.074 289.159 386.636 297.543 377.307ZM226.138 136.656C228.235 160.559 249.283 178.219 273.169 176.123C297.039 174.043 314.716 152.979 312.62 129.1C310.539 105.222 289.475 87.5449 265.605 89.6419C241.718 91.7219 224.058 112.778 226.138 136.656Z"
+    />
   </svg>
 );