@stella-source/stellasource-dsl 0.0.26 → 0.0.29

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes, ReactElement } from 'react';
+import { TooltipProps as TooltipProps$1 } from 'antd';
 
 interface LabelProps {
     id: string;
@@ -25,4 +26,159 @@ interface LabelWithChildrenProps {
 
 declare const Label: ({ hideLabel, labelValue, required, tooltipText, children, htmlFor, htmlProps, id, className, }: LabelProps | LabelWithChildrenProps) => React.JSX.Element;
 
-export { Label };
+declare enum ButtonIcons {
+    ADD = "add",
+    CHEVRON_DOWN = "chevron-down"
+}
+declare enum ButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary"
+}
+interface ButtonProps {
+    label: string;
+    onClick: () => void;
+    id?: string;
+    className?: string;
+    isLoading?: boolean;
+    startIcon?: `${ButtonIcons}`;
+    endIcon?: `${ButtonIcons}`;
+    disabled?: boolean;
+    variant?: `${ButtonVariant}`;
+    htmlProps?: HTMLAttributes<HTMLButtonElement>;
+}
+
+declare const Button: ({ disabled, variant, label, startIcon, endIcon, isLoading, className, id, htmlProps, onClick, }: ButtonProps) => React.JSX.Element;
+
+interface LoaderProps {
+    size?: number;
+    dataTestId?: string;
+    color?: string;
+    className?: string;
+    id?: string;
+}
+
+declare const Loader: ({ size, dataTestId, color, className, id, }: LoaderProps) => React.JSX.Element;
+
+declare enum HelperTextType {
+    ERROR = "error",
+    INFO = "info"
+}
+interface HelperTextProps {
+    text: string;
+    id?: string;
+    className?: string;
+    affectLayout?: boolean;
+    type?: `${HelperTextType}`;
+    htmlProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+declare const HelperText: ({ id, className, affectLayout, text, type, htmlProps, }: HelperTextProps) => React.JSX.Element;
+
+declare enum TooltipIconType {
+    WARNING = "warning",
+    INFO = "info"
+}
+interface TooltipProps {
+    title: string;
+    placement: "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+    type?: `${TooltipIconType}`;
+    ariaLabel?: string;
+    iconSize?: number;
+    id?: string;
+    className?: string;
+    htmlProps?: TooltipProps$1;
+}
+
+declare const Tooltip: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: TooltipProps) => React.JSX.Element;
+
+type StellaIconDefinition = "search" | "required" | "help" | "info" | "kebab-menu" | "error" | "warning" | "filter" | "sort" | "close" | "add" | "stella-logo" | "chevron-right" | "chevron-down" | "caret-right" | "caret-down" | "success" | "in-progress" | "complete" | "calendar" | "unlocked" | "locked" | "settings" | "preferences" | "account-settings" | "user" | "company-details" | "collapse" | "expand" | "star-filled" | "star-outline" | "dashboard" | "shopping-cart" | "calculator" | "pricing-strategies" | "stella-finance" | "resource-center" | "line-item-pricing" | "basket-pricing" | "paperclip" | "thumbs-up" | "thumbs-down" | "send" | "palette";
+interface StellaIconProps {
+    iconName: StellaIconDefinition;
+    size?: number;
+    color?: string;
+    className?: string;
+    dataTestId?: string;
+    id?: string;
+}
+
+declare const StellaIcon: ({ iconName, size, color, className, id, dataTestId, }: StellaIconProps) => React.JSX.Element;
+
+interface IconButtonProps {
+    iconName: `${StellaIconDefinition}`;
+    ariaLabel: string;
+    size?: number;
+    onClick: () => void;
+    id?: string;
+    className?: string;
+    isLoading?: boolean;
+    disabled?: boolean;
+    variant?: `${ButtonVariant}`;
+    htmlProps?: HTMLAttributes<HTMLButtonElement>;
+}
+
+declare const IconButton: ({ iconName, onClick, disabled, variant, isLoading, ariaLabel, className, id, htmlProps, size, }: IconButtonProps) => React.JSX.Element;
+
+declare const Styles: {
+    color: {
+        white: string;
+        black: string;
+        transparent: string;
+        core: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            quaternary: string;
+            accent: string;
+        };
+        grey: {
+            medium: string;
+            shadow: string;
+            light: string;
+            graphite: string;
+            charcoal: string;
+            smoke: string;
+            pale: string;
+            50: string;
+            100: string;
+            500: string;
+        };
+        blue: {
+            darkNavy: string;
+            primary: string;
+            sky: string;
+            light: string;
+            pale: string;
+        };
+        orange: {
+            primary: string;
+            light: string;
+            dark: string;
+        };
+        yellow: {
+            light: string;
+        };
+        states: {
+            error: string;
+            success: string;
+            warning: string;
+        };
+    };
+    font: {
+        fontSize: {
+            xs: string;
+            s: string;
+            m: string;
+            l: string;
+            xl: string;
+            xxl: string;
+        };
+        fontFamily: {
+            primary: string;
+            secondary: string;
+        };
+    };
+};
+
+export { Button, ButtonVariant, HelperText, IconButton, Label, Loader, StellaIcon, Styles, Tooltip };
+export type { StellaIconDefinition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stella-source/stellasource-dsl",
-  "version": "0.0.26",
+  "version": "0.0.29",
   "description": "Design System owned and operated by Stella Source.",
   "files": [
     "dist"
@@ -32,6 +32,7 @@
     "@storybook/test": "^8.4.2",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.6",
+    "@types/node": "^24.0.10",
     "@vitest/coverage-v8": "^1.6.0",
     "jsdom": "^24.1.0",
     "postcss": "^8.4.38",

package/dist/cjs/styles.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["styles.css","tokens.css"],"names":[],"mappings":"AAAA,oBACE,+BAAkC,CAGlC,2BAA6B,CAC7B,8CAA0D,CAH1D,uBAAyB,CAIzB,cAAe,CACf,iBAAkB,CAClB,eAAgB,CAChB,eAAgB,CANhB,yBAOF,CAEA,oBAOE,kBAAmB,CANnB,eAAgB,CAChB,WAAY,CAGZ,YAAa,CACb,sBAAuB,CAFvB,YAAa,CADb,SAKF,CCpBA,MAGE,sBAAuB,CACvB,kBAAmB,CACnB,oBAAqB,CAGrB,qBAAsB,CACtB,aAAiB,CACjB,kBAAmB,CACnB,oBAAqB,CACrB,eAAmB,CACnB,eAAgB,CAChB,mBAAoB,CAIpB,gBAAiB,CAMjB,mBAAoB,CACpB,uBAAwB,CACxB,wBAAyB,CAGzB,mBAAoB,CACpB,kBAAmB,CACnB,mBAAoB,CACpB,oBAAqB,CACrB,uBAAwB,CACxB,gBAAiB,CACjB,aAAiB,CACjB,gBAAiB,CACjB,gBAAiB,CACjB,gBAAiB,CACjB,aAAiB,CACjB,gBAAiB,CACjB,iBAAkB,CAClB,iBAAkB,CAClB,sBAAuB,CACvB,sBAAuB,CACvB,qBAAsB,CACtB,iBAAkB,CAClB,mBAAoB,CACpB,sBAAuB,CACvB,mBAAoB,CACpB,gBAAiB,CAOjB,iBAAkB,CAClB,mBAAoB,CACpB,kBAAmB,CACnB,oBAAqB,CACrB,gBAAiB,CAEjB,iBAAkB,CAClB,iBAAkB,CAClB,aAAc,CACd,iBAAkB,CAClB,iBAAkB,CAClB,kBAAmB,CAEnB,wCAA0C,CAG1C,wBAAyB,CACzB,sBAAuB,CACvB,6BAA8B,CAC9B,yBAA0B,CAC1B,kCAAmC,CACnC,8BAA+B,CAC/B,uCAAwC,CACxC,6BAA8B,CAC9B,4BAA6B,CAC7B,+BAAgC,CAChC,iCAAkC,CAClC,+BAAgC,CAChC,sCAAuC,CACvC,mCAAoC,CACpC,iCAAkC,CAClC,sCAAuC,CACvC,6CAA8C,CAC9C,wCACF","file":"styles.css","sourcesContent":[".DSL-custom-tooltip {\n  background-color: white !important;\n  color: #4d4d4d !important;\n  text-align: left !important;\n  border-radius: 5px !important;\n  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) !important;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  max-width: 250px;\n}\n\n.DSL-tooltip-button {\n  background: none;\n  border: none;\n  padding: 0;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n",":root {\n  /* blues */\n  --dark-navy: #1f4168;\n  --primary-blue: #336dae; /* replaces: dark-blue */\n  --sky-blue: #7099c6; /* replaces light-blue */\n  --light-blue: #ebf0fa; /* replaces: lightest-blue */\n  --pale-blue: #f8fafe;\n  /* greys */\n  --medium-grey: #c6c6c6; /* replaces: greyc6 */\n  --shadow: #777777; /* replaces: grey77 */\n  --charcoal: #4d4d4d; /* replaces: grey4D */\n  --light-grey: #e6e6e6; /* replaces: greyE6*/\n  --graphite: #222222; /* replces: grey22 */\n  --smoke: #9f9f9f; /* replaces: grey9F */\n  --pale-grey: #f5f5f5; /* replaces: bg-light and greyF5 */\n  --grey100: #d5dbe5;\n  --grey500: #687182;\n  /* oranges */\n  --orange: #ff7600; /* replaces: active-color */\n  --light-orange: #ff9133;\n  --dark-orange: #cc5e00;\n  /* yellows */\n  --light-yellow: #fffdeb;\n  /* states */\n  --error-red: #bc3d39; /* replaces: red-rfq */\n  --success-green: #108a53; /* replaces: green-rfq */\n  --warning-yellow: #ffb75d; /* replaces: yellow */\n\n  /* for testing purposes */\n  --dark-navy: #1f4168;\n  --bg-light: #f5f5f5;\n  --dark-blue: #336dae;\n  --light-blue: #7099c6;\n  --lightest-blue: #ebf0fa;\n  --greyc6: #c6c6c6;\n  --grey77: #777777;\n  --grey4D: #4d4d4d;\n  --greyE6: #e6e6e6;\n  --greyF5: #f5f5f5;\n  --grey22: #222222;\n  --grey9F: #9f9f9f;\n  --grey100: #d5dbe5;\n  --grey500: #687182;\n  --active-color: #ff7600;\n  --light-orange: #ff9133;\n  --dark-orange: #cc5e00;\n  --red-rfq: #bc3d39;\n  --pale-blue: #f8fafe;\n  --light-yellow: #fffdeb;\n  --green-rfq: #108a53;\n  --yellow: #ffb75d;\n  --primary: #336dae;\n  --secondary: #1f4168;\n  --tertiary: #a1c1ff;\n  --quaternary: #7099c6;\n  --accent: #ff7600;\n\n  --primary: #336dae;\n  --secondary: #1f4168;\n  --tertiary: #a1c1ff;\n  --quaternary: #7099c6;\n  --accent: #ff7600;\n\n  --font-xs: 0.75rem; /* 12px */\n  --font-s: 0.875rem; /* 14px - primary */\n  --font-m: 1rem; /* 16px */\n  --font-l: 1.125rem; /* 18px */\n  --font-xl: 1.75rem; /* 28px */\n  --font-xxl: 2.25rem; /* 36px */\n\n  --font-family-primary: \"Inter\", sans-serif;\n\n  /* whitelabel needed variables */\n  --buttons: var(--primary);\n  --links: var(--primary);\n  --active-steps: var(--primary);\n  --spinners: var(--primary);\n  --table-header-line: var(--primary);\n  --sub-header-bg: var(--primary);\n  --ribbon-price-container: var(--primary);\n  --button-focus: var(--primary);\n  --qty-textbox: var(--primary);\n  --button-hover: var(--secondary);\n  --all-around-nav: var(--secondary);\n  --textbox-focus: var(--tertiary);\n  --text-button-hover-bg: var(--tertiary);\n  --completed-steps: var(--quaternary);\n  --sidebar-nav-icons: var(--accent);\n  --shopping-cart-notifier: var(--accent);\n  --text-button-hover-text-color: var(--buttons);\n  --ribbon-price-container-text-color: white;\n}\n"]}

package/dist/cjs/types/shared/tokens/color.d.ts

@@ -1,18 +0,0 @@
-declare const colorTokens: {
-    charcoal: string;
-    red: string;
-    smoke: string;
-    shadow: string;
-    grey50: string;
-    paleGrey: string;
-    yellow: string;
-    green: string;
-    branding: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        quaternary: string;
-        accent: string;
-    };
-};
-export default colorTokens;

