@shipengine/elements 2.20.0 → 2.21.0

package/cjs/components/service-point-display/service-point-display.styles.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  getSelectedStyles: isSelected => theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    justifyContent: isSelected ? "" : "space-between"
+  }),
+  inlineWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    justifyContent: "space-between"
+  }),
+  paperlessIcon: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray[600],
+    paddingRight: "4px"
+  }),
+  paperlessText: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray[600],
+    paddingLeft: styles$1.scopeTheme(theme).spacing(0.5)
+  }),
+  paperlessWrapper: () => ({
+    display: "flex",
+    marginBottom: "12px"
+  }),
+  selectButton: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.primary.main,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.S,
+    color: styles$1.scopeTheme(theme).palette.white,
+    cursor: "pointer",
+    padding: `${styles$1.scopeTheme(theme).spacing(0.25)}px ${styles$1.scopeTheme(theme).spacing(1)}px`,
+    whiteSpace: "nowrap"
+  }),
+  viewMap: theme => ({
+    "&:hover": {
+      textDecoration: "underline"
+    },
+    color: styles$1.scopeTheme(theme).palette.secondary.main,
+    textDecoration: "none"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/service-points/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var servicePoints = require('./service-points.cjs');
+
+
+
+exports.ServicePoints = servicePoints.ServicePoints;

package/cjs/components/service-points/service-points.cjs

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var useToggle = require('../../hooks/use-toggle.cjs');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var servicePoints_styles = require('./service-points.styles.cjs');
+var servicePointDisplay = require('../service-point-display/service-point-display.cjs');
+
+const ServicePoints = ({
+  servicePoints,
+  rateSelected,
+  onSelectServicePoint,
+  mapViewEnabled,
+  isLoading
+}) => {
+  const {
+    t
+  } = reactI18next.useTranslation("purchase-label");
+  const [expanded, toggleExpanded] = useToggle.useToggle(false);
+  const [selectedServicePoint, setSelectedServicePoint] = React.useState(servicePoints === null || servicePoints === void 0 ? void 0 : servicePoints[0]);
+  if (!servicePoints) {
+    return null;
+  }
+  const handleOnSelectServicePoint = servicePoint => {
+    setSelectedServicePoint(servicePoint);
+    onSelectServicePoint === null || onSelectServicePoint === void 0 ? void 0 : onSelectServicePoint(servicePoint);
+  };
+  // Only show first 3 service points
+  if (servicePoints.length > 3) {
+    servicePoints = servicePoints.slice(0, 3);
+  }
+  if (isLoading) {
+    return jsxRuntime.jsxs("div", Object.assign({
+      css: servicePoints_styles.styles.servicePointSkeleton
+    }, {
+      children: [jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.LIGHT,
+        height: 16,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 200
+      })]
+    }));
+  }
+  if (!isLoading && servicePoints && servicePoints.length === 0) {
+    return jsxRuntime.jsx(giger.InlineNotification, Object.assign({
+      css: {
+        margin: "16px"
+      },
+      type: giger.NotificationType.INFO
+    }, {
+      children: t("purchase-label:servicePoints.noServicePointsForService")
+    }));
+  }
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: rateSelected && expanded ? servicePoints_styles.styles.expandedContainerStyles : servicePoints_styles.styles.containerStyles,
+    "data-testid": "service-points"
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      "aria-hidden": !rateSelected,
+      css: servicePoints_styles.styles.servicePointWrapper
+    }, {
+      children: [jsxRuntime.jsx(servicePointDisplay.ServicePointDisplay, {
+        mapViewEnabled: mapViewEnabled,
+        onViewMapClick: servicePoint => handleOnSelectServicePoint(servicePoint),
+        rateSelected: rateSelected,
+        servicePoint: servicePoints[0]
+      }), rateSelected && expanded && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(giger.Divider, {}), jsxRuntime.jsx(giger.Typography, Object.assign({
+          css: servicePoints_styles.styles.subText,
+          variant: "small"
+        }, {
+          children: t("servicePoints.otherLocations")
+        })), servicePoints.filter(servicePoint => servicePoint.servicePointId !== (selectedServicePoint === null || selectedServicePoint === void 0 ? void 0 : selectedServicePoint.servicePointId)).map(servicePoint => jsxRuntime.jsx(servicePointDisplay.ServicePointDisplay, {
+          mapViewEnabled: mapViewEnabled,
+          onViewMapClick: servicePoint => handleOnSelectServicePoint(servicePoint),
+          rateSelected: rateSelected,
+          servicePoint: servicePoint
+        }, servicePoint.servicePointId))]
+      })]
+    })), jsxRuntime.jsx(giger.Button, Object.assign({
+      css: servicePoints_styles.styles.button,
+      onClick: toggleExpanded,
+      variant: giger.ButtonVariant.TEXT
+    }, {
+      children: jsxRuntime.jsxs("div", Object.assign({
+        css: servicePoints_styles.styles.locationToggle
+      }, {
+        children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+          "aria-hidden": !rateSelected
+        }, {
+          children: rateSelected && expanded ? t("servicePoints.hideLocations") : t("servicePoints.moreLocations")
+        })), jsxRuntime.jsx(giger.Icon, {
+          name: expanded ? gigerTheme.IconNames.CHEVRON_TOP : gigerTheme.IconNames.CHEVRON_BOTTOM,
+          size: giger.IconSize.SIZE_MEDIUM
+        })]
+      }))
+    }))]
+  }));
+};
+
+exports.ServicePoints = ServicePoints;

