@shipengine/elements 2.18.0 → 2.20.0

package/esm/components/history/history-card/label/index.js

@@ -0,0 +1 @@
+export { Label } from './label.js';

package/esm/components/history/history-card/label/label.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Typography } from '@shipengine/giger';
+import { styles } from './label.styles.js';
+
+const Label = ({
+  spacing,
+  children,
+  text,
+  textProps,
+  variant
+}) => {
+  return jsxs("div", Object.assign({
+    css: styles({
+      spacing,
+      variant
+    }).labelContainer
+  }, {
+    children: [jsx(Typography, Object.assign({}, textProps, {
+      children: text
+    })), children]
+  }));
+};
+
+export { Label };

package/esm/components/history/history-card/label/label.styles.js

@@ -0,0 +1,16 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = ({
+  variant,
+  spacing
+}) => createStyles({
+  labelContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: variant === "subtitle" ? "column" : variant === "inline" ? "row" : "row-reverse",
+    gap: scopeTheme(theme).spacing(typeof spacing === "number" ? spacing : 1),
+    justifyContent: typeof spacing === "string" && spacing === "spread" ? "space-between;" : "flex-start"
+  })
+});
+
+export { styles };

package/esm/components/history/history-card-extension/history-card-extension.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Divider, Typography, Icon } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './history-card-extension.styles.js';
+import { Spacer } from '../../spacer/spacer.js';
+
+// TODO: Uncomment the following code once we have a way to get the original shipment info for adjustments
+// const LoadingState = () => (
+//   <div css={styles.loadingStateContainer}>
+//     {[200, 160, 200].map((leftSkeletonWidth, index) => (
+//       <Spread key={`spread-${index}`}>
+//         <Skeleton
+//           animation={SkeletonAnimation.WAVE}
+//           height={24}
+//           variant={SkeletonVariant.RECT}
+//           width={leftSkeletonWidth}
+//         />
+//
+//         <Skeleton
+//           animation={SkeletonAnimation.WAVE}
+//           height={24}
+//           variant={SkeletonVariant.RECT}
+//           width={80}
+//         />
+//       </Spread>
+//     ))}
+//   </div>
+// );
+//
+// const ErrorState = () => <ErrorDisplay />;
+//
+// // replace type call with its se version - lmnt-936
+// const SuccessState = ({ adjustment }: { adjustment: WalletAdjustment }) => {
+//   const commonStylingProps: {
+//     spacing: LabelProps["spacing"];
+//     textProps: LabelProps["textProps"];
+//     variant: LabelProps["variant"];
+//   } = {
+//     spacing: "spread",
+//     textProps: { css: styles.detailsTypography, variant: "body2" },
+//     variant: "inline",
+//   };
+//
+//   const { adjustmentId, originalShipment, actualShipment, trackingNumber } = adjustment;
+//
+//   return (
+//     <div>
+//       <div>
+//         <Label text="Original Weight" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {`${originalShipment.weight.value} ${originalShipment.weight.unit}.`}
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Actual Weight" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {`${actualShipment.weight.value} ${actualShipment.weight.unit}.`}
+//           </Typography>
+//         </Label>
+//
+//         <Spacer multiplier={2} />
+//
+//         <Label text="Adjustment ID" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {adjustmentId}
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Tracking Number" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             {trackingNumber}
+//           </Typography>
+//         </Label>
+//       </div>
+//
+//       <Spacer multiplier={2} />
+//
+//       <div css={styles.detailsBottomContainer}>
+//         <Label text="Quoted Amount" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             $10.00
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Amount Paid" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             $9.00
+//           </Typography>
+//         </Label>
+//
+//         <Label text="Adjustment" {...commonStylingProps}>
+//           <Typography css={styles.detailsTypography} variant="body2">
+//             +$1.00
+//           </Typography>
+//         </Label>
+//       </div>
+//     </div>
+//   );
+// };
+const HistoryCardExtension = ({
+  transactionDetails
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  return jsxs("div", {
+    children: [jsx(Spacer, {
+      multiplier: 2
+    }), jsx(Divider, {}), jsx(Spacer, {
+      multiplier: 1
+    }), jsxs("div", {
+      children: [jsxs("div", Object.assign({
+        css: styles.headingContainer
+      }, {
+        children: [jsx(Typography, Object.assign({
+          css: styles.detailsTypography
+        }, {
+          children: t("wallet-history:details.inaccurateWeight")
+        })), jsx("div", Object.assign({
+          onClick: () => setIsOpen(!isOpen),
+          onKeyDown: event => {
+            if (event.key === "Enter") {
+              setIsOpen(!isOpen);
+            }
+          },
+          role: "button",
+          tabIndex: 0
+        }, {
+          children: isOpen ? jsx(Icon, {
+            css: styles.chevronTypography,
+            name: IconNames.CHEVRON_TOP
+          }) : jsx(Icon, {
+            css: styles.chevronTypography,
+            name: IconNames.CHEVRON_BOTTOM
+          })
+        }))]
+      })), isOpen && jsx(Spacer, {
+        multiplier: 1
+      }), isOpen && jsx(Typography, Object.assign({
+        css: styles.detailsTypography
+      }, {
+        children: transactionDetails
+      }))]
+    })]
+  });
+};
+
+export { HistoryCardExtension };

package/esm/components/history/history-card-extension/history-card-extension.styles.js

@@ -0,0 +1,30 @@
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
+
+const styles = createStyles({
+  chevronTypography: theme => ({
+    color: scopeTheme(theme).palette.secondary.main
+  }),
+  detailsBottomContainer: theme => ({
+    backgroundColor: scopeTheme(theme).palette.white,
+    padding: "8px"
+  }),
+  detailsRow: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  detailsTypography: theme => ({
+    color: scopeTheme(theme).palette.black
+  }),
+  headingContainer: {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  loadingStateContainer: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    rowGap: scopeTheme(theme).spacing(2)
+  })
+});
+
+export { styles };

