Update CheckoutAction and CheckoutActions to have status-specific labels

[machikoyasuda]

Type: minor

Describe the bug A checkout action's label changes as the status changes:

- "Enter shipping address” when you’re on that step, and then shortened to “Shipping address” for the collapsed step
- "Choose a shipping method” -> “2. Shipping method"

To Reproduce Currently, checkout action labels are static and do not change with status change.

Expected behavior A user should be able to input 2 labels, a instruction label and a post-success label. The component should know when to show which label.

[aldeed]

Here are some more specific implementation guidelines:

• In CheckoutAction component, remove the label prop and replace with three props: activeLabel, completeLabel, incompleteLabel
• Also in CheckoutAction component, in each of the render*Action functions, replace props.label use with the matching specific label prop
• In CheckoutActions component, update actions shape to have the three separate labels instead of just label. In renderAction, pass all of those to CheckoutAction rather than label.
• Also in CheckoutActions component, we currently key by label. Instead, add a new id prop on the actions shape and key by that. This means updating getCurrentActionByLabel and currentActions.find by label, etc.
• Update the CheckoutActions markdown to have separate labels to show that it works

[rc-publisher]

:tada: This issue has been resolved in version 0.41.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: