Kds 1755/spot illustration migration

[mcwinter07]

Why

Part of the Great Migration

What

• Adds Spot Illustrations to KAIO
• removes deprecated PositiveMale and PositiveFemale Spot illustations
• The non-genered Positive has existed for a while now an is a suitable alternative for either
• Moves Base to subcomponents folder and Spot to a feature folder in preparation for Scene illustrations
  • I've opted for a similar folder structure to Notification

Notes

• Since the illustration will be able to be destructured from the root @kaizen/component package, we may want to create a ticket update naming conventions to be more explicity for our users, ie:

import { Cautionary} from "@kaizen/components"
// alt?
import { CautionarySpotIllustration} from "@kaizen/components"

• Currently no tests since the differences are largely visually and can be best assessed by chromatic. We'll probably need more tests later with Scene given it uses Lotti player

[changeset-bot]

🦋 Changeset detected

Latest commit: f4ab31a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@kaizen/components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mcwinter07]

I've included the stickersheet that has a list of the illustrations since our consumers would not be able to see the hidden stories on prod.

[gyfchong]

I think just to reiterate, put an example of the import statement before the canvas

[mcwinter07]

Good idea, I'll make a quick update to include that example

[mcwinter07]

I feel like there might be a better way here to give these display names instead of just JSX elements, but I decided not to fall down the refactor rabbit hole - best this could be looked at when we revisit the names of these

[mcwinter07]

Originally these had more human readable names, but that doesn't help our consumer know what they will actually be exported as. I was thinking we wouldn't need this and could just use the displayName but that's not actually set for these components so I just went with the more verbose approach of remove the spaces and making sure they're in pascal case / align with the component name

[github-actions]

✨ Here is your branch preview! ✨

• Storybook

Last updated for commit f4ab31a: * update docs example import statement

[gyfchong]

Just check your chromatic snapshots