From e2ceeeb349133e373286c351922bc92aba9b45f6 Mon Sep 17 00:00:00 2001
From: chrisklus <christopher.klusendorf@colorado.edu>
Date: Fri, 11 Oct 2019 20:12:34 -0400
Subject: [PATCH] Style accordion box title nodes, see
 https://github.com/phetsims/number-play/issues/2

---
 js/common/NumberPlayConstants.js       | 5 +++++
 js/common/view/NumberAccordionBox.js   | 2 +-
 js/common/view/NumeralAccordionBox.js  | 5 +++++
 js/common/view/TenFrameAccordionBox.js | 2 +-
 number-play-strings_en.json            | 3 +++
 5 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/js/common/NumberPlayConstants.js b/js/common/NumberPlayConstants.js
index c6238a2e..ecf63031 100644
--- a/js/common/NumberPlayConstants.js
+++ b/js/common/NumberPlayConstants.js
@@ -10,6 +10,7 @@ define( require => {
 
   // modules
   const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
+  const PhetFont = require( 'SCENERY_PHET/PhetFont' );
 
   const NumberPlayConstants = {
 
@@ -30,6 +31,9 @@ define( require => {
     // options for all AccordionBox instances
     ACCORDION_BOX_OPTIONS: {
       resize: false,
+      titleAlignX: 'left',
+      titleXSpacing: 8,
+      showTitleWhenExpanded: false,
       cornerRadius: 6,
       titleYMargin: 10,
       buttonXMargin: 10,
@@ -40,6 +44,7 @@ define( require => {
         sideLength: 20
       }
     },
+    ACCORDION_BOX_TITLE_FONT: new PhetFont( 16 ),
 
     // colors
     TEN_SCREEN_BACKGROUND: 'rgb( 171, 255, 195 )',
diff --git a/js/common/view/NumberAccordionBox.js b/js/common/view/NumberAccordionBox.js
index e9b4cc66..b94bd28a 100644
--- a/js/common/view/NumberAccordionBox.js
+++ b/js/common/view/NumberAccordionBox.js
@@ -74,7 +74,7 @@ define( require => {
     constructor( currentNumberProperty, fill ) {
 
       const options = merge( {
-        titleNode: new Text( numberString ),
+        titleNode: new Text( numberString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
         fill: fill,
         minWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH,
         maxWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH
diff --git a/js/common/view/NumeralAccordionBox.js b/js/common/view/NumeralAccordionBox.js
index 39a1d3d1..fedbb53c 100644
--- a/js/common/view/NumeralAccordionBox.js
+++ b/js/common/view/NumeralAccordionBox.js
@@ -17,6 +17,10 @@ define( require => {
   const numberPlay = require( 'NUMBER_PLAY/numberPlay' );
   const NumberPlayConstants = require( 'NUMBER_PLAY/common/NumberPlayConstants' );
   const PhetFont = require( 'SCENERY_PHET/PhetFont' );
+  const Text = require( 'SCENERY/nodes/Text' );
+
+  // strings
+  const numeralString = require( 'string!NUMBER_PLAY/numeral' );
 
   class NumeralAccordionBox extends AccordionBox {
 
@@ -27,6 +31,7 @@ define( require => {
     constructor( currentNumberProperty, fill ) {
 
       const options = merge( {
+        titleNode: new Text( numeralString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
         fill: fill,
         minWidth: 200
       }, NumberPlayConstants.ACCORDION_BOX_OPTIONS );
diff --git a/js/common/view/TenFrameAccordionBox.js b/js/common/view/TenFrameAccordionBox.js
index d50b9a72..f8fbbbf5 100644
--- a/js/common/view/TenFrameAccordionBox.js
+++ b/js/common/view/TenFrameAccordionBox.js
@@ -28,7 +28,7 @@ define( require => {
     constructor( currentNumberProperty, fill ) {
 
       const options = merge( {
-        titleNode: new Text( tenFrameString ),
+        titleNode: new Text( tenFrameString, { font: NumberPlayConstants.ACCORDION_BOX_TITLE_FONT } ),
         fill: fill,
         minWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH,
         maxWidth: NumberPlayConstants.UPPER_OUTER_ACCORDION_BOX_WIDTH
diff --git a/number-play-strings_en.json b/number-play-strings_en.json
index 091c7274..434319df 100644
--- a/number-play-strings_en.json
+++ b/number-play-strings_en.json
@@ -74,6 +74,9 @@
   "number": {
     "value": "Number"
   },
+  "numeral": {
+    "value": "Numeral"
+  },
   "tenFrame": {
     "value": "Ten Frame"
   }