docs(docs): add documentation for interactive cards

docs/package.json

@@ -25,7 +25,7 @@
     "@fontsource/nunito": "^4.5.0",
     "@fontsource/nunito-sans": "^4.5.0",
     "@fontsource/roboto-mono": "^4.5.0",
-    "@innovaccer/design-system": "2.17.0",
+    "@innovaccer/design-system": "2.22.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@storybook/theming": "^6.3.6",

docs/src/data/components/index.js

@@ -114,6 +114,13 @@ export const data = [
     code: 'Available',
     image: () => <StaticImage src="./images/Inputs.png" alt="Inputs" imgStyle={imgStyle} />,
   },
+  {
+    link: 'interactiveCard/usage/',
+    name: 'Interactive Cards',
+    design: 'Available',
+    code: 'Available',
+    image: () => <StaticImage src="./images/InteractiveCard.png" alt="Inputs" imgStyle={imgStyle} />,
+  },
   {
     link: 'links/usage',
     name: 'Link',

docs/src/data/nav/components.yaml

@@ -69,6 +69,10 @@ menus:
     link: /components/inlineEditableFields/usage/
     hideInMobile: true
 
+  - label: Interactive Cards
+    link: /components/interactiveCard/usage/
+    hideInMobile: true
+
   - label: Inputs
     link: /components/inputs/usage/
 

docs/src/pages/components/interactiveCard/code.mdx

@@ -0,0 +1,15 @@
+### Live Demos
+
+<br/>
+
+#### Action Card
+
+<Preview name="layout-action-card-all--all" />
+
+<PreviewWithPropTable name="layout-action-card-all--all" />
+
+#### Selection Card
+
+<Preview name="layout-selection-card-all--all" />
+
+<PreviewWithPropTable name="layout-selection-card-all--all" />

docs/src/pages/components/interactiveCard/usage.mdx

@@ -0,0 +1,167 @@
+---
+title: Interactive cards
+description: Interactive cards are used for actions like navigation and selection when our options need to be descriptive.
+tabs: ['Usage',  'Code']
+showMobile: true
+keywords: ['card', 'action card', 'selection card', 'interactive card']
+---
+
+Interactive cards are flexible and make for an easily scannable way to present options.
+
+### Types
+
+#### Action cards
+
+Action cards are used for navigation where description is important and the design needs to look neither overwhelming nor underwhelming. They are single select.
+
+<br />
+
+![Action card](./images/Action-card.png)
+
+<Caption>Action card</Caption>
+
+#### Selection cards
+
+Selection cards are used for selection. They can be single-select or multi-select.
+
+<br />
+
+![Selection card](./images/Selection-card.png)
+
+<Caption>Selection card</Caption>
+
+### States
+
+Interactive cards come in 5 states: default, hover, focus, disabled, and active.
+
+#### Action cards
+
+<br />
+
+![Various states of action card](./images/Action-card-states.png)
+
+<Caption>Various states of action card</Caption>
+
+#### Selection cards
+
+<br />
+
+![Various states of selection card](./images/Selection-card-states.png)
+
+<Caption>Various states of selection card</Caption>
+
+### Structure
+
+#### Content alignment
+
+##### Center
+
+![Center aligned content](./images/Center-aligned-content.png)
+<Caption>Center aligned content</Caption>
+
+<br/>
+
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:50%; text-align: left;">Property</th>
+      <th style="width:50%; text-align: left;">Value(s)</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Corner radius</td>
+      <td>4 px</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Padding (top, right, bottom, left)</td>
+      <td>16 px, 16 px, 16 px, 16 px</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Spacing between content and icon</td>
+      <td>8 px </td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+##### Left
+
+![Left aligned content](./images/Left-aligned-content.png)
+<Caption>Left aligned content</Caption>
+
+<br/>
+
+<table style="width: 100%">
+  <tbody>
+    <tr>
+      <th style="width:50%; text-align: left;">Property</th>
+      <th style="width:50%; text-align: left;">Value(s)</th>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Corner radius</td>
+      <td>4 px</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Padding (top, right, bottom, left)</td>
+      <td>16 px, 16 px, 16 px, 12 px</td>
+    </tr>
+    <tr style="vertical-align: top">
+      <td>Spacing between content and icon</td>
+      <td>12 px </td>
+    </tr>
+  </tbody>
+</table>
+
+<br />
+
+### Usage
+
+#### Interactive cards vs Chips
+
+Interactive cards are used for descriptive and well organized options, while chips are a space efficient way to display simpler options.
+
+![ Interactive cards vs Chips](./images/Interactive-cards-vs-Chips.png)
+<Caption> Interactive cards vs Chips</Caption>
+
+<br/>
+
+#### Interactive cards vs Radio/checkbox
+
+Interactive cards are used when you need to categorize your options well using strong visual representation without making it overwhelming, while radio/checkbox is used for simpler layouts to save space.
+
+![Interactive cards vs Radio/checkbox](./images/Interactive-cards-vs-radio.png)
+<Caption>Interactive cards vs Radio/checkbox</Caption>
+
+#### Content alignment
+
+##### Left
+
+It is recommended to align content of interactive cards to the left when a long description is used, to give more visual room to read each line.
+
+![Left content alignment](./images/Left-content-alignment.png)
+<Caption>Left content alignment</Caption>
+
+##### Center
+
+It is recommended to align the content of interactive cards to the center when the icon is sufficient to convey info or the description is short.
+
+![Center content alignment](./images/Center-content-alignment.png)
+<Caption>Center content alignment</Caption>
+
+<br/>
+
+#### Recommended spacing between cards
+
+It is recommended to give a spacing of 12px between cards when stacking them horizontally or vertically.
+
+![Recommended spacing between cards](./images/Spacing-between-cards.png)
+<Caption>Recommended spacing between cards</Caption>
+
+<br/>
+
+#### Custom interactive cards
+
+Interactive cards can have custom content inside it, but the states of the card with custom content must remain coherent with the default interactive cards.
+
+![Custom interactive cards](./images/Custom-interactive-cards.png)
+<Caption>Custom interactive cards</Caption>

docs/static/sb/components-chat-chat-message--chat-message.json

@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       }
     },

docs/static/sb/others-design-tokens-colors--colors.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-design-tokens-miscellaneous--miscellaneous.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-design-tokens-spacing--spacing.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-design-tokens-transitions--transitions.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-design-tokens-typography--typography.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-layout-all--all.json

@@ -619,7 +619,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       }
     },

docs/static/sb/others-styles-align--align.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-animation--animation.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-background--background.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-border--border.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-display--display.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-flex--flex.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-miscellaneous--miscellaneous.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-overflow--overflow.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-position--position.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-sizing--sizing.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-styles-spacing--spacing.json

@@ -30,7 +30,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": null

docs/static/sb/others-utilities-outsideclick-all--all.json

@@ -74,7 +74,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {

docs/static/sb/patterns-datepicker-date-and-time-picker--date-and-time-picker.json

@@ -29,7 +29,7 @@
         "inputBorder": "silver",
         "inputTextColor": "black",
         "inputBorderRadius": 4,
-        "brandTitle": "Masala Design System v2.16.1-1",
+        "brandTitle": "Masala Design System v2.22.0",
         "brandUrl": "https://github.com/innovaccer/design-system/"
       },
       "docPage": {