package/cjs/components/service-points/service-points.styles.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  button: {
+    alignSelf: "flex-end",
+    gridArea: "2 / 2 / 3 / 3",
+    justifySelf: "flex-end",
+    padding: 0
+  },
+  containerStyles: theme => ({
+    display: "grid",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    gridTemplateRows: "repeat(2, 1fr)",
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  expandedContainerStyles: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  locationToggle: theme => ({
+    alignItems: "center",
+    color: styles$1.scopeTheme(theme).palette.gray.dark,
+    display: "flex",
+    lineHeight: styles$1.scopeTheme(theme).typography.lineHeight.S,
+    whiteSpace: "nowrap"
+  }),
+  selectButton: theme => ({
+    backgroundColor: styles$1.scopeTheme(theme).palette.primary.main,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.S,
+    color: styles$1.scopeTheme(theme).palette.white,
+    cursor: "pointer",
+    padding: `${styles$1.scopeTheme(theme).spacing(0.25)}px ${styles$1.scopeTheme(theme).spacing(1)}px`,
+    whiteSpace: "nowrap"
+  }),
+  servicePointSkeleton: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1.25),
+    padding: styles$1.scopeTheme(theme).spacing(2)
+  }),
+  servicePointWrapper: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: styles$1.scopeTheme(theme).spacing(1),
+    gridArea: "1 / 1 / 3 / 3"
+  }),
+  subText: theme => ({
+    color: styles$1.scopeTheme(theme).palette.gray.main
+  })
+});
+
+exports.styles = styles;

package/cjs/components/settings-card/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var settingsCard = require('./settings-card.cjs');
+
+
+
+exports.SettingsCard = settingsCard.SettingsCard;

package/cjs/components/settings-card/settings-card.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var settingsCard_styles = require('./settings-card.styles.cjs');
+var buttonGroup = require('../button-group/button-group.cjs');
+
+const SettingsCard = ({
+  accessoryAction,
+  cardAction,
+  children,
+  subtitle,
+  title,
+  verticallyAligned
+}) => {
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: verticallyAligned ? settingsCard_styles.styles.verticalContainer : settingsCard_styles.styles.container,
+    "data-testid": "settingsCard"
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: settingsCard_styles.styles.header
+    }, {
+      children: [jsxRuntime.jsxs("div", Object.assign({
+        css: settingsCard_styles.styles.title
+      }, {
+        children: [typeof title === "string" ? jsxRuntime.jsx(giger.Typography, Object.assign({
+          variant: "subtitle2"
+        }, {
+          children: title
+        })) : title, subtitle && jsxRuntime.jsx(giger.Tag, Object.assign({
+          color: giger.TagColor.GRAY,
+          css: {
+            textTransform: "capitalize"
+          }
+        }, {
+          children: subtitle
+        }))]
+      })), jsxRuntime.jsx("div", Object.assign({
+        css: {
+          flexShrink: 0
+        }
+      }, {
+        children: jsxRuntime.jsx(giger.Button, Object.assign({
+          color: giger.ButtonColor.SECONDARY,
+          onClick: cardAction.action,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: cardAction.name
+        }))
+      }))]
+    })), children && jsxRuntime.jsx("div", Object.assign({
+      css: settingsCard_styles.styles.body
+    }, {
+      children: jsxRuntime.jsxs("div", {
+        children: [children, accessoryAction && jsxRuntime.jsx(buttonGroup.ButtonGroup, Object.assign({
+          justify: "center"
+        }, {
+          children: jsxRuntime.jsx(giger.Button, Object.assign({
+            bold: false,
+            color: giger.ButtonColor.SECONDARY,
+            onClick: accessoryAction.action,
+            type: "button",
+            variant: giger.ButtonVariant.TEXT
+          }, {
+            children: accessoryAction.name
+          }))
+        }))]
+      })
+    }))]
+  }));
+};
+
+exports.SettingsCard = SettingsCard;

