@metron-labs/quote-react 0.1.49 → 0.1.51

package/dist/styles.css

@@ -3306,7 +3306,8 @@
   text-transform: none;
 }
 
-:where(.app-wrapper) .entry-options--workflow .entry-option-title::after {
+:where(.app-wrapper) .entry-options--workflow .entry-option-title::after,
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card__title::after {
   /* Same badge as .results-total-action .arrow: 30px circle, with the
      ForwardArrow path drawn by ::before below (a pseudo-element can't hold
      the component). */
@@ -3325,7 +3326,8 @@
 
 /* The arrow is a mask so its colour can come from a variable: an SVG data
    URI can't read var(--on-accent). Painted over the ::after circle. */
-:where(.app-wrapper) .entry-options--workflow .entry-option-title::before {
+:where(.app-wrapper) .entry-options--workflow .entry-option-title::before,
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card__title::before {
   content: "";
   position: absolute;
   z-index: 1;
@@ -3340,11 +3342,13 @@
   transition: background 0.15s ease;
 }
 
-:where(.app-wrapper) .entry-options--workflow .entry-option-card:hover .entry-option-title::after {
+:where(.app-wrapper) .entry-options--workflow .entry-option-card:hover .entry-option-title::after,
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card:hover .estimator-tool-card__title::after {
   background-color: var(--accent);
 }
 
-:where(.app-wrapper) .entry-options--workflow .entry-option-card:hover .entry-option-title::before {
+:where(.app-wrapper) .entry-options--workflow .entry-option-card:hover .entry-option-title::before,
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card:hover .estimator-tool-card__title::before {
   background: var(--on-accent);
 }
 
@@ -5760,7 +5764,8 @@
 }
 
 /* Customer results and basket use the same lighter surface as the entry flow. */
-:where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer {
+:where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer,
+:where(.app-wrapper).estimating-tools--customer .quick-order-hero {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5770,7 +5775,8 @@
   color: var(--text);
 }
 
-:where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer h1 {
+:where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer h1,
+:where(.app-wrapper).estimating-tools--customer .quick-order-hero h1 {
   margin-bottom: 8px;
   color: var(--text);
   font-size: clamp(28px, 3vw, 36px);
@@ -5779,7 +5785,8 @@
   text-transform: none;
 }
 
-:where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer p {
+:where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer p,
+:where(.app-wrapper).estimating-tools--customer .quick-order-hero p {
   max-width: 620px;
   padding: 0;
   border: 0;
@@ -5939,6 +5946,7 @@
 :where(.app-wrapper) .quick-order-card--customer .results-search-input,
 :where(.app-wrapper) .quick-order-card--customer .bom-toolbar-btn,
 :where(.app-wrapper) .quick-order-card--customer .cta-btn,
+:where(.app-wrapper).estimating-tools--customer .cta-btn,
 :where(.app-wrapper) .quick-order-card--customer .disclaimer-box {
   border-radius: 14px;
 }
@@ -6675,14 +6683,16 @@
 
   /* Customer results/basket hero: stack title over the total-cost button
      instead of squeezing the title into a one-word-per-line column. */
-  :where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer {
+  :where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer,
+  :where(.app-wrapper).estimating-tools--customer .quick-order-hero {
     flex-direction: column;
     align-items: stretch;
     gap: 16px;
     padding: 24px 20px 8px;
   }
 
-  :where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer h1 {
+  :where(.app-wrapper) .quick-order-card--customer .quick-order-hero--customer h1,
+  :where(.app-wrapper).estimating-tools--customer .quick-order-hero h1 {
     font-size: 28px;
     line-height: 1.15;
   }
@@ -6768,3 +6778,160 @@
   width: 100%;
   height: 100%;
 }
+
+/* ===== Estimating tools, customer view =====
+   Same lighter surface as the Quick Quote customer screens. The hero, button and
+   arrow-badge rules are shared above; these cover what Quick Quote has no class for. */
+:where(.app-wrapper).estimating-tools--customer .quick-order-eyebrow {
+  display: none;
+}
+
+/* Title over intro: the shared hero is a row because the results/basket heroes put a
+   button beside the copy, which the calculator heroes don't have. */
+:where(.app-wrapper).estimating-tools--customer .quick-order-hero:not(.quick-order-hero--customer) {
+  display: block;
+}
+
+/* Lined up with the calculator body; both drop to 20px sides on phones (below). */
+:where(.app-wrapper).estimating-tools--customer .truss-estimator .quick-order-hero {
+  padding-inline: 40px;
+}
+
+/* hide-header still wins over the two display rules above. */
+:where(.app-wrapper).estimating-tools--customer.app-wrapper--no-header .quick-order-hero:not(.quick-order-hero--customer) {
+  display: none;
+}
+
+:where(.app-wrapper).estimating-tools--customer .quick-order-hero:not(.quick-order-hero--customer) p {
+  margin: 0;
+}
+
+/* The light hero is transparent; embedded, the host's page colour would show behind it
+   and split it from the white calculator body. */
+:where(.app-wrapper).estimating-tools--customer .truss-estimator {
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  border-radius: 24px;
+}
+
+/* Calculator list: unframed, like the Quick Quote entry screen. */
+:where(.app-wrapper).estimating-tools--customer .quick-order-card:not(.quick-order-card--customer) {
+  border: 0;
+  box-shadow: none;
+  overflow: visible;
+}
+
+:where(.app-wrapper).estimating-tools--customer .quick-order-alt {
+  padding-top: 20px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .quick-order-alt-title {
+  display: none;
+}
+
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card {
+  border: 1.5px solid var(--border-dark);
+  border-radius: 18px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card:hover {
+  border-color: var(--border-dark);
+  box-shadow: 0 12px 28px rgb(15 23 42 / 0.14);
+  transform: translateY(-4px);
+}
+
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card__content {
+  position: relative;
+  align-self: stretch;
+  padding: 20px 72px 22px 24px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card__title {
+  font-size: 18px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card__title::after {
+  top: 32px;
+  right: 24px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card__title::before {
+  top: 32px;
+  right: 31px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .estimator-tool-card__desc {
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+:where(.app-wrapper).estimating-tools--customer
+  :is(
+    .truss-estimator__option-card,
+    .truss-estimator__visual-card,
+    .truss-estimator__toggle,
+    .brick-calculator__options,
+    .paint-calculator__row,
+    .skirting-calculator__room-row,
+    .architrave-calculator__opening-row,
+    .materials-calculator__surface-row,
+    [class*="-calculator__result-grid"] > div,
+    .estimator-products__option
+  ) {
+  border-radius: 14px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .truss-estimator :is(input:not([type="checkbox"]), select, textarea) {
+  border-radius: 10px;
+}
+
+/* Rounds the end buttons rather than clipping the group, which would cut off their focus rings. */
+:where(.app-wrapper).estimating-tools--customer .brick-calculator__unit-toggle {
+  border-radius: 10px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .brick-calculator__unit-toggle button:first-child {
+  border-radius: 9px 0 0 9px;
+}
+
+:where(.app-wrapper).estimating-tools--customer .brick-calculator__unit-toggle button:last-child {
+  border-radius: 0 9px 9px 0;
+}
+
+/* Back + Add to basket stay on one row: at their 30/70 split they would otherwise wrap
+   whenever "Back" is wider than 30% of a narrow card. */
+:where(.app-wrapper).estimating-tools--customer [class*="-calculator__actions"] {
+  flex-wrap: nowrap;
+}
+
+/* ===== Estimating tools, customer view: phones ===== */
+@media (max-width: 600px) {
+  :where(.app-wrapper).estimating-tools--customer .truss-estimator .quick-order-hero,
+  :where(.app-wrapper).estimating-tools--customer .truss-estimator__card {
+    padding-inline: 20px;
+  }
+
+  /* Half-width and capped fields go full width. */
+  :where(.app-wrapper).estimating-tools--customer .materials-calculator__depth,
+  :where(.app-wrapper).estimating-tools--customer .paint-calculator__coat-field .truss-estimator__field,
+  :where(.app-wrapper).estimating-tools--customer .truss-estimator__field--compact input {
+    max-width: none;
+  }
+
+  /* Diagram above the copy, not squeezing it into a narrow column. */
+  :where(.app-wrapper).estimating-tools--customer .truss-estimator__option-grid--range .truss-estimator__option-card {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  /* One total per row, as the other calculators already do on phones. */
+  :where(.app-wrapper).estimating-tools--customer .brick-calculator__result-grid {
+    grid-template-columns: 1fr;
+  }
+
+  /* Qty, width and height on one row under the opening's name. */
+  :where(.app-wrapper).estimating-tools--customer :is(.architrave-calculator__dimensions-header, .architrave-calculator__opening-row) {
+    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metron-labs/quote-react",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "description": "Metron Labs quote and estimating calculator components for React",
   "license": "UNLICENSED",
   "sideEffects": [