npm - @innovaccer/design-system - Versions diffs - 2.5.0-2 → 2.5.1 - Mend

@innovaccer/design-system 2.5.0-2 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/core/components/organisms/navigation/__tests__/__snapshots__/Navigation.test.tsx.snap ADDED Viewed

@@ -0,0 +1,530 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Navigation component
+  type: "horizontal", align: "center", menus: [{"name":"tab1","label":"Tab #1","count":1,"icon":"event"},{"name":"tab2","label":"Tab #2","count":2,"subMenu":[{"name":"tab2child1","label":"tab2child1"},{"name":"tab2child2","label":"tab2child2"}]},{"name":"tab3","label":"Tab #3","count":3,"subMenu":[{"name":"tab3child1","label":"tab3child1"}]}], active: true, onClick: "[Function]", onToggle: "[Function]"
+ 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Navigation Navigation--horizontal justify-content-center"
+      >
+        <div
+          class="HorizontalNav"
+        >
+          <div
+            class="HorizontalNav-menu"
+            data-test="DesignSystem-HorizontalNav"
+          >
+            <span
+              class="Pills Badge--secondary HorizontalNav-pills"
+              data-test="DesignSystem-HorizontalNav--Pills"
+            >
+              1
+            </span>
+            <span
+              class="Text Text--default Text--regular HorizontalNav-menuText"
+              data-test="DesignSystem-HorizontalNav--Text"
+            >
+              Tab #1
+            </span>
+          </div>
+          <div
+            class="HorizontalNav-menu"
+            data-test="DesignSystem-HorizontalNav"
+          >
+            <span
+              class="Pills Badge--secondary HorizontalNav-pills"
+              data-test="DesignSystem-HorizontalNav--Pills"
+            >
+              2
+            </span>
+            <span
+              class="Text Text--default Text--regular HorizontalNav-menuText"
+              data-test="DesignSystem-HorizontalNav--Text"
+            >
+              Tab #2
+            </span>
+          </div>
+          <div
+            class="HorizontalNav-menu"
+            data-test="DesignSystem-HorizontalNav"
+          >
+            <span
+              class="Pills Badge--secondary HorizontalNav-pills"
+              data-test="DesignSystem-HorizontalNav--Pills"
+            >
+              3
+            </span>
+            <span
+              class="Text Text--default Text--regular HorizontalNav-menuText"
+              data-test="DesignSystem-HorizontalNav--Text"
+            >
+              Tab #3
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Navigation Navigation--horizontal justify-content-center"
+    >
+      <div
+        class="HorizontalNav"
+      >
+        <div
+          class="HorizontalNav-menu"
+          data-test="DesignSystem-HorizontalNav"
+        >
+          <span
+            class="Pills Badge--secondary HorizontalNav-pills"
+            data-test="DesignSystem-HorizontalNav--Pills"
+          >
+            1
+          </span>
+          <span
+            class="Text Text--default Text--regular HorizontalNav-menuText"
+            data-test="DesignSystem-HorizontalNav--Text"
+          >
+            Tab #1
+          </span>
+        </div>
+        <div
+          class="HorizontalNav-menu"
+          data-test="DesignSystem-HorizontalNav"
+        >
+          <span
+            class="Pills Badge--secondary HorizontalNav-pills"
+            data-test="DesignSystem-HorizontalNav--Pills"
+          >
+            2
+          </span>
+          <span
+            class="Text Text--default Text--regular HorizontalNav-menuText"
+            data-test="DesignSystem-HorizontalNav--Text"
+          >
+            Tab #2
+          </span>
+        </div>
+        <div
+          class="HorizontalNav-menu"
+          data-test="DesignSystem-HorizontalNav"
+        >
+          <span
+            class="Pills Badge--secondary HorizontalNav-pills"
+            data-test="DesignSystem-HorizontalNav--Pills"
+          >
+            3
+          </span>
+          <span
+            class="Text Text--default Text--regular HorizontalNav-menuText"
+            data-test="DesignSystem-HorizontalNav--Text"
+          >
+            Tab #3
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+exports[`Navigation component
+  type: "horizontal", align: "left", menus: [{"name":"tab1","label":"Tab #1","count":1,"icon":"event"},{"name":"tab2","label":"Tab #2","count":2,"subMenu":[{"name":"tab2child1","label":"tab2child1"},{"name":"tab2child2","label":"tab2child2"}]},{"name":"tab3","label":"Tab #3","count":3,"subMenu":[{"name":"tab3child1","label":"tab3child1"}]}], active: true, onClick: "[Function]", onToggle: "[Function]"
+ 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Navigation Navigation--horizontal justify-content-start"
+      >
+        <div
+          class="HorizontalNav"
+        >
+          <div
+            class="HorizontalNav-menu"
+            data-test="DesignSystem-HorizontalNav"
+          >
+            <span
+              class="Pills Badge--secondary HorizontalNav-pills"
+              data-test="DesignSystem-HorizontalNav--Pills"
+            >
+              1
+            </span>
+            <span
+              class="Text Text--default Text--regular HorizontalNav-menuText"
+              data-test="DesignSystem-HorizontalNav--Text"
+            >
+              Tab #1
+            </span>
+          </div>
+          <div
+            class="HorizontalNav-menu"
+            data-test="DesignSystem-HorizontalNav"
+          >
+            <span
+              class="Pills Badge--secondary HorizontalNav-pills"
+              data-test="DesignSystem-HorizontalNav--Pills"
+            >
+              2
+            </span>
+            <span
+              class="Text Text--default Text--regular HorizontalNav-menuText"
+              data-test="DesignSystem-HorizontalNav--Text"
+            >
+              Tab #2
+            </span>
+          </div>
+          <div
+            class="HorizontalNav-menu"
+            data-test="DesignSystem-HorizontalNav"
+          >
+            <span
+              class="Pills Badge--secondary HorizontalNav-pills"
+              data-test="DesignSystem-HorizontalNav--Pills"
+            >
+              3
+            </span>
+            <span
+              class="Text Text--default Text--regular HorizontalNav-menuText"
+              data-test="DesignSystem-HorizontalNav--Text"
+            >
+              Tab #3
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Navigation Navigation--horizontal justify-content-start"
+    >
+      <div
+        class="HorizontalNav"
+      >
+        <div
+          class="HorizontalNav-menu"
+          data-test="DesignSystem-HorizontalNav"
+        >
+          <span
+            class="Pills Badge--secondary HorizontalNav-pills"
+            data-test="DesignSystem-HorizontalNav--Pills"
+          >
+            1
+          </span>
+          <span
+            class="Text Text--default Text--regular HorizontalNav-menuText"
+            data-test="DesignSystem-HorizontalNav--Text"
+          >
+            Tab #1
+          </span>
+        </div>
+        <div
+          class="HorizontalNav-menu"
+          data-test="DesignSystem-HorizontalNav"
+        >
+          <span
+            class="Pills Badge--secondary HorizontalNav-pills"
+            data-test="DesignSystem-HorizontalNav--Pills"
+          >
+            2
+          </span>
+          <span
+            class="Text Text--default Text--regular HorizontalNav-menuText"
+            data-test="DesignSystem-HorizontalNav--Text"
+          >
+            Tab #2
+          </span>
+        </div>
+        <div
+          class="HorizontalNav-menu"
+          data-test="DesignSystem-HorizontalNav"
+        >
+          <span
+            class="Pills Badge--secondary HorizontalNav-pills"
+            data-test="DesignSystem-HorizontalNav--Pills"
+          >
+            3
+          </span>
+          <span
+            class="Text Text--default Text--regular HorizontalNav-menuText"
+            data-test="DesignSystem-HorizontalNav--Text"
+          >
+            Tab #3
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+exports[`Navigation component
+  type: "vertical", menus: [{"name":"tab1","label":"Tab #1","count":1,"icon":"event"},{"name":"tab2","label":"Tab #2","count":2,"subMenu":[{"name":"tab2child1","label":"tab2child1"},{"name":"tab2child2","label":"tab2child2"}]},{"name":"tab3","label":"Tab #3","count":3,"subMenu":[{"name":"tab3child1","label":"tab3child1"}]}], autoCollapse: false, expanded: false, rounded: true, onClick: "[Function]", onToggle: "[Function]"
+ 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="Navigation Navigation--vertical Navigation--collapsed"
+      >
+        <div
+          class="Navigation-body"
+        >
+          <div
+            data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper"
+          >
+            <div
+              class="Navigation-menu Navigation-menu--vertical"
+              data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
+            >
+              <i
+                class="material-icons material-icons-round Icon Icon--default Navigation-menuIcon"
+                data-test="DesignSystem-Navigation-VerticalNavigation--menuIcon"
+                style="font-size: 16px; width: 16px;"
+              >
+                event_round
+              </i>
+            </div>
+            <div
+              class="Navigation-subMenu"
+            />
+          </div>
+          <div
+            data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper"
+          >
+            <div
+              class="Navigation-menu Navigation-menu--vertical"
+              data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
+            />
+            <div
+              class="Navigation-subMenu"
+            />
+          </div>
+          <div
+            data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper"
+          >
+            <div
+              class="Navigation-menu Navigation-menu--vertical"
+              data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
+            />
+            <div
+              class="Navigation-subMenu"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="Navigation Navigation--vertical Navigation--collapsed"
+    >
+      <div
+        class="Navigation-body"
+      >
+        <div
+          data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper"
+        >
+          <div
+            class="Navigation-menu Navigation-menu--vertical"
+            data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
+          >
+            <i
+              class="material-icons material-icons-round Icon Icon--default Navigation-menuIcon"
+              data-test="DesignSystem-Navigation-VerticalNavigation--menuIcon"
+              style="font-size: 16px; width: 16px;"
+            >
+              event_round
+            </i>
+          </div>
+          <div
+            class="Navigation-subMenu"
+          />
+        </div>
+        <div
+          data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper"
+        >
+          <div
+            class="Navigation-menu Navigation-menu--vertical"
+            data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
+          />
+          <div
+            class="Navigation-subMenu"
+          />
+        </div>
+        <div
+          data-test="DesignSystem-Navigation-VerticalNavigation--menuWrapper"
+        >
+          <div
+            class="Navigation-menu Navigation-menu--vertical"
+            data-test="DesignSystem-Navigation-VerticalNavigation--menuItem"
+          />
+          <div
+            class="Navigation-subMenu"
+          />
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/core/components/organisms/table/DraggableDropdown.tsx CHANGED Viewed

@@ -89,6 +89,7 @@ export const DraggableDropdown = (props: DraggableDropdownProps) => {
           {tempOptions.map((option, index) => {
             return (
               <div
+                data-test="DesignSystem-Table-Header--draggableDropdownOption"
                 key={option.value}
                 className="OptionWrapper d-flex flex-space-between align-items-center cursor-pointer"
                 draggable={true}

package/core/components/organisms/table/Header.tsx CHANGED Viewed

@@ -149,6 +149,7 @@ export const Header = (props: HeaderProps) => {
         {withSearch && (
           <div className="Header-search">
             <Input
+              data-test="DesignSystem-Table-Header--withSearch"
               name="GridHeader-search"
               icon="search"
               placeholder={searchPlaceholder}
@@ -209,11 +210,19 @@ export const Header = (props: HeaderProps) => {
               {withPagination && selectAll?.checked && allowSelectAll && (
                 <div className="ml-4">
                   {!selectAllRecords ? (
-                    <Button size="tiny" onClick={() => setSelectAllRecords(true)}>
+                    <Button
+                      data-test="DesignSystem-Table-Header--selectAllItemsButton"
+                      size="tiny"
+                      onClick={() => setSelectAllRecords(true)}
+                    >
                       {`Select all ${totalRecords} items`}
                     </Button>
                   ) : (
-                    <Button size="tiny" onClick={() => setSelectAllRecords(false)}>
+                    <Button
+                      data-test="DesignSystem-Table-Header--clearSelectionItemsButton"
+                      size="tiny"
+                      onClick={() => setSelectAllRecords(false)}
+                    >
                       Clear Selection
                     </Button>
                   )}

package/core/components/organisms/table/Table.tsx CHANGED Viewed

@@ -693,9 +693,9 @@ export class Table extends React.Component<TableProps, TableState> {
     const totalPages = getTotalPages(totalRecords, pageSize);
     return (
-      <div {...baseProps} className={`Table${classes}`}>
+      <div {...baseProps} className={`Table${classes}`} data-test="DesignSystem-Table-wrapper">
         {withHeader && (
-          <div className="Table-header">
+          <div className="Table-header" data-test="DesignSystem-Table-header">
             <Header
               {...this.state}
               // updateData={updateData}

package/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.tsx CHANGED Viewed

@@ -233,8 +233,11 @@ const customCode = `() => {
   const nestedRowRenderer = (props) => {
     const {
       data,
+      rowIndex
     } = props;
+    if(rowIndex % 2){
+      return false;
+    }
     return (
       <CardSubdued className="ml-7">
         <div className="d-flex flex-row">

package/core/components/organisms/table/__stories__/variants/nestedRows.story.tsx CHANGED Viewed

@@ -136,9 +136,12 @@ const customCode = `
     const {
       schema,
       data,
-      loading
+      loading,
+      rowIndex
     } = props;
+    if (rowIndex % 2) {
+      return false;
+    }
     return (
       <List
         loading={loading}