npm - @widergy/utilitygo-smart-bill-web - Versions diffs - 1.13.2 → 1.13.3 - Mend

@widergy/utilitygo-smart-bill-web 1.13.2 → 1.13.3

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 (28) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,10 @@
+## [1.13.3](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.13.2...v1.13.3) (2022-04-06)
+### Bug Fixes
+* adjust visual bugs by gap ([#27](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/27)) ([c140016](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/c14001678a4881812290da716101d0d9b8666e5d))
 ## [1.13.2](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.13.1...v1.13.2) (2022-03-14)

package/dist/components/Advice/styles.module.scss CHANGED Viewed

@@ -16,7 +16,6 @@
 .header {
   align-items: center;
   display: flex;
-  gap: 8px;
   margin-bottom: 24px;
   @media #{$tablet-mobile} {
@@ -29,6 +28,7 @@
 }
 .title {
+  margin-left: 8px;
   @media #{$tablet-mobile} {
     font-size: $small;
   }

package/dist/components/Amount/styles.module.scss CHANGED Viewed

@@ -8,7 +8,6 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-direction: column;
-  gap: 16px;
   margin-bottom: $default-spacing;
   padding: $default-container-padding;
@@ -22,6 +21,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 16px;
   @media #{$tablet-mobile} {
     align-items: center;
@@ -35,6 +35,10 @@
   align-items: center;
   display: flex;
+  @media #{$mobile} {
+    margin-top: 16px;
+  }
   @media #{$desktop} {
     white-space: nowrap;
   }
@@ -54,7 +58,6 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 16px;
   justify-content: space-between;

package/dist/components/BillCalculation/components/ConceptCard/index.js CHANGED Viewed

@@ -61,7 +61,7 @@ var ConceptCard = function ConceptCard(_ref) {
       className: _stylesModule.default.lineContainer,
       key: list.title
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.conceptLineContainer
+      className: "".concat(_stylesModule.default.conceptLineContainer, " ").concat(list.description && _stylesModule.default.conceptLineContainerMarginBottom)
     }, /*#__PURE__*/_react.default.createElement(Label, {
       alias: _aliases.CONCEPT_TITLE
     }, list.title), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {

package/dist/components/BillCalculation/components/ConceptCard/styles.module.scss CHANGED Viewed

@@ -18,7 +18,6 @@
 .lineContainer {
   display: flex;
   flex-direction: column;
-  gap: 12px;
   justify-content: space-between;
   padding: $default-spacing 0 0;
   @media #{$tablet-mobile} {
@@ -32,6 +31,10 @@
   justify-content: space-between;
 }
+.conceptLineContainerMarginBottom {
+  margin-bottom: 12px;
+}
 .container {
   background: $white;
   border: 1px solid $borders-gray;
@@ -53,8 +56,8 @@
 }
 .expandIcon {
-  width: 24px;
   padding: 0;
+  width: 24px;
 }
 .expandableContent {

package/dist/components/ConsumptionComparison/components/ConsumptionAdvice/styles.module.scss CHANGED Viewed

@@ -30,8 +30,11 @@
 .header {
   align-items: center;
   display: flex;
-  gap: 8px;
   margin-bottom: 16px;
+  > svg {
+    margin-right: 18px;
+  }
 }
 .externalLink {

package/dist/components/ConsumptionComparison/components/PercentageComparison/styles.module.scss CHANGED Viewed

@@ -14,12 +14,16 @@ $icon-size: 25px;
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
-  gap: 16px;
   justify-content: center;
   max-width: 200px;
   padding: 24px;
+  @media #{$desktop} {
+    margin-left: 16px;
+  }
   @media #{$tablet-mobile} {
+    margin-top: 16px;
     max-width: 100%;
     padding: 24px;
     text-align: center;
@@ -30,11 +34,12 @@ $icon-size: 25px;
 .header {
   align-items: center;
   display: flex;
+  margin-bottom: 16px;
 }
 .icon {
-  margin-right: 10px;
   height: $icon-size;
+  margin-right: 10px;
   width: $icon-size;
 }

package/dist/components/ConsumptionComparison/styles.module.scss CHANGED Viewed

@@ -16,7 +16,6 @@
 .comparisonComponentsContainer {
   display: flex;
-  gap: 16px;
   margin-bottom: 16px;
   @media #{$tablet-mobile} {
@@ -39,8 +38,8 @@
   @media #{$desktop} {
     display: flex;
-    flex-grow: 1;
     flex-flow: column;
+    flex-grow: 1;
     justify-content: center;
     width: 75%;
   }

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/components/ReadingRow/index.js CHANGED Viewed

@@ -39,7 +39,10 @@ var ReadingRow = function ReadingRow(_ref) {
     unitAlias: unitAlias,
     value: value,
     unit: unit,
-    disableUnit: disableUnit
+    disableUnit: disableUnit,
+    classes: {
+      container: _stylesModule.default.magnitudeContainer
+    }
   }));
 };

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/components/ReadingRow/styles.module.scss CHANGED Viewed

