@stella-source/stellasource-dsl 0.0.26 → 0.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -20
- package/dist/cjs/index.js +3545 -38340
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/styles.css +73 -2
- package/dist/cjs/types/components/Button/Button.stories.d.ts +0 -1
- package/dist/cjs/types/components/Button/styles.d.ts +1 -4
- package/dist/cjs/types/components/HelperText/styles.d.ts +0 -1
- package/dist/cjs/types/components/IconButton/IconButton.stories.d.ts +0 -1
- package/dist/cjs/types/components/IconButton/styles.d.ts +1 -4
- package/dist/cjs/types/components/Label/Label.stories.d.ts +0 -1
- package/dist/cjs/types/components/Label/styles.d.ts +1 -2
- package/dist/cjs/types/components/Loader/Loader.d.ts +1 -1
- package/dist/cjs/types/components/Loader/Loader.stories.d.ts +4 -2
- package/dist/cjs/types/components/Loader/styles.d.ts +1 -4
- package/dist/cjs/types/components/Loader/types.d.ts +2 -0
- package/dist/cjs/types/components/StellaIcon/StellaIcon.stories.d.ts +0 -1
- package/dist/{esm/types/components/TextField(UC) → cjs/types/components/TextField}/TextField.d.ts +1 -1
- package/dist/{esm/types/components/TextField(UC) → cjs/types/components/TextField}/styles.d.ts +3 -2
- package/dist/cjs/types/components/{TextField(UC) → TextField}/types.d.ts +38 -7
- package/dist/cjs/types/components/Tooltip/Tooltip.d.ts +3 -3
- package/dist/cjs/types/components/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/cjs/types/components/Tooltip/types.d.ts +3 -3
- package/dist/cjs/types/index.d.ts +13 -1
- package/dist/cjs/types/shared/storyComponents/ColorBox.d.ts +5 -0
- package/dist/cjs/types/shared/storyComponents/TokenTable.d.ts +6 -0
- package/dist/cjs/types/shared/tokens/index.d.ts +50 -9
- package/dist/cjs/types/shared/tokens/storybook/color.d.ts +73 -0
- package/dist/cjs/types/shared/tokens/storybook/font.d.ts +24 -0
- package/dist/cjs/types/shared/utils/testing.d.ts +2 -3
- package/dist/esm/index.esm.js +3520 -38340
- package/dist/esm/index.esm.js.map +1 -1
- package/dist/esm/styles.css +73 -2
- package/dist/esm/types/components/Button/Button.stories.d.ts +0 -1
- package/dist/esm/types/components/Button/styles.d.ts +1 -4
- package/dist/esm/types/components/HelperText/styles.d.ts +0 -1
- package/dist/esm/types/components/IconButton/IconButton.stories.d.ts +0 -1
- package/dist/esm/types/components/IconButton/styles.d.ts +1 -4
- package/dist/esm/types/components/Label/Label.stories.d.ts +0 -1
- package/dist/esm/types/components/Label/styles.d.ts +1 -2
- package/dist/esm/types/components/Loader/Loader.d.ts +1 -1
- package/dist/esm/types/components/Loader/Loader.stories.d.ts +4 -2
- package/dist/esm/types/components/Loader/styles.d.ts +1 -4
- package/dist/esm/types/components/Loader/types.d.ts +2 -0
- package/dist/esm/types/components/StellaIcon/StellaIcon.stories.d.ts +0 -1
- package/dist/{cjs/types/components/TextField(UC) → esm/types/components/TextField}/TextField.d.ts +1 -1
- package/dist/{cjs/types/components/TextField(UC) → esm/types/components/TextField}/styles.d.ts +3 -2
- package/dist/esm/types/components/{TextField(UC) → TextField}/types.d.ts +38 -7
- package/dist/esm/types/components/Tooltip/Tooltip.d.ts +3 -3
- package/dist/esm/types/components/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/esm/types/components/Tooltip/types.d.ts +3 -3
- package/dist/esm/types/index.d.ts +13 -1
- package/dist/esm/types/shared/storyComponents/ColorBox.d.ts +5 -0
- package/dist/esm/types/shared/storyComponents/TokenTable.d.ts +6 -0
- package/dist/esm/types/shared/tokens/index.d.ts +50 -9
- package/dist/esm/types/shared/tokens/storybook/color.d.ts +73 -0
- package/dist/esm/types/shared/tokens/storybook/font.d.ts +24 -0
- package/dist/esm/types/shared/utils/testing.d.ts +2 -3
- package/dist/index.d.ts +157 -1
- package/package.json +2 -1
- package/dist/cjs/styles.css.map +0 -1
- package/dist/cjs/types/shared/tokens/color.d.ts +0 -18
- package/dist/esm/styles.css.map +0 -1
- package/dist/esm/types/shared/tokens/color.d.ts +0 -18
- /package/dist/cjs/types/components/{TextField(UC) → TextField}/TextField.stories.d.ts +0 -0
- /package/dist/esm/types/components/{TextField(UC) → TextField}/TextField.stories.d.ts +0 -0
package/dist/cjs/styles.css
CHANGED
|
@@ -1,2 +1,73 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
:root {
|
|
2
|
+
/* white */
|
|
3
|
+
--white: #ffffff;
|
|
4
|
+
/* black */
|
|
5
|
+
--black: #000000;
|
|
6
|
+
/* transparent */
|
|
7
|
+
--transparent: rgba(0, 0, 0, 0);
|
|
8
|
+
/* blues */
|
|
9
|
+
--dark-navy: #1f4168;
|
|
10
|
+
--primary-blue: #336dae;
|
|
11
|
+
--sky-blue: #7099c6;
|
|
12
|
+
--light-blue: #ebf0fa;
|
|
13
|
+
--pale-blue: #f8fafe;
|
|
14
|
+
/* greys */
|
|
15
|
+
--medium-grey: #c6c6c6;
|
|
16
|
+
--shadow: #777777;
|
|
17
|
+
--charcoal: #4d4d4d;
|
|
18
|
+
--light-grey: #e6e6e6;
|
|
19
|
+
--graphite: #222222;
|
|
20
|
+
--smoke: #9f9f9f;
|
|
21
|
+
--pale-grey: #f5f5f5;
|
|
22
|
+
--grey50: #e9edf5;
|
|
23
|
+
--grey100: #d5dbe5;
|
|
24
|
+
--grey500: #687182;
|
|
25
|
+
/* oranges */
|
|
26
|
+
--orange: #ff7600;
|
|
27
|
+
--light-orange: #ff9133;
|
|
28
|
+
--dark-orange: #cc5e00;
|
|
29
|
+
/* yellows */
|
|
30
|
+
--light-yellow: #fffdeb;
|
|
31
|
+
/* states */
|
|
32
|
+
--error-red: #bc3d39;
|
|
33
|
+
--success-green: #108a53;
|
|
34
|
+
--warning-yellow: #ffb75d;
|
|
35
|
+
/* core */
|
|
36
|
+
--primary: #336dae;
|
|
37
|
+
--secondary: #1f4168;
|
|
38
|
+
--tertiary: #a1c1ff;
|
|
39
|
+
--quaternary: #7099c6;
|
|
40
|
+
--accent: #ff7600;
|
|
41
|
+
/* font sizes */
|
|
42
|
+
--font-xs: 0.75rem; /* 12px */
|
|
43
|
+
--font-s: 0.875rem; /* 14px - primary */
|
|
44
|
+
--font-m: 1rem; /* 16px */
|
|
45
|
+
--font-l: 1.125rem; /* 18px */
|
|
46
|
+
--font-xl: 1.75rem; /* 28px */
|
|
47
|
+
--font-xxl: 2.25rem; /* 36px */
|
|
48
|
+
/* font familys */
|
|
49
|
+
--font-family-primary: "Inter", sans-serif;
|
|
50
|
+
--font-family-secondary: "Roboto", sans-serif;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.DSL-custom-tooltip {
|
|
54
|
+
background-color: white !important;
|
|
55
|
+
color: #4d4d4d !important;
|
|
56
|
+
text-align: left !important;
|
|
57
|
+
border-radius: 5px !important;
|
|
58
|
+
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) !important;
|
|
59
|
+
font-size: 12px;
|
|
60
|
+
font-style: normal;
|
|
61
|
+
font-weight: 500;
|
|
62
|
+
max-width: 250px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.DSL-tooltip-button {
|
|
66
|
+
background: none;
|
|
67
|
+
border: none;
|
|
68
|
+
padding: 0;
|
|
69
|
+
outline: none;
|
|
70
|
+
display: flex;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
align-items: center;
|
|
73
|
+
}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { ButtonVariant } from "./types";
|
|
3
2
|
export interface ButtonComponentStyles {
|
|
4
3
|
$variant: `${ButtonVariant}`;
|
|
5
4
|
}
|
|
6
|
-
declare const ButtonComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
|
|
7
|
-
ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
8
|
-
}>, never>, ButtonComponentStyles>> & string;
|
|
5
|
+
declare const ButtonComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, ButtonComponentStyles>> & string;
|
|
9
6
|
export { ButtonComponent };
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { ButtonComponentStyles } from "../Button/styles";
|
|
3
|
-
declare const IconButtonComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
|
|
4
|
-
ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
5
|
-
}>, never>, "$variant"> & ButtonComponentStyles, ButtonComponentStyles>> & string;
|
|
2
|
+
declare const IconButtonComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, never>, "$variant"> & ButtonComponentStyles, ButtonComponentStyles>> & string;
|
|
6
3
|
export { IconButtonComponent };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
interface LabelComponentProps {
|
|
3
2
|
$hideLabel?: boolean;
|
|
4
3
|
}
|
|
5
4
|
declare const RequiredIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../StellaIcon/types").StellaIconProps, never>> & string & Omit<({ iconName, size, color, className, id, dataTestId, }: import("../StellaIcon/types").StellaIconProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
6
|
-
declare const ToolTipIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Tooltip/types").
|
|
5
|
+
declare const ToolTipIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Tooltip/types").TooltipProps, never>> & string & Omit<({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: import("../Tooltip/types").TooltipProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
7
6
|
declare const LabelComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, LabelComponentProps>> & string;
|
|
8
7
|
declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
9
8
|
export { LabelComponent, RequiredIcon, ToolTipIcon, LabelContainer };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { LoaderProps } from "./types";
|
|
3
|
-
declare const Loader: ({ size, dataTestId, color }: LoaderProps) => React.JSX.Element;
|
|
3
|
+
declare const Loader: ({ size, dataTestId, color, className, id, }: LoaderProps) => React.JSX.Element;
|
|
4
4
|
export default Loader;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { LoaderProps } from "./types";
|
|
3
2
|
declare const _default: {
|
|
4
3
|
title: string;
|
|
5
|
-
component: ({ size, dataTestId, color }: LoaderProps) => import("react").JSX.Element;
|
|
4
|
+
component: ({ size, dataTestId, color, className, id, }: LoaderProps) => import("react").JSX.Element;
|
|
6
5
|
tags: string[];
|
|
7
6
|
parameters: {};
|
|
8
7
|
argTypes: {};
|
|
9
8
|
args: LoaderProps;
|
|
10
9
|
};
|
|
11
10
|
export default _default;
|
|
11
|
+
export declare const Loader: {
|
|
12
|
+
args: {};
|
|
13
|
+
};
|
|
@@ -1,5 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
declare const CustomLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@phosphor-icons/react").IconProps, "ref"> & {
|
|
3
|
-
ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
|
|
4
|
-
}, never>> & string & Omit<import("@phosphor-icons/react").Icon, keyof import("react").Component<any, {}, any>>;
|
|
1
|
+
declare const CustomLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@phosphor-icons/react").IconProps, never>> & string & Omit<import("@phosphor-icons/react").Icon, keyof import("react").Component<any, {}, any>>;
|
|
5
2
|
export { CustomLoader };
|
package/dist/{esm/types/components/TextField(UC) → cjs/types/components/TextField}/TextField.d.ts
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TextFieldProps } from "./types";
|
|
3
|
-
declare const TextField: ({ id, className, htmlProps, type, textAlign, leftCategory, rightCategory, label, placeholder, onChange, onBlur, isRequired, disabled, maxLength, tooltipText, isLoading, helperText, helperTextAffectLayout, isTruncated, endIcon, hasError,
|
|
3
|
+
declare const TextField: ({ id, className, htmlProps, type, textAlign, leftCategory, rightCategory, label, placeholder, onChange, onBlur, isRequired, disabled, maxLength, tooltipText, isLoading, helperText, helperTextAffectLayout, isTruncated, endIcon, hasError, ariaDescribedBy, }: TextFieldProps) => React.JSX.Element;
|
|
4
4
|
export default TextField;
|
package/dist/{esm/types/components/TextField(UC) → cjs/types/components/TextField}/styles.d.ts
RENAMED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
interface TextFieldInputProps {
|
|
3
2
|
$textAlign?: "left" | "center" | "right";
|
|
4
3
|
$isTruncated: boolean;
|
|
@@ -7,4 +6,6 @@ declare const Wrapper: import("styled-components/dist/types").IStyledComponentBa
|
|
|
7
6
|
declare const TextFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
7
|
declare const TextFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, TextFieldInputProps>> & string;
|
|
9
8
|
declare const Category: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
|
|
10
|
-
|
|
9
|
+
declare const CustomLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../Loader/types").LoaderProps, never>> & string & Omit<({ size, dataTestId, color, className, id, }: import("../Loader/types").LoaderProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
10
|
+
declare const EndIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../StellaIcon/types").StellaIconProps, never>> & string & Omit<({ iconName, size, color, className, id, dataTestId, }: import("../StellaIcon/types").StellaIconProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
11
|
+
export { Wrapper, TextFieldWrapper, TextFieldInput, Category, CustomLoader, EndIcon, };
|
|
@@ -20,17 +20,46 @@ export declare enum TextFieldRightCategory {
|
|
|
20
20
|
MINUTES = "min",
|
|
21
21
|
HOURS = "hr"
|
|
22
22
|
}
|
|
23
|
-
export declare enum TextFieldSize {
|
|
24
|
-
SMALL = "small",
|
|
25
|
-
MEDIUM = "medium",
|
|
26
|
-
LARGE = "large"
|
|
27
|
-
}
|
|
28
23
|
export declare enum TextFieldType {
|
|
29
24
|
TEXT = "text",
|
|
30
25
|
NUMBER = "number",
|
|
31
26
|
PASSWORD = "password"
|
|
32
27
|
}
|
|
33
|
-
export
|
|
28
|
+
export declare enum TextFieldPasswordStrength {
|
|
29
|
+
WEAK = "weak",
|
|
30
|
+
MEDIUM = "medium",
|
|
31
|
+
STRONG = "strong"
|
|
32
|
+
}
|
|
33
|
+
interface TextFieldPasswordProps {
|
|
34
|
+
type: `${TextFieldType.PASSWORD}`;
|
|
35
|
+
endIcon?: never;
|
|
36
|
+
leftCategory?: never;
|
|
37
|
+
rightCategory?: never;
|
|
38
|
+
isTruncated?: never;
|
|
39
|
+
textAlign?: never;
|
|
40
|
+
}
|
|
41
|
+
interface TextFieldNumberProps {
|
|
42
|
+
type: `${TextFieldType.NUMBER}`;
|
|
43
|
+
leftCategory?: `${TextFieldLeftCategory}`;
|
|
44
|
+
rightCategory?: `${TextFieldRightCategory}`;
|
|
45
|
+
isTruncated?: boolean;
|
|
46
|
+
textAlign?: `${TextFieldAlignments}`;
|
|
47
|
+
maxLength?: never;
|
|
48
|
+
maxValue?: number;
|
|
49
|
+
minValue?: number;
|
|
50
|
+
thousandSeparator?: boolean;
|
|
51
|
+
decimalPlaces?: number;
|
|
52
|
+
}
|
|
53
|
+
interface TextFieldTextProps {
|
|
54
|
+
type: `${TextFieldType.TEXT}`;
|
|
55
|
+
endIcon?: `${StellaIconDefinition}`;
|
|
56
|
+
leftCategory?: `${TextFieldLeftCategory}`;
|
|
57
|
+
rightCategory?: `${TextFieldRightCategory}`;
|
|
58
|
+
isTruncated?: boolean;
|
|
59
|
+
textAlign?: `${TextFieldAlignments}`;
|
|
60
|
+
maxLength?: number;
|
|
61
|
+
}
|
|
62
|
+
export interface TextFieldBaseProps {
|
|
34
63
|
id: string;
|
|
35
64
|
className?: string;
|
|
36
65
|
label: string;
|
|
@@ -48,10 +77,12 @@ export interface TextFieldProps {
|
|
|
48
77
|
isTruncated: boolean;
|
|
49
78
|
endIcon: `${StellaIconDefinition}`;
|
|
50
79
|
hasError: boolean;
|
|
51
|
-
size?: `${TextFieldSize}`;
|
|
52
80
|
textAlign?: `${TextFieldAlignments}`;
|
|
53
81
|
leftCategory?: `${TextFieldLeftCategory}`;
|
|
54
82
|
rightCategory?: `${TextFieldRightCategory}`;
|
|
55
83
|
ariaDescribedBy?: string;
|
|
84
|
+
readOnly?: boolean;
|
|
56
85
|
htmlProps?: HTMLAttributes<HTMLInputElement>;
|
|
57
86
|
}
|
|
87
|
+
export type TextFieldProps = TextFieldBaseProps & (TextFieldPasswordProps | TextFieldNumberProps | TextFieldTextProps);
|
|
88
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { TooltipProps } from "./types";
|
|
3
3
|
import "./styles.css";
|
|
4
|
-
declare const
|
|
5
|
-
export default
|
|
4
|
+
declare const Tooltip: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: TooltipProps) => React.JSX.Element;
|
|
5
|
+
export default Tooltip;
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { TooltipIconType, StellaTooltipProps } from "./types";
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: React.
|
|
5
|
+
component: ({ title, placement, type, ariaLabel, iconSize, htmlProps, className, id, }: import("./types").TooltipProps) => React.JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
7
|
parameters: {
|
|
8
8
|
layout: string;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { TooltipProps } from "antd";
|
|
1
|
+
import { TooltipProps as AntdTootipProps } from "antd";
|
|
2
2
|
export declare enum TooltipIconType {
|
|
3
3
|
WARNING = "warning",
|
|
4
4
|
INFO = "info"
|
|
5
5
|
}
|
|
6
|
-
export interface
|
|
6
|
+
export interface TooltipProps {
|
|
7
7
|
title: string;
|
|
8
8
|
placement: "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
|
|
9
9
|
type?: `${TooltipIconType}`;
|
|
@@ -11,5 +11,5 @@ export interface StellaTooltipProps {
|
|
|
11
11
|
iconSize?: number;
|
|
12
12
|
id?: string;
|
|
13
13
|
className?: string;
|
|
14
|
-
htmlProps?:
|
|
14
|
+
htmlProps?: AntdTootipProps;
|
|
15
15
|
}
|
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
/** Components */
|
|
1
2
|
import Label from "./components/Label/Label";
|
|
3
|
+
import Button from "./components/Button/Button";
|
|
4
|
+
import Loader from "./components/Loader/Loader";
|
|
5
|
+
import HelperText from "./components/HelperText/HelperText";
|
|
6
|
+
import Tooltip from "./components/Tooltip/Tooltip";
|
|
7
|
+
import StellaIcon from "./components/StellaIcon/StellaIcon";
|
|
8
|
+
import IconButton from "./components/IconButton/IconButton";
|
|
9
|
+
/** Types */
|
|
10
|
+
import { ButtonVariant } from "./components/Button/types";
|
|
11
|
+
/** Tokens */
|
|
12
|
+
import { Styles } from "./shared/tokens";
|
|
2
13
|
import "./shared/tokens/tokens.css";
|
|
3
|
-
export {
|
|
14
|
+
export type { StellaIconDefinition } from "./components/StellaIcon/types";
|
|
15
|
+
export { Label, Button, IconButton, Loader, HelperText, Tooltip, StellaIcon, ButtonVariant, Styles, };
|
|
@@ -1,20 +1,61 @@
|
|
|
1
1
|
declare const Styles: {
|
|
2
2
|
color: {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
grey50: string;
|
|
8
|
-
paleGrey: string;
|
|
9
|
-
yellow: string;
|
|
10
|
-
green: string;
|
|
11
|
-
branding: {
|
|
3
|
+
white: string;
|
|
4
|
+
black: string;
|
|
5
|
+
transparent: string;
|
|
6
|
+
core: {
|
|
12
7
|
primary: string;
|
|
13
8
|
secondary: string;
|
|
14
9
|
tertiary: string;
|
|
15
10
|
quaternary: string;
|
|
16
11
|
accent: string;
|
|
17
12
|
};
|
|
13
|
+
grey: {
|
|
14
|
+
medium: string;
|
|
15
|
+
shadow: string;
|
|
16
|
+
light: string;
|
|
17
|
+
graphite: string;
|
|
18
|
+
charcoal: string;
|
|
19
|
+
smoke: string;
|
|
20
|
+
pale: string;
|
|
21
|
+
50: string;
|
|
22
|
+
100: string;
|
|
23
|
+
500: string;
|
|
24
|
+
};
|
|
25
|
+
blue: {
|
|
26
|
+
darkNavy: string;
|
|
27
|
+
primary: string;
|
|
28
|
+
sky: string;
|
|
29
|
+
light: string;
|
|
30
|
+
pale: string;
|
|
31
|
+
};
|
|
32
|
+
orange: {
|
|
33
|
+
primary: string;
|
|
34
|
+
light: string;
|
|
35
|
+
dark: string;
|
|
36
|
+
};
|
|
37
|
+
yellow: {
|
|
38
|
+
light: string;
|
|
39
|
+
};
|
|
40
|
+
states: {
|
|
41
|
+
error: string;
|
|
42
|
+
success: string;
|
|
43
|
+
warning: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
font: {
|
|
47
|
+
fontSize: {
|
|
48
|
+
xs: string;
|
|
49
|
+
s: string;
|
|
50
|
+
m: string;
|
|
51
|
+
l: string;
|
|
52
|
+
xl: string;
|
|
53
|
+
xxl: string;
|
|
54
|
+
};
|
|
55
|
+
fontFamily: {
|
|
56
|
+
primary: string;
|
|
57
|
+
secondary: string;
|
|
58
|
+
};
|
|
18
59
|
};
|
|
19
60
|
};
|
|
20
61
|
export { Styles };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import "../tokens.css";
|
|
2
|
+
declare const colorTokens: {
|
|
3
|
+
white: string;
|
|
4
|
+
black: string;
|
|
5
|
+
transparent: string;
|
|
6
|
+
core: {
|
|
7
|
+
/** #336dae */
|
|
8
|
+
primary: string;
|
|
9
|
+
/** #1f4168 */
|
|
10
|
+
secondary: string;
|
|
11
|
+
/** #a1c1ff */
|
|
12
|
+
tertiary: string;
|
|
13
|
+
/** #7099c6 */
|
|
14
|
+
quaternary: string;
|
|
15
|
+
/** #ff7600 */
|
|
16
|
+
accent: string;
|
|
17
|
+
};
|
|
18
|
+
grey: {
|
|
19
|
+
/** #c6c6c6 */
|
|
20
|
+
medium: string;
|
|
21
|
+
/** #777777 */
|
|
22
|
+
shadow: string;
|
|
23
|
+
/** #e6e6e6 */
|
|
24
|
+
light: string;
|
|
25
|
+
/** #222222 */
|
|
26
|
+
graphite: string;
|
|
27
|
+
/** #4d4d4d */
|
|
28
|
+
charcoal: string;
|
|
29
|
+
/** #9f9f9f */
|
|
30
|
+
smoke: string;
|
|
31
|
+
/** #f5f5f5 */
|
|
32
|
+
pale: string;
|
|
33
|
+
/** #e9edf5 */
|
|
34
|
+
50: string;
|
|
35
|
+
/** #d5dbe5 */
|
|
36
|
+
100: string;
|
|
37
|
+
/** #687182 */
|
|
38
|
+
500: string;
|
|
39
|
+
};
|
|
40
|
+
blue: {
|
|
41
|
+
/** #1f4168 */
|
|
42
|
+
darkNavy: string;
|
|
43
|
+
/** #336dae */
|
|
44
|
+
primary: string;
|
|
45
|
+
/** #7099c6 */
|
|
46
|
+
sky: string;
|
|
47
|
+
/** #ebf0fa */
|
|
48
|
+
light: string;
|
|
49
|
+
/** #f8fafe */
|
|
50
|
+
pale: string;
|
|
51
|
+
};
|
|
52
|
+
orange: {
|
|
53
|
+
/** #ff7600 */
|
|
54
|
+
primary: string;
|
|
55
|
+
/** #ff9133 */
|
|
56
|
+
light: string;
|
|
57
|
+
/** #cc5e00 */
|
|
58
|
+
dark: string;
|
|
59
|
+
};
|
|
60
|
+
yellow: {
|
|
61
|
+
/** #fffdeb */
|
|
62
|
+
light: string;
|
|
63
|
+
};
|
|
64
|
+
states: {
|
|
65
|
+
/** #bc3d39 */
|
|
66
|
+
error: string;
|
|
67
|
+
/** #108a53 */
|
|
68
|
+
success: string;
|
|
69
|
+
/** #ffb75d */
|
|
70
|
+
warning: string;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
export default colorTokens;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import "../tokens.css";
|
|
2
|
+
declare const fontTokens: {
|
|
3
|
+
fontSize: {
|
|
4
|
+
/** 12px */
|
|
5
|
+
xs: string;
|
|
6
|
+
/** 14px */
|
|
7
|
+
s: string;
|
|
8
|
+
/** 16px */
|
|
9
|
+
m: string;
|
|
10
|
+
/** 18px */
|
|
11
|
+
l: string;
|
|
12
|
+
/** 28px */
|
|
13
|
+
xl: string;
|
|
14
|
+
/** 36px */
|
|
15
|
+
xxl: string;
|
|
16
|
+
};
|
|
17
|
+
fontFamily: {
|
|
18
|
+
/** "Inter", sans-serif */
|
|
19
|
+
primary: string;
|
|
20
|
+
/** "Roboto", sans-serif */
|
|
21
|
+
secondary: string;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export default fontTokens;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { queries } from "@testing-library/react";
|
|
3
2
|
import { Options } from "@testing-library/user-event";
|
|
4
3
|
declare const setup: (jsx: JSX.Element, setupOptions?: Options) => {
|
|
5
4
|
container: HTMLElement;
|
|
6
5
|
baseElement: HTMLElement;
|
|
7
|
-
debug: (baseElement?: any, maxLength?: number | undefined, options?: import("pretty-format").
|
|
8
|
-
rerender: (ui:
|
|
6
|
+
debug: (baseElement?: ReactDOMClient.Container | any | Array<ReactDOMClient.Container | any> | undefined, maxLength?: number | undefined, options?: import("pretty-format").OptionsReceived | undefined) => void;
|
|
7
|
+
rerender: (ui: React.ReactNode) => void;
|
|
9
8
|
unmount: () => void;
|
|
10
9
|
asFragment: () => DocumentFragment;
|
|
11
10
|
getByLabelText: (id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").SelectorMatcherOptions | undefined) => HTMLElement;
|