package/esm/components/history/history-card-extension/index.js

@@ -0,0 +1 @@
+export { HistoryCardExtension } from './history-card-extension.js';

package/esm/components/history/index.js

@@ -0,0 +1,2 @@
+export { HistoryCard } from './history-card/history-card.js';
+export { HistoryCardExtension } from './history-card-extension/history-card-extension.js';

package/esm/components/inline-label/index.js

@@ -0,0 +1 @@
+export { InlineLabel } from './inline-label.js';

package/esm/components/inline-label/inline-label.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Typography } from '@shipengine/giger';
+import { styles } from './inline-label.styles.js';
+
+/**
+ * @internal
+ *
+ * # Inline Label Component
+ */
+const InlineLabel = ({
+  children,
+  label,
+  isLabelRight,
+  labelProps: _labelProps = {}
+}) => jsxs("div", Object.assign({
+  css: styles(isLabelRight).inlineContainer
+}, {
+  children: [jsx(Typography, Object.assign({}, _labelProps, {
+    children: label
+  })), children]
+}));
+
+export { InlineLabel };

package/esm/components/inline-label/inline-label.styles.js

@@ -0,0 +1,12 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = isLabelRight => createStyles({
+  inlineContainer: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: isLabelRight ? "row-reverse" : "row",
+    gap: scopeTheme(theme).spacing(1)
+  })
+});
+
+export { styles };

package/esm/components/insurance-popover/index.js

@@ -0,0 +1 @@
+export { InsurancePopover } from './insurance-popover.js';

package/esm/components/insurance-popover/insurance-popover.js

