@selfdecode/sd-component-library 2.42.39 → 2.42.43
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/lib/c801ade937bddadb73cb5b241c151ab6.svg +13 -0
- package/lib/components/complex/navbar/presentational/interfaces.d.ts +0 -1
- package/lib/components/complex/navbar/presentational/url-utils.d.ts +10 -0
- package/lib/components/meters/outline-meter/partials/base-meter-label-box/interfaces.d.ts +1 -1
- package/lib/components/meters/outline-meter/partials/outline-meter-label-box/interfaces.d.ts +1 -1
- package/lib/components/meters/outline-meter/partials/outline-meter-range/interfaces.d.ts +2 -1
- package/lib/components/meters/outline-meter/utils.d.ts +2 -1
- package/lib/components/meters/smiley-meter-v2/assets/index.d.ts +1 -0
- package/lib/components/meters/smiley-meter-v2/assets/neutral-smiley.svg +13 -0
- package/lib/components/meters/smiley-meter-v2/interfaces.d.ts +3 -3
- package/lib/components/meters/smiley-meter-v2/partials/smiley-meter-ranges/interfaces.d.ts +0 -1
- package/lib/components/selectors/primary-selector-v2/index.d.ts +1 -0
- package/lib/components/selectors/primary-selector-v2/interfaces.d.ts +2 -0
- package/lib/components/selectors/primary-selector-v2/primary-selector-v2.d.ts +3 -0
- package/lib/components/selectors/secondary-selector-v2/index.d.ts +1 -0
- package/lib/components/selectors/secondary-selector-v2/interfaces.d.ts +2 -0
- package/lib/components/selectors/secondary-selector-v2/secondary-selector-v2.d.ts +3 -0
- package/lib/components/selectors/selector/interfaces.d.ts +2 -2
- package/lib/components/selectors/selector-v2/interfaces.d.ts +4 -0
- package/lib/components/selectors/selector-v2/partials/base-selector-v2/interfaces.d.ts +4 -0
- package/lib/components/tabs/tab-bar/partials/tab/tab.d.ts +2 -1
- package/lib/components/tabs/tabbed-view/assets/index.d.ts +1 -0
- package/lib/components/tabs/tabbed-view/assets/instagram.svg +3 -0
- package/lib/components/texts/base-text-v2/base-text-v2.d.ts +3 -0
- package/lib/components/texts/base-text-v2/index.d.ts +2 -0
- package/lib/components/texts/base-text-v2/interfaces.d.ts +2 -0
- package/lib/components/texts/responsive-text/interfaces.d.ts +1 -1
- package/lib/components/texts/responsive-text-v2/index.d.ts +2 -0
- package/lib/components/texts/responsive-text-v2/interfaces.d.ts +5 -0
- package/lib/components/texts/responsive-text-v2/responsive-text-v2.d.ts +3 -0
- package/lib/core/theme.d.ts +56 -0
- package/lib/index.d.ts +4 -0
- package/lib/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
viewBox="0 0 27 27"
|
|
4
|
+
>
|
|
5
|
+
<g >
|
|
6
|
+
<path
|
|
7
|
+
d="M391,292.419H368a2.089,2.089,0,1,0,0,4.178h23a2.089,2.089,0,0,0,0-4.178Z"
|
|
8
|
+
transform="translate(-365.884 -271.09)"
|
|
9
|
+
/>
|
|
10
|
+
<circle cx="3.758" cy="3.758" r="3.758" transform="translate(19.728 0.06)" />
|
|
11
|
+
<circle cx="3.758" cy="3.758" r="3.758" />
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { OutlineMeterLabelBoxProps } from "../outline-meter-label-box/interfaces";
|
|
2
2
|
import { OutlineMeterLabelPosition } from "../../interfaces";
|
|
3
|
-
export interface BaseMeterLabelBoxProps extends Required<Omit<OutlineMeterLabelBoxProps, "value" | "start" | "end" | "idx" | "totalRanges">> {
|
|
3
|
+
export interface BaseMeterLabelBoxProps extends Required<Omit<OutlineMeterLabelBoxProps, "value" | "start" | "end" | "idx" | "totalRanges" | "bounds">> {
|
|
4
4
|
/**
|
|
5
5
|
* Whether value is in the range to which label corresponds.
|
|
6
6
|
*/
|
package/lib/components/meters/outline-meter/partials/outline-meter-label-box/interfaces.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { OutlineMeterRangeProps } from "../outline-meter-range/interfaces";
|
|
2
|
-
export interface OutlineMeterLabelBoxProps extends Required<Pick<OutlineMeterRangeProps, "diameter" | "label" | "color" | "idx" | "value" | "start" | "end" | "totalRanges">> {
|
|
2
|
+
export interface OutlineMeterLabelBoxProps extends Required<Pick<OutlineMeterRangeProps, "diameter" | "label" | "color" | "idx" | "value" | "start" | "end" | "totalRanges" | "bounds">> {
|
|
3
3
|
distanceFromLabelToRanges: number;
|
|
4
4
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { OutlineMeterLabelPosition, OutlineMeterProps, OutlineMeterRangeConfig } from "../../interfaces";
|
|
2
2
|
import { OutlineMeterLabelPointerProps } from "../outline-meter-label-pointer/interfaces";
|
|
3
|
-
export interface OutlineMeterRangeProps extends Required<Pick<OutlineMeterProps, "value" | "arc" | "distanceBetweenRanges" | "gaugeWidth" | "innerPointRadius" | "pointStrokeWidth" | "hideLabels"
|
|
3
|
+
export interface OutlineMeterRangeProps extends Required<Pick<OutlineMeterProps, "value" | "arc" | "distanceBetweenRanges" | "gaugeWidth" | "innerPointRadius" | "pointStrokeWidth" | "hideLabels">>, OutlineMeterRangeConfig, Pick<OutlineMeterLabelPointerProps, "distanceFromRanges"> {
|
|
4
4
|
segmented?: boolean;
|
|
5
|
+
connected?: boolean;
|
|
5
6
|
/**
|
|
6
7
|
* Meter diameter.
|
|
7
8
|
*/
|
|
@@ -23,5 +23,6 @@ export declare const getInnerX: (x: number, alpha: number, delta: number) => num
|
|
|
23
23
|
* @param delta Distance between points
|
|
24
24
|
*/
|
|
25
25
|
export declare const getInnerY: (y: number, alpha: number, delta: number) => number;
|
|
26
|
-
export declare const isValueInRange: (value: number, start: number, end: number, bounds: Bounds
|
|
26
|
+
export declare const isValueInRange: (value: number, start: number, end: number, bounds: Bounds) => boolean;
|
|
27
|
+
export declare const inValueHigherThanRange: (value: number, end: number, bounds: Bounds) => boolean;
|
|
27
28
|
export declare const flipBounds: (bounds: Bounds) => Bounds;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
viewBox="0 0 27 27"
|
|
4
|
+
>
|
|
5
|
+
<g >
|
|
6
|
+
<path
|
|
7
|
+
d="M391,292.419H368a2.089,2.089,0,1,0,0,4.178h23a2.089,2.089,0,0,0,0-4.178Z"
|
|
8
|
+
transform="translate(-365.884 -271.09)"
|
|
9
|
+
/>
|
|
10
|
+
<circle cx="3.758" cy="3.758" r="3.758" transform="translate(19.728 0.06)" />
|
|
11
|
+
<circle cx="3.758" cy="3.758" r="3.758" />
|
|
12
|
+
</g>
|
|
13
|
+
</svg>
|
|
@@ -3,11 +3,11 @@ export interface SmileyMeterV2Props extends Pick<OutlineMeterProps, "width" | "h
|
|
|
3
3
|
/**
|
|
4
4
|
* Colors for smiley corresponding to state.
|
|
5
5
|
*/
|
|
6
|
-
colorsMap?: [string, string];
|
|
6
|
+
colorsMap?: [string, string, string];
|
|
7
7
|
/**
|
|
8
8
|
* Colors for labels.
|
|
9
9
|
*/
|
|
10
|
-
labelsMap?: [string, string];
|
|
10
|
+
labelsMap?: [string, string, string];
|
|
11
11
|
/**
|
|
12
12
|
* Whether to hide labels.
|
|
13
13
|
*/
|
|
@@ -15,7 +15,7 @@ export interface SmileyMeterV2Props extends Pick<OutlineMeterProps, "width" | "h
|
|
|
15
15
|
/**
|
|
16
16
|
* Value that splits smiley meter outline.
|
|
17
17
|
*/
|
|
18
|
-
|
|
18
|
+
splitValues?: [number, number];
|
|
19
19
|
/**
|
|
20
20
|
* Smiley width.
|
|
21
21
|
*/
|
|
@@ -2,5 +2,4 @@ import { OutlineMeterRangeConfig } from "../../../outline-meter";
|
|
|
2
2
|
import { OutlineMeterRangeProps } from "../../../outline-meter/partials/outline-meter-range/interfaces";
|
|
3
3
|
export interface SmileyMeterRangesProps extends Pick<OutlineMeterRangeProps, "value" | "diameter" | "innerPointRadius" | "pointStrokeWidth" | "distanceFromRanges" | "arc" | "gaugeWidth" | "distanceBetweenRanges" | "hideLabels"> {
|
|
4
4
|
ranges: OutlineMeterRangeConfig[];
|
|
5
|
-
counterClockWise: boolean;
|
|
6
5
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PrimarySelectorV2 } from "./primary-selector-v2";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SecondarySelectorV2 } from "./secondary-selector-v2";
|
|
@@ -17,7 +17,7 @@ export declare type SelectorProps<T extends string = string> = BaseComponentProp
|
|
|
17
17
|
/**
|
|
18
18
|
* this is the width of the component
|
|
19
19
|
*/
|
|
20
|
-
width?:
|
|
20
|
+
width?: string | string[];
|
|
21
21
|
/**
|
|
22
22
|
* this is the name prop which we use as a form of an id for this selector. It needs to be unique, given more name based form components in the same app.
|
|
23
23
|
*/
|
|
@@ -40,7 +40,7 @@ export declare type SelectorProps<T extends string = string> = BaseComponentProp
|
|
|
40
40
|
* this is an optional amount of spacing between the
|
|
41
41
|
* selectorLabel and the selectInput. Default value: ["20px"]
|
|
42
42
|
*/
|
|
43
|
-
gap?: string[];
|
|
43
|
+
gap?: string | string[];
|
|
44
44
|
/**
|
|
45
45
|
* text to be shown inside the selector when no options are provided
|
|
46
46
|
* Default value: 'No options'
|
|
@@ -24,4 +24,8 @@ export interface SelectorV2Props<T extends string = string> extends Omit<Selecto
|
|
|
24
24
|
* List of available selector's options.
|
|
25
25
|
*/
|
|
26
26
|
options: SelectorOptionV2<T>[];
|
|
27
|
+
/**
|
|
28
|
+
* How to align items in label container.
|
|
29
|
+
*/
|
|
30
|
+
labelContainerAlignItems?: string;
|
|
27
31
|
}
|
|
@@ -18,4 +18,8 @@ export interface BaseSelectorV2Props<T extends string = string> extends Omit<Sel
|
|
|
18
18
|
* List of available selector's options.
|
|
19
19
|
*/
|
|
20
20
|
options: SelectorOptionV2<T | null>[];
|
|
21
|
+
/**
|
|
22
|
+
* How to align items in label container.
|
|
23
|
+
*/
|
|
24
|
+
labelContainerAlignItems?: string;
|
|
21
25
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TabProps } from "./interfaces";
|
|
3
|
-
export declare const Ribbon: ({ active, activeColor }: {
|
|
3
|
+
export declare const Ribbon: ({ active, activeColor, color, }: {
|
|
4
4
|
active?: boolean | undefined;
|
|
5
5
|
activeColor?: string | undefined;
|
|
6
|
+
color?: string | undefined;
|
|
6
7
|
}) => JSX.Element;
|
|
7
8
|
export declare function Tab<T>({ width, label, secondaryText, icon, id, onClick, selected, activeColor, color, tabPadding, bg, activeBg, activeRibbonColor, borderRadius, tabHeaderComponent, elementId, }: TabProps<T>): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ReactComponent as InstagramIcon } from "./instagram.svg";
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23">
|
|
2
|
+
<path d="M3060.99,3222.39a2.661,2.661,0,0,0-2.66-2.39h-17.66a2.592,2.592,0,0,0-.48.04,2.649,2.649,0,0,0-2.19,2.66v17.59a3.4,3.4,0,0,0,.03.45,2.643,2.643,0,0,0,2.59,2.26h17.76c0.1,0,.2-0.01.31-0.02a2.641,2.641,0,0,0,2.31-2.6v-17.76A1.848,1.848,0,0,0,3060.99,3222.39Zm-11.49,4.69a4.42,4.42,0,1,1-4.42,4.42A4.415,4.415,0,0,1,3049.5,3227.08Zm8.85,2.77v9.53a0.891,0.891,0,0,1-.96.97h-15.8a0.882,0.882,0,0,1-.93-0.93c-0.01-3.19,0-6.39,0-9.58v-0.1h1.99a7.072,7.072,0,0,0,3.39,7.94,7.059,7.059,0,0,0,7.44-.33,7.064,7.064,0,0,0,2.87-7.61h2v0.11Zm0-3.68a0.883,0.883,0,0,1-.91.91h-2.61a0.873,0.873,0,0,1-.9-0.88c-0.01-.89-0.01-1.78,0-2.66a0.868,0.868,0,0,1,.9-0.88c0.87-.01,1.75-0.01,2.62,0a0.878,0.878,0,0,1,.9.9v2.61Z" transform="translate(-3038 -3220)"/>
|
|
3
|
+
</svg>
|
|
@@ -6,7 +6,7 @@ declare type PropsFromBaseText = Pick<BaseTextProps, "children" | "color" | "dis
|
|
|
6
6
|
/**
|
|
7
7
|
* SelfDecode's combinations of fontSize and fontWeight.
|
|
8
8
|
*/
|
|
9
|
-
declare type SDFontSizeWeight = [number, "semi-bold" | "regular" | "bold"];
|
|
9
|
+
export declare type SDFontSizeWeight = [number, "semi-bold" | "regular" | "bold"];
|
|
10
10
|
export interface ResponsiveTextProps extends PropsFromBaseText {
|
|
11
11
|
fontSizeWeight: SDFontSizeWeight[];
|
|
12
12
|
/**
|
package/lib/core/theme.d.ts
CHANGED
|
@@ -53,6 +53,11 @@ declare const _default: {
|
|
|
53
53
|
gridTemplateColumns: string;
|
|
54
54
|
alignItems: string;
|
|
55
55
|
};
|
|
56
|
+
secondaryV2: {
|
|
57
|
+
display: string;
|
|
58
|
+
gridTemplateColumns: string;
|
|
59
|
+
alignItems: string;
|
|
60
|
+
};
|
|
56
61
|
};
|
|
57
62
|
};
|
|
58
63
|
_dropdowns: {
|
|
@@ -299,6 +304,26 @@ declare const _default: {
|
|
|
299
304
|
color: string;
|
|
300
305
|
fontSize: string[];
|
|
301
306
|
};
|
|
307
|
+
secondaryV2: {
|
|
308
|
+
fontFamily: string;
|
|
309
|
+
color: string;
|
|
310
|
+
fontSize: string;
|
|
311
|
+
};
|
|
312
|
+
primaryV2: {
|
|
313
|
+
position: string;
|
|
314
|
+
left: string;
|
|
315
|
+
top: string;
|
|
316
|
+
height: string;
|
|
317
|
+
fontFamily: string;
|
|
318
|
+
fontWeight: number;
|
|
319
|
+
color: string;
|
|
320
|
+
fontSize: string;
|
|
321
|
+
letterSpacing: string;
|
|
322
|
+
textTransform: string;
|
|
323
|
+
width: string;
|
|
324
|
+
bg: string;
|
|
325
|
+
px: string;
|
|
326
|
+
};
|
|
302
327
|
};
|
|
303
328
|
iconButton: {
|
|
304
329
|
marginRight: string;
|
|
@@ -402,6 +427,37 @@ declare const _default: {
|
|
|
402
427
|
transform: string;
|
|
403
428
|
};
|
|
404
429
|
};
|
|
430
|
+
secondaryV2: {
|
|
431
|
+
fontFamily: string;
|
|
432
|
+
fontWeight: string;
|
|
433
|
+
fontSize: string;
|
|
434
|
+
letterSpacing: number;
|
|
435
|
+
color: string;
|
|
436
|
+
outline: string;
|
|
437
|
+
border: string;
|
|
438
|
+
borderRadius: number;
|
|
439
|
+
borderBottomColor: string;
|
|
440
|
+
borderBottomStyle: string;
|
|
441
|
+
borderBottomWidth: number;
|
|
442
|
+
pb: string;
|
|
443
|
+
pl: number;
|
|
444
|
+
pt: number;
|
|
445
|
+
pr: string;
|
|
446
|
+
"& + svg": {
|
|
447
|
+
fill: string;
|
|
448
|
+
transform: string;
|
|
449
|
+
};
|
|
450
|
+
};
|
|
451
|
+
primaryV2: {
|
|
452
|
+
fontFamily: string;
|
|
453
|
+
fontSize: string;
|
|
454
|
+
color: string;
|
|
455
|
+
px: string;
|
|
456
|
+
py: string;
|
|
457
|
+
borderRadius: string;
|
|
458
|
+
borderColor: string;
|
|
459
|
+
outline: string;
|
|
460
|
+
};
|
|
405
461
|
};
|
|
406
462
|
};
|
|
407
463
|
text: {
|
package/lib/index.d.ts
CHANGED
|
@@ -133,6 +133,8 @@ export { CustomSelector } from "./components/selectors/custom-selector";
|
|
|
133
133
|
export { SelectorV2 } from "./components/selectors/selector-v2";
|
|
134
134
|
export type { SelectorV2Props, SelectorOptionV2, } from "./components/selectors/selector-v2";
|
|
135
135
|
export { TertiarySelectorV2 } from "./components/selectors/tertiary-selector-v2";
|
|
136
|
+
export { SecondarySelectorV2 } from "./components/selectors/secondary-selector-v2";
|
|
137
|
+
export { PrimarySelectorV2 } from "./components/selectors/primary-selector-v2";
|
|
136
138
|
export { Slider } from "./components/slider";
|
|
137
139
|
export declare type SlideSettings = SlideSettingsType;
|
|
138
140
|
export { TextSwitch } from "./components/switches/text-switch";
|
|
@@ -148,6 +150,8 @@ export { BaseText } from "./components/texts/base-text";
|
|
|
148
150
|
export declare type BaseTextProps = BaseTextPropsInterface;
|
|
149
151
|
export { ResponsiveText } from "./components/texts/responsive-text";
|
|
150
152
|
export declare type ResponsiveTextProps = BaseResponsiveTextProps;
|
|
153
|
+
export { BaseTextV2 } from "./components/texts/base-text-v2";
|
|
154
|
+
export { ResponsiveTextV2 } from "./components/texts/responsive-text-v2";
|
|
151
155
|
export { TenSb } from "./components/texts/ten-sb";
|
|
152
156
|
export { TwelveRegular } from "./components/texts/twelve-regular";
|
|
153
157
|
export { TwelveSb } from "./components/texts/twelve-sb";
|