added deprecation message and comment in ui/check-box (#20226)

* added deprecation message and comment in ui/check-box

* Small adjustments to component name and story docs

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>

ui/components/ui/check-box/README.mdx

@@ -2,12 +2,12 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 
 import CheckBox from '.';
 
-# Checkbox
+# Check Box(Deprecated)
 
 A small interactive box that can be toggled by the user to indicate an affirmative or negative choice.
 
 <Canvas>
-  <Story id="components-ui-check-box--default-story" />
+  <Story id="components-ui-check-box-deprecated--default-story" />
 </Canvas>
 
 ## Props

ui/components/ui/check-box/check-box.component.js

@@ -10,6 +10,15 @@ const CHECKBOX_STATE = {
 
 export const { CHECKED, INDETERMINATE, UNCHECKED } = CHECKBOX_STATE;
 
+/**
+ * @deprecated The `<CheckBox />` component has been deprecated in favor of the new `<Checkbox>` component from the component-library.
+ * Please update your code to use the new `<Checkbox>` component instead, which can be found at ui/components/component-library/checkbox/checkbox.tsx.
+ * You can find documentation for the new Checkbox component in the MetaMask Storybook:
+ * {@link https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-checkbox--docs}
+ * If you would like to help with the replacement of the old CheckBox component, please submit a pull request against this GitHub issue:
+ * {@link https://github.com/MetaMask/metamask-extension/issues/20163}
+ */
+
 const CheckBox = ({
   className,
   disabled,

ui/components/ui/check-box/check-box.stories.js

@@ -15,7 +15,7 @@ const checkboxOptions = {
 };
 
 export default {
-  title: 'Components/UI/Check Box',
+  title: 'Components/UI/Check Box(Deprecated)',
 
   component: CheckBox,
   parameters: {