@@ -0,0 +1,81 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { formatMoney } from '../../utilities/money.js';
+import { useTranslation, Trans } from 'react-i18next';
+import { Popover, Typography, Link, Icon, IconSize, Button } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './insurance-popover.styles.js';
+import { Spacer } from '../spacer/spacer.js';
+
+const InsurancePopover = ({
+  fundingSourceInsuranceProvider,
+  iconRef,
+  insuredValue,
+  insuranceClaim,
+  showPopover,
+  toggleShowPopover
+}) => {
+  const {
+    t
+  } = useTranslation("view-shipment");
+  if (fundingSourceInsuranceProvider === "parcelguard") {
+    return jsxs(Popover, Object.assign({
+      css: styles.popover,
+      isOpen: showPopover,
+      onClickAway: e => {
+        var _a;
+        return !((_a = iconRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && toggleShowPopover();
+      },
+      placement: "bottom",
+      reference: iconRef.current
+    }, {
+      children: [jsx(Typography, Object.assign({
+        bold: true,
+        variant: "body2"
+      }, {
+        children: t(`insurance.parcelguard.title`)
+      })), jsx(Spacer, {
+        multiplier: 1
+      }), jsxs(Trans, Object.assign({
+        i18nKey: t(`view-shipment:insurance.parcelguard.description`),
+        insuredValue: formatMoney(insuredValue)
+      }, {
+        children: ["Your shipment includes insurance coverage up to\u00A0", {
+          insuredValue: formatMoney(insuredValue)
+        }, ". Learn more about\u00A0", jsxs(Link, Object.assign({
+          "aria-label": "Opens in a new tab",
+          css: styles.link,
+          href: "https://help.shipengine.com/hc/en-us/articles/26099415057435-ParcelGuard",
+          isExternal: true,
+          rel: "noreferrer",
+          target: "_blank"
+        }, {
+          children: ["ParcelGuard coverage and terms of service\u00A0", jsx(Icon, {
+            name: IconNames.NEW_WINDOW,
+            size: IconSize.SIZE_SMALL
+          })]
+        }))]
+      })), insuranceClaim && jsxs(Fragment, {
+        children: [jsx(Spacer, {
+          multiplier: 2
+        }), jsx(Button, Object.assign({
+          role: "link"
+        }, {
+          children: jsx("a", Object.assign({
+            css: {
+              color: "inherit",
+              textDecoration: "none"
+            },
+            href: insuranceClaim === null || insuranceClaim === void 0 ? void 0 : insuranceClaim.href,
+            rel: "noreferrer",
+            target: "_blank"
+          }, {
+            children: t("actions.fileClaim")
+          }))
+        }))]
+      })]
+    }));
+  }
+  return null;
+};
+
+export { InsurancePopover };

package/esm/components/insurance-popover/insurance-popover.styles.js

@@ -0,0 +1,18 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  icon: theme => ({
+    marginLeft: scopeTheme(theme).spacing(0.5)
+  }),
+  link: theme => ({
+    "&:visited": {
+      color: scopeTheme(theme).palette.secondary.main
+    },
+    fontWeight: scopeTheme(theme).typography.fontWeight.normal
+  }),
+  popover: theme => ({
+    fontSize: scopeTheme(theme).typography.fontSize.S
+  })
+});
+
+export { styles };

package/esm/components/items-breakdown/index.js

@@ -0,0 +1 @@
+export { ItemsBreakdown } from './items-breakdown.js';

