@bikdotai/bik-component-library 0.0.403-beta.0 → 0.0.403-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.
Files changed (13) hide show
  1. package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
  2. package/dist/cjs/components/curtain/Curtain.d.ts +2 -0
  3. package/dist/cjs/components/curtain/Curtain.js +1 -1
  4. package/dist/cjs/components/curtain/Curtain.styled.d.ts +6 -0
  5. package/dist/cjs/components/curtain/Curtain.styled.js +23 -7
  6. package/dist/cjs/components/curtain/CurtainHelper.d.ts +11 -69
  7. package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
  8. package/dist/esm/components/curtain/Curtain.d.ts +2 -0
  9. package/dist/esm/components/curtain/Curtain.js +1 -1
  10. package/dist/esm/components/curtain/Curtain.styled.d.ts +6 -0
  11. package/dist/esm/components/curtain/Curtain.styled.js +19 -3
  12. package/dist/esm/components/curtain/CurtainHelper.d.ts +11 -69
  13. package/package.json +1 -1
package/dist/cjs/components/bik-layout/MockMenus.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
package/dist/cjs/components/curtain/Curtain.d.ts CHANGED
@@ -17,5 +17,7 @@ export type CurtainProps = {
17
17
  strokeAtBottom?: boolean;
18
18
  customComponent?: ComponentType<any>;
19
19
  position?: 'sticky' | 'absolute' | 'fixed';
20
+ tertiaryButtonText?: string;
21
+ tertiaryButtonClickHandler?: () => void;
20
22
  };
21
23
  export declare const Curtain: React.FC<CurtainProps>;