@@ -3,8 +3,11 @@
 .container {
   align-items: center;
   display: flex;
-  gap: 16px;
   justify-content: space-between;
-  width: 100%;
   padding: 0 24px;
+  width: 100%;
+}
+.magnitudeContainer {
+  margin-left: 16px;
 }

package/dist/components/ConsumptionPeriod/components/Reading/styles.module.scss CHANGED Viewed

@@ -31,7 +31,6 @@
 .detailsContainer {
   display: flex;
   flex-direction: column;
-  gap: 16px;
   padding: 16px 24px;
   @media #{$tablet-mobile} {
@@ -39,3 +38,17 @@
     flex-wrap: wrap;
   }
 }
+.iconAndDetailsContainer {
+  margin-bottom: 16px;
+  @media #{$mobile} {
+    margin-bottom: 0;
+    margin-right: 16px;
+  }
+  @media #{$small-mobile} {
+    margin-bottom: 16px;
+  }
+}

package/dist/components/ConsumptionPeriod/styles.module.scss CHANGED Viewed

@@ -13,7 +13,6 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 16px;
-  gap: 16px;
   width: 100%;
   @media #{$mobile} {
@@ -25,12 +24,14 @@
   width: 30%;
   @media #{$mobile} {
+    margin-right: 0;
     width: 100%;
   }
 }
 .initialReadingContainer {
   justify-content: flex-start;
+  margin-right: 16px;
 }
 .finalReadingContainer {
@@ -38,10 +39,12 @@
   @media #{$mobile} {
     margin-left: 0;
+    margin-top: 16px;
   }
 }
 .desktopSummary {
+  margin-right: 16px;
   width: 50%;
   @media #{$mobile} {

package/dist/components/Date/index.js CHANGED Viewed

@@ -32,7 +32,7 @@ var Date = function Date(_ref) {
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: mainAlias,
-    className: _stylesModule.default.valueContainer
+    className: "".concat(_stylesModule.default.valueContainer, " ").concat(classes.value)
   }, (0, _dayjs.default)(date, 'YYYY-MM-DD').format('DD/MM/YYYY')), /*#__PURE__*/_react.default.createElement(Label, {
     alias: detailAlias
   }, text));
@@ -45,7 +45,8 @@ Date.propTypes = {
   mainAlias: _propTypes.string,
   detailAlias: _propTypes.string,
   classes: (0, _propTypes.shape)({
-    container: _propTypes.string
+    container: _propTypes.string,
+    value: _propTypes.string
   })
 };

package/dist/components/MainBillData/components/BillAlert/styles.module.scss CHANGED Viewed

@@ -31,11 +31,10 @@
 .iconAndLabelContainer {
   align-items: center;
-  gap: 8px;
 }
 .label {
-  margin-left: 5px;
   color: $primary;
+  margin-left: 13px;
   text-decoration: underline;
 }

package/dist/components/MainBillData/components/BillBody/styles.module.scss CHANGED Viewed

@@ -5,10 +5,6 @@
   flex-flow: row;
   width: 100%;
-  @media #{$desktop} {
-    gap: 16px;
-  }
   @media #{$tablet-mobile} {
     flex-flow: column;
   }
@@ -26,6 +22,7 @@
 .amountAndConsumptionLeftContainer {
   @extend %containers;
   @media #{$desktop} {
+    margin-right: 16px;
     width: 45%;
   }
 }
@@ -33,6 +30,7 @@
 .periodAndClientDataLeftContainer {
   @extend %containers;
   @media #{$desktop} {
+    margin-right: 16px;
     width: 55%;
   }
 }

package/dist/components/MainBillData/components/BillHeader/components/TypeAndNumber/index.js CHANGED Viewed

