Skip to content

Commit

Permalink
feat(protocol-designer): update icons for steps (#16335)
Browse files Browse the repository at this point in the history
re AUTH-799

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->
Update icons for steps in the Protocol timeline to match the design.

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

- Ensure all icons match the
[design](https://www.figma.com/design/WbkiUyU8VhtKz0JSuIFA45/Feature%3A-Protocol-Designer-Phase-1?node-id=2171-26665&node-type=canvas&t=ja8Z7s8Rdk6yeO8K-0)

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->

- added new icons: `ot-move`, `transfer`, `mix`, `ot-start`, and
`ot-end` to the `icon-data.ts` file
- added a condition to display icons for Starting deck state and Ending
deck state
## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

Co-authored-by: shiyaochen <[email protected]>
  • Loading branch information
syao1226 and shiyaochen authored Sep 26, 2024
1 parent 7e938d0 commit 31fd73e
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 6 deletions.
25 changes: 25 additions & 0 deletions components/src/icons/icon-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -309,6 +309,11 @@ export const ICON_DATA_BY_NAME = {
'M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z',
viewBox: '0 0 24 24',
},
mix: {
path:
'M6.66732 10.836V4.85683L4.52148 7.00267L3.33398 5.836L7.50065 1.66933L11.6673 5.836L10.4798 7.00267L8.33398 4.85683V10.836H6.66732ZM12.5007 18.336L8.33398 14.1693L9.52148 13.0027L11.6673 15.1485V9.16933H13.334V15.1485L15.4798 13.0027L16.6673 14.1693L12.5007 18.336Z',
viewBox: '0 0 20 20',
},
more: {
path:
'M31.075 23.675L19.075 35.675L16.925 33.525L26.825 23.675L16.975 13.8251L19.125 11.675L31.075 23.675Z',
Expand Down Expand Up @@ -409,6 +414,11 @@ export const ICON_DATA_BY_NAME = {
'M15.5 16v-2.9l8.5 5-8.5 4.9v-3c-1.3 0-2.4-.3-3.4-.7-1.1-.4-2.1-1-2.9-1.6-1.7-1.2-3-2.3-4.8-3.1-1.2-.5-2.5-.8-4.4-.8V9.3c1.9 0 3.2-.3 4.4-.8 1.7-.7 3.1-1.9 4.8-3.1.8-.6 1.8-1.2 2.9-1.6 1-.4 2.2-.7 3.4-.7V.4l8.5 5-8.5 4.9V7.1c-1.1.1-1.9.3-2.7.7-.7.3-1.4.8-2.1 1.4-1 .7-2.1 1.6-3.5 2.3 1.4.8 2.5 1.6 3.5 2.3.8.6 1.4 1 2.1 1.4.8.5 1.6.7 2.7.8z',
viewBox: '0 0 24 24',
},
'ot-end': {
path:
'M18.334 15V5H16.6673V15H18.334ZM6.66732 15L7.85482 13.8333L4.85482 10.8333H15.0007V9.16667H4.85482L7.83399 6.16667L6.66732 5L1.66732 10L6.66732 15Z',
viewBox: '0 0 20 20',
},
'ot-file': {
path:
'M20.907 0H3.803C3.334.044 3 .356 3 .822c0 1.822.022 3.645.022 5.467v11.355c0 1.823-.022 3.645-.022 5.467 0 .467.334.8.803.822H7.37c2.051 0 3.88.023 6.199 0 .736 0 1.383-.289 1.918-.777.535-.49 1.048-.956 1.538-1.49a201.554 201.554 0 0 0 2.989-3.177c.379-.4.713-.822 1.025-1.267a3.17 3.17 0 0 0 .58-1.844c.045-4.867.045-9.711.067-14.578.022-.444-.312-.778-.78-.8zm-2.074 16.444c-1.115.312-2.275.312-3.434.334-.424 0-.647.155-.736.555-.045.2-.023.867-.023 1.09-.066 1-.044 1.6-.178 2.6-.134.866-.624 1.51-1.762 1.488-2.586-.022-8.005 0-8.161 0V1.556h15.61v13.222c.022 1-.536 1.466-1.316 1.666z',
Expand Down Expand Up @@ -448,11 +458,21 @@ export const ICON_DATA_BY_NAME = {
'M7.8 2.4v10.3H3.4V2.4h4.4zM5.6 21.5L.4 12.7h10.3l-5.1 8.8zm10.5.1V11.2h4.4v10.4h-4.4zm2.3-19.2l5.2 8.8H13.2l5.2-8.8z',
viewBox: '0 0 24 24',
},
'ot-move': {
path:
'M10.303 19.7735L7.19432 16.6648L8.01273 15.8464L9.72551 17.5591L9.72551 12.3572H10.8829L10.8829 17.5567L12.5933 15.8464L13.4117 16.6648L10.303 19.7735Z M8.02171 9.49601L2.82221 9.49601L4.53256 7.78566L3.71415 6.96725L0.605469 10.0759L3.71415 13.1846L4.53256 12.3662L2.81978 10.6534L8.02171 10.6534V9.49601Z M9.66329 7.92348L9.66329 2.65493L7.88357 4.43465L7.06516 3.61624L10.1738 0.507561L13.2825 3.61624L12.4641 4.43465L10.6818 2.65236L10.6818 7.92348L9.66329 7.92348Z M12.4561 10.7853L17.6556 10.7853L15.9449 12.496L16.7633 13.3144L19.872 10.2057L16.7633 7.09706L15.9449 7.91547L17.6574 9.62792H12.4561V10.7853Z',
viewBox: '0 0 20 20',
},
'ot-run': {
path:
'M18.83 11.58V1.89a.6.6 0 0 0-.61-.62H5a.64.64 0 0 0-.62.64v17.34a.62.62 0 0 0 .62.64h5.45a6.06 6.06 0 1 0 8.41-8.31zm-9.36 5.09a6 6 0 0 0 .4 2.1H5.54V2.48h12.14V11a6 6 0 0 0-8.2 5.66zm4.61 2.81v-5.64l3.72 2.76z',
viewBox: '0 0 24 24',
},
'ot-start': {
path:
'M1.66602 15V5H3.33268V15H1.66602ZM13.3327 15L12.1452 13.8333L15.1452 10.8333H4.99935V9.16667H15.1452L12.166 6.16667L13.3327 5L18.3327 10L13.3327 15Z',
viewBox: '0 0 20 20',
},
'ot-spinner': {
path:
'M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z',
Expand Down Expand Up @@ -687,6 +707,11 @@ export const ICON_DATA_BY_NAME = {
'M10.8307 8.3335L1.66406 31.6668H4.78906L7.16406 25.4168H17.8307L20.2057 31.6668H23.3307L14.1641 8.3335H10.8307ZM16.8307 22.7502H8.16406L12.4141 11.4585H12.5807L16.8307 22.7502ZM30.1577 16.6668L24.1641 31.6668H26.2073L27.7602 27.649H34.7346L36.2875 31.6668H38.3307L32.3371 16.6668H30.1577ZM34.0807 25.9347H28.4141L31.1929 18.6758H31.3019L34.0807 25.9347Z',
viewBox: '0 0 40 40',
},
transfer: {
path:
'M3.33333 12.1673C3.33333 10.5423 3.89931 9.16384 5.03125 8.0319C6.16319 6.89996 7.54167 6.33398 9.16667 6.33398C10.6528 6.33398 11.9479 6.82357 13.0521 7.80273C14.1562 8.7819 14.7917 10.0076 14.9583 11.4798L16.3333 10.1673L17.5 11.334L14.1667 14.6673L10.8333 11.334L12.0208 10.1673L13.25 11.3965C13.0556 10.4104 12.5764 9.59787 11.8125 8.95898C11.0486 8.3201 10.1667 8.00065 9.16667 8.00065C8.01389 8.00065 7.03125 8.4069 6.21875 9.2194C5.40625 10.0319 5 11.0145 5 12.1673L5 14.6673L3.33333 14.6673L3.33333 12.1673Z',
viewBox: '0 0 20 20',
},
trash: {
path:
'M13.7708 41.3181C12.9404 41.3181 12.2346 41.0264 11.6533 40.4431C11.0721 39.8598 10.7815 39.1514 10.7815 38.3181V9.81812H8.73877V6.81812H18.1052V5.31812H31.2582V6.81812H40.6246V9.81812H38.5819V38.3181C38.5819 39.1181 38.283 39.8181 37.6852 40.4181C37.0873 41.0181 36.3898 41.3181 35.5926 41.3181H13.7708ZM35.5926 9.81812H13.7708V38.3181H35.5926V9.81812ZM19.0519 34.0181H22.0412V14.0681H19.0519V34.0181ZM27.3223 34.0181H30.3116V14.0681H27.3223V34.0181ZM13.7708 9.81812V38.3181V9.81812Z',
Expand Down
10 changes: 5 additions & 5 deletions protocol-designer/src/form-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -146,11 +146,11 @@ export type StepType =

export const stepIconsByType: Record<StepType, IconName> = {
comment: 'comment',
moveLabware: 'move-xy',
moveLiquid: 'ot-transfer',
mix: 'ot-mix',
pause: 'pause',
manualIntervention: 'pause',
moveLabware: 'ot-move',
moveLiquid: 'transfer',
mix: 'mix',
pause: 'pause-circle',
manualIntervention: 'pause-circle',
magnet: 'ot-magnet-v2',
temperature: 'ot-temperature-v2',
thermocycler: 'ot-thermocycler',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export function TerminalItemStep(props: TerminalItemStepProps): JSX.Element {
<StepContainer
{...{
stepId: `TerminalItem_${id}`,
iconName: 'arrow-right',
iconName: title === 'Starting deck state' ? 'ot-start' : 'ot-end',
hovered,
selected,
title,
Expand Down

0 comments on commit 31fd73e

Please sign in to comment.