package/esm/components/items-breakdown/items-breakdown.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { formatMoney } from '../../utilities/money.js';
+import { Fragment } from 'react';
+import { Table, TableBody, TableBaseRow, TableBodyCell, Typography, TableHeader, TableHeaderCell } from '@shipengine/giger';
+import { styles } from './items-breakdown.styles.js';
+
+const ItemsBreakdownTableHeader = ({
+  hasValue,
+  hasTotal
+}) => jsx(TableHeader, {
+  children: jsxs(TableBaseRow, {
+    children: [jsx(TableHeaderCell, {
+      "aria-hidden": "true"
+    }), jsx(TableHeaderCell, Object.assign({
+      css: styles.numericCell
+    }, {
+      children: "Qty"
+    })), hasValue && jsx(TableHeaderCell, Object.assign({
+      css: styles.numericCell
+    }, {
+      children: "$/ea"
+    })), hasTotal && jsx(TableHeaderCell, Object.assign({
+      css: styles.numericCell
+    }, {
+      children: "$ Total"
+    }))]
+  })
+});
+/**
+ * @internal
+ *
+ * # Items Breakdown Component
+ */
+const ItemsBreakdown = ({
+  items
+}) => {
+  const hasValue = items.some(item => item.value !== undefined);
+  const hasTotal = items.some(item => item.totalValue !== undefined);
+  return jsx("div", Object.assign({
+    css: styles.tableWrapper
+  }, {
+    children: jsx(Table, Object.assign({
+      header: jsx(ItemsBreakdownTableHeader, {
+        hasTotal: hasTotal,
+        hasValue: hasValue
+      })
+    }, {
+      children: jsx(TableBody, {
+        children: items.map(({
+          name,
+          detail,
+          quantity,
+          value,
+          totalValue
+        }, index) => jsx(Fragment, {
+          children: jsxs(TableBaseRow, {
+            children: [jsxs(TableBodyCell, Object.assign({
+              css: styles.itemDescription
+            }, {
+              children: [jsx(Typography, Object.assign({
+                css: styles.itemName
+              }, {
+                children: name
+              })), jsx(Typography, {
+                children: detail
+              })]
+            })), jsx(TableBodyCell, Object.assign({
+              css: [styles.numericCell, styles.itemDetail]
+            }, {
+              children: quantity
+            })), hasValue && jsx(TableBodyCell, Object.assign({
+              css: [styles.numericCell, styles.itemDetail]
+            }, {
+              children: value && formatMoney(value)
+            })), hasTotal && jsx(TableBodyCell, Object.assign({
+              css: [styles.numericCell, styles.itemDetail]
+            }, {
+              children: totalValue && formatMoney(totalValue)
+            }))]
+          })
+        }, index))
+      })
+    }))
+  }));
+};
+
+export { ItemsBreakdown };

package/esm/components/items-breakdown/items-breakdown.styles.js

