sprint-asia-custom-component 0.1.105 → 0.1.107

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 (5) hide show
  1. package/dist/index.js +12 -11
  2. package/package.json +1 -1
  3. package/src/components/button/outlinebutton/index.js +55 -47
  4. package/src/components/modal/modalState/index.js +1 -1
  5. package/src/templates/index.js +1 -1
package/dist/index.js CHANGED
@@ -108,6 +108,7 @@
108
108
  size = "large",
109
109
  isIconVisible = false,
110
110
  icon = null,
111
+ mode = "primary",
111
112
  onClick = () => {}
112
113
  }) => {
113
114
  const [isPressed, setIsPressed] = React.useState(false);
@@ -122,16 +123,16 @@
122
123
  };
123
124
  return /*#__PURE__*/React__default["default"].createElement("button", {
124
125
  className: `
125
- ${isPressed && isActive ? 'bg-white text-primary500 border-2 border-primary500' : isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default'}
126
- ${type === "full" && "w-full"}
127
- ${size === "small" && "text-sm h-7 w-32"}
128
- ${size === "medium" && "text-md h-8"}
129
- ${size === "large" && "text-lg h-10"}
130
- ${size === "very large" && "text-xl h-12"}
131
- ${size === "extra very large" && "text-2xl h-14"}
132
- ${size === "detail division" && "text-sm h-10 w-24"}
133
- ${size === "client approval" && "text-sm h-8"}
134
- rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
126
+ ${isPressed && isActive ? `bg-white text-${mode === "danger" ? "danger500" : "primary500"} border-2 border-${mode === "danger" ? "danger500" : "primary500"}` : isActive ? `bg-white border-2 border-${mode === "danger" ? "danger500" : "primary500"} text-${mode === "danger" ? "danger500" : "primary500"}` : "bg-neutral30 text-neutral80 cursor-default"}
127
+ ${type === "full" && "w-full"}
128
+ ${size === "small" && "text-sm h-7 w-32"}
129
+ ${size === "medium" && "text-md h-8"}
130
+ ${size === "large" && "text-lg h-10"}
131
+ ${size === "very large" && "text-xl h-12"}
132
+ ${size === "extra very large" && "text-2xl h-14"}
133
+ ${size === "detail division" && "text-sm h-10 w-24"}
134
+ ${size === "client approval" && "text-sm h-8"}
135
+ rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`,
135
136
  disabled: !isActive,
136
137
  onClick: handleClick,
137
138
  onMouseDown: handleButtonPress,
@@ -44250,7 +44251,7 @@
44250
44251
  as: React.Fragment
44251
44252
  }, /*#__PURE__*/React__default["default"].createElement(_t, {
44252
44253
  as: "div",
44253
- className: "fixed inset-0 overflow-y-auto z-10",
44254
+ className: "fixed inset-0 overflow-y-auto z-50",
44254
44255
  initialFocus: cancelButtonRef,
44255
44256
  onClose: () => isOpen,
44256
44257
  static: false
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sprint-asia-custom-component",
3
3
  "main": "dist/index.js",
4
- "version": "0.1.105",
4
+ "version": "0.1.107",
5
5
  "private": false,
6
6
  "dependencies": {
7
7
  "@headlessui/react": "^1.7.18",
package/src/components/button/outlinebutton/index.js CHANGED
@@ -1,57 +1,65 @@
1
- import React, { useState } from 'react';
1
+ import React, { useState } from "react";
2
2
 
3
3
  const OutlineButton = ({
4
- title = "Button",
5
- type = "wrap",
6
- isActive = true,
7
- size = "large",
8
- isIconVisible = false,
9
- icon = null,
10
- onClick = () => {}
4
+ title = "Button",
5
+ type = "wrap",
6
+ isActive = true,
7
+ size = "large",
8
+ isIconVisible = false,
9
+ icon = null,
10
+ mode = "primary",
11
+ onClick = () => {},
11
12
  }) => {
12
- const [isPressed, setIsPressed] = useState(false);
13
+ const [isPressed, setIsPressed] = useState(false);
13
14
 
14
- const handleButtonPress = () => {
15
- setIsPressed(true);
16
- };
15
+ const handleButtonPress = () => {
16
+ setIsPressed(true);
17
+ };
17
18
 
18
- const handleButtonRelease = () => {
19
- setIsPressed(false);
20
- };
19
+ const handleButtonRelease = () => {
20
+ setIsPressed(false);
21
+ };
21
22
 
22
- const handleClick = () => {
23
- onClick();
24
- };
23
+ const handleClick = () => {
24
+ onClick();
25
+ };
25
26
 
26
- return (
27
- <button
28
- className={`
29
- ${(isPressed && isActive) ? 'bg-white text-primary500 border-2 border-primary500' : (isActive ? 'bg-white border-2 border-primary500 text-primary500' : 'bg-neutral30 text-neutral80 cursor-default')}
30
- ${type === "full" && "w-full"}
31
- ${size === "small" && "text-sm h-7 w-32"}
32
- ${size === "medium" && "text-md h-8"}
33
- ${size === "large" && "text-lg h-10"}
34
- ${size === "very large" && "text-xl h-12"}
35
- ${size === "extra very large" && "text-2xl h-14"}
36
- ${size === "detail division" && "text-sm h-10 w-24"}
37
- ${size === "client approval" && "text-sm h-8"}
38
- rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`
39
- }
40
- disabled={!isActive}
41
- onClick={handleClick}
42
- onMouseDown={handleButtonPress}
43
- onMouseUp={handleButtonRelease}
44
- onTouchStart={handleButtonPress}
45
- onTouchEnd={handleButtonRelease}
46
- >
47
- <div className='flex items-center'>
48
- {
49
- isIconVisible && icon && <span className='mr-1'>{icon}</span>
50
- }
51
- <p>{title}</p>
52
- </div>
53
- </button>
54
- );
27
+ return (
28
+ <button
29
+ className={`
30
+ ${
31
+ isPressed && isActive
32
+ ? `bg-white text-${mode === "danger" ? "danger500" : "primary500"} border-2 border-${
33
+ mode === "danger" ? "danger500" : "primary500"
34
+ }`
35
+ : isActive
36
+ ? `bg-white border-2 border-${mode === "danger" ? "danger500" : "primary500"} text-${
37
+ mode === "danger" ? "danger500" : "primary500"
38
+ }`
39
+ : "bg-neutral30 text-neutral80 cursor-default"
40
+ }
41
+ ${type === "full" && "w-full"}
42
+ ${size === "small" && "text-sm h-7 w-32"}
43
+ ${size === "medium" && "text-md h-8"}
44
+ ${size === "large" && "text-lg h-10"}
45
+ ${size === "very large" && "text-xl h-12"}
46
+ ${size === "extra very large" && "text-2xl h-14"}
47
+ ${size === "detail division" && "text-sm h-10 w-24"}
48
+ ${size === "client approval" && "text-sm h-8"}
49
+ rounded-lg drop-shadow-md text-center py-1.5 px-4 flex justify-center items-center`}
50
+ disabled={!isActive}
51
+ onClick={handleClick}
52
+ onMouseDown={handleButtonPress}
53
+ onMouseUp={handleButtonRelease}
54
+ onTouchStart={handleButtonPress}
55
+ onTouchEnd={handleButtonRelease}
56
+ >
57
+ <div className="flex items-center">
58
+ {isIconVisible && icon && <span className="mr-1">{icon}</span>}
59
+ <p>{title}</p>
60
+ </div>
61
+ </button>
62
+ );
55
63
  };
56
64
 
57
65
  export default OutlineButton;
package/src/components/modal/modalState/index.js CHANGED
@@ -50,7 +50,7 @@ const ModalState = ({
50
50
 
51
51
  return (
52
52
  <Transition.Root show={isOpen} as={Fragment}>
53
- <Dialog as="div" className="fixed inset-0 overflow-y-auto z-10" initialFocus={cancelButtonRef} onClose={() => isOpen} static={false}>
53
+ <Dialog as="div" className="fixed inset-0 overflow-y-auto z-50" initialFocus={cancelButtonRef} onClose={() => isOpen} static={false}>
54
54
  <Transition.Child
55
55
  as={Fragment}
56
56
  enter="ease-out duration-300"
package/src/templates/index.js CHANGED
@@ -968,7 +968,7 @@ const Templates = () => {
968
968
  <p className="text-black font-bold text-2xl text-center py-2">Outline Button</p>
969
969
  <p className="text-black font-semibold text-xl text-left py-1">Full Width</p>
970
970
  <p className="text-black font-normal text-lg text-left py-3">1. Small</p>
971
- <OutlineButton type="full" size="small" />
971
+ <OutlineButton type="full" size="small" mode="danger" />
972
972
  <p className="text-black font-normal text-lg text-left py-3">2. Medium</p>
973
973
  <OutlineButton type="full" size="medium" />
974
974
  <p className="text-black font-normal text-lg text-left py-3">3. Large</p>