@stella-source/stellasource-dsl 3.4.0 → 3.5.1

package/dist/cjs/types/components/OrderStatus/OrderStatus.stories.d.ts

@@ -8,7 +8,7 @@ declare const _default: {
             control: {
                 type: string;
             };
-            options: (OrderStatusVariant | null)[];
+            options: string[];
         };
     };
     args: {

package/dist/cjs/types/components/OrderStatus/helpers.d.ts

@@ -1,2 +1,2 @@
 import { OrderStatusVariant } from "./types";
-export declare const getOrderStatusLabel: (variant: OrderStatusVariant | null, isPurchaser?: boolean) => string;
+export declare const getOrderStatusLabel: (variant?: `${OrderStatusVariant}` | string, isPurchaser?: boolean) => string;

package/dist/cjs/types/components/OrderStatus/types.d.ts

@@ -15,6 +15,6 @@ export declare enum OrderStatusVariant {
 export interface OrderStatusProps {
     id?: string;
     className?: string;
-    variant: OrderStatusVariant | null;
+    variant?: `${OrderStatusVariant}` | string;
     isPurchaser?: boolean;
 }

package/dist/cjs/types/components/SelectorChip/styles.d.ts

@@ -1,7 +1,9 @@
 interface SelectorChipStyleProps {
     $selected?: boolean;
+    $disabled?: boolean;
 }
-export declare const SelectorChipComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$selected"> & SelectorChipStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$selected"> & SelectorChipStyleProps, never>>> & string;
-export declare const SelectorChipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const SelectorChipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof SelectorChipStyleProps> & SelectorChipStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof SelectorChipStyleProps> & SelectorChipStyleProps, never>>> & string;
+export declare const SelectorChipComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof SelectorChipStyleProps> & SelectorChipStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof SelectorChipStyleProps> & SelectorChipStyleProps, never>>> & string;
+export declare const SelectorChipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof SelectorChipStyleProps> & SelectorChipStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, keyof SelectorChipStyleProps> & SelectorChipStyleProps, never>>> & string;
 export declare const SelectorChipClose: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 export {};

package/dist/esm/index.esm.js

@@ -23064,65 +23064,69 @@ const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, va
     return (a__default.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a__default.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 `
+const SelectorChipWrapper = styled.div `
+  position: relative;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 5px;
   height: 24px;
-  padding: 2px 8px;
-  border-radius: 4px;
+  border-radius: 5px;
   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
-    ? css `
-          background-color: var(--grey700);
-          border-color: var(--grey700);
-          color: var(--white);
-        `
-    : css `
-          &:hover {
-            background: var(--grey50);
-          }
-        `}
+  ${({ $selected }) => $selected &&
+    css `
+      background-color: ${Styles.color.core.primary};
+      border-color: var(--grey700);
+      color: var(--white);
+      cursor: default;
+    `}
 
-  &:disabled {
-    background-color: var(--light-grey);
-    border-color: var(--light-grey);
-    color: var(--smoke);
-    cursor: not-allowed;
-  }
+  ${({ $disabled }) => $disabled &&
+    css `
+      background-color: var(--light-grey);
+      border-color: var(--light-grey);
+      color: var(--smoke);
+      cursor: not-allowed;
+      pointer-events: none;
+    `}
+`;
+const SelectorChipComponent = styled.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  cursor: ${({ $selected }) => ($selected ? "default" : "pointer")};
 `;
-const SelectorChipLabel = styled.span `
+const SelectorChipLabel = styled.label `
   display: flex;
   align-items: center;
+  padding: 2px 8px;
+  cursor: ${({ $selected }) => ($selected ? "default" : "pointer")};
 `;
 const SelectorChipClose = styled.button `
   display: flex;
   align-items: center;
+  height: 100%;
   justify-content: center;
-
+  padding: 0px 8px 0px 0px;
   border: none;
   background: transparent;
-  padding: 0;
-
   cursor: pointer;
   color: inherit;
 `;
 
 const SelectorChip = ({ id, className, label, selected = false, disabled = false, onClick, onClose, }) => {
-    return (a__default.createElement(SelectorChipComponent, { id: id, className: className, "$selected": selected, disabled: disabled, onClick: onClick },
-        a__default.createElement(SelectorChipLabel, null, label),
+    return (a__default.createElement(SelectorChipWrapper, { "$selected": selected, "$disabled": disabled, onClick: onClick, id: id },
+        a__default.createElement(SelectorChipComponent, { "$selected": selected, id: id, type: "button" },
+            a__default.createElement(SelectorChipLabel, { "$selected": selected }, label)),
         selected && (a__default.createElement(SelectorChipClose, { type: "button", "aria-label": "Remove chip", disabled: disabled, onClick: (e) => {
-                e.stopPropagation();
                 onClose?.();
             } },
             a__default.createElement(e, { size: 16 })))));
@@ -23147,6 +23151,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";
@@ -23182,7 +23189,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",
@@ -23201,6 +23208,7 @@ const OrderStatus = ({ variant, id, className, isPurchaser, }) => {
     const label = getOrderStatusLabel(variant, isPurchaser);
     return (a__default.createElement(OrderStatusComponent, { id: id, className: className },
         iconName && a__default.createElement(OrderStatusIcon, { iconName: iconName, size: 16 }),
+        !iconName && label !== "--" && (a__default.createElement(OrderStatusIcon, { iconName: "warning", size: 16 })),
         a__default.createElement(OrderStatusLabel, null, label)));
 };