@taikai/rocket-kit 2.0.1 → 2.0.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/atoms/button/stories/button.stories.d.ts +50 -0
  2. package/dist/atoms/button-dropdown/index.d.ts +1 -1
  3. package/dist/atoms/button-dropdown/stories/button-dropdown.stories.d.ts +47 -0
  4. package/dist/atoms/button-link/stories/button-link.stories.d.ts +53 -0
  5. package/dist/atoms/tag/index.d.ts +1 -1
  6. package/dist/atoms/tag/stories/tag.stories.d.ts +30 -0
  7. package/dist/rocket-kit.cjs.development.js +26 -4
  8. package/dist/rocket-kit.cjs.development.js.map +1 -1
  9. package/dist/rocket-kit.cjs.production.min.js +24 -19
  10. package/dist/rocket-kit.cjs.production.min.js.map +1 -1
  11. package/dist/rocket-kit.esm.js +26 -4
  12. package/dist/rocket-kit.esm.js.map +1 -1
  13. package/package.json +9 -9
package/dist/atoms/button/stories/button.stories.d.ts ADDED
@@ -0,0 +1,50 @@
1
+ /// <reference types="react" />
2
+ import { ButtonProps } from '..';
3
+ declare const _default: {
4
+ title: string;
5
+ component: (props: ButtonProps) => JSX.Element;
6
+ argTypes: {
7
+ color: {
8
+ control: {
9
+ type: string;
10
+ options: string[];
11
+ };
12
+ };
13
+ variant: {
14
+ control: {
15
+ type: string;
16
+ options: string[];
17
+ };
18
+ };
19
+ icon: {
20
+ control: {
21
+ type: string;
22
+ options: string[];
23
+ };
24
+ };
25
+ iconPosition: {
26
+ control: {
27
+ type: string;
28
+ options: string[];
29
+ };
30
+ };
31
+ };
32
+ };
33
+ export default _default;
34
+ export declare const ButtonComponent: {
35
+ (args: ButtonProps): JSX.Element;
36
+ storyName: string;
37
+ args: {
38
+ value: string;
39
+ variant: string;
40
+ color: string;
41
+ circle: boolean;
42
+ className: string;
43
+ querySelector: string;
44
+ ariaLabel: string;
45
+ disabled: boolean;
46
+ loading: boolean;
47
+ icon: string;
48
+ iconPosition: string;
49
+ };
50
+ };
package/dist/atoms/button-dropdown/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { CSSProperties } from 'react';
2
2
  import { ButtonColor, ButtonVariant } from '../button/types';
3
3
  import { ActionMenu } from './types';