package/dist/cjs/components/curtain/Curtain.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("./Curtain.styled.js"),r=require("./CurtainHelper.js"),s=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),i=require("../../assets/icons/cross.svg.js");exports.Curtain=c=>{const[l,a]=t.useState(!1);if(l)return e.jsx(e.Fragment,{});return e.jsxs(o.CurtainStyle,Object.assign({position:c.position,mode:c.mode,type:c.type,strokeAtTop:c.strokeAtTop,strokeAtBottom:c.strokeAtBottom},{children:[c.icon&&e.jsx(c.icon,{color:r.COLOR_CONFIG_MAP[c.mode][c.type].textColor,height:16,width:16}),e.jsx(s.BodySecondary,Object.assign({style:{color:r.COLOR_CONFIG_MAP[c.mode][c.type].textColor,marginLeft:8}},{children:c.text})),c.customComponent&&e.jsx(c.customComponent,{}),c.actionButtonText&&e.jsx(s.BodySecondaryLink,Object.assign({onClick:c.actionButtonClickHandler,style:{color:c.mode===r.CURTAIN_MODE.DARK?r.COLOR_CONFIG_MAP[c.mode][c.type].textColor:n.COLORS.content.brand,marginLeft:6,textDecoration:"underline"}},{children:c.actionButtonText})),!c.hideCrossIcon&&e.jsx(i.default,{onClick:()=>{a(!0),c.onCloseHandler&&c.onCloseHandler()},style:{position:"absolute",right:16},cursor:"pointer",height:20,width:20,color:r.COLOR_CONFIG_MAP[c.mode][c.type].crossIconColor})]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),o=require("./Curtain.styled.js"),r=require("./CurtainHelper.js"),n=require("../TypographyStyle.js"),s=require("../../constants/Theme.js"),i=require("../../assets/icons/cross.svg.js"),a=require("../button/Button.js");exports.Curtain=c=>{const[u,l]=e.useState(!1);if(u)return t.jsx(t.Fragment,{});return t.jsxs(o.CurtainStyle,Object.assign({isTeritaryButton:!!c.tertiaryButtonText,position:c.position,mode:c.mode,type:c.type,strokeAtTop:c.strokeAtTop,strokeAtBottom:c.strokeAtBottom},{children:[c.icon&&t.jsx(c.icon,{color:r.COLOR_CONFIG_MAP[c.mode][c.type].textColor,height:16,width:16}),t.jsx(n.BodySecondary,Object.assign({style:{color:r.COLOR_CONFIG_MAP[c.mode][c.type].textColor,marginLeft:8}},{children:c.text})),c.customComponent&&t.jsx(c.customComponent,{}),c.actionButtonText&&t.jsx(n.BodySecondaryLink,Object.assign({onClick:c.actionButtonClickHandler,style:{color:c.mode===r.CURTAIN_MODE.DARK?r.COLOR_CONFIG_MAP[c.mode][c.type].textColor:s.COLORS.content.brand,marginLeft:6,textDecoration:"underline"}},{children:c.actionButtonText})),t.jsxs(o.RightWrapper,{children:[c.tertiaryButtonText&&t.jsxs(t.Fragment,{children:[t.jsx(a.Button,{className:"tertiary-button",buttonText:c.tertiaryButtonText,onClick:c.tertiaryButtonClickHandler,buttonType:"tertiary"}),t.jsx(o.Separator,{mode:c.mode,type:c.type})]}),!c.hideCrossIcon&&t.jsx(i.default,{onClick:()=>{l(!0),c.onCloseHandler&&c.onCloseHandler()},cursor:"pointer",height:20,width:20,color:r.COLOR_CONFIG_MAP[c.mode][c.type].crossIconColor})]})]}))};
package/dist/cjs/components/curtain/Curtain.styled.d.ts CHANGED
@@ -5,4 +5,10 @@ export declare const CurtainStyle: import("styled-components").StyledComponent<"
5
5
  strokeAtTop?: boolean | undefined;
6
6
  strokeAtBottom?: boolean | undefined;
7
7
  position?: "sticky" | "absolute" | "fixed" | undefined;
8
+ isTeritaryButton?: boolean | undefined;
8
9
  }, never>;
10
+ export declare const Separator: import("styled-components").StyledComponent<"div", any, {
11
+ mode: CURTAIN_MODE;
12
+ type: CURTAIN_TYPES;
13
+ }, never>;
14
+ export declare const RightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/cjs/components/curtain/Curtain.styled.js CHANGED
@@ -1,14 +1,30 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),o=require("./CurtainHelper.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=t(e).default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("./CurtainHelper.js"),o=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var p=r(t);const i=p.default.div`
2
2
  display: flex;
3
3
  justify-content: center;
4
4
  align-items: center;
5
- padding: 8px 16px;
6
- background: ${e=>o.COLOR_CONFIG_MAP[e.mode][e.type].backgroundColor};
7
- border-top: ${e=>e.strokeAtTop?"1px solid "+o.COLOR_CONFIG_MAP[e.mode][e.type].strokeColor:0};
8
- border-bottom: ${e=>e.strokeAtBottom?"1px solid "+o.COLOR_CONFIG_MAP[e.mode][e.type].strokeColor:0};
5
+ padding: ${t=>t.isTeritaryButton?"12px 16px;":"8px 16px"};
6
+ background: ${t=>e.COLOR_CONFIG_MAP[t.mode][t.type].backgroundColor};
7
+ border-top: ${t=>t.strokeAtTop?"1px solid "+e.COLOR_CONFIG_MAP[t.mode][t.type].strokeColor:0};
8
+ border-bottom: ${t=>t.strokeAtBottom?"1px solid "+e.COLOR_CONFIG_MAP[t.mode][t.type].strokeColor:0};
9
9
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
10
10
  width: 100%;
11
- position: ${e=>e.position?e.position:"absolute"};
11
+ position: ${t=>t.position?t.position:"absolute"};
12
12
  top: 0;
13
13
  z-index: 1;
14
- `;exports.CurtainStyle=r;
14
+ .tertiary-button {
15
+ background: transparent;
16
+ .text {
17
+ color: ${t=>t.mode===e.CURTAIN_MODE.DARK?e.COLOR_CONFIG_MAP[t.mode][t.type].textColor:o.COLORS.content.brand};
18
+ }
19
+ }
20
+ `,n=p.default.div`
21
+ height: 28px;
22
+ width: 1px;
23
+ background-color: ${t=>e.COLOR_CONFIG_MAP[e.CURTAIN_MODE.LIGHT][t.type].strokeColor};
24
+ `,s=p.default.div`
25
+ position: absolute;
26
+ right: 16px;
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 8px;
30
+ `;exports.CurtainStyle=i,exports.RightWrapper=s,exports.Separator=n;
package/dist/cjs/components/curtain/CurtainHelper.d.ts CHANGED
@@ -10,74 +10,16 @@ export declare enum CURTAIN_MODE {
10
10
  LIGHT = "LIGHT",
11
11
  DARK = "DARK"
12
12
  }
13
- export declare const COLOR_CONFIG_MAP: {
14
- DARK: {
15
- Negative: {
16
- backgroundColor: string;
17
- textColor: string;
18
- crossIconColor: string;
19
- };
20
- Warning: {
21
- backgroundColor: string;
22
- textColor: string;
23
- crossIconColor: string;
24
- };
25
- Positive: {
26
- backgroundColor: string;
27
- textColor: string;
28
- crossIconColor: string;
29
- };
30
- Neutral: {
31
- backgroundColor: string;
32
- textColor: string;
33
- crossIconColor: string;
34
- };
35
- Special: {
36
- backgroundColor: string;
37
- textColor: string;
38
- crossIconColor: string;
39
- };
40
- Manifest: {
41
- backgroundColor: string;
42
- textColor: string;
43
- crossIconColor: string;
44
- };
45
- };
46
- LIGHT: {
47
- Negative: {
48
- backgroundColor: string;
49
- textColor: string;
50
- crossIconColor: string;
51
- strokeColor: string;
52
- };
53
- Warning: {
54
- backgroundColor: string;
55
- textColor: string;
56
- crossIconColor: string;
57
- strokeColor: string;
58
- };
59
- Positive: {
60
- backgroundColor: string;
61
- textColor: string;
62
- crossIconColor: string;
63
- strokeColor: string;
64
- };
65
- Neutral: {
66
- backgroundColor: string;
67
- textColor: string;
68
- crossIconColor: string;
69
- strokeColor: string;
70
- };
71
- Special: {
72
- backgroundColor: string;
73
- textColor: string;
74
- crossIconColor: string;
75
- strokeColor: string;
76
- };
77
- Manifest: {
78
- backgroundColor: string;
79
- textColor: string;
80
- crossIconColor: string;
81
- };
13
+ interface ColorConfig {
14
+ backgroundColor: string;
15
+ textColor: string;
16
+ crossIconColor: string;
17
+ strokeColor?: string;
18
+ }
19
+ type ColorConfigMap = {
20
+ [mode in CURTAIN_MODE]: {
21
+ [type in CURTAIN_TYPES]: ColorConfig;
82
22
  };
83
23
  };
24
+ export declare const COLOR_CONFIG_MAP: ColorConfigMap;
25
+ export {};
package/dist/esm/components/bik-layout/MockMenus.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  export declare const Menus: ({
2
3
  displayName: string;
3
4
  key: number;
package/dist/esm/components/curtain/Curtain.d.ts CHANGED
@@ -17,5 +17,7 @@ export type CurtainProps = {
17
17
  strokeAtBottom?: boolean;
18
18
  customComponent?: ComponentType<any>;
19
19
  position?: 'sticky' | 'absolute' | 'fixed';
20
+ tertiaryButtonText?: string;
21
+ tertiaryButtonClickHandler?: () => void;
20
22
  };
21
23
  export declare const Curtain: React.FC<CurtainProps>;
package/dist/esm/components/curtain/Curtain.js CHANGED
@@ -1 +1 @@
1
- import{jsx as o,Fragment as t,jsxs as e}from"react/jsx-runtime";import{useState as r}from"react";import{CurtainStyle as n}from"./Curtain.styled.js";import{COLOR_CONFIG_MAP as s,CURTAIN_MODE as i}from"./CurtainHelper.js";import{BodySecondary as c,BodySecondaryLink as m}from"../TypographyStyle.js";import{COLORS as l}from"../../constants/Theme.js";import p from"../../assets/icons/cross.svg.js";const a=a=>{const[d,C]=r(!1);if(d)return o(t,{});return e(n,Object.assign({position:a.position,mode:a.mode,type:a.type,strokeAtTop:a.strokeAtTop,strokeAtBottom:a.strokeAtBottom},{children:[a.icon&&o(a.icon,{color:s[a.mode][a.type].textColor,height:16,width:16}),o(c,Object.assign({style:{color:s[a.mode][a.type].textColor,marginLeft:8}},{children:a.text})),a.customComponent&&o(a.customComponent,{}),a.actionButtonText&&o(m,Object.assign({onClick:a.actionButtonClickHandler,style:{color:a.mode===i.DARK?s[a.mode][a.type].textColor:l.content.brand,marginLeft:6,textDecoration:"underline"}},{children:a.actionButtonText})),!a.hideCrossIcon&&o(p,{onClick:()=>{C(!0),a.onCloseHandler&&a.onCloseHandler()},style:{position:"absolute",right:16},cursor:"pointer",height:20,width:20,color:s[a.mode][a.type].crossIconColor})]}))};export{a as Curtain};
1
+ import{jsx as t,Fragment as o,jsxs as e}from"react/jsx-runtime";import{useState as r}from"react";import{CurtainStyle as n,RightWrapper as i,Separator as s}from"./Curtain.styled.js";import{COLOR_CONFIG_MAP as c,CURTAIN_MODE as m}from"./CurtainHelper.js";import{BodySecondary as l,BodySecondaryLink as a}from"../TypographyStyle.js";import{COLORS as p}from"../../constants/Theme.js";import d from"../../assets/icons/cross.svg.js";import{Button as u}from"../button/Button.js";const y=y=>{const[C,h]=r(!1);if(C)return t(o,{});return e(n,Object.assign({isTeritaryButton:!!y.tertiaryButtonText,position:y.position,mode:y.mode,type:y.type,strokeAtTop:y.strokeAtTop,strokeAtBottom:y.strokeAtBottom},{children:[y.icon&&t(y.icon,{color:c[y.mode][y.type].textColor,height:16,width:16}),t(l,Object.assign({style:{color:c[y.mode][y.type].textColor,marginLeft:8}},{children:y.text})),y.customComponent&&t(y.customComponent,{}),y.actionButtonText&&t(a,Object.assign({onClick:y.actionButtonClickHandler,style:{color:y.mode===m.DARK?c[y.mode][y.type].textColor:p.content.brand,marginLeft:6,textDecoration:"underline"}},{children:y.actionButtonText})),e(i,{children:[y.tertiaryButtonText&&e(o,{children:[t(u,{className:"tertiary-button",buttonText:y.tertiaryButtonText,onClick:y.tertiaryButtonClickHandler,buttonType:"tertiary"}),t(s,{mode:y.mode,type:y.type})]}),!y.hideCrossIcon&&t(d,{onClick:()=>{h(!0),y.onCloseHandler&&y.onCloseHandler()},cursor:"pointer",height:20,width:20,color:c[y.mode][y.type].crossIconColor})]})]}))};export{y as Curtain};
package/dist/esm/components/curtain/Curtain.styled.d.ts CHANGED
@@ -5,4 +5,10 @@ export declare const CurtainStyle: import("styled-components").StyledComponent<"
5
5
  strokeAtTop?: boolean | undefined;
6
6
  strokeAtBottom?: boolean | undefined;
7
7
  position?: "sticky" | "absolute" | "fixed" | undefined;
8
+ isTeritaryButton?: boolean | undefined;
8
9
  }, never>;
10
+ export declare const Separator: import("styled-components").StyledComponent<"div", any, {
11
+ mode: CURTAIN_MODE;
12
+ type: CURTAIN_TYPES;
13
+ }, never>;
14
+ export declare const RightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
package/dist/esm/components/curtain/Curtain.styled.js CHANGED
@@ -1,8 +1,8 @@
1
- import o from"styled-components";import{COLOR_CONFIG_MAP as t}from"./CurtainHelper.js";const e=o.div`
1
+ import o from"styled-components";import{COLOR_CONFIG_MAP as t,CURTAIN_MODE as e}from"./CurtainHelper.js";import{COLORS as r}from"../../constants/Theme.js";const p=o.div`
2
2
  display: flex;
3
3
  justify-content: center;
4
4
  align-items: center;
5
- padding: 8px 16px;
5
+ padding: ${o=>o.isTeritaryButton?"12px 16px;":"8px 16px"};
6
6
  background: ${o=>t[o.mode][o.type].backgroundColor};
7
7
  border-top: ${o=>o.strokeAtTop?"1px solid "+t[o.mode][o.type].strokeColor:0};
8
8
  border-bottom: ${o=>o.strokeAtBottom?"1px solid "+t[o.mode][o.type].strokeColor:0};
@@ -11,4 +11,20 @@ import o from"styled-components";import{COLOR_CONFIG_MAP as t}from"./CurtainHelp
11
11
  position: ${o=>o.position?o.position:"absolute"};
12
12
  top: 0;
13
13
  z-index: 1;
14
- `;export{e as CurtainStyle};
14
+ .tertiary-button {
15
+ background: transparent;
16
+ .text {
17
+ color: ${o=>o.mode===e.DARK?t[o.mode][o.type].textColor:r.content.brand};
18
+ }
19
+ }
20
+ `,i=o.div`
21
+ height: 28px;
22
+ width: 1px;
23
+ background-color: ${o=>t[e.LIGHT][o.type].strokeColor};
24
+ `,n=o.div`
25
+ position: absolute;
26
+ right: 16px;
27
+ display: flex;
28
+ align-items: center;
29
+ gap: 8px;
30
+ `;export{p as CurtainStyle,n as RightWrapper,i as Separator};
package/dist/esm/components/curtain/CurtainHelper.d.ts CHANGED
@@ -10,74 +10,16 @@ export declare enum CURTAIN_MODE {
10
10
  LIGHT = "LIGHT",
11
11
  DARK = "DARK"
12
12
  }
13
- export declare const COLOR_CONFIG_MAP: {
14
- DARK: {
15
- Negative: {
16
- backgroundColor: string;
17
- textColor: string;
18
- crossIconColor: string;
19
- };
20
- Warning: {
21
- backgroundColor: string;
22
- textColor: string;
23
- crossIconColor: string;
24
- };
25
- Positive: {
26
- backgroundColor: string;
27
- textColor: string;
28
- crossIconColor: string;
29
- };
30
- Neutral: {
31
- backgroundColor: string;
32
- textColor: string;
33
- crossIconColor: string;
34
- };
35
- Special: {
36
- backgroundColor: string;
37
- textColor: string;
38
- crossIconColor: string;
39
- };
40
- Manifest: {
41
- backgroundColor: string;
42
- textColor: string;
43
- crossIconColor: string;
44
- };
45
- };
46
- LIGHT: {
47
- Negative: {
48
- backgroundColor: string;
49
- textColor: string;
50
- crossIconColor: string;
51
- strokeColor: string;
52
- };
53
- Warning: {
54
- backgroundColor: string;
55
- textColor: string;
56
- crossIconColor: string;
57
- strokeColor: string;
58
- };
59
- Positive: {
60
- backgroundColor: string;
61
- textColor: string;
62
- crossIconColor: string;
63
- strokeColor: string;
64
- };
65
- Neutral: {
66
- backgroundColor: string;
67
- textColor: string;
68
- crossIconColor: string;
69
- strokeColor: string;
70
- };
71
- Special: {
72
- backgroundColor: string;
73
- textColor: string;
74
- crossIconColor: string;
75
- strokeColor: string;
76
- };
77
- Manifest: {
78
- backgroundColor: string;
79
- textColor: string;
80
- crossIconColor: string;
81
- };
13
+ interface ColorConfig {
14
+ backgroundColor: string;
15
+ textColor: string;
16
+ crossIconColor: string;
17
+ strokeColor?: string;
18
+ }
19
+ type ColorConfigMap = {
20
+ [mode in CURTAIN_MODE]: {
21
+ [type in CURTAIN_TYPES]: ColorConfig;
82
22
  };
83
23
  };
24
+ export declare const COLOR_CONFIG_MAP: ColorConfigMap;
25
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.403-beta.0",
3
+ "version": "0.0.403-beta.2",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",