package/cjs/components/settings-card/settings-card.styles.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  body: theme => ({
+    borderTop: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    color: styles$1.scopeTheme(theme).palette.black,
+    lineHeight: styles$1.scopeTheme(theme).spacing(0.05),
+    marginRight: styles$1.scopeTheme(theme).spacing(2),
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    textTransform: "uppercase",
+    width: "100%"
+  }),
+  container: theme => ({
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.M,
+    boxSizing: "border-box",
+    width: "100%"
+  }),
+  header: theme => ({
+    alignItems: "center",
+    borderRadius: 2,
+    color: styles$1.scopeTheme(theme).palette.black,
+    display: "flex",
+    justifyContent: "space-between",
+    padding: styles$1.scopeTheme(theme).spacing(2),
+    width: "100%"
+  }),
+  title: theme => ({
+    alignItems: "center",
+    display: "flex",
+    gap: styles$1.scopeTheme(theme).spacing(),
+    justifyContent: "space-between"
+  }),
+  verticalContainer: theme => ({
+    alignItems: "center",
+    border: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`,
+    borderRadius: styles$1.scopeTheme(theme).borderRadius.M,
+    boxSizing: "border-box",
+    display: "flex",
+    height: "100%",
+    width: "100%"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/skeleton/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var skeletonCarrierRow = require('./skeleton-carrier-row.cjs');
+
+
+
+exports.SkeletonCarrierRow = skeletonCarrierRow.SkeletonCarrierRow;

package/cjs/components/skeleton/skeleton-carrier-row.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var skeletonCarrierRow_styles = require('./skeleton-carrier-row.styles.cjs');
+
+const SkeletonCarrierRow = () => {
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: skeletonCarrierRow_styles.styles.skeletonRow,
+    "data-testid": "skeleton-carrier-row"
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: skeletonCarrierRow_styles.styles.skeletonLogoContainer
+    }, {
+      children: [jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        height: 24,
+        variant: giger.SkeletonVariant.RECT,
+        width: 24
+      }), jsxRuntime.jsx(giger.Skeleton, {
+        animation: giger.SkeletonAnimation.WAVE,
+        backgroundColor: giger.SkeletonBackgroundColor.DARK,
+        height: 20,
+        variant: giger.SkeletonVariant.TEXT,
+        width: 80
+      })]
+    })), jsxRuntime.jsx(giger.Skeleton, {
+      animation: giger.SkeletonAnimation.WAVE,
+      backgroundColor: giger.SkeletonBackgroundColor.DARK,
+      height: 20,
+      variant: giger.SkeletonVariant.TEXT,
+      width: 73
+    })]
+  }));
+};
+
+exports.SkeletonCarrierRow = SkeletonCarrierRow;

package/cjs/components/skeleton/skeleton-carrier-row.styles.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  skeletonLogoContainer: theme => ({
+    alignItems: "center",
+    columnGap: `${styles$1.scopeTheme(theme).spacing(1)}px`,
+    display: "flex"
+  }),
+  skeletonRow: theme => ({
+    "&:not(:last-of-type)": {
+      borderBottom: `1px solid ${styles$1.scopeTheme(theme).palette.gray.light}`
+    },
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    padding: `${styles$1.scopeTheme(theme).spacing(3)}px ${styles$1.scopeTheme(theme).spacing(2)}px`
+  })
+});
+
+exports.styles = styles;

package/cjs/components/spacer/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var spacer = require('./spacer.cjs');
+
+
+
+exports.Spacer = spacer.Spacer;

package/cjs/components/spacer/spacer.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles$1 = require('../../utilities/styles.cjs');
+
+/**
+ * @internal
+ *
+ * # Spacer Component Util Function
+ *
+ * - This is a utility function that generates dynamic styles for the `<Spacer />` component.
+ *
+ * @param SpacerProps The base props that will be passed into the `<Spacer />` component at
+ * point of use.
+ *
+ *
+ * @see {@link Spacer | The `<Spacer />` component that uses these dynamic styles}
+ *
+ */
+const styles = styles$1.createStyles({
+  getSpacerStyles: ({
+    displayOn,
+    multiplier: _multiplier = 4
+  }) => theme => Object.assign(Object.assign({}, displayOn ? {
+    display: "none",
+    [styles$1.scopeTheme(theme).mediaQuery(displayOn)]: {
+      display: "block"
+    }
+  } : {
+    display: "block"
+  }), {
+    height: styles$1.scopeTheme(theme).spacing(_multiplier),
+    width: "100%"
+  })
+});
+/**
+ * @internal
+ *
+ * # Spacer Composition Component
+ *
+ * - The `Spacer` is a composition component used to create a space between elements
+ * in the UI.
+ *
+ * @see {@link Spacer.SpacerProps | The props necessary to render the `<Spacer />` component}
+ * @see {@link Spacer.getSpacerStyles | The util function that generates the styles for the `<Spacer />` component}
+ *
+ */
+const Spacer = props => jsxRuntime.jsx("div", {
+  css: styles.getSpacerStyles(props)
+});
+
+exports.Spacer = Spacer;

package/cjs/components/spread/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var spread = require('./spread.cjs');
+
+
+
+exports.Spread = spread.Spread;

package/cjs/components/spread/spread.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('../../utilities/styles.cjs');
+
+/**
+ * @internal
+ *
+ * # Spread Component
+ */
+const Spread = ({
+  children
+}) => jsxRuntime.jsx("div", Object.assign({
+  css: theme => ({
+    display: "flex",
+    gap: styles.scopeTheme(theme).spacing(2),
+    justifyContent: "space-between"
+  })
+}, {
+  children: children
+}));
+
+exports.Spread = Spread;

package/cjs/components/story-notes/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var storyNotes = require('./story-notes.cjs');
+
+
+
+exports.StoryNotes = storyNotes.StoryNotes;

package/cjs/components/story-notes/story-notes.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('../../utilities/styles.cjs');
+var giger = require('@shipengine/giger');
+
+/**
+ * @internal
+ *
+ * # Story Notes Component
+ *
+ * - For relevant notes about Storybook stories
+ *
+ * Stopgap until we setup https://storybook.js.org/addons/@storybook/addon-docs
+ */
+const StoryNotes = ({
+  children,
+  notes
+}) => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [jsxRuntime.jsxs("div", Object.assign({
+    css: () => ({
+      backgroundColor: "lightsteelblue",
+      marginBottom: "16px",
+      padding: "16px",
+      paddingLeft: "32px"
+    })
+  }, {
+    children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+      variant: "heading5"
+    }, {
+      children: "Story notes:"
+    })), jsxRuntime.jsx("ul", Object.assign({
+      css: theme => ({
+        "> li": {
+          marginTop: styles.scopeTheme(theme).spacing(1)
+        }
+      })
+    }, {
+      children: notes.map(n => jsxRuntime.jsx("li", {
+        children: n
+      }, n))
+    }))]
+  })), jsxRuntime.jsx("hr", {
+    css: () => ({
+      backgroundColor: "transparent",
+      borderTop: "1px dotted lightgrey",
+      marginBottom: "16px"
+    })
+  }), children]
+});
+
+exports.StoryNotes = StoryNotes;

package/cjs/components/suspend/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var suspendText = require('./suspend-text.cjs');
+
+
+
+exports.SuspendText = suspendText.SuspendText;

package/cjs/components/suspend/suspend-text.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+
+const SuspendText = ({
+  children,
+  loading
+}) => {
+  if (loading) {
+    return jsxRuntime.jsx(giger.Skeleton, {
+      animation: giger.SkeletonAnimation.WAVE,
+      variant: giger.SkeletonVariant.TEXT
+    });
+  }
+  return jsxRuntime.jsx("span", {
+    children: children
+  });
+};
+
+exports.SuspendText = SuspendText;

package/cjs/components/suspend-purchase/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var suspendPurchase = require('./suspend-purchase.cjs');
+
+
+
+exports.SuspendPurchase = suspendPurchase.SuspendPurchase;