chore: update component status page (#2023)

* chore: update toast component status page

* chore: update

* chore: update meta attribs for toast

* Create angry-turtles-mate.md

* chore: update component status with platform column

Author: anuraghazra

.changeset/angry-turtles-mate.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+refactor(blade): add meta attributes to Toast

packages/blade/src/components/Toast/Toast.stories.tsx

@@ -13,6 +13,7 @@ import { Sandbox } from '~utils/storybook/Sandbox';
 import { Box } from '~components/Box';
 import { Button } from '~components/Button';
 import { Heading, Text } from '~components/Typography';
+import { List, ListItem, ListItemCode } from '~components/List';
 
 const Page = (): React.ReactElement => {
   return (
@@ -93,8 +94,21 @@ const BasicToastTemplate: StoryFn<ToastProps> = (args) => {
 
   return (
     <Box height="80vh">
-      <Text marginBottom="spacing.3" color="surface.text.gray.subtle">
-        After changing storybook controls, press the show "toast button" to see changes
+      <Text size="medium" marginBottom="spacing.4">
+        To start using toast simply:
+      </Text>
+      <List>
+        <ListItem>
+          Import and render the <ListItemCode>ToastContainer</ListItemCode> component from blade at
+          the root of your project
+        </ListItem>
+        <ListItem>
+          Utilize the methods exposed via <ListItemCode>useToast()</ListItemCode> hook to
+          show/dismiss toasts
+        </ListItem>
+      </List>
+      <Text marginY="spacing.4" color="surface.text.gray.muted">
+        After changing storybook controls, press the "show toast" button to see changes
       </Text>
       <Button
         onClick={() => {

packages/blade/src/components/Toast/Toast.web.tsx

@@ -20,6 +20,7 @@ import { Text } from '~components/Typography';
 import { castWebType, makeMotionTime, useTheme } from '~utils';
 import getIn from '~utils/lodashButBetter/get';
 import { makeAccessible } from '~utils/makeAccessible';
+import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 
 const iconMap = {
   positive: CheckCircleIcon,
@@ -119,6 +120,7 @@ const Toast = ({
   return (
     <AnimatedFade
       {...makeAccessible({ role: 'status', liveRegion: 'polite' })}
+      {...metaAttribute({ name: MetaConstants.Toast })}
       toastBorderColor={getIn(
         theme.colors,
         isPromotional ? 'surface.border.gray.muted' : borderColorMap[color],

packages/blade/src/components/Toast/ToastContainer.web.tsx

@@ -19,7 +19,7 @@ import { makeMotionTime, makeSize, useTheme } from '~utils';
 import BaseBox from '~components/Box/BaseBox';
 import type { Theme } from '~components/BladeProvider';
 import { useIsMobile } from '~utils/useIsMobile';
-import { metaAttribute } from '~utils/metaAttribute';
+import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 
 type CalculateYPositionProps = {
   toast: Toast;
@@ -230,6 +230,7 @@ const Toaster: React.FC<ToasterProps> = ({
       maxWidth={makeSize(TOAST_MAX_WIDTH)}
       pointerEvents="none"
       className={containerClassName}
+      {...metaAttribute({ name: MetaConstants.ToastContainer })}
     >
       {/*
        * Mouseover container,

packages/blade/src/utils/metaAttribute/metaConstants.ts

@@ -42,6 +42,8 @@ export const MetaConstants = {
   PasswordInput: 'password-input',
   TextArea: 'textarea',
   TextInput: 'textinput',
+  Toast: 'toast',
+  ToastContainer: 'toast-container',
   ProgressBar: 'progress-bar',
   Radio: 'radio',
   RadioGroup: 'radio-group',

packages/blade/src/utils/storybook/ComponentStatusTable.tsx

@@ -6,6 +6,7 @@ import type { ComponentStatuses } from './componentStatusData';
 import { componentData } from './componentStatusData';
 import type { IconComponent } from '~components/Icons';
 import {
+  CloseIcon,
   StampIcon,
   EditIcon,
   CheckIcon,
@@ -169,19 +170,29 @@ const ComponentStatusTable = (): React.ReactElement => {
               <th align="left">
                 <Text weight="semibold">Component</Text>
               </th>
-              <th align="left">
+              <th style={{ width: '30%' }} align="right">
                 <Text weight="semibold">Status</Text>
               </th>
               <th style={{ width: '50%' }} align="left">
                 <Text weight="semibold">Description</Text>
               </th>
+              <th style={{ width: '10%' }} align="center">
+                <Text weight="semibold">Web</Text>
+              </th>
+              <th style={{ width: '10%' }} align="center">
+                <Text weight="semibold">RN</Text>
+              </th>
               <th align="right">
                 <Text weight="semibold">Released In</Text>
               </th>
             </tr>
           </thead>
           <tbody>
             {sortedData.map((data) => {
+              const isAvailableOnWeb = data.platform === 'web';
+              const isAvailableOnMobile = data.platform === 'mobile';
+              const isAvailableOnAll = data.platform === 'all';
+
               return (
                 <tr key={data.name}>
                   <td align="left">
@@ -191,14 +202,28 @@ const ComponentStatusTable = (): React.ReactElement => {
                       <Text>{data.name}</Text>
                     )}
                   </td>
-                  <td align="left">
+                  <td align="right">
                     <ComponentStatusBadge status={data.status} />
                   </td>
                   <td align="left">
                     <Text size="medium" color="surface.text.gray.subtle">
                       {data.description}
                     </Text>
                   </td>
+                  <td align="center">
+                    {isAvailableOnWeb || isAvailableOnAll ? (
+                      <CheckIcon color="feedback.icon.positive.intense" />
+                    ) : (
+                      <CloseIcon color="feedback.icon.negative.intense" />
+                    )}
+                  </td>
+                  <td align="center">
+                    {isAvailableOnMobile || isAvailableOnAll ? (
+                      <CheckIcon color="feedback.icon.positive.intense" />
+                    ) : (
+                      <CloseIcon color="feedback.icon.negative.intense" />
+                    )}
+                  </td>
                   <td align="right">
                     <ReleasedInLink version={data.releasedIn} />
                   </td>