feat(odd): single mount and 96-channel pipette flows (attach, detach, cal)

[jerader]

closes RLIQ-229, RLIQ-230, RLIQ-234, RLIQ-231, RLIQ-232, RLIQ-233, RLIQ-341, RAUT-352

Overview

Adds ODD ui for attach, (re)calibrate, and detach flows for the single mount pipettes and 96-channel pipette.

Test Plan

• on an ODD, walk through attach flow and then calibrate/recalibrate, followed by the detach flow for both single mount and 96-channel pipettes. All pages including error modals, early exit modals, unskippable step modal should match designs.
• on a desktop app, make sure it retains the correct ui for all flows
• checkout the ODD buttons on storybook. make sure they match designs

Changelog

• changed GenericWizardTile, SimpleWizardBody, InProgressModal, and Banner to accommodate the ODD ui
• added ODD media query constant
• refactor SmallButton, create story and test to accommodate all 6 options
• changed all the modals in PipetteWizardFlows to match designs
• updated tests
• separated out the ODD button stories into files for each components since SmallButton is so intricate compared to the other buttons

Review requests

• does (pointer: coarse) work on the ODD for the media query?
• does it make sense to have an odd media query constant?

Risk assessment

low

[codecov]

Codecov Report

Merging #12210 (fcf77f6) into edge (ce6fedd) will decrease coverage by 0.59%.
The diff coverage is 86.15%.

@@            Coverage Diff             @@
##             edge   #12210      +/-   ##
==========================================
- Coverage   74.28%   73.70%   -0.59%     
==========================================
  Files        2161     2210      +49     
  Lines       59715    61020    +1305     
  Branches     6105     6299     +194     
==========================================
+ Hits        44361    44974     +613     
- Misses      13924    14590     +666     
- Partials     1430     1456      +26     

Flag	Coverage Δ
app	72.26% <85.71%> (-2.70%)	⬇️
components	66.20% <100.00%> (+0.07%)	⬆️
labware-library	49.74% <ø> (ø)
shared-data	75.69% <100.00%> (-0.13%)	⬇️
step-generation	88.20% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
app/src/organisms/Devices/PipetteCard/index.tsx	54.00% <ø> (ø)
...p/src/organisms/PipetteWizardFlows/DetachProbe.tsx	100.00% <ø> (ø)
...src/organisms/PipetteWizardFlows/MountingPlate.tsx	93.33% <ø> (ø)
...ges/OnDeviceDisplay/AttachInstrumentsDashboard.tsx	63.41% <ø> (ø)
.../src/molecules/InProgressModal/InProgressModal.tsx	66.66% <40.00%> (-33.34%)	⬇️
...rganisms/PipetteWizardFlows/CheckPipetteButton.tsx	81.81% <66.66%> (-7.08%)	⬇️
...src/organisms/PipetteWizardFlows/DetachPipette.tsx	94.44% <75.00%> (-5.56%)	⬇️
app/src/organisms/PipetteWizardFlows/index.tsx	79.09% <80.00%> (-0.73%)	⬇️
...p/src/organisms/PipetteWizardFlows/AttachProbe.tsx	76.19% <83.33%> (+1.19%)	⬆️
app/src/molecules/SimpleWizardBody/index.tsx	92.85% <85.71%> (-7.15%)	⬇️
... and 13 more

... and 53 files with indirect coverage changes

[koji]

Can we use Button text to align with the DS?

[smb2268]

This looks great, just one comment/question! I put this on an ODD yesterday and the screens look good. I wasn't able to test the functionality all the way through without better ODD logging, so I'll make a follow-on ticket to test these flows on ODD once logging is improved. Great work 🤩

[smb2268]

Is there a reason why this onClick is different from the primary button below?

[jerader]

oops ya this should be handleCheckZAxis! good catch. I'll fix it now :D