package/dist/esm/styles.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["styles.css","tokens.css"],"names":[],"mappings":"AAAA,oBACE,+BAAkC,CAGlC,2BAA6B,CAC7B,8CAA0D,CAH1D,uBAAyB,CAIzB,cAAe,CACf,iBAAkB,CAClB,eAAgB,CAChB,eAAgB,CANhB,yBAOF,CAEA,oBAOE,kBAAmB,CANnB,eAAgB,CAChB,WAAY,CAGZ,YAAa,CACb,sBAAuB,CAFvB,YAAa,CADb,SAKF,CCpBA,MAGE,sBAAuB,CACvB,kBAAmB,CACnB,oBAAqB,CAGrB,qBAAsB,CACtB,aAAiB,CACjB,kBAAmB,CACnB,oBAAqB,CACrB,eAAmB,CACnB,eAAgB,CAChB,mBAAoB,CAIpB,gBAAiB,CAMjB,mBAAoB,CACpB,uBAAwB,CACxB,wBAAyB,CAGzB,mBAAoB,CACpB,kBAAmB,CACnB,mBAAoB,CACpB,oBAAqB,CACrB,uBAAwB,CACxB,gBAAiB,CACjB,aAAiB,CACjB,gBAAiB,CACjB,gBAAiB,CACjB,gBAAiB,CACjB,aAAiB,CACjB,gBAAiB,CACjB,iBAAkB,CAClB,iBAAkB,CAClB,sBAAuB,CACvB,sBAAuB,CACvB,qBAAsB,CACtB,iBAAkB,CAClB,mBAAoB,CACpB,sBAAuB,CACvB,mBAAoB,CACpB,gBAAiB,CAOjB,iBAAkB,CAClB,mBAAoB,CACpB,kBAAmB,CACnB,oBAAqB,CACrB,gBAAiB,CAEjB,iBAAkB,CAClB,iBAAkB,CAClB,aAAc,CACd,iBAAkB,CAClB,iBAAkB,CAClB,kBAAmB,CAEnB,wCAA0C,CAG1C,wBAAyB,CACzB,sBAAuB,CACvB,6BAA8B,CAC9B,yBAA0B,CAC1B,kCAAmC,CACnC,8BAA+B,CAC/B,uCAAwC,CACxC,6BAA8B,CAC9B,4BAA6B,CAC7B,+BAAgC,CAChC,iCAAkC,CAClC,+BAAgC,CAChC,sCAAuC,CACvC,mCAAoC,CACpC,iCAAkC,CAClC,sCAAuC,CACvC,6CAA8C,CAC9C,wCACF","file":"styles.css","sourcesContent":[".DSL-custom-tooltip {\n  background-color: white !important;\n  color: #4d4d4d !important;\n  text-align: left !important;\n  border-radius: 5px !important;\n  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) !important;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  max-width: 250px;\n}\n\n.DSL-tooltip-button {\n  background: none;\n  border: none;\n  padding: 0;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n",":root {\n  /* blues */\n  --dark-navy: #1f4168;\n  --primary-blue: #336dae; /* replaces: dark-blue */\n  --sky-blue: #7099c6; /* replaces light-blue */\n  --light-blue: #ebf0fa; /* replaces: lightest-blue */\n  --pale-blue: #f8fafe;\n  /* greys */\n  --medium-grey: #c6c6c6; /* replaces: greyc6 */\n  --shadow: #777777; /* replaces: grey77 */\n  --charcoal: #4d4d4d; /* replaces: grey4D */\n  --light-grey: #e6e6e6; /* replaces: greyE6*/\n  --graphite: #222222; /* replces: grey22 */\n  --smoke: #9f9f9f; /* replaces: grey9F */\n  --pale-grey: #f5f5f5; /* replaces: bg-light and greyF5 */\n  --grey100: #d5dbe5;\n  --grey500: #687182;\n  /* oranges */\n  --orange: #ff7600; /* replaces: active-color */\n  --light-orange: #ff9133;\n  --dark-orange: #cc5e00;\n  /* yellows */\n  --light-yellow: #fffdeb;\n  /* states */\n  --error-red: #bc3d39; /* replaces: red-rfq */\n  --success-green: #108a53; /* replaces: green-rfq */\n  --warning-yellow: #ffb75d; /* replaces: yellow */\n\n  /* for testing purposes */\n  --dark-navy: #1f4168;\n  --bg-light: #f5f5f5;\n  --dark-blue: #336dae;\n  --light-blue: #7099c6;\n  --lightest-blue: #ebf0fa;\n  --greyc6: #c6c6c6;\n  --grey77: #777777;\n  --grey4D: #4d4d4d;\n  --greyE6: #e6e6e6;\n  --greyF5: #f5f5f5;\n  --grey22: #222222;\n  --grey9F: #9f9f9f;\n  --grey100: #d5dbe5;\n  --grey500: #687182;\n  --active-color: #ff7600;\n  --light-orange: #ff9133;\n  --dark-orange: #cc5e00;\n  --red-rfq: #bc3d39;\n  --pale-blue: #f8fafe;\n  --light-yellow: #fffdeb;\n  --green-rfq: #108a53;\n  --yellow: #ffb75d;\n  --primary: #336dae;\n  --secondary: #1f4168;\n  --tertiary: #a1c1ff;\n  --quaternary: #7099c6;\n  --accent: #ff7600;\n\n  --primary: #336dae;\n  --secondary: #1f4168;\n  --tertiary: #a1c1ff;\n  --quaternary: #7099c6;\n  --accent: #ff7600;\n\n  --font-xs: 0.75rem; /* 12px */\n  --font-s: 0.875rem; /* 14px - primary */\n  --font-m: 1rem; /* 16px */\n  --font-l: 1.125rem; /* 18px */\n  --font-xl: 1.75rem; /* 28px */\n  --font-xxl: 2.25rem; /* 36px */\n\n  --font-family-primary: \"Inter\", sans-serif;\n\n  /* whitelabel needed variables */\n  --buttons: var(--primary);\n  --links: var(--primary);\n  --active-steps: var(--primary);\n  --spinners: var(--primary);\n  --table-header-line: var(--primary);\n  --sub-header-bg: var(--primary);\n  --ribbon-price-container: var(--primary);\n  --button-focus: var(--primary);\n  --qty-textbox: var(--primary);\n  --button-hover: var(--secondary);\n  --all-around-nav: var(--secondary);\n  --textbox-focus: var(--tertiary);\n  --text-button-hover-bg: var(--tertiary);\n  --completed-steps: var(--quaternary);\n  --sidebar-nav-icons: var(--accent);\n  --shopping-cart-notifier: var(--accent);\n  --text-button-hover-text-color: var(--buttons);\n  --ribbon-price-container-text-color: white;\n}\n"]}

package/dist/esm/types/shared/tokens/color.d.ts

@@ -1,18 +0,0 @@
-declare const colorTokens: {
-    charcoal: string;
-    red: string;
-    smoke: string;
-    shadow: string;
-    grey50: string;
-    paleGrey: string;
-    yellow: string;
-    green: string;
-    branding: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        quaternary: string;
-        accent: string;
-    };
-};
-export default colorTokens;