@@ -26,14 +26,16 @@ var TypeAndNumber = function TypeAndNumber(_ref) {
       billType = _ref.billType,
       billNumber = _ref.billNumber,
       mainAlias = _ref.mainAlias,
-      detailAlias = _ref.detailAlias;
+      detailAlias = _ref.detailAlias,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
   var config = contextApiInfo.config,
       Label = contextApiInfo.Label;
   var texts = config.texts;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.billTypeAndNumberContainer
+    className: "".concat(_stylesModule.default.billTypeAndNumberContainer, " ").concat(classes.value)
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.TYPE_AND_NUMBER_TYPE,
     className: _stylesModule.default.billType
@@ -50,6 +52,10 @@ TypeAndNumber.propTypes = {
   billType: _propTypes.string,
   billNumber: _propTypes.string,
   mainAlias: _propTypes.string,
+  classes: (0, _propTypes.shape)({
+    container: _propTypes.string,
+    value: _propTypes.string
+  }),
   detailAlias: _propTypes.string
 };

package/dist/components/MainBillData/components/BillHeader/components/TypeAndNumber/styles.module.scss CHANGED Viewed

@@ -5,7 +5,6 @@
   align-items: flex-start;
   display: flex;
   flex-flow: column;
-  gap: 8px;
 }
 .billTypeAndNumberContainer {
@@ -20,10 +19,10 @@
 .billType {
   align-items: center;
-  display: flex;
   background-color: $backgrounds-gray;
   border: 1px solid $borders-dark-gray;
   border-radius: 3px;
+  display: flex;
   height: 25px;
   justify-content: center;
   width: 25px;

package/dist/components/MainBillData/components/BillHeader/index.js CHANGED Viewed

@@ -76,12 +76,17 @@ var BillHeader = function BillHeader(_ref) {
     className: _stylesModule.default.billDataAndDebtStateContainer
   }, /*#__PURE__*/_react.default.createElement(_TypeAndNumber.default, _extends({}, aliases, {
     billType: billData.bill_type,
-    billNumber: billData.bill_number
+    billNumber: billData.bill_number,
+    classes: {
+      value: _stylesModule.default.typeAndNumber,
+      container: _stylesModule.default.typeAndNumberContainer
+    }
   })), issuedOnDate && /*#__PURE__*/_react.default.createElement(_Date.default, _extends({}, aliases, {
     date: issuedOnDate,
     text: texts.commons.issuedOnDate,
     classes: {
-      container: _stylesModule.default.date
+      value: _stylesModule.default.date,
+      container: isDesktopSize && debtStatusValidation && _stylesModule.default.dateContainer
     }
   })), isDesktopSize && debtStatusValidation && /*#__PURE__*/_react.default.createElement(DebtStatusLabel, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.debtStatusLabelMobile

package/dist/components/MainBillData/components/BillHeader/styles.module.scss CHANGED Viewed

@@ -21,7 +21,15 @@
 }
 .date {
-  gap: 8px;
+  margin-bottom: 11px;
+}
+.dateContainer {
+  margin-right: 24px;
+}
+.typeAndNumber{
+  margin-bottom: 11px;
 }
 .headerRow {
@@ -36,7 +44,6 @@
     border-top-right-radius: $default-container-border-radius;
     display: flex;
     flex-direction: column;
-    gap: 16px;
     padding: 16px;
     width: 100%;
   }
@@ -51,6 +58,7 @@
   @media #{$tablet-mobile} {
     align-items: flex-start;
     flex-flow: column;
+    margin-bottom: 16px;
   }
 }
@@ -58,7 +66,10 @@
   align-items: center;
   display: flex;
   width: 68%;
-  gap: 24px;
+  > .typeAndNumberContainer:nth-child(1) {
+    margin-right: 24px;
+  }
   @media #{$desktop} {
     justify-content: flex-end;
@@ -68,6 +79,7 @@
     align-items: flex-end;
     display: flex;
     flex-direction: row;
+    margin-bottom: 16px;
     width: 100%;
   }
 }
@@ -94,11 +106,11 @@
 }
 .periodContainer {
+  border: 1px solid $borders-dark-gray;
+  border-top: 0;
   display: flex;
   flex-flow: column;
   width: 60%;
-  border: 1px solid $borders-dark-gray;
-  border-top: 0;
   @media #{$desktop} {
     display: none;
   }

package/dist/components/Period/styles.module.scss CHANGED Viewed

@@ -9,10 +9,13 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
-  gap: 8px;
   margin-bottom: 17px;
   padding: $default-container-padding;
