Merge pull request #2458 from anuradha9712/v4.x

V4.x
innovaccer · Dec 17, 2024 · 8ca0e16 · 8ca0e16
2 parents 7e5860c + ad05656
commit 8ca0e16
Show file tree

Hide file tree

Showing 13 changed files with 221 additions and 132 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -16,6 +16,20 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-knobs',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+          postcssOptions: {
+            plugins: [
+              require('autoprefixer'),
+              require('postcss-color-mod-function'),
+            ],
+          },
+        },
+      },
+    },
     {
       name: 'storybook-css-modules',
       options: {

diff --git a/css/gulpfile.js b/css/gulpfile.js
@@ -5,7 +5,6 @@ const sourcemaps = require('gulp-sourcemaps');
 const concat = require('gulp-concat');
 const postcssColorMod = require('postcss-color-mod-function');
 const cleaner = require('gulp-clean');
-const path = require('path');
 
 const materialIcons = './material-design-icons/iconfont/material-icons.css';
 const materialFont = './material-design-icons/iconfont/*.{ttf,otf,woff2}';
@@ -18,7 +17,6 @@ const sources = [
   './src/components/*.css',
   './src/ai-components/*.css',
   './src/utils/*.css',
-  path.join(__dirname, '../core/components/**/*.css'),
 ];
 
 function clean() {

diff --git a/examples/esm-ts/src/Page.tsx b/examples/esm-ts/src/Page.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Column, PageHeader, Button, Tabs, Card, Table, ButtonProps } from '@innovaccer/design-system';
+import { Row, Column, PageHeader, Button, Tabs, Card, Table, ButtonProps, Message } from '@innovaccer/design-system';
 
 // You can now use the Button component and its props in your React components
 const MyComponent: React.FC = () => {
@@ -156,6 +156,12 @@ const UserManagementTable: React.FC = () => {
               '<button data-test="DesignSystem-Button" class="Button Button--regular Button--alert Button--iconAlign-left" tabindex="0" aria-label="Delete"><span class="Button-text">Delete</span></button>',
           }}
         ></div>
+
+        <Message
+          appearance="alert"
+          className="w-50"
+          description="Could not start verification. Please try again later."
+        />
       </Column>
     </Row>
   );

diff --git a/examples/esm-umd-ts/index.html b/examples/esm-umd-ts/index.html
@@ -16,7 +16,7 @@
     <!-- Don't use this in production: -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- <script src="index.js"></script> -->
-    <script src="https://unpkg.com/@innovaccer/design-system@2.36.2/dist/index.umd.js"></script>
+    <!-- <script src="https://unpkg.com/@innovaccer/design-system@2.36.2/dist/index.umd.js"></script> -->
   </head>
 
   <body>
@@ -26,7 +26,7 @@
     <div id="umd"></div>
 
     <script type="text/babel">
-      const { Icon, GridCell, Button, Card, Table } = InnovaccerDesignSystem;
+      const { Icon, GridCell, Button, Card, Table, Message } = InnovaccerDesignSystem;
 
       const MyTable = () => {
         const data = [
@@ -918,6 +918,11 @@
         return (
           <div className="p-8 vh-100 bg-secondary-lighter">
             <MyTable />
+            <Message
+              appearance="alert"
+              className="w-50"
+              description="Could not start verification. Please try again later."
+            />
           </div>
         );
       }

diff --git a/examples/esm-umd-ts/src/Page.tsx b/examples/esm-umd-ts/src/Page.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import { Row, Column, PageHeader, Button, Tabs, Card, Table, ButtonProps } from '@innovaccer/design-system';
-
-
-
-
-
+import { Row, Column, PageHeader, Button, Tabs, Card, Table, ButtonProps, Message } from '@innovaccer/design-system';
 
 // You can now use the Button component and its props in your React components
 const MyComponent: React.FC = () => {
@@ -22,8 +17,6 @@ const MyComponent: React.FC = () => {
   );
 };
 
-
-
 const UserManagementTable: React.FC = () => {
   const tabs = [
     {
@@ -163,6 +156,11 @@ const UserManagementTable: React.FC = () => {
               '<button data-test="DesignSystem-Button" class="Button Button--regular Button--alert Button--iconAlign-left" tabindex="0" aria-label="Delete"><span class="Button-text">Delete</span></button>',
           }}
         ></div>
+        <Message
+          appearance="alert"
+          className="w-50"
+          description="Could not start verification. Please try again later."
+        />
       </Column>
     </Row>
   );

diff --git a/examples/umd/index.css b/examples/umd/index.css
diff --git a/examples/umd/index.css.map b/examples/umd/index.css.map
diff --git a/examples/umd/index.html b/examples/umd/index.html
@@ -22,8 +22,8 @@
     <div id="root"></div>
 
     <script type="text/babel">
-      console.log('InnovaccerDesignSystem', InnovaccerDesignSystem)
-      const { Icon, GridCell, Table } = InnovaccerDesignSystem;
+      console.log('InnovaccerDesignSystem', InnovaccerDesignSystem);
+      const { Icon, GridCell, Table, Message } = InnovaccerDesignSystem;
 
       const MyTable = () => {
         const data = [
@@ -874,38 +874,38 @@
 
         return (
           <div className="vh-75">
-              <Table
-                error={error}
-                data={data}
-                schema={schema}
-                withHeader={true}
-                uniqueColumnName="email"
-                headerOptions={{
-                  withSearch: true,
-                  globalActionRenderer: globalActionTrigger,
-                  allowSelectAll: true,
-                }}
-                onSearch={(currData, searchTerm) => {
-                  console.log('onsearch called', searchTerm);
-                  setError(!error);
-                  return currData.filter(
-                    (d) =>
-                      d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
-                      d.lastName.toLowerCase().match(searchTerm.toLowerCase())
-                  );
-                }}
-                withCheckbox={true}
-                onSelect={(rowIndex, selected, selectedList, selectAll) =>
-                  console.log(
-                    `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
-                      selectedList
-                    )} selectAll: ${selectAll}`
-                  )
-                }
-                withPagination={true}
-                pageSize={50}
-                onPageChange={(newPage) => console.log(`on-page-change:- ${newPage}`)}
-              />
+            <Table
+              error={error}
+              data={data}
+              schema={schema}
+              withHeader={true}
+              uniqueColumnName="email"
+              headerOptions={{
+                withSearch: true,
+                globalActionRenderer: globalActionTrigger,
+                allowSelectAll: true,
+              }}
+              onSearch={(currData, searchTerm) => {
+                console.log('onsearch called', searchTerm);
+                setError(!error);
+                return currData.filter(
+                  (d) =>
+                    d.firstName.toLowerCase().match(searchTerm.toLowerCase()) ||
+                    d.lastName.toLowerCase().match(searchTerm.toLowerCase())
+                );
+              }}
+              withCheckbox={true}
+              onSelect={(rowIndex, selected, selectedList, selectAll) =>
+                console.log(
+                  `on-select:- rowIndex: ${rowIndex} selected: ${selected} selectedList: ${JSON.stringify(
+                    selectedList
+                  )} selectAll: ${selectAll}`
+                )
+              }
+              withPagination={true}
+              pageSize={50}
+              onPageChange={(newPage) => console.log(`on-page-change:- ${newPage}`)}
+            />
           </div>
         );
       };
@@ -914,6 +914,11 @@
         return (
           <div className="p-8 vh-100 bg-secondary-lighter">
             <MyTable />
+            <Message
+              appearance="alert"
+              className="w-50"
+              description="Could not start verification. Please try again later."
+            />
           </div>
         );
       }

diff --git a/examples/umd/index.js b/examples/umd/index.js