From 7a376096e3ba6742deb346c6230b4c4dd6519f39 Mon Sep 17 00:00:00 2001
From: pixelzoom <cmalley@pixelzoom.com>
Date: Tue, 4 Oct 2022 15:31:44 -0600
Subject: [PATCH] prototype FaucetControlsKeyboardHelpContent,
 https://github.com/phetsims/ph-scale/issues/249

---
 .../view/FaucetControlsKeyboardHelpContent.ts | 66 +++++++++++++++++++
 js/macro/view/MacroKeyboardHelpContent.ts     |  4 ++
 js/micro/view/MicroKeyboardHelpContent.ts     |  4 ++
 3 files changed, 74 insertions(+)
 create mode 100644 js/common/view/FaucetControlsKeyboardHelpContent.ts

diff --git a/js/common/view/FaucetControlsKeyboardHelpContent.ts b/js/common/view/FaucetControlsKeyboardHelpContent.ts
new file mode 100644
index 00000000..827729fd
--- /dev/null
+++ b/js/common/view/FaucetControlsKeyboardHelpContent.ts
@@ -0,0 +1,66 @@
+// Copyright 2022, University of Colorado Boulder
+
+//TODO https://github.com/phetsims/scenery-phet/issues/773 move to scenery-phet
+/**
+ * FaucetControlsKeyboardHelpContent is the keyboard-help section that describes how to interact with FaucetNode.
+ *
+ * @author Chris Malley (PixelZoom, Inc.)
+ */
+
+import StringProperty from '../../../../axon/js/StringProperty.js';
+import optionize from '../../../../phet-core/js/optionize.js';
+import PickOptional from '../../../../phet-core/js/types/PickOptional.js';
+import { FaucetNodeOptions } from '../../../../scenery-phet/js/FaucetNode.js';
+import KeyboardHelpIconFactory from '../../../../scenery-phet/js/keyboard/help/KeyboardHelpIconFactory.js';
+import KeyboardHelpSection, { KeyboardHelpSectionOptions } from '../../../../scenery-phet/js/keyboard/help/KeyboardHelpSection.js';
+import KeyboardHelpSectionRow from '../../../../scenery-phet/js/keyboard/help/KeyboardHelpSectionRow.js';
+import TextKeyNode from '../../../../scenery-phet/js/keyboard/TextKeyNode.js';
+import phScale from '../../phScale.js';
+
+//TODO https://github.com/phetsims/scenery-phet/issues/773 i18n, add to scenery-phet-strings_en.json
+const faucetControlsStringProperty = new StringProperty( 'Faucet Controls' );
+const openCloseStringProperty = new StringProperty( 'Open/close' );
+const openCloseSlowerStringProperty = new StringProperty( 'Open/close slower' );
+const dispenseASmallAmountStringProperty = new StringProperty( 'Dispense a small amount' );
+
+type SelfOptions = PickOptional<FaucetNodeOptions, 'tapToDispenseEnabled'>;
+
+export type FaucetControlsKeyboardHelpContentOptions = SelfOptions & KeyboardHelpSectionOptions;
+
+export default class FaucetControlsKeyboardHelpContent extends KeyboardHelpSection {
+
+  public constructor( providedOptions?: FaucetControlsKeyboardHelpContentOptions ) {
+
+    const options = optionize<FaucetControlsKeyboardHelpContentOptions, SelfOptions, KeyboardHelpSectionOptions>()( {
+
+      // SelfOptions
+      tapToDispenseEnabled: true
+    }, providedOptions );
+
+    // arrows or WASD
+    const normalRow = KeyboardHelpSectionRow.labelWithIcon( openCloseStringProperty,
+      KeyboardHelpIconFactory.arrowOrWasdKeysRowIcon() );
+
+    // Shift+arrows or Shift+WASD
+    const slowerRow = KeyboardHelpSectionRow.labelWithIconList( openCloseSlowerStringProperty, [
+      KeyboardHelpIconFactory.shiftPlusIcon( KeyboardHelpIconFactory.arrowKeysRowIcon() ),
+      KeyboardHelpIconFactory.shiftPlusIcon( KeyboardHelpIconFactory.wasdRowIcon() )
+    ] );
+
+    const rows = [ normalRow, slowerRow ];
+
+    // Space or Enter
+    if ( options.tapToDispenseEnabled ) {
+
+      const dispenseRow = KeyboardHelpSectionRow.labelWithIcon(
+        dispenseASmallAmountStringProperty,
+        KeyboardHelpIconFactory.iconOrIcon( TextKeyNode.space(), TextKeyNode.enter() )
+      );
+      rows.push( dispenseRow );
+    }
+
+    super( faucetControlsStringProperty, rows );
+  }
+}
+
+phScale.register( 'FaucetControlsKeyboardHelpContent', FaucetControlsKeyboardHelpContent );
\ No newline at end of file
diff --git a/js/macro/view/MacroKeyboardHelpContent.ts b/js/macro/view/MacroKeyboardHelpContent.ts
index d7cf2122..0d4cdcd6 100644
--- a/js/macro/view/MacroKeyboardHelpContent.ts
+++ b/js/macro/view/MacroKeyboardHelpContent.ts
@@ -12,6 +12,7 @@ import BasicActionsKeyboardHelpSection from '../../../../scenery-phet/js/keyboar
 import ComboBoxKeyboardHelpSection from '../../../../scenery-phet/js/keyboard/help/ComboBoxKeyboardHelpSection.js';
 import PhScaleStrings from '../../PhScaleStrings.js';
 import MoveKeyboardHelpContent from '../../common/view/MoveKeyboardHelpContent.js';
+import FaucetControlsKeyboardHelpContent from '../../common/view/FaucetControlsKeyboardHelpContent.js';
 
 export default class MacroKeyboardHelpContent extends TwoColumnKeyboardHelpContent {
 
@@ -32,6 +33,9 @@ export default class MacroKeyboardHelpContent extends TwoColumnKeyboardHelpConte
 
     const rightColumn = [
 
+      // Faucet Controls
+      new FaucetControlsKeyboardHelpContent(),
+
       // Basic Actions
       new BasicActionsKeyboardHelpSection( {
         withCheckboxContent: true
diff --git a/js/micro/view/MicroKeyboardHelpContent.ts b/js/micro/view/MicroKeyboardHelpContent.ts
index ab7a3924..073a2045 100644
--- a/js/micro/view/MicroKeyboardHelpContent.ts
+++ b/js/micro/view/MicroKeyboardHelpContent.ts
@@ -12,6 +12,7 @@ import MoveKeyboardHelpContent from '../../common/view/MoveKeyboardHelpContent.j
 import PhScaleStrings from '../../PhScaleStrings.js';
 import ComboBoxKeyboardHelpSection from '../../../../scenery-phet/js/keyboard/help/ComboBoxKeyboardHelpSection.js';
 import BasicActionsKeyboardHelpSection from '../../../../scenery-phet/js/keyboard/help/BasicActionsKeyboardHelpSection.js';
+import FaucetControlsKeyboardHelpContent from '../../common/view/FaucetControlsKeyboardHelpContent.js';
 
 export default class MicroKeyboardHelpContent extends TwoColumnKeyboardHelpContent {
 
@@ -32,6 +33,9 @@ export default class MicroKeyboardHelpContent extends TwoColumnKeyboardHelpConte
 
     const rightColumn = [
 
+      // Faucet Controls
+      new FaucetControlsKeyboardHelpContent(),
+
       // Basic Actions
       new BasicActionsKeyboardHelpSection( {
         withCheckboxContent: true