@team-monolith/cds 1.21.0 → 1.21.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 (3) hide show
  1. package/dist/components/SwitchButton.d.ts +4 -4
  2. package/dist/components/SwitchButton.js +48 -12
  3. package/package.json +1 -1
package/dist/components/SwitchButton.d.ts CHANGED
@@ -15,10 +15,10 @@ export interface SwitchButtonOwnProps<RootComponentType extends React.ElementTyp
15
15
  onIcon: React.ReactNode;
16
16
  /** off 일때의 아이콘 */
17
17
  offIcon: React.ReactNode;
18
- /** 아이콘 오른쪽에 나타낼 숫자. 전달하지 않으면 나타나지 않습니다. */
19
- count?: number;
20
- /** on/off 변경시 호출되는 콜백 함수 */
21
- onChange: (isOn: boolean) => void;
18
+ /** 아이콘 오른쪽에 나타낼 부분. 전달하지 않으면 나타나지 않습니다. */
19
+ content?: React.ReactNode;
20
+ /** 버튼 클릭시 실행될 콜백 */
21
+ onClick: () => void;
22
22
  }
23
23
  export type SwitchButtonProps<RootComponentType extends React.ElementType = SwitchButtonTypeMap["defaultComponent"]> = PolymorphicProps<SwitchButtonTypeMap<RootComponentType>, RootComponentType>;
24
24
  export interface SwitchButtonTypeMap<RootComponentType extends React.ElementType = "button"> {
package/dist/components/SwitchButton.js CHANGED
@@ -20,13 +20,25 @@ const COLOR_TO_SWITCH_BUTTON_STYLE = (theme, color, isOn) => ({
20
20
  ${isOn
21
21
  ? css `
22
22
  background: ${theme.color.background.neutralAltActive};
23
- opacity: 0.6;
23
+ span {
24
+ opacity: 1;
25
+ font-weight: 700;
26
+ }
27
+ svg {
28
+ opacity: 1;
29
+ }
24
30
  `
25
31
  : css `
26
32
  background: ${theme.color.background.neutralAlt};
27
- opacity: 0.6;
33
+ span,
34
+ svg {
35
+ opacity: 0.6;
36
+ }
28
37
  ${HOVER(css `
29
- opacity: 1;
38
+ span,
39
+ svg {
40
+ opacity: 1;
41
+ }
30
42
  `)}
31
43
  `}
32
44
  `,
@@ -34,13 +46,25 @@ const COLOR_TO_SWITCH_BUTTON_STYLE = (theme, color, isOn) => ({
34
46
  ${isOn
35
47
  ? css `
36
48
  background: ${theme.color.background.neutralAlt};
37
- opacity: 0.6;
49
+ span {
50
+ opacity: 1;
51
+ font-weight: 700;
52
+ }
53
+ svg {
54
+ opacity: 1;
55
+ }
38
56
  `
39
57
  : css `
40
58
  background: ${theme.color.background.neutralBase};
41
- opacity: 0.6;
59
+ span,
60
+ svg {
61
+ opacity: 0.6;
62
+ }
42
63
  ${HOVER(css `
43
- opacity: 1;
64
+ span,
65
+ svg {
66
+ opacity: 1;
67
+ }
44
68
  `)}
45
69
  `}
46
70
  `,
@@ -48,13 +72,25 @@ const COLOR_TO_SWITCH_BUTTON_STYLE = (theme, color, isOn) => ({
48
72
  ${isOn
49
73
  ? css `
50
74
  background: ${theme.color.background.neutralAlt};
51
- opacity: 0.6;
75
+ span {
76
+ opacity: 1;
77
+ font-weight: 700;
78
+ }
79
+ svg {
80
+ opacity: 1;
81
+ }
52
82
  `
53
83
  : css `
54
84
  background: none;
55
- opacity: 0.6;
85
+ span,
86
+ svg {
87
+ opacity: 0.6;
88
+ }
56
89
  ${HOVER(css `
57
- opacity: 1;
90
+ span,
91
+ svg {
92
+ opacity: 1;
93
+ }
58
94
  `)}
59
95
  `}
60
96
  `,
@@ -91,7 +127,7 @@ const SIZE_TO_SWITCH_BUTTON_STYLE = (size) => ({
91
127
  * [피그마](https://www.figma.com/file/CxpgZcJFoRPWEZyx5RC0tq/Framework-System?node-id=766%3A11274&mode=dev)
92
128
  */
93
129
  const SwitchButton = React.forwardRef(function SwitchButton(props, ref) {
94
- const { className, component: Component = "button", color, size, isOn, onIcon, offIcon, count, onChange } = props, other = __rest(props, ["className", "component", "color", "size", "isOn", "onIcon", "offIcon", "count", "onChange"]);
130
+ const { className, component: Component = "button", color, size, isOn, onIcon, offIcon, content, onClick } = props, other = __rest(props, ["className", "component", "color", "size", "isOn", "onIcon", "offIcon", "content", "onClick"]);
95
131
  const theme = useTheme();
96
132
  return (_jsxs(Component, Object.assign({ type: "button" }, other, { className: className, ref: ref, css: [
97
133
  css `
@@ -106,9 +142,9 @@ const SwitchButton = React.forwardRef(function SwitchButton(props, ref) {
106
142
  `,
107
143
  COLOR_TO_SWITCH_BUTTON_STYLE(theme, color, isOn),
108
144
  SIZE_TO_SWITCH_BUTTON_STYLE(size),
109
- ], onClick: () => onChange(!isOn) }, { children: [isOn ? onIcon : offIcon, count !== undefined && _jsx(Count, { children: count })] })));
145
+ ], onClick: onClick }, { children: [isOn ? onIcon : offIcon, content && _jsx(Content, { children: content })] })));
110
146
  });
111
- const Count = styled.span(({ theme }) => css `
147
+ const Content = styled.span(({ theme }) => css `
112
148
  color: ${theme.color.foreground.neutralBase};
113
149
  /* Default/Label/16px-Md */
114
150
  font-family: ${theme.fontFamily.ui};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "1.21.0",
3
+ "version": "1.21.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": false,