@innovaccer/design-system 2.13.4-2 → 2.13.4-3

package/core/components/atoms/dropdown/__stories__/Options.tsx

@@ -1,12 +1,37 @@
 import { getSearchedOptions } from '../utility';
 
-export const dropdownOptions = [];
-export const preSelectedOptions = [];
-export const storyOptions = [];
-export const disabledStoryOptions = [];
-export const iconOptions = [];
-export const subInfoOptions = [];
-export const iconWithSubinfoOptions = [];
+type OptionType = 'DEFAULT' | 'WITH_ICON' | 'WITH_META' | 'ICON_WITH_META';
+
+interface OptionSchema extends Record<string, any> {
+  label: string;
+  value: React.ReactText;
+  icon: string;
+  subInfo: string;
+  optionType?: OptionType;
+  selected?: boolean;
+  disabled?: boolean;
+  group?: string;
+}
+
+interface SelectedOptionSchema extends Record<string, any> {
+  label: string;
+  value: React.ReactText;
+  selected?: boolean;
+}
+
+interface fetchOptionSchema {
+  searchTerm?: string | undefined;
+  count: number;
+  options: OptionSchema[];
+}
+
+export const dropdownOptions: OptionSchema[] = [];
+export const preSelectedOptions: SelectedOptionSchema[] = [];
+export const storyOptions: OptionSchema[] = [];
+export const disabledStoryOptions: OptionSchema[] = [];
+export const iconOptions: OptionSchema[] = [];
+export const subInfoOptions: OptionSchema[] = [];
+export const iconWithSubinfoOptions: OptionSchema[] = [];
 
 for (let i = 1; i <= 10; i++) {
   storyOptions.push({
@@ -84,7 +109,7 @@ for (let i = 41; i <= 100; i++) {
   });
 }
 
-export const selectedStoryOptions = [];
+export const selectedStoryOptions: SelectedOptionSchema[] = [];
 
 for (let i = 1; i <= 10; i++) {
   selectedStoryOptions.push({
@@ -94,7 +119,7 @@ for (let i = 1; i <= 10; i++) {
   });
 }
 
-export const multiSelectedStoryOptions = [];
+export const multiSelectedStoryOptions: SelectedOptionSchema[] = [];
 
 for (let i = 1; i <= 10; i++) {
   multiSelectedStoryOptions.push({
@@ -155,9 +180,9 @@ export const iconItems = [
   },
 ];
 
-export const fetchOptions = (searchTerm) => {
+export const fetchOptions = (searchTerm: string) => {
   const searchedOptions = searchTerm ? getSearchedOptions(dropdownOptions, searchTerm) : dropdownOptions;
-  return new Promise((resolve) => {
+  return new Promise<fetchOptionSchema>((resolve) => {
     window.setTimeout(() => {
       resolve({
         searchTerm,

package/core/components/atoms/dropdown/__stories__/variants/CustomOption.story.jsx

@@ -7,7 +7,7 @@ import { Uncontrolled, Controlled } from '../_common_/types';
 import { storyOptions } from '../Options';
 
 // CSF format story
-export const cutsomOption = () => {
+export const customOption = () => {
   const optionStyle = {
     paddingRight: 12,
     paddingLeft: 12,
@@ -110,7 +110,7 @@ const customCode = `() => {
 }`;
 
 export default {
-  title: 'Components/Dropdown/Variants/Cutsom Option',
+  title: 'Components/Dropdown/Variants/Custom Option',
   component: Dropdown,
   parameters: {
     docs: {

package/core/components/atoms/dropdown/__tests__/Option.test.tsx

@@ -121,7 +121,7 @@ describe('renders option with meta list', () => {
 
 describe('renders active option', () => {
   const dropdownOptions = [
-    { label: 'Below 18', subInfo: 'People bewlow 18 years old', value: 'below_18' },
+    { label: 'Below 18', subInfo: 'People below 18 years old', value: 'below_18' },
     { label: '19 - 35', subInfo: 'People 19-35 years old', value: '19-35' },
     { label: '36 - 55', subInfo: 'People 36-55 years old', value: '36-55' },
     { label: '56 and above', subInfo: 'People above 56 years old', value: '56_above' },

package/core/components/organisms/grid/__stories__/_common_/nestedRowRenderer.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { List } from '@/index';
+import { NestedRowProps } from '../../GridNestedRow';
 
-export const nestedRowRenderer = (props) => {
+export const nestedRowRenderer = (props: NestedRowProps) => {
   const { schema, data, loading } = props;
 
   return <List loading={loading} schema={schema} data={[data]} nestedRows={true} />;

package/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.jsx

@@ -88,7 +88,7 @@ export const nestedTableWithNestedCards = () => {
   ];
 
   const nestedRowRenderer = (props) => (
-    <CardSubdued className="ml-7 mb-4 mt-3 mr-4">
+    <CardSubdued className="mb-4 mt-3 mr-4" style={{ marginLeft: '40px' }}>
       <div className="d-flex flex-row">
         <div style={{ width: '17%' }}>
           <Text weight="medium">Type</Text>
@@ -238,7 +238,7 @@ const customCode = `() => {
       return false;
     }
     return (
-      <CardSubdued className="ml-7 mb-4 mt-3 mr-4">
+      <CardSubdued className="mb-4 mt-3 mr-4" style={{ marginLeft: '40px' }}>
         <div className="d-flex flex-row">
           <div style={{ width: '17%' }}>
             <Text weight="medium">Type</Text>

package/core/components/organisms/table/__stories__/variants/nestedRows.story.jsx

@@ -143,11 +143,14 @@ const customCode = `
       return false;
     }
     return (
-      <List
-        loading={loading}
-        schema={schema}
-        data={[data]}
-      />
+      <div>
+        <Divider className='ml-5' />
+        <List
+          loading={loading}
+          schema={schema}
+          data={[data]}
+        />
+      </div>
     );
   }
 

package/css/dist/index.css

@@ -2922,8 +2922,16 @@ body {
   cursor: pointer;
 }
 
+.Grid-nestedRow .Grid-rowWrapper {
+  border-bottom: 0;
+}
+
+.Grid-nestedRow .Grid-cell:first-child {
+  padding-left: calc(var(--spacing-3) + var(--spacing));
+}
+
 .Grid-nestedRowPlaceholder {
-  width: 20px;
+  width: var(--spacing-xl);
   margin-right: var(--spacing-l);
 }
 
@@ -3134,6 +3142,15 @@ body {
   overflow: hidden;
 }
 
+.GridCell--statusHint .StatusHint {
+  overflow: hidden;
+}
+
+.GridCell--statusHint .StatusHint .Text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .GridCell--avatar .Avatar {
   margin: 0;
 }