4
- interface ActionsMenuInterface<T> {
4
+ export interface ActionsMenuInterface<T> {
5
5
  variant?: ButtonVariant;
6
6
  color?: ButtonColor;
7
7
  value: string;
package/dist/atoms/button-dropdown/stories/button-dropdown.stories.d.ts ADDED
@@ -0,0 +1,47 @@
1
+ /// <reference types="react" />
2
+ import { ActionsMenuInterface } from '..';
3
+ declare const _default: {
4
+ title: string;
5
+ component: <T>(props: ActionsMenuInterface<T>) => JSX.Element;
6
+ argTypes: {
7
+ color: {
8
+ control: {
9
+ type: string;
10
+ options: string[];
11
+ };
12
+ };
13
+ variant: {
14
+ control: {
15
+ type: string;
16
+ options: string[];
17
+ };
18
+ };
19
+ icon: {
20
+ control: {
21
+ type: string;
22
+ options: string[];
23
+ };
24
+ };
25
+ };
26
+ };
27
+ export default _default;
28
+ export declare const ButtonDropdownComponent: {
29
+ <T>(args: ActionsMenuInterface<T>): JSX.Element;
30
+ storyName: string;
31
+ args: {
32
+ variant: string;
33
+ color: string;
34
+ value: string;
35
+ icon: string;
36
+ ariaLabel: string;
37
+ actions: {
38
+ id: string;
39
+ value: string;
40
+ url: null;
41
+ action: () => void;
42
+ }[];
43
+ dataTestId: string;
44
+ startsOpen: boolean;
45
+ disabled: boolean;
46
+ };
47
+ };
package/dist/atoms/button-link/stories/button-link.stories.d.ts ADDED
@@ -0,0 +1,53 @@
1
+ /// <reference types="react" />
2
+ import { ButtonLinkProps } from '..';
3
+ declare const _default: {
4
+ title: string;
5
+ component: (props: ButtonLinkProps) => JSX.Element;
6
+ argTypes: {
7
+ color: {
8
+ control: {
9
+ type: string;
10
+ options: string[];
11
+ };
12
+ };
13
+ variant: {
14
+ control: {
15
+ type: string;
16
+ options: string[];
17
+ };
18
+ };
19
+ icon: {
20
+ control: {
21
+ type: string;
22
+ options: string[];
23
+ };
24
+ };
25
+ iconPosition: {
26
+ control: {
27
+ type: string;
28
+ options: string[];
29
+ };
30
+ };
31
+ };
32
+ };
33
+ export default _default;
34
+ export declare const ButtonLinkComponent: {
35
+ (args: ButtonLinkProps): JSX.Element;
36
+ storyName: string;
37
+ args: {
38
+ value: string;
39
+ variant: string;
40
+ color: string;
41
+ circle: boolean;
42
+ className: string;
43
+ querySelector: string;
44
+ ariaLabel: string;
45
+ disabled: boolean;
46
+ loading: boolean;
47
+ icon: string;
48
+ iconPosition: string;
49
+ rel: string;
50
+ url: string;
51
+ blank: boolean;
52
+ };
53
+ };
package/dist/atoms/tag/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { CSSProperties } from 'react';
2
2
  import { TagVariant, TagColor } from './types';
3
- interface TagProps {
3
+ export interface TagProps {
4
4
  variant?: TagVariant;
5
5
  color?: TagColor;
6
6
  value: string;
package/dist/atoms/tag/stories/tag.stories.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ /// <reference types="react" />
2
+ import { TagProps } from '..';
3
+ declare const _default: {
4
+ title: string;
5
+ component: (props: TagProps) => JSX.Element;
6
+ argTypes: {
7
+ color: {
8
+ control: {
9
+ type: string;
10
+ options: string[];
11
+ };
12
+ };
13
+ variant: {
14
+ control: {
15
+ type: string;
16
+ options: string[];
17
+ };
18
+ };
19
+ };
20
+ };
21
+ export default _default;
22
+ export declare const TagPrimaryComponent: {
23
+ (args: TagProps): JSX.Element;
24
+ storyName: string;
25
+ args: {
26
+ color: string;
27
+ variant: string;
28
+ value: string;
29
+ };
30
+ };
package/dist/rocket-kit.cjs.development.js CHANGED
@@ -187,7 +187,7 @@ const ButtonWrapper = /*#__PURE__*/_styled__default.button.withConfig({
187
187
  `, props => props.color === 'magic' && _styled.css`
188
188
  --button: ${light};
189
189
  --hover: ${lightGrey};
190
- `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? props.circle ? polished.rem('36px') : 'min-content' : polished.rem('36px'), /*#__PURE__*/polished.rem('32px'), props => props.value ? props.circle ? 0 : `0 ${polished.rem('20px')}` : 0, device.l, props => props.value ? polished.rem('100px') : polished.rem('36px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, props => props.variant === 'solid' ? '' : 'var(--button)', medium, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && _styled.css`
190
+ `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? props.circle ? polished.rem('32px') : 'min-content' : polished.rem('32px'), /*#__PURE__*/polished.rem('32px'), props => props.value ? props.circle ? 0 : `0 ${polished.rem('20px')}` : 0, device.l, props => props.value ? polished.rem('100px') : polished.rem('32px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, props => props.variant === 'solid' ? '' : 'var(--button)', medium, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && _styled.css`
191
191
  position: relative;
192
192
  background-image: linear-gradient(to bottom right, #ef5867, #5031a8);
193
193
  height: ${polished.rem('60px')};
@@ -413,7 +413,7 @@ const ButtonLinkStyle = /*#__PURE__*/_styled__default.a.withConfig({
413
413
  `, props => props.color === 'magic' && _styled.css`
414
414
  --button: ${light$2};
415
415
  --hover: ${lightGrey$2};
416
- `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('36px'), /*#__PURE__*/polished.rem('32px'), props => props.value ? `0 ${polished.rem('20px')}` : 0, device.l, props => props.value ? polished.rem('100px') : polished.rem('36px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, medium$1, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && _styled.css`
416
+ `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('32px'), /*#__PURE__*/polished.rem('32px'), props => props.value ? `0 ${polished.rem('20px')}` : 0, device.l, props => props.value ? polished.rem('100px') : polished.rem('32px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, medium$1, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && _styled.css`
417
417
  position: relative;
418
418
  background-image: linear-gradient(to bottom right, #ef5867, #5031a8);
419
419
  height: ${polished.rem('60px')};
@@ -1055,7 +1055,7 @@ const {
1055
1055
  const TagWrapper = /*#__PURE__*/_styled__default.span.withConfig({
1056
1056
  displayName: "styles__TagWrapper",
1057
1057
  componentId: "sc-1ghratr-0"
1058
- })(["display:inline-block;border:", " solid ", ";border-radius:", ";background-color:", ";max-width:", ";padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:0.1em;line-height:1;color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;&:not(:first-child){margin-left:", ";}", " ", " ", " ", " ", " ", ""], /*#__PURE__*/polished.rem('2px'), grey$b, /*#__PURE__*/polished.rem('3px'), grey$b, /*#__PURE__*/polished.rem('150px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('8px'), /*#__PURE__*/polished.rem('12px'), bold$3, light$7, /*#__PURE__*/polished.rem('5px'), props => props.color === 'green' && _styled.css`
1058
+ })(["display:inline-block;border:", " solid ", ";border-radius:", ";background-color:", ";max-width:", ";padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:0.1em;line-height:1;color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;", " ", " ", " ", " ", " ", ""], /*#__PURE__*/polished.rem('2px'), grey$b, /*#__PURE__*/polished.rem('3px'), grey$b, /*#__PURE__*/polished.rem('150px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('8px'), /*#__PURE__*/polished.rem('12px'), bold$3, light$7, props => props.color === 'green' && _styled.css`
1059
1059
  border-color: ${green$5};
1060
1060
  background-color: ${green$5};
1061
1061
  color: ${props.variant === 'solid' ? light$7 : green$5};
@@ -1473,6 +1473,11 @@ const Wrapper$2 = _styled__default.div`
1473
1473
  flex: 1;
1474
1474
  border: 0;
1475
1475
  color: ${props => props.error ? red$8 : normal$7};
1476
+
1477
+ &:disabled {
1478
+ margin: 0;
1479
+ border-radius: 0;
1480
+ }
1476
1481
  }
1477
1482
 
1478
1483
  & + span {
@@ -5859,7 +5864,7 @@ const ModalWrapper$1 = /*#__PURE__*/_styled__default.div.withConfig({
5859
5864
  const ModalContainer$1 = /*#__PURE__*/_styled__default.div.withConfig({
5860
5865
  displayName: "styles__ModalContainer",
5861
5866
  componentId: "sc-46huls-2"
5862
- })(["position:fixed;right:0;background:", ";width:100%;height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";overflow-y:auto;@media ", "{max-width:", ";padding:", ";}"], light$o, /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/polished.rem('400px'), /*#__PURE__*/polished.rem('30px'));
5867
+ })(["position:fixed;right:0;background:", ";width:100%;height:100vh;height:calc(var(--vh,1vh) * 100);display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";overflow-y:auto;@media ", "{max-width:", ";padding:", ";}"], light$o, /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/polished.rem('400px'), /*#__PURE__*/polished.rem('30px'));
5863
5868
  const ModalHeader$1 = /*#__PURE__*/_styled__default.div.withConfig({
5864
5869
  displayName: "styles__ModalHeader",
5865
5870
  componentId: "sc-46huls-3"
@@ -5880,6 +5885,23 @@ const ModalDrawer = props => {
5880
5885
  footerHidden = false,
5881
5886
  zIndex = 10
5882
5887
  } = props;
5888
+ React.useEffect(() => {
5889
+ const fixViewport = () => {
5890
+ let vh = window.innerHeight * 0.01;
5891
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
5892
+ };
5893
+
5894
+ fixViewport();
5895
+
5896
+ if (typeof window !== 'undefined') {
5897
+ let vh = window.innerHeight * 0.01;
5898
+ document.documentElement.style.setProperty('--vh', `${vh}px`);
5899
+ window.addEventListener('resize', fixViewport);
5900
+ return () => window.removeEventListener('resize', fixViewport);
5901
+ }
5902
+
5903
+ return;
5904
+ }, []);
5883
5905
  return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay$1, {
5884
5906
  zIndex: zIndex
5885
5907
  }), /*#__PURE__*/React__default.createElement(ModalWrapper$1, {