@openmrs/esm-stock-management-app 1.0.1-pre.559 → 1.0.1-pre.575

package/src/stock-home/stock-home.scss

@@ -1,13 +1,13 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 .cardContainer {
   background-color: colors.$white;
   display: flex;
   justify-content: space-between;
-  margin: 0 spacing.$spacing-05 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05 0 layout.$spacing-05;
   flex-flow: row wrap;
-  column-gap: spacing.$spacing-05;
-  row-gap: spacing.$spacing-05;
-}
+  column-gap: layout.$spacing-05;
+  row-gap: layout.$spacing-05;
+}

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.component.tsx

@@ -20,7 +20,7 @@ import StockItemCategorySelector from "../stock-item-category-selector/stock-ite
 import StockItemUnitsEdit from "../stock-item-units-edit/stock-item-units-edit.component";
 import { SaveStockItem } from "../../types";
 import ConceptsSelector from "../concepts-selector/concepts-selector.component";
-import rootStyles from "../../../root.scss";
+import styles from "../../add-stock-item/add-stock-item.scss";
 import { closeOverlay } from "../../../core/components/overlay/hook";
 import { expirationOptions, radioOptions } from "./stock-item-details.resource";
 import { restBaseUrl } from "@openmrs/esm-framework";
@@ -70,9 +70,7 @@ const StockItemDetails = forwardRef<never, StockItemDetailsProps>(
     }, [model.hasExpiration, model.isDrug]);
 
     return (
-      <form
-        className={`${rootStyles.formContainer} ${rootStyles.verticalForm}`}
-      >
+      <form className={`${styles.formContainer} ${styles.verticalForm}`}>
         {!isEditing && (
           <FormGroup
             className="clear-margin-bottom"

package/src/stock-items/add-stock-item/stock-item-details/stock-item-details.scss

@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .form {
@@ -11,3 +11,32 @@
   gap: 1.5rem;
   padding-top: 1rem;
 }
+
+.formContainer {
+  height: calc(100vh - 100px) !important;
+  overflow: scroll;
+  padding: 0 1rem;
+}
+
+.verticalForm {
+  display: flex;
+  grid-row-gap: 2em;
+  padding-top: layout.$spacing-05;
+  align-content: space-between;
+  flex-direction: column;
+
+    :global(.cds--form-item) {
+    flex: none !important;
+  }
+
+  :global(.cds--label) {
+    color: black;
+    display: inline-block;
+    font-size: var(--cds-label-01-font-size);
+    font-weight: bold;
+    letter-spacing: var(--cds-label-01-letter-spacing, .32px);
+    line-height: layout.$spacing-05;
+    margin-bottom: layout.$spacing-03;
+    vertical-align: baseline;
+  }
+}

package/src/stock-items/stock-items-table.scss

@@ -1,18 +1,17 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
-@import '../root.scss';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .headerBtnContainer {
   background-color: $ui-background;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   text-align: right;
 }
 
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {
@@ -78,12 +77,12 @@
 }
 
 .dateAlign {
-  padding-top: spacing.$spacing-03;
+  padding-top: layout.$spacing-03;
   height: 100%;
 }
 
 .filtersAlign {
-  padding-bottom: spacing.$spacing-03;
+  padding-bottom: layout.$spacing-03;
 
   :global(.cds--list-box__menu) {
     min-width: 15rem;
@@ -95,5 +94,5 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: spacing.$spacing-05;
-}
+  margin-bottom: layout.$spacing-05;
+}

package/src/stock-management-header/stock-management-header.scss

@@ -1,12 +1,12 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');
   color: colors.$gray-70;
-  height: spacing.$spacing-12;
+  height: layout.$spacing-12;
   background-color: $ui-02;
   display: flex;
   padding-left: 8px;

package/src/stock-operations/add-stock-operation/add-stock-operation.scss

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 .sectionTitle {
     @include type.type-style('heading-compact-02');
     color: $text-02;
-    margin-bottom: spacing.$spacing-04;
+    margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-    padding-bottom: spacing.$spacing-05;
+    padding-bottom: layout.$spacing-05;
 }
 
 .actionsContainer {

package/src/stock-operations/add-stock-operation/base-operation-details.component.tsx

@@ -35,7 +35,7 @@ import { useStockOperationPages } from "../stock-operations-table.resource";
 import { createBaseOperationPayload } from "./add-stock-utils";
 import { showSnackbar, useSession } from "@openmrs/esm-framework";
 
-import rootStyles from "../../root.scss";
+import styles from "../add-stock-operation/base-operation-details.scss";
 
 interface BaseOperationDetailsProps {
   isEditing?: boolean;
@@ -116,9 +116,7 @@ const BaseOperationDetails: React.FC<BaseOperationDetailsProps> = ({
   };
   return (
     <div style={{ margin: "10px" }}>
-      <form
-        className={`${rootStyles.formContainer} ${rootStyles.verticalForm}`}
-      >
+      <form className={`${styles.formContainer} ${styles.verticalForm}`}>
         {canEdit && (
           <Controller
             control={control}

package/src/stock-operations/add-stock-operation/base-operation-details.scss

@@ -0,0 +1,30 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.verticalForm {
+  display: flex;
+  grid-row-gap: 2em;
+  padding-top: layout.$spacing-05;
+  align-content: space-between;
+  flex-direction: column;
+
+    :global(.cds--form-item) {
+    flex: none !important;
+  }
+
+  :global(.cds--label) {
+    color: black;
+    display: inline-block;
+    font-size: var(--cds-label-01-font-size);
+    font-weight: bold;
+    letter-spacing: var(--cds-label-01-letter-spacing, .32px);
+    line-height: layout.$spacing-05;
+    margin-bottom: layout.$spacing-03;
+    vertical-align: baseline;
+  }
+}
+
+.formContainer {
+    margin: layout.$spacing-05;
+}

package/src/stock-operations/stock-operations-dialog/stock-operations-dialog.scss

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-  padding-bottom: spacing.$spacing-05;
+  padding-bottom: layout.$spacing-05;
 }

package/src/stock-operations/stock-operations-table.scss

@@ -1,12 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
-@import '../root.scss';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {
@@ -23,7 +22,7 @@
 .content {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: 0.5rem;
+  margin-bottom: layout.$spacing-03;
 }
 
 .helper {
@@ -42,7 +41,7 @@
 }
 
 .dateAlign {
-  padding-top: spacing.$spacing-03;
+  padding-top: layout.$spacing-03;
   height: 100%;
 }
 
@@ -50,12 +49,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
 .rowLoadingContainer {
   text-align: center;
-  padding: 5rem 2rem;
+  padding: layout.$spacing-11 2rem;
   margin: auto;
   width: 20%;
 }

package/src/stock-reports/report-list/stock-reports.scss

@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/colors';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');

package/src/stock-settings/stock-settings.component.tsx

@@ -10,7 +10,7 @@ function StockSettings() {
 
   return (
     <div className={styles.StockSettings}>
-      <div className={styles.title}>
+      <div className={styles.tableHeader}>
         {t(
           "comingSoonUnderDev",
           "Exciting updates are on the way! In the meantime, use the link below to access Admin UI settings."

package/src/stock-settings/stock-settings.scss

@@ -1,6 +1,8 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
-@use "../root.scss" as *;
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
 
 .StockSettings {
     display: flex;
@@ -18,6 +20,7 @@
     }
 }
 
-.title {
-    @extend .productiveHeading01;
-}
+.tableHeader {
+    @include type.type-style('heading-compact-01');
+    color: $text-02;
+  }

package/src/stock-sources/add-stock-sources/add-stock-sources.scss

@@ -1,18 +1,18 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .section {
-  margin: spacing.$spacing-03;
+  margin: layout.$spacing-03;
 }
 
 .sectionTitle {
   @include type.type-style('heading-compact-02');
   color: $text-02;
-  margin-bottom: spacing.$spacing-04;
+  margin-bottom: layout.$spacing-04;
 }
 
 .modalBody {
-  padding-bottom: spacing.$spacing-05;
+  padding-bottom: layout.$spacing-05;
 }
 

package/src/stock-sources/delete-stock-modal.component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button, ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
-import styles from "../root.scss";
+import styles from "./delete-stock-modal.scss";
 
 interface DeleteConfirmationProps {
   uuid?: string;
@@ -20,11 +20,11 @@ const DeleteConfirmation: React.FC<DeleteConfirmationProps> = ({
 
   return (
     <>
-      <ModalHeader closeModal={close} className={styles.productiveHeading03}>
+      <ModalHeader closeModal={close} className={styles.modalHeader}>
         {t("deleteStock", "Delete Stock source")}?
       </ModalHeader>
       <ModalBody>
-        <p className={styles.bodyLong01}>
+        <p className={styles.bodyText}>
           {t(
             "deleteConfirmationText",
             `Are you sure you want to delete this source? This action can't be undone.`,

package/src/stock-sources/delete-stock-modal.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyText {
+    @include type.type-style('body-long-01');
+  }
+
+.modalHeader {
+    @include type.type-style('heading-compact-02');
+  }

package/src/stock-sources/stock-sources-filter/stock-sources-filter.scss

@@ -1,10 +1,12 @@
+@use '@carbon/layout';
+
 .filterContainer {
     :global(.cds--dropdown__wrapper--inline) {
       gap: 0;
     }
   
     :global(.cds--list-box__menu-icon) {
-      height: 1rem;
+      height: layout.$spacing-05;
     }
   
     :global(.cds--dropdown--inline) :global(.cds--list-box__field) {

package/src/stock-sources/stock-sources.scss

@@ -1,5 +1,5 @@
 @use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/styles/scss/type';
 @import '~@openmrs/esm-styleguide/src/vars';
 
@@ -64,7 +64,7 @@
 
 .tableContainer {
   background-color: $ui-01;
-  margin: 0 spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
   padding: 0;
 
   a {
@@ -80,8 +80,8 @@
   }
 
   .toolbarContent {
-    height: spacing.$spacing-07;
-    margin-bottom: spacing.$spacing-02;
+    height: layout.$spacing-07;
+    margin-bottom: layout.$spacing-02;
   }
 }
 
@@ -142,7 +142,7 @@
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {
@@ -178,7 +178,7 @@
 .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4:after {
     content: '';
@@ -204,13 +204,13 @@
 
 .headerBtnContainer {
   background-color: $ui-background;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   text-align: right;
 }
 
 .addPatientToListBtn {
-  margin-left: spacing.$spacing-05;
-  height: spacing.$spacing-09;
+  margin-left: layout.$spacing-05;
+  height: layout.$spacing-09;
 }
 
 .editIcon {

package/src/stock-user-role-scopes/delete-stock-user-scope-modal.component.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button, ModalHeader, ModalBody, ModalFooter } from "@carbon/react";
-import styles from "../root.scss";
+import styles from "./delete-stock-user-scope-modal.scss";
 
 interface DeleteConfirmationProps {
   uuid?: string;

package/src/stock-user-role-scopes/delete-stock-user-scope-modal.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyText {
+    @include type.type-style('body-long-01');
+  }
+
+.modalHeader {
+    @include type.type-style('heading-compact-02');
+  }

package/src/stock-user-role-scopes/stock-user-role-scopes.scss

@@ -1,6 +1,7 @@
-@use '@carbon/styles/scss/colors';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .content {
   @include type.type-style('heading-compact-02');
@@ -17,7 +18,7 @@
   @include type.type-style('body-compact-02');
   color: $text-02;
   width: 80%;
-  margin: 1.5rem auto;
+  margin: layout.$spacing-06 auto;
   overflow: hidden;
   text-align: center;
 
@@ -33,12 +34,12 @@
   }
 
   &::before {
-    right: 0.5rem;
+    right: layout.$spacing-03;
     margin-left: -50%;
   }
 
   &::after {
-    left: 0.5rem;
+    left: layout.$spacing-03;;
     margin-right: -50%;
   }
 }
@@ -46,7 +47,7 @@
 .tileContainer {
   background-color: $ui-02;
   border-top: 1px solid $ui-03;
-  padding: 5rem 0;
+  padding: layout.$spacing-11 0;
 }
 
 .tile {