sprint-asia-custom-component 0.1.106 → 0.1.108

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/footer/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,
@@ -47904,7 +47905,7 @@
47904
47905
  onClickRightButton
47905
47906
  }) => {
47906
47907
  return /*#__PURE__*/React__default["default"].createElement("div", {
47907
- className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-10"
47908
+ className: "fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-50"
47908
47909
  }, /*#__PURE__*/React__default["default"].createElement("div", {
47909
47910
  className: "flex items-center mr-48"
47910
47911
  }, isActiveLeftButton && /*#__PURE__*/React__default["default"].createElement("div", {
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.106",
4
+ "version": "0.1.108",
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/footer/index.js CHANGED
@@ -15,7 +15,7 @@ const Footer = ({
15
15
  onClickRightButton,
16
16
  }) => {
17
17
  return (
18
- <div className="fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-10">
18
+ <div className="fixed bottom-0 flex justify-end w-full items-center py-1 px-6 bg-white z-50">
19
19
  <div className="flex items-center mr-48">
20
20
  {isActiveLeftButton && (
21
21
  <div className="m-1">
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>