@stella-source/stellasource-dsl 3.3.1 → 3.5.0

package/dist/cjs/index.js

@@ -23084,6 +23084,70 @@ const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, va
     return (a$m.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a$m.createElement(Tab, { key: `${id}-${tab.label}`, id: `${id}-${tab.label}`, label: tab.label, active: tab.label === activeTab, variant: variant, onClick: () => handleClick(tab.label), notifications: tab.notifications })))));
 };
 
+const SelectorChipComponent = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 24px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--grey200);
+  font-size: 14px;
+  line-height: 1;
+  font-weight: 500;
+  font-family: "inter";
+  cursor: pointer;
+  transition: 0.15s ease;
+  background-color: var(--white);
+  color: var(--charcoal);
+
+  ${({ $selected }) => $selected
+    ? styled.css `
+          background-color: var(--grey700);
+          border-color: var(--grey700);
+          color: var(--white);
+        `
+    : styled.css `
+          &:hover {
+            background: var(--grey50);
+          }
+        `}
+
+  &:disabled {
+    background-color: var(--light-grey);
+    border-color: var(--light-grey);
+    color: var(--smoke);
+    cursor: not-allowed;
+  }
+`;
+const SelectorChipLabel = styled.span `
+  display: flex;
+  align-items: center;
+`;
+const SelectorChipClose = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  cursor: pointer;
+  color: inherit;
+`;
+
+const SelectorChip = ({ id, className, label, selected = false, disabled = false, onClick, onClose, }) => {
+    return (a$m.createElement(SelectorChipComponent, { id: id, className: className, "$selected": selected, disabled: disabled, onClick: onClick },
+        a$m.createElement(SelectorChipLabel, null, label),
+        selected && (a$m.createElement(SelectorChipClose, { type: "button", "aria-label": "Remove chip", disabled: disabled, onClick: (e) => {
+                e.stopPropagation();
+                onClose?.();
+            } },
+            a$m.createElement(e, { size: 16 })))));
+};
+
 const OrderStatusComponent = styled.div `
   display: flex;
   align-items: center;
@@ -23103,6 +23167,9 @@ const OrderStatusLabel = styled.span `
   overflow: hidden;
 `;
 
+// This is used as a dictionary of all of the mapped strings to icons and labels.
+// It isn't being enforced because of the string type.
+// Still, any new status mappings need to be added here as it affects the tests and stories.
 var OrderStatusVariant;
 (function (OrderStatusVariant) {
     OrderStatusVariant["COMPLETED"] = "Completed";
@@ -23138,7 +23205,7 @@ const getOrderStatusLabel = (variant, isPurchaser) => {
     }
 };
 
-const OrderStatus = ({ variant, id, className, isPurchaser, }) => {
+const OrderStatus = ({ variant = "", id, className, isPurchaser, }) => {
     const STATUS_ICON_MAP = {
         InfoNeeded: "warning",
         ViewPricing: "eye",
@@ -23157,6 +23224,7 @@ const OrderStatus = ({ variant, id, className, isPurchaser, }) => {
     const label = getOrderStatusLabel(variant, isPurchaser);
     return (a$m.createElement(OrderStatusComponent, { id: id, className: className },
         iconName && a$m.createElement(OrderStatusIcon, { iconName: iconName, size: 16 }),
+        !iconName && label !== "--" && (a$m.createElement(OrderStatusIcon, { iconName: "warning", size: 16 })),
         a$m.createElement(OrderStatusLabel, null, label)));
 };
 
@@ -23169,6 +23237,7 @@ exports.OrderStatus = OrderStatus;
 exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PaymentStatus = PaymentStatus;
+exports.SelectorChip = SelectorChip;
 exports.StellaButton = StellaButton;
 exports.StellaIcon = StellaIcon;
 exports.Styles = Styles;