bord-design-system 0.0.6 → 0.0.7
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/dist/components/BordButton/BordButton.d.ts +3 -3
- package/dist/components/BordButton/BordButton.d.ts.map +1 -1
- package/dist/components/BordButton/BordButton.types.d.ts +2 -1
- package/dist/components/BordButton/BordButton.types.d.ts.map +1 -1
- package/dist/components/BordFloatDropdown/BordFloatDropdown.d.ts +22 -0
- package/dist/components/BordFloatDropdown/BordFloatDropdown.d.ts.map +1 -0
- package/dist/components/BordFloatDropdown/BordFloatDropdown.types.d.ts +26 -0
- package/dist/components/BordFloatDropdown/BordFloatDropdown.types.d.ts.map +1 -0
- package/dist/components/BordInfoCard/BordInfoCard.d.ts.map +1 -1
- package/dist/components/BordInfoCard/BordInfoCard.types.d.ts +2 -0
- package/dist/components/BordInfoCard/BordInfoCard.types.d.ts.map +1 -1
- package/dist/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.d.ts.map +1 -1
- package/dist/index.d.ts +14 -1
- package/dist/index.esm.js +153 -101
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +152 -100
- package/dist/index.js.map +1 -1
- package/dist/index.webpack.js +153 -101
- package/dist/index.webpack.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/BordInfoCard/constants.d.ts +0 -11
- package/dist/components/BordInfoCard/constants.d.ts.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { IBordButton } from
|
|
3
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IBordButton } from './BordButton.types';
|
|
3
|
+
import './BordButton.scss';
|
|
4
4
|
/**
|
|
5
5
|
* @description A button component with different styles and loading state.
|
|
6
6
|
* @prop {string} [formId] - The id of the form element to associate with the button.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordButton.d.ts","sourceRoot":"","sources":["../../../src/components/BordButton/BordButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,OAAO,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,UAAU,UAAW,WAAW,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"BordButton.d.ts","sourceRoot":"","sources":["../../../src/components/BordButton/BordButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,OAAO,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,UAAU,UAAW,WAAW,KAAG,KAAK,CAAC,YAoD9C,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -7,7 +7,7 @@ export interface IBordButton extends ComponentProps<'button'> {
|
|
|
7
7
|
label?: string;
|
|
8
8
|
formId?: string;
|
|
9
9
|
customClassName?: string;
|
|
10
|
-
customWidth?: TformComponentsStandardSizes;
|
|
10
|
+
customWidth?: TformComponentsStandardSizes | string;
|
|
11
11
|
customHeight?: THeight;
|
|
12
12
|
bordButtonStyle?: 'filled' | 'outlined';
|
|
13
13
|
customFontSize?: string;
|
|
@@ -19,6 +19,7 @@ export interface IBordButton extends ComponentProps<'button'> {
|
|
|
19
19
|
buttonIconTwoProps?: IbordOneToneIconProps;
|
|
20
20
|
buttonIconOne?: TbordOneToneIcon;
|
|
21
21
|
buttonIconTwo?: TbordOneToneIcon;
|
|
22
|
+
theme?: 'light' | 'dark';
|
|
22
23
|
}
|
|
23
24
|
export {};
|
|
24
25
|
//# sourceMappingURL=BordButton.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordButton/BordButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;AAE7B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"BordButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordButton/BordButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;AAE7B,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,4BAA4B,GAAG,MAAM,CAAC;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;IAC5E,mBAAmB,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAChD,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;IAC3C,kBAAkB,CAAC,EAAE,qBAAqB,CAAC;IAC3C,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC1B"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IBordFloatDropdown } from './BordFloatDropdown.types';
|
|
3
|
+
import './BordFloatDropdown.scss';
|
|
4
|
+
/**
|
|
5
|
+
* @description A floating dropdown component that displays a list of options with icons, labels, and messages.
|
|
6
|
+
* The dropdown automatically positions itself below the anchor element on desktop/tablet and above it on mobile.
|
|
7
|
+
* @prop {IBordFloatDropdownOption[]} options - Array of options to display in the dropdown. Each option can have:
|
|
8
|
+
* - iconProps: Optional props object for BordOneToneIcon (variant is required, standardSize defaults to 14, stroke defaults to #070F21)
|
|
9
|
+
* - label: String for the main text
|
|
10
|
+
* - message: Optional string for secondary text below the label
|
|
11
|
+
* - onClick: Function to execute when the option is clicked
|
|
12
|
+
* - customContent: Optional React node for completely custom option rendering
|
|
13
|
+
* @prop {boolean} isOpen - Controls whether the dropdown is visible or not.
|
|
14
|
+
* @prop {() => void} onClose - Callback function to execute when the dropdown should close.
|
|
15
|
+
* @prop {string} [customClassName] - Optional custom class name for styling.
|
|
16
|
+
* @prop {object} [position] - Optional position object with top, left, right, bottom values for fine-tuning the spacing.
|
|
17
|
+
* @prop {React.RefObject<HTMLElement>} [anchorRef] - Reference to the element that triggers the dropdown for positioning.
|
|
18
|
+
* @returns {React.ReactElement | null} A floating dropdown component or null if not open.
|
|
19
|
+
*/
|
|
20
|
+
declare const BordFloatDropdown: ({ options, isOpen, onClose, customClassName, position, anchorRef, }: IBordFloatDropdown) => React.ReactElement | null;
|
|
21
|
+
export default BordFloatDropdown;
|
|
22
|
+
//# sourceMappingURL=BordFloatDropdown.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BordFloatDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/BordFloatDropdown/BordFloatDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG/D,OAAO,0BAA0B,CAAC;AAElC;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,iBAAiB,wEAOpB,kBAAkB,KAAG,KAAK,CAAC,YAAY,GAAG,IAwH5C,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from 'react';
|
|
2
|
+
import { IbordOneToneIconProps } from '../BordOneToneIcon/BordOneToneIcon';
|
|
3
|
+
export interface IBordFloatDropdownOption {
|
|
4
|
+
iconProps?: Omit<IbordOneToneIconProps, 'variant'> & {
|
|
5
|
+
variant: IbordOneToneIconProps['variant'];
|
|
6
|
+
};
|
|
7
|
+
label: string;
|
|
8
|
+
message?: string;
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
className?: string;
|
|
11
|
+
customContent?: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export interface IBordFloatDropdown {
|
|
14
|
+
options: IBordFloatDropdownOption[];
|
|
15
|
+
isOpen: boolean;
|
|
16
|
+
onClose: () => void;
|
|
17
|
+
customClassName?: string;
|
|
18
|
+
position?: {
|
|
19
|
+
top?: number;
|
|
20
|
+
left?: number;
|
|
21
|
+
right?: number;
|
|
22
|
+
bottom?: number;
|
|
23
|
+
};
|
|
24
|
+
anchorRef?: RefObject<HTMLElement>;
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=BordFloatDropdown.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BordFloatDropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordFloatDropdown/BordFloatDropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,CAAC,GAAG;QAAE,OAAO,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;KAAE,CAAC;IACnG,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,wBAAwB,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE;QACT,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACpC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordInfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/BordInfoCard/BordInfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BordInfoCard.d.ts","sourceRoot":"","sources":["../../../src/components/BordInfoCard/BordInfoCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAOrD,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;;;GAUG;AACH,QAAA,MAAM,YAAY,UAAW,aAAa,KAAG,KAAK,CAAC,YAiMlD,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentProps, ReactNode } from 'react';
|
|
2
2
|
import { IBordButton } from '../BordButton/BordButton.types';
|
|
3
3
|
import { IRowFooterProps } from '../BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList';
|
|
4
|
+
import { IBordFloatDropdownOption } from '../BordFloatDropdown/BordFloatDropdown.types';
|
|
4
5
|
export interface IBordInfoCardItem {
|
|
5
6
|
title?: string;
|
|
6
7
|
icon?: ReactNode;
|
|
@@ -22,5 +23,6 @@ export interface IBordInfoCard extends ComponentProps<'div'> {
|
|
|
22
23
|
variant?: 'success' | 'danger';
|
|
23
24
|
customClassName?: string;
|
|
24
25
|
bordTrelloRowFooterBadgeListProps?: IRowFooterProps;
|
|
26
|
+
dropdownOptions?: IBordFloatDropdownOption[];
|
|
25
27
|
}
|
|
26
28
|
//# sourceMappingURL=BordInfoCard.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordInfoCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordInfoCard/BordInfoCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAC;
|
|
1
|
+
{"version":3,"file":"BordInfoCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/BordInfoCard/BordInfoCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8DAA8D,CAAC;AAC/F,OAAO,EAAE,wBAAwB,EAAE,MAAM,8CAA8C,CAAC;AAExF,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC5B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,oBAAoB,CAAC,EAAE,WAAW,CAAC;IACnC,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iCAAiC,CAAC,EAAE,eAAe,CAAC;IACpD,eAAe,CAAC,EAAE,wBAAwB,EAAE,CAAC;CAC9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BordTrelloRowFooterBadgeList.d.ts","sourceRoot":"","sources":["../../../src/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"BordTrelloRowFooterBadgeList.d.ts","sourceRoot":"","sources":["../../../src/components/BordTrelloRowFooterBadgeList/BordTrelloRowFooterBadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAG5D,OAAwB,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAE5F,OAAO,qCAAqC,CAAC;AAE7C,KAAK,eAAe,GAAG;IAAE,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC3G,KAAK,UAAU,GAAG,eAAe,GAAG,SAAS,CAAC;AAC9C,KAAK,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvF,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,SAAS,CAAC,EAAE,UAAU,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,4BAA4B,mCAAoC,eAAe,4CA4G3F,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -152,7 +152,7 @@ interface IBordButton extends ComponentProps<'button'> {
|
|
|
152
152
|
label?: string;
|
|
153
153
|
formId?: string;
|
|
154
154
|
customClassName?: string;
|
|
155
|
-
customWidth?: TformComponentsStandardSizes;
|
|
155
|
+
customWidth?: TformComponentsStandardSizes | string;
|
|
156
156
|
customHeight?: THeight;
|
|
157
157
|
bordButtonStyle?: 'filled' | 'outlined';
|
|
158
158
|
customFontSize?: string;
|
|
@@ -164,6 +164,7 @@ interface IBordButton extends ComponentProps<'button'> {
|
|
|
164
164
|
buttonIconTwoProps?: IbordOneToneIconProps;
|
|
165
165
|
buttonIconOne?: TbordOneToneIcon;
|
|
166
166
|
buttonIconTwo?: TbordOneToneIcon;
|
|
167
|
+
theme?: 'light' | 'dark';
|
|
167
168
|
}
|
|
168
169
|
|
|
169
170
|
/**
|
|
@@ -228,6 +229,17 @@ interface IRowFooterProps {
|
|
|
228
229
|
children?: ReactNode;
|
|
229
230
|
}
|
|
230
231
|
|
|
232
|
+
interface IBordFloatDropdownOption {
|
|
233
|
+
iconProps?: Omit<IbordOneToneIconProps, 'variant'> & {
|
|
234
|
+
variant: IbordOneToneIconProps['variant'];
|
|
235
|
+
};
|
|
236
|
+
label: string;
|
|
237
|
+
message?: string;
|
|
238
|
+
onClick: () => void;
|
|
239
|
+
className?: string;
|
|
240
|
+
customContent?: ReactNode;
|
|
241
|
+
}
|
|
242
|
+
|
|
231
243
|
interface IBordInfoCardItem {
|
|
232
244
|
title?: string;
|
|
233
245
|
icon?: ReactNode;
|
|
@@ -249,6 +261,7 @@ interface IBordInfoCard extends ComponentProps<'div'> {
|
|
|
249
261
|
variant?: 'success' | 'danger';
|
|
250
262
|
customClassName?: string;
|
|
251
263
|
bordTrelloRowFooterBadgeListProps?: IRowFooterProps;
|
|
264
|
+
dropdownOptions?: IBordFloatDropdownOption[];
|
|
252
265
|
}
|
|
253
266
|
|
|
254
267
|
/**
|