CardCheckbox and CardRadioGroup Components (#2692)

* Setup card2

* Mark legacy card as a deprecated

* Extract clickable component

* Add basic behaviour

* Change size

* Change naming convention for card

* Add radio variant for API evalation

* Add card checkbox template

* Add checkbox for testing

* Add checkbox indicator

* Use default checkbox indicator if not provided

* Add checkbox indicator

* Add prop types

* Remove unnecessaary comment

* Remove unnecesasry type import

* Remove indicator input from dom tree

* Temp change class name for card

* Add slots positions

* Change story

* Add outline and solid variants

* Add css colors

* Add comment

* Override checkbox color

* Add bg color to card

* Add dev stories to card checkbox

* Remove user select

* Add all variants to states table

* Add story  with indicator position

* Add states

* add disabled data state

* Override checkbox check color

* Change story table

* Handle indicator color for disabled and invalid

* Change indicator position

* Add focus style

* Add js docs

* Add basic tests

* Fix type

* Change doc

* Add focus state

* Add focus state

* Use box shadow instead of outline

* Remove unnecessary focus part

* Focus

* Add animated icons

* Add animated examples

* Add more cards

* Update story

* Change default story

* Remove unnecessary packages

* Fix yarn.lock

* Add ios event to press state

* Add gap to stories

* Change label structure

* Update physics animation

* Add focus

* Add focus on keyboard only

* Remove unecessary css variables

* Add more state to atributes

* Remove redundant style

* Fix hovering over invalid checkbox

* Sync hover animations

* Add card radio

* Add stories for radio

* Change indicator default position

* Change checkbox bg color

* Add shade hex color function

* Change section name

* Customise colors

* Rename components

* Refactor components naming

* Fix colors in radio indicator

* Adjust docs

* Fix radio isPristine check

* Revert "Fix radio isPristine check"

This reverts commit 4393a76.

* Use fake borders on solid variant

* Add check on hover style

* Add border colors

* Adjust ligtht and dark colors

* Remove unused var

* Remove tap highlight from ios

* Fix stories

* Add card radio story

* Add card radio group

* Change default story to CardRadiogroup

* Refactor Card Radio to rely on Card Radio Group

* Add jsdocs

* Import required type

* Add direction

* Pass required props to indicators

* Fix type err

* Clean up code

* Fix types and tests

* Change error message

* Handle indeterminate state

* Fix card radio styles and adjust properties mapping

* Add state dark to radio

* Fix radio circle inside color

* Add radio group tests

* Fix test

* Fix tests

* Fix tests

* Add card radio tests

* Improve Card radio test

* Fix card radio tests

* Add more tests to card radio

* Remove Card export only component

* Add chromatic

* Change folders

* Add export

* Revert "Change folders"

This reverts commit a9a7320.

* Change name

* Add states light to checkbox

* Use compound components naming

* Add subcomponents

* Fix ts

* Add custom images

* Add hacky fix to border  radius artifact

* Remove clip-path

* Change border

* Add accessibility docs do card checkbox

* Add a11y rules to card radio

* Add tests to card checkbox

* Add a11y docs to cardradiogroup

* Add tests to radio, fix checkbox and radio

* Remove utils

* Add focus state configuration

* Add prop documentation

* Fix direction in passing to flex

* Add customisation section in mdx

* Adjust focus color

* Fox controlled state in card checkbox

* Adjust card checkbox stories

* Add hover stories

* Check chromatic story

* Add chromatic stories

* Improve stories in card radio

* Add def state

* Review

* Fix comment

* Improve animated story for radio

* Use padding box for bg clip

* Fix story wrap in radio group

* Fix card radio story

* Use outer background instead of border

* Add bg and border positon

* Revert "Add bg and border positon"

This reverts commit 6d62720.

* Revert "Use outer background instead of border"

This reverts commit 84777ae.

* Use outer background instead of border

* Code review

* Fix story

* Code review

* Code review

* Code review

* Fix clicking on border

Author: coderitual

.storybook/public/animations/mathematics_animated_subject_icon.riv

@@ -10,6 +10,7 @@
     {"componentName": "HeaderContent", "className": "sg-header__content"},
     {"componentName": "HeaderLeft", "className": "sg-header__left"},
     {"componentName": "HeaderMiddle", "className": "sg-header__middle"},
-    {"componentName": "HeaderRight", "className": "sg-header__right"}
+    {"componentName": "HeaderRight", "className": "sg-header__right"},
+    {"componentName": "Card", "className": "sg-card"}
   ]
 }

.storybook/public/animations/physics_animated_subject_icon.riv

@@ -54,6 +54,7 @@
     "@hot-loader/react-dom": "^16.8.6",
     "@khanacademy/flow-to-ts": "^0.5.2",
     "@microsoft/api-extractor": "^7.33.8",
+    "@rive-app/react-canvas": "^3.0.38",
     "@storybook/addon-a11y": "^6.5.13",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-docs": "^6.5.13",

.storybook/public/images/avatar_10.png

@@ -0,0 +1,9 @@
+import * as CardCheckbox from './CardCheckbox.stories.mdx';
+import {generateChromaticStory} from '../../chromatic/utils';
+
+export const Default = generateChromaticStory(CardCheckbox, {
+  storiesToHover: ['statesDark', 'statesLight'],
+});
+const {includeStories, ...meta} = CardCheckbox.default;
+
+export default meta;