From 6e407e40ae70ed110ecda7aaa76eb151adf3e50a Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Fri, 22 Nov 2024 17:32:22 -0500
Subject: [PATCH] fix(protocol-designer): update Heater-shaker to Heater-Shaker
 (#16966)

* fix(protocol-designer): update Heater-shaker to Heater-Shaker
---
 .../src/assets/localization/en/protocol_steps.json  |  2 +-
 .../StepForm/StepTools/HeaterShakerTools/index.tsx  |  2 +-
 .../ProtocolSteps/StepForm/__tests__/utils.test.ts  |  5 +++++
 .../pages/Designer/ProtocolSteps/StepForm/utils.ts  | 13 +++++++++++--
 .../ProtocolSteps/Timeline/__tests__/utils.test.tsx |  2 +-
 .../pages/Designer/ProtocolSteps/Timeline/utils.ts  | 10 ++++++++--
 6 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
index 50c6f7879f8..2f498904c61 100644
--- a/protocol-designer/src/assets/localization/en/protocol_steps.json
+++ b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -44,7 +44,7 @@
       "open": "open"
     }
   },
-  "heater_shaker_settings": "Heater-shaker settings",
+  "heater_shaker_settings": "Heater-Shaker Settings",
   "in": "in",
   "into": "into",
   "magnetic_module": {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
index 5d2035620d3..3447de54069 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/HeaterShakerTools/index.tsx
@@ -41,7 +41,7 @@ export function HeaterShakerTools(props: StepFormProps): JSX.Element {
         gridGap={SPACING.spacing4}
         paddingX={SPACING.spacing16}
       >
-        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+        <StyledText desktopStyle="bodyDefaultSemiBold">
           {t('protocol_steps:heater_shaker_settings')}
         </StyledText>
         <ToggleExpandStepFormField
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
index 1f79fe88440..5b316bc206b 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/__tests__/utils.test.ts
@@ -84,6 +84,11 @@ describe('capitalizeFirstLetter', () => {
       'Move labware to D3 on top of Magnetic Block'
     )
   })
+
+  it('should capitalize the first letter of a step name and leave the rest unchanged', () => {
+    const moduleName = 'Heater-shaker'
+    expect(capitalizeFirstLetter(moduleName)).toBe('Heater-Shaker')
+  })
 })
 
 describe('getFormErrorsMappedToField', () => {
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
index 3821d0ba49d..db336a0aba1 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/utils.ts
@@ -337,8 +337,17 @@ export const getSaveStepSnackbarText = (
   }
 }
 
-export const capitalizeFirstLetter = (stepName: string): string =>
-  `${stepName.charAt(0).toUpperCase()}${stepName.slice(1)}`
+export const capitalizeFirstLetter = (stepName: string): string => {
+  // Note - check is for heater-shaker
+  if (stepName.includes('-')) {
+    return stepName
+      .split('-')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('-')
+  } else {
+    return `${stepName.charAt(0).toUpperCase()}${stepName.slice(1)}`
+  }
+}
 
 type ErrorMappedToField = Record<string, FormError>
 
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/utils.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/utils.test.tsx
index 1d6c2149c95..2baccd90d6b 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/utils.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/utils.test.tsx
@@ -4,7 +4,7 @@ import { capitalizeFirstLetterAfterNumber } from '../utils'
 describe('capitalizeFirstLetterAfterNumber', () => {
   it('should capitalize the first letter of a step type', () => {
     expect(capitalizeFirstLetterAfterNumber('1. heater-shaker')).toBe(
-      '1. Heater-shaker'
+      '1. Heater-Shaker'
     )
     expect(capitalizeFirstLetterAfterNumber('22. thermocycler')).toBe(
       '22. Thermocycler'
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
index 56b78507a12..2d918b7790f 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/utils.ts
@@ -5,8 +5,14 @@ import type { StepIdType } from '../../../../form-types'
 
 export const capitalizeFirstLetterAfterNumber = (title: string): string =>
   title.replace(
-    /(^[\d\W]*)([a-zA-Z])/,
-    (match, prefix, firstLetter) => `${prefix}${firstLetter.toUpperCase()}`
+    /(^[\d\W]*)([a-zA-Z])|(-[a-zA-Z])/g,
+    (match, prefix, firstLetter) => {
+      if (prefix) {
+        return `${prefix}${firstLetter.toUpperCase()}`
+      } else {
+        return `${match.charAt(0)}${match.charAt(1).toUpperCase()}`
+      }
+    }
   )
 
 const VOLUME_SIG_DIGITS_DEFAULT = 2