+  > .periodHeader {
+      margin-bottom: 8px;
+  }
   @media #{$tablet-mobile} {
     border: 1px solid $borders-dark-gray;
     border-radius: $default-container-border-radius;
@@ -26,7 +29,6 @@
   border: 1px solid $borders-gray;
   border-radius: $default-container-border-radius;
   display: flex;
-  gap: 16px;
   justify-content: center;
   margin-bottom: $default-spacing;
   padding: 16px;
@@ -46,10 +48,13 @@
 .header {
   align-items: center;
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+  > span {
+    margin-bottom: 8px;
+  }
   @media #{$tablet-mobile} {
     border: 0;
@@ -62,7 +67,9 @@
 .periodHeader {
   display: flex;
-  gap: 16px;
+  > svg {
+    margin-left: 16px;
+  }
 }
 .issueDateContainer {
@@ -85,7 +92,10 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  grid-gap: 5px;
+  > span {
+    margin-left: 5px;
+  }
 }
 .periodLabel {
@@ -97,6 +107,10 @@
 .debtState {
   width: fit-content;
+  @media #{$desktop} {
+    margin-top: 8px;
+  }
 }
 .text {

package/dist/components/RateAndCategory/styles.module.scss CHANGED Viewed

@@ -5,7 +5,6 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  grid-gap: 5px;
 }
 .multipleSettlementsContainer {
@@ -15,7 +14,7 @@
 .purchasedRate {
   font-size: $purchased-rate-font-size;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }
 .category {

package/dist/components/RatesDefinition/components/BillRate/components/RatePrices/styles.module.scss CHANGED Viewed

@@ -4,7 +4,6 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 24px;
   justify-content: space-between;
 }
@@ -12,7 +11,11 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 16px;
+  margin-bottom: 24px;
+  > .charge:nth-child(1) {
+    margin-bottom: 16px;
+  }
 }
 .charge {

package/dist/components/RatesDefinition/components/BillRate/styles.module.scss CHANGED Viewed

@@ -6,7 +6,6 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 16px;
   padding: 16px;
   width: 100%;
 }
@@ -22,7 +21,12 @@
 .titleAndIcon {
   display: flex;
-  gap: 16px;
   justify-content: center;
+  margin-bottom: 16px;
   width: 100%;
+  > span {
+    margin-right: 16px;
+  }
 }

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/Category/styles.module.scss CHANGED Viewed

@@ -5,15 +5,21 @@
 .container {
   align-items: center;
   display: flex;
-  gap: 8px;
+  > .title {
+    margin-right: 8px;
+  }
 }
 .containerWrap {
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 24px 0 8px
+  padding: 24px 0 8px;
+  > .title {
+    margin-bottom: 16px;
+  }
 }
 .title {

package/dist/components/RatesDefinition/components/CategoryByConsumption/styles.module.scss CHANGED Viewed

@@ -25,14 +25,6 @@
   }
 }
-.ratesLegend {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid $borders-gray;
-  gap: 24px;
-  padding: 24px;
-}
 .content {
   display: flex;

package/dist/components/RatesDefinition/components/PurchasedRate/styles.module.scss CHANGED Viewed

@@ -8,10 +8,13 @@
   border-right: 1px solid $borders-gray;
   display: flex;
   flex-flow: column;
-  gap: 16px;
-  padding: 16px;
   justify-content: center;
   min-width: 50%;
+  padding: 16px;
+  > span {
+    margin-bottom: 16px;
+  }
   @media #{$tablet-mobile} {
     border-bottom: 1px solid $borders-gray;
@@ -23,13 +26,13 @@
 .rateAndCategoryContainer {
   flex-direction: column-reverse;
+  margin-bottom: 24px;
 }
 .data {
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 24px;
   height: 100%;
   justify-content: space-between;
 }

package/dist/shared/constants/aliases.js CHANGED Viewed

@@ -487,7 +487,8 @@ var DEFAULT_PROPS = (_DEFAULT_PROPS = {}, _defineProperty(_DEFAULT_PROPS, TITLE,
 }), _defineProperty(_DEFAULT_PROPS, SUMMARY_RESULT, {
   variant: 'subtitle2',
   weight: 'medium',
-  color: COLORS.PRIMARY
+  color: COLORS.PRIMARY,
+  withMarkdown: true
 }), _defineProperty(_DEFAULT_PROPS, SUMMARY_RESULT_NUMBER, {
   variant: 'title2',
   weight: 'medium',

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",