@bikdotai/bik-component-library 0.0.5-beta.1 → 0.0.5-beta.2
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/cjs/components/fab-menu/FABMenu.d.ts +3 -1
- package/dist/cjs/components/fab-menu/FABMenu.js +1 -1
- package/dist/cjs/components/floating-action-button/FloatingActionButton.d.ts +3 -1
- package/dist/cjs/components/floating-action-button/FloatingActionButton.js +1 -1
- package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.d.ts +3 -2
- package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js +10 -6
- package/dist/cjs/components/stepper/WorkingStepper.d.ts +1 -0
- package/dist/esm/components/fab-menu/FABMenu.d.ts +3 -1
- package/dist/esm/components/fab-menu/FABMenu.js +1 -1
- package/dist/esm/components/floating-action-button/FloatingActionButton.d.ts +3 -1
- package/dist/esm/components/floating-action-button/FloatingActionButton.js +1 -1
- package/dist/esm/components/floating-action-button/FloatingActionButton.styles.d.ts +3 -2
- package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js +19 -15
- package/dist/esm/components/stepper/WorkingStepper.d.ts +1 -0
- package/package.json +1 -1
|
@@ -12,7 +12,9 @@ export declare const FABMenu: React.FC<{
|
|
|
12
12
|
menuWidth?: number;
|
|
13
13
|
menuHeight?: number;
|
|
14
14
|
buttonIcon?: JSX.Element;
|
|
15
|
-
|
|
15
|
+
buttonPaddingHorizontal?: number;
|
|
16
|
+
buttonPaddingVertical?: number;
|
|
16
17
|
tooltipPlacement?: TooltipPlacement;
|
|
17
18
|
tooltipText?: string;
|
|
19
|
+
zIndex?: number;
|
|
18
20
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/opennedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/opennedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:l,buttonPosition:c,menuWidth:s,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:l,position:c,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j},{children:t.jsx(o.OpennedDropdown,{options:r,height:a||90,width:s,onSelect:i})}))})};
|
|
@@ -10,7 +10,9 @@ export declare const FloatingActionButton: React.FC<{
|
|
|
10
10
|
icon?: JSX.Element;
|
|
11
11
|
color?: string;
|
|
12
12
|
position?: FAB_POSITION;
|
|
13
|
-
|
|
13
|
+
buttonPaddingHorizontal?: number;
|
|
14
|
+
buttonPaddingVertical?: number;
|
|
14
15
|
tooltipText?: string;
|
|
15
16
|
tooltipPlacement?: TooltipPlacement;
|
|
17
|
+
zIndex?: number;
|
|
16
18
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react-bootstrap"),i=require("../../constants/Theme.js"),n=require("../tooltips/CustomisedTooltip.js"),e=require("../../assets/icons/question-mark.svg.js"),r=require("./FloatingActionButton.styles.js");const l=o=>{const{width:i,height:l,color:s,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react-bootstrap"),i=require("../../constants/Theme.js"),n=require("../tooltips/CustomisedTooltip.js"),e=require("../../assets/icons/question-mark.svg.js"),r=require("./FloatingActionButton.styles.js");const l=o=>{const{width:i,height:l,color:s,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h}=o;return h?t.jsx(n.CustomisedTooltip,{tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:l,color:s,onClick:c},{children:d||t.jsx(e.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:l,color:s,onClick:c},{children:d||t.jsx(e.default,{width:22,height:22})}))})};exports.FloatingActionButton=e=>{const{icon:s,onClick:c,children:d,tooltipText:a}=e,h=e.width?e.width:48,g=e.height?e.height:48,u=e.color?e.color:i.COLORS.background.inverse,p=e.position?e.position:r.FAB_POSITION.TOP_LEFT,x=e.buttonPaddingHorizontal?e.buttonPaddingHorizontal:20,j=e.buttonPaddingVertical?e.buttonPaddingVertical:20,m=e.zIndex?e.zIndex:1,P=e.tooltipPlacement?e.tooltipPlacement:n.TooltipPlacement.Auto;return t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonOuterContainer,Object.assign({width:h,height:g,color:u,position:p,buttonPaddingHorizontal:x,buttonPaddingVertical:j,zIndex:m},{children:t.jsx(r.StyledDropdown,{children:d?t.jsxs(t.Fragment,{children:[t.jsx(r.DropdownToggleContainer,{children:t.jsx(l,{width:h,height:g,color:u,tooltipPlacement:P,onClick:c,tooltipText:a,icon:s,position:p})}),t.jsx(o.Dropdown.Menu,{children:d})]}):t.jsx(l,{width:h,height:g,color:u,tooltipPlacement:P,onClick:c,tooltipText:a,icon:s,position:p})})}))})};
|
|
@@ -9,14 +9,15 @@ export declare const FloatingActionButtonContainer: import("styled-components").
|
|
|
9
9
|
width: number;
|
|
10
10
|
height: number;
|
|
11
11
|
color: string;
|
|
12
|
-
buttonPadding: number;
|
|
13
12
|
}, never>;
|
|
14
13
|
export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
|
|
15
14
|
width: number;
|
|
16
15
|
height: number;
|
|
17
16
|
color: string;
|
|
18
17
|
position: FAB_POSITION;
|
|
19
|
-
|
|
18
|
+
buttonPaddingHorizontal: number;
|
|
19
|
+
buttonPaddingVertical: number;
|
|
20
|
+
zIndex: number;
|
|
20
21
|
}, never>;
|
|
21
22
|
export declare const StyledDropdown: import("styled-components").StyledComponent<import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap").DropdownProps> & {
|
|
22
23
|
Toggle: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"button", import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right";const d=n.default.div`
|
|
2
2
|
width: ${t=>t.width}px;
|
|
3
3
|
height: ${t=>t.height}px;
|
|
4
4
|
background: ${t=>t.color};
|
|
@@ -7,13 +7,17 @@
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
display: flex;
|
|
10
|
-
`,p=
|
|
10
|
+
`,p=n.default.div`
|
|
11
11
|
display: flex;
|
|
12
|
+
border-radius: 50%;
|
|
12
13
|
flex-direction: column;
|
|
13
14
|
align-items: flex-end;
|
|
14
|
-
position:
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
position: fixed;
|
|
16
|
+
width: ${t=>t.width}px;
|
|
17
|
+
height: ${t=>t.height}px;
|
|
18
|
+
z-index: ${t=>t.zIndex};
|
|
19
|
+
${t=>t.position===exports.FAB_POSITION.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
|
|
20
|
+
`,a=n.default(t.Dropdown)`
|
|
17
21
|
.filter-container {
|
|
18
22
|
.single-row {
|
|
19
23
|
display: flex;
|
|
@@ -70,7 +74,7 @@
|
|
|
70
74
|
text-decoration: none;
|
|
71
75
|
background-color: ${e.COLORS.background.positive.light};
|
|
72
76
|
}
|
|
73
|
-
`,s=
|
|
77
|
+
`,s=n.default(t.Dropdown.Toggle)`
|
|
74
78
|
border-radius: 4px;
|
|
75
79
|
display: flex;
|
|
76
80
|
flex-direction: row;
|
|
@@ -12,7 +12,9 @@ export declare const FABMenu: React.FC<{
|
|
|
12
12
|
menuWidth?: number;
|
|
13
13
|
menuHeight?: number;
|
|
14
14
|
buttonIcon?: JSX.Element;
|
|
15
|
-
|
|
15
|
+
buttonPaddingHorizontal?: number;
|
|
16
|
+
buttonPaddingVertical?: number;
|
|
16
17
|
tooltipPlacement?: TooltipPlacement;
|
|
17
18
|
tooltipText?: string;
|
|
19
|
+
zIndex?: number;
|
|
18
20
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:l,buttonColor:c,buttonPosition:a,menuWidth:p,menuHeight:u,buttonIcon:s,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P}=i;return t("div",{children:t(n,Object.assign({icon:s,width:r,height:l,color:c,position:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P},{children:t(o,{options:d,height:u||90,width:p,onSelect:e})}))})};export{i as FABMenu};
|
|
@@ -10,7 +10,9 @@ export declare const FloatingActionButton: React.FC<{
|
|
|
10
10
|
icon?: JSX.Element;
|
|
11
11
|
color?: string;
|
|
12
12
|
position?: FAB_POSITION;
|
|
13
|
-
|
|
13
|
+
buttonPaddingHorizontal?: number;
|
|
14
|
+
buttonPaddingVertical?: number;
|
|
14
15
|
tooltipText?: string;
|
|
15
16
|
tooltipPlacement?: TooltipPlacement;
|
|
17
|
+
zIndex?: number;
|
|
16
18
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t,Fragment as o,jsxs as i}from"react/jsx-runtime";import{Dropdown as n}from"react-bootstrap";import{COLORS as e}from"../../constants/Theme.js";import{TooltipPlacement as
|
|
1
|
+
import{jsx as t,Fragment as o,jsxs as i}from"react/jsx-runtime";import{Dropdown as n}from"react-bootstrap";import{COLORS as e}from"../../constants/Theme.js";import{TooltipPlacement as l,CustomisedTooltip as r}from"../tooltips/CustomisedTooltip.js";import c from"../../assets/icons/question-mark.svg.js";import{FAB_POSITION as h,FloatingActionButtonOuterContainer as d,StyledDropdown as s,DropdownToggleContainer as a,FloatingActionButtonContainer as p}from"./FloatingActionButton.styles.js";const g=i=>{const{width:n,height:e,color:l,onClick:h,icon:d,tooltipPlacement:s,tooltipText:a}=i;return a?t(r,{tooltipContent:t(o,{children:a}),tooltipTriggerContent:t(p,Object.assign({width:n,height:e,color:l,onClick:h},{children:d||t(c,{width:22,height:22})})),tooltipPlacement:s,showOnHover:!0}):t(o,{children:t(p,Object.assign({width:n,height:e,color:l,onClick:h},{children:d||t(c,{width:22,height:22})}))})},m=r=>{const{icon:c,onClick:p,children:m,tooltipText:u}=r,P=r.width?r.width:48,b=r.height?r.height:48,w=r.color?r.color:e.background.inverse,x=r.position?r.position:h.TOP_LEFT,C=r.buttonPaddingHorizontal?r.buttonPaddingHorizontal:20,T=r.buttonPaddingVertical?r.buttonPaddingVertical:20,j=r.zIndex?r.zIndex:1,k=r.tooltipPlacement?r.tooltipPlacement:l.Auto;return t(o,{children:t(d,Object.assign({width:P,height:b,color:w,position:x,buttonPaddingHorizontal:C,buttonPaddingVertical:T,zIndex:j},{children:t(s,{children:m?i(o,{children:[t(a,{children:t(g,{width:P,height:b,color:w,tooltipPlacement:k,onClick:p,tooltipText:u,icon:c,position:x})}),t(n.Menu,{children:m})]}):t(g,{width:P,height:b,color:w,tooltipPlacement:k,onClick:p,tooltipText:u,icon:c,position:x})})}))})};export{m as FloatingActionButton};
|
|
@@ -9,14 +9,15 @@ export declare const FloatingActionButtonContainer: import("styled-components").
|
|
|
9
9
|
width: number;
|
|
10
10
|
height: number;
|
|
11
11
|
color: string;
|
|
12
|
-
buttonPadding: number;
|
|
13
12
|
}, never>;
|
|
14
13
|
export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
|
|
15
14
|
width: number;
|
|
16
15
|
height: number;
|
|
17
16
|
color: string;
|
|
18
17
|
position: FAB_POSITION;
|
|
19
|
-
|
|
18
|
+
buttonPaddingHorizontal: number;
|
|
19
|
+
buttonPaddingVertical: number;
|
|
20
|
+
zIndex: number;
|
|
20
21
|
}, never>;
|
|
21
22
|
export declare const StyledDropdown: import("styled-components").StyledComponent<import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap").DropdownProps> & {
|
|
22
23
|
Toggle: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"button", import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{Dropdown as t}from"react-bootstrap";import o from"styled-components";import{COLORS as
|
|
1
|
+
import{Dropdown as t}from"react-bootstrap";import o from"styled-components";import{COLORS as i}from"../../constants/Theme.js";var e;!function(t){t.TOP_LEFT="top left",t.TOP_RIGHT="top right",t.BOTTOM_LEFT="bottom left",t.BOTTOM_RIGHT="botton right"}(e||(e={}));const r=o.div`
|
|
2
2
|
width: ${t=>t.width}px;
|
|
3
3
|
height: ${t=>t.height}px;
|
|
4
4
|
background: ${t=>t.color};
|
|
@@ -7,12 +7,16 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
display: flex;
|
|
10
|
-
`,
|
|
10
|
+
`,n=o.div`
|
|
11
11
|
display: flex;
|
|
12
|
+
border-radius: 50%;
|
|
12
13
|
flex-direction: column;
|
|
13
14
|
align-items: flex-end;
|
|
14
|
-
position:
|
|
15
|
-
|
|
15
|
+
position: fixed;
|
|
16
|
+
width: ${t=>t.width}px;
|
|
17
|
+
height: ${t=>t.height}px;
|
|
18
|
+
z-index: ${t=>t.zIndex};
|
|
19
|
+
${t=>t.position===e.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===e.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===e.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===e.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
|
|
16
20
|
`,d=o(t)`
|
|
17
21
|
.filter-container {
|
|
18
22
|
.single-row {
|
|
@@ -22,7 +26,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
|
|
|
22
26
|
justify-content: flex-start;
|
|
23
27
|
gap: 8px;
|
|
24
28
|
padding: 14px;
|
|
25
|
-
border-bottom: 1px solid ${
|
|
29
|
+
border-bottom: 1px solid ${i.stroke.primary};
|
|
26
30
|
|
|
27
31
|
:last-child {
|
|
28
32
|
border-bottom: none !important;
|
|
@@ -31,15 +35,15 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
|
|
|
31
35
|
}
|
|
32
36
|
button {
|
|
33
37
|
border: 1px solid
|
|
34
|
-
${t=>"true"===t.active?
|
|
38
|
+
${t=>"true"===t.active?i.stroke.positive.lightAlt:i.stroke.primary};
|
|
35
39
|
border-radius: 4px;
|
|
36
40
|
display: flex;
|
|
37
41
|
flex-direction: row;
|
|
38
42
|
align-items: center;
|
|
39
43
|
justify-content: space-between;
|
|
40
44
|
padding: 6px 8px;
|
|
41
|
-
background: ${t=>"true"===t.active?
|
|
42
|
-
color: ${t=>"true"===t.active?
|
|
45
|
+
background: ${t=>"true"===t.active?i.background.positive.light:i.surface.standard};
|
|
46
|
+
color: ${t=>"true"===t.active?i.content.positive:i.content.primary};
|
|
43
47
|
}
|
|
44
48
|
|
|
45
49
|
.btn-primary:hover,
|
|
@@ -47,8 +51,8 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
|
|
|
47
51
|
.btn-primary:focus,
|
|
48
52
|
.btn-primary.dropdown-toggle,
|
|
49
53
|
.show > .btn-primary.dropdown-toggle {
|
|
50
|
-
color: ${t=>"true"===t.active?
|
|
51
|
-
background-color: ${t=>"true"===t.active?
|
|
54
|
+
color: ${t=>"true"===t.active?i.content.positive:i.content.primary};
|
|
55
|
+
background-color: ${t=>"true"===t.active?i.background.positive.light:"transparent"};
|
|
52
56
|
border: none;
|
|
53
57
|
}
|
|
54
58
|
.btn:focus {
|
|
@@ -57,7 +61,7 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
|
|
|
57
61
|
}
|
|
58
62
|
|
|
59
63
|
.dropdown-toggle::after {
|
|
60
|
-
border-top: 0.3em solid ${
|
|
64
|
+
border-top: 0.3em solid ${i.content.primary};
|
|
61
65
|
display: none;
|
|
62
66
|
}
|
|
63
67
|
.dropdown-menu {
|
|
@@ -66,11 +70,11 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
|
|
|
66
70
|
}
|
|
67
71
|
.dropdown-item:active,
|
|
68
72
|
.dropdown-item:hover {
|
|
69
|
-
color: ${
|
|
73
|
+
color: ${i.content.positive};
|
|
70
74
|
text-decoration: none;
|
|
71
|
-
background-color: ${
|
|
75
|
+
background-color: ${i.background.positive.light};
|
|
72
76
|
}
|
|
73
|
-
`,
|
|
77
|
+
`,a=o(t.Toggle)`
|
|
74
78
|
border-radius: 4px;
|
|
75
79
|
display: flex;
|
|
76
80
|
flex-direction: row;
|
|
@@ -80,4 +84,4 @@ import{Dropdown as t}from"react-bootstrap";import o from"styled-components";impo
|
|
|
80
84
|
font-weight: 400;
|
|
81
85
|
font-size: 14px;
|
|
82
86
|
line-height: 20px;
|
|
83
|
-
`;export{
|
|
87
|
+
`;export{a as DropdownToggleContainer,e as FAB_POSITION,r as FloatingActionButtonContainer,n as FloatingActionButtonOuterContainer,d as StyledDropdown};
|