@@ -0,0 +1,39 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  itemDescription: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${scopeTheme(theme).spacing(2)}px ${scopeTheme(theme).spacing(2)}px ${scopeTheme(theme).spacing(0)}px ${scopeTheme(theme).spacing(0)}px`
+  }),
+  itemDetail: theme => ({
+    padding: `${scopeTheme(theme).spacing(2)}px ${scopeTheme(theme).spacing(2)}px ${scopeTheme(theme).spacing(0.5)}px ${scopeTheme(theme).spacing(0)}px`,
+    verticalAlign: "top"
+  }),
+  itemName: theme => ({
+    display: "-webkit-box",
+    lineHeight: `${scopeTheme(theme).spacing(2.5)}px`,
+    maxHeight: `${scopeTheme(theme).spacing(7.5)}px`,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    // Set item name to max 3 lines and truncate with ellipsis
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: "3",
+    whiteSpace: "normal"
+  }),
+  numericCell: () => ({
+    textAlign: "right",
+    width: "80px"
+  }),
+  tableWrapper: theme => ({
+    "&& > div": {
+      boxShadow: "none"
+    },
+    "&& > div table thead th": {
+      fontStyle: "italic",
+      fontWeight: scopeTheme(theme).typography.fontWeight.normal
+    }
+  })
+});
+
+export { styles };

package/esm/components/link-action/index.js

@@ -0,0 +1 @@
+export { LinkAction } from './link-action.js';

package/esm/components/link-action/link-action.js

@@ -0,0 +1,70 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { scopeTheme } from '../../utilities/styles.js';
+import { Link, ButtonSize, Spinner, Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+
+const icons = {
+  add: IconNames.ADD,
+  checkFilled: IconNames.CHECK_FILLED,
+  copy: IconNames.COPY,
+  download: IconNames.DOWNLOAD,
+  retry: IconNames.CIRCULAR_ARROW
+};
+/**
+ * @internal
+ *
+ * # Link Action Component
+ */
+const LinkAction = _a => {
+  var {
+      css,
+      icon,
+      isDisabled,
+      isLoading,
+      title,
+      isBold = true
+    } = _a,
+    props = __rest(_a, ["css", "icon", "isDisabled", "isLoading", "title", "isBold"]);
+  return jsx(Link, Object.assign({}, props, {
+    bold: isBold,
+    css: theme => [Object.assign(Object.assign({
+      "&&&": {
+        textDecoration: "none"
+      },
+      alignItems: "center"
+    }, icon === "checkFilled" ? {
+      color: scopeTheme(theme).palette.success.main
+    } : null), {
+      display: "flex",
+      gap: scopeTheme(theme).spacing(1)
+    }),
+    // TODO [LMNT-663] - Giger's Link component does not render isDisabled state unless isButton is true
+    (isDisabled || isLoading) && {
+      color: scopeTheme(theme).palette.gray.main,
+      cursor: "none",
+      pointerEvents: "none"
+    }, css],
+    isDisabled: isDisabled,
+    onKeyDown: e => {
+      var _a;
+      if (e.key === "Enter") {
+        e.preventDefault();
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      }
+    },
+    role: "button",
+    size: ButtonSize.MEDIUM,
+    tabIndex: 0
+  }, {
+    children: isLoading ? jsx(Spinner, {}) : jsxs(Fragment, {
+      children: [title, icon && jsx(Icon, {
+        name: icons[icon],
+        size: IconSize.SIZE_MEDIUM,
+        title: title
+      })]
+    })
+  }));
+};
+
+export { LinkAction };

package/esm/components/loader/index.js

@@ -0,0 +1 @@
+export { Loader } from './loader.js';

package/esm/components/loader/loader.js

@@ -0,0 +1,20 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Spinner, SpinnerSize } from '@shipengine/giger';
+import { styles } from './loader.styles.js';
+
+/**
+ * @internal
+ *
+ * # Loader Component
+ */
+const Loader = props => {
+  return jsx("div", Object.assign({
+    css: styles.container
+  }, {
+    children: jsx(Spinner, Object.assign({}, props, {
+      size: props.size || SpinnerSize.SIZE_LARGE
+    }))
+  }));
+};
+
+export { Loader };

package/esm/components/loader/loader.styles.js

@@ -0,0 +1,15 @@
+import { createStyles } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  container: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "center",
+    textAlign: "center",
+    width: "100%"
+  }
+});
+
+export { styles };

package/esm/components/modal/index.js

@@ -0,0 +1,2 @@
+export { ModalContainer, ModalContext, useModal } from './modal-container.js';
+export { Modal } from './modal.js';

package/esm/components/modal/modal-container.js

@@ -0,0 +1,43 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import * as React from 'react';
+
+const ModalContainer = ({
+  children
+}) => {
+  const portalRef = React.useRef(null);
+  const [parent, setParent] = React.useState(undefined);
+  React.useEffect(() => {
+    var _a;
+    setParent((_a = portalRef.current) !== null && _a !== void 0 ? _a : undefined);
+  }, []);
+  const contextValue = {
+    fullScreen: true,
+    isContained: true,
+    parentSelector: parent ? () => parent : undefined
+  };
+  return jsx(ModalContext.Provider, Object.assign({
+    value: contextValue
+  }, {
+    children: jsx("div", Object.assign({
+      ref: portalRef,
+      style: {
+        position: "relative"
+      }
+    }, {
+      children: children
+    }))
+  }));
+};
+const ModalContext = /*#__PURE__*/React.createContext(undefined);
+const useModal = () => {
+  const context = React.useContext(ModalContext);
+  if (context === undefined) {
+    // We are not inside a ModalContainer; let modals use the default parent.
+    return {
+      isContained: false
+    };
+  }
+  return context;
+};
+
+export { ModalContainer, ModalContext, useModal };