@onewelcome/react-lib-components 0.1.7-alpha → 0.1.8-alpha

package/src/Pagination/Pagination.module.scss

@@ -4,117 +4,117 @@
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;
-}
 
-.form-element {
-  height: 2.5rem;
+  .form-element {
+    height: 2.5rem;
 
-  button {
-    min-height: 2.5rem;
+    button {
+      min-height: 2.5rem;
+    }
   }
-}
 
-.total {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  span > span {
-    font-weight: 700;
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    margin-left: 0.25rem;
-  }
-}
+  .total {
+    flex: 1 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-.pagination {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1rem;
+    span > span {
+      font-weight: 700;
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      margin-left: 0.25rem;
+    }
+  }
 
-  .previous,
-  .next {
+  .pagination {
+    flex: 1 0 auto;
     display: flex;
     align-items: center;
+    justify-content: center;
+    margin-top: 1rem;
 
-    button {
-      margin: 0.25rem;
-    }
+    .previous,
+    .next {
+      display: flex;
+      align-items: center;
+
+      button {
+        margin: 0.25rem;
+      }
 
-    button span:before {
-      font-size: 0.75rem;
+      button span:before {
+        font-size: 0.75rem;
+      }
     }
   }
-}
 
-.per-page {
-  display: none;
-  align-items: center;
-}
+  .per-page {
+    display: none;
+    align-items: center;
+  }
 
-.page {
-  display: flex;
-  align-items: center;
-  flex-basis: min-content;
-}
+  .page {
+    display: flex;
+    align-items: center;
+    flex-basis: min-content;
+  }
 
-.page-size-select {
-  border-color: #fff;
-  margin: 0 0.25rem;
+  .page-size-select {
+    border-color: #fff;
+    margin: 0 0.25rem;
 
-  button {
-    min-width: 55px;
-    padding: 0;
+    button {
+      min-width: 3.4375rem;
+      padding: 0;
 
-    div[data-display] {
-      left: 0.5rem;
-    }
+      div[data-display] {
+        left: 0.5rem;
+      }
 
-    div:not([data-display]) {
-      right: 0.5rem;
+      div:not([data-display]) {
+        right: 0.5rem;
+      }
     }
   }
-}
 
-.current-value-input {
-  margin: 0 0.25rem 0 0;
-  padding: 0;
+  .current-value-input {
+    margin: 0 0.25rem 0 0;
+    padding: 0;
 
-  input {
-    border-radius: var(--input-border-radius);
-    padding: 0 1rem;
-    width: auto;
-    text-align: center;
+    input {
+      border-radius: var(--input-border-radius);
+      padding: 0 1rem;
+      width: auto;
+      text-align: center;
+    }
   }
 }
 
 @media screen and (min-width: 30em) {
   .pagination-wrapper {
     flex-direction: row;
-  }
 
-  .total {
-    justify-content: flex-start;
-  }
+    .total {
+      justify-content: flex-start;
+    }
 
-  .pagination {
-    margin-top: 0;
-    justify-content: flex-end;
+    .pagination {
+      margin-top: 0;
+      justify-content: flex-end;
 
-    .previous,
-    .next {
-      button {
-        margin: 0.5rem;
+      .previous,
+      .next {
+        button {
+          margin: 0.5rem;
+        }
       }
     }
   }
 }
 
 @media screen and (min-width: 48em) {
-  .per-page {
+  .pagination-wrapper .per-page {
     display: flex;
   }
 }

package/src/_BaseStyling_/BaseStyling.tsx

@@ -26,6 +26,10 @@ interface CSSProperties {
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  dataGridRowBackgroundColor?: string;
+  dataGridRowHoverBackgroundColor?: string;
+  cardBackgroundColor?: string;
+  cardBorderRadius?: string;
   tabsBackgroundColor?: string;
   tabBorderWidth?: string;
   tabBorderStyle?: string;
@@ -66,22 +70,26 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     buttonBorderWidth: '2px',
     buttonFontSize: '1rem',
     buttonBorderStyle: 'solid',
-    buttonFillTextColor: '#FFF',
-    buttonFillBackgroundColor: '#FFF',
-    buttonOutlineHoverTextColor: '#FFF',
+    buttonFillTextColor: '#fff',
+    buttonFillBackgroundColor: '#fff',
+    buttonOutlineHoverTextColor: '#fff',
     inputBorderColor: '#e9e9eb',
     inputBorderRadius: '8px',
     inputBorderWidth: '1px',
     inputBorderStyle: 'solid',
-    inputBackgroundColor: '#FFF',
+    inputBackgroundColor: '#fff',
     modalShadowColor: 'rgba(0, 0, 0, 0.16)',
-    modalBackgroundColor: '#F5F8F8',
-    modalHeaderBackgroundColor: '#FFF',
+    modalBackgroundColor: '#f5f8f8',
+    modalHeaderBackgroundColor: '#fff',
     snackbarTextColor: '#fff',
     snackbarInfoBackgroundColor: '#003b5e',
     snackbarSuccessBackgroundColor: '#008a28',
     snackbarErrorBackgroundColor: '#e22a1d',
     snackbarBorderRadius: '8px',
+    dataGridRowBackgroundColor: 'transparent',
+    dataGridRowHoverBackgroundColor: '#f5e6f0',
+    cardBackgroundColor: '#fff',
+    cardBorderRadius: '8px',
     tabsBackgroundColor: '#FFF',
     tabBorderWidth: '2px',
     tabBorderStyle: 'solid',

package/src/index.ts

@@ -97,3 +97,9 @@ export {
   Props as BaseWizardStepsProps,
   Step as WizardStep,
 } from './Wizard/BaseWizardSteps/BaseWizardSteps';
+
+/** DataGrid */
+export { HeaderCell } from './DataGrid/datagrid.interfaces';
+export { DataGrid, Props as DataGridProps } from './DataGrid/DataGrid';
+export { DataGridRow, Props as DataGridRowProps } from './DataGrid/DataGridBody/DataGridRow';
+export { DataGridCell, Props as DataGridCellProps } from './DataGrid/DataGridBody/DataGridCell';