oddsgate-ds 1.0.152 → 1.0.153

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 (7) hide show
  1. package/dist/cjs/index.js +4 -4
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +4 -4
  4. package/dist/esm/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/atoms/Button/Button.component.tsx +3 -3
  7. package/src/components/atoms/Button/Button.theme.ts +106 -91
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oddsgate-ds",
3
- "version": "1.0.152",
3
+ "version": "1.0.153",
4
4
  "description": "Miew theme component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/atoms/Button/Button.component.tsx CHANGED
@@ -7,7 +7,7 @@ const Button = ({
7
7
  id,
8
8
  as = 'a',
9
9
  children,
10
- variant = "primary",
10
+ variant = 'primary',
11
11
  mode,
12
12
  outlined,
13
13
  leftIcon,
@@ -39,12 +39,12 @@ const Button = ({
39
39
  className={className}
40
40
  {...props}
41
41
  >
42
- {(variant === "primary" || variant === "secondary") ? (
42
+ {variant === 'primary' || variant === 'secondary' ? (
43
43
  <>
44
44
  {leftIcon}
45
45
  {children && <span>{children}</span>}
46
46
  {rightIcon}
47
- {!rightIcon && !leftIcon && (<Icon icon={"icon-arrow-right"} />)}
47
+ {!rightIcon && !leftIcon && <Icon icon={'icon-arrow-right'} />}
48
48
  </>
49
49
  ) : (
50
50
  <>
package/src/components/atoms/Button/Button.theme.ts CHANGED
@@ -27,74 +27,87 @@ export const StyledButton = styled.a<IButtonSC>`
27
27
  margin-right: 0;
28
28
  }
29
29
 
30
- &>i {
30
+ & > i {
31
31
  color: currentColor;
32
32
  transition: all 0.3s ease;
33
33
  }
34
34
 
35
- ${(props) => {
35
+ @media only screen and (max-width: ${responsiveMedia}) {
36
+ & i {
37
+ display: none !important;
38
+ }
39
+ span {
40
+ transform: unset !important;
41
+ }
42
+ transform: unset !important;
43
+ }
44
+
45
+ ${props => {
36
46
  switch (props.$variant) {
37
- case "primary": default:
47
+ case 'primary':
48
+ default:
38
49
  return css`
39
- ${fontSize('h4')};
40
- padding: 0.8rem 1.6rem;
41
- border-radius: 100px;
42
- text-transform:uppercase;
43
-
44
- ${props.$mode === "light" ? `
45
- color: ${colors.primary50};
46
- background-color: ${colors.secondary50};
47
-
48
- ` : `
49
- color: ${colors.secondary50};
50
- background-color: ${colors.primary50};
51
- `}
52
-
53
- & span{
54
- transition: all 0.3s ease;
55
- }
56
- & i{
57
- position: absolute;
58
- top: 50%;
59
- right: 1.8rem;
60
- opacity: 0;
61
- transform: scale(0) translateX(-4px) translateY(-50%);
62
- }
50
+ ${fontSize('h4')};
51
+ padding: 0.8rem 1.6rem;
52
+ border-radius: 100px;
53
+ text-transform: uppercase;
63
54
 
64
- &:hover{
65
- & span{
66
- transform: translateX(-1rem);
67
- }
68
- & i{
69
- opacity: 1;
70
- transform: scale(1) translateX(0) translateY(-50%);
71
- }
72
- }
55
+ ${props.$mode === 'light'
56
+ ? css`
57
+ color: ${colors.primary50};
58
+ background-color: ${colors.secondary50};
59
+ `
60
+ : css`
61
+ color: ${colors.secondary50};
62
+ background-color: ${colors.primary50};
63
+ `}
73
64
 
74
- @media only screen and (min-width: ${responsiveMedia}) {
75
- padding: 1.5rem 2.6rem;
65
+ & span {
66
+ transition: all 0.3s ease;
67
+ }
68
+ & i {
69
+ position: absolute;
70
+ top: 50%;
71
+ right: 1.8rem;
72
+ opacity: 0;
73
+ transform: scale(0) translateX(-4px) translateY(-50%);
74
+ }
75
+
76
+ &:hover {
77
+ & span {
78
+ transform: translateX(-1rem);
76
79
  }
77
- `;
78
- case "secondary":
80
+ & i {
81
+ opacity: 1;
82
+ transform: scale(1) translateX(0) translateY(-50%);
83
+ }
84
+ }
85
+
86
+ @media only screen and (min-width: ${responsiveMedia}) {
87
+ padding: 1.5rem 2.6rem;
88
+ }
89
+ `
90
+ case 'secondary':
79
91
  return css`
80
92
  ${fontSize('h5')};
81
93
  padding: 0.8rem 1.6rem;
82
94
  border-radius: 50px;
83
- text-transform:uppercase;
84
-
85
- ${props.$mode === "light" ? `
86
- color: ${colors.primary50};
87
- background-color: ${colors.secondary50};
95
+ text-transform: uppercase;
88
96
 
89
- ` : `
90
- color: ${colors.secondary50};
91
- background-color: ${colors.primary50};
92
- `}
97
+ ${props.$mode === 'light'
98
+ ? css`
99
+ color: ${colors.primary50};
100
+ background-color: ${colors.secondary50};
101
+ `
102
+ : css`
103
+ color: ${colors.secondary50};
104
+ background-color: ${colors.primary50};
105
+ `}
93
106
 
94
- & span{
107
+ & span {
95
108
  transition: all 0.3s ease;
96
109
  }
97
- & i{
110
+ & i {
98
111
  position: absolute;
99
112
  top: 50%;
100
113
  right: 0.6rem;
@@ -103,63 +116,65 @@ export const StyledButton = styled.a<IButtonSC>`
103
116
  transform: scale(0) translateX(-4px) translateY(-50%);
104
117
  }
105
118
 
106
- &:hover{
107
- & span{
119
+ &:hover {
120
+ & span {
108
121
  transform: translateX(-0.5rem);
109
122
  }
110
- & i{
123
+ & i {
111
124
  opacity: 1;
112
125
  transform: scale(1) translateX(0) translateY(-50%);
113
126
  }
114
127
  }
115
- `;
116
- case "link":
128
+ `
129
+ case 'link':
117
130
  return css`
118
- ${fontSize('h5')};
119
- text-transform:uppercase;
120
- padding: 0;
121
-
122
- ${props.$mode === "light" ? `
123
- color: ${colors.third50};
124
-
125
- &:hover{
131
+ ${fontSize('h5')};
132
+ text-transform: uppercase;
133
+ padding: 0;
134
+
135
+ ${props.$mode === 'light'
136
+ ? css`
137
+ color: ${colors.third50};
138
+
139
+ &:hover {
140
+ color: ${colors.secondary50};
141
+ }
142
+ `
143
+ : css`
126
144
  color: ${colors.secondary50};
127
- }
128
- ` : `
129
- color: ${colors.secondary50};
130
145
 
131
- &:hover{
132
- color: ${colors.primary50};
133
- }
134
- `}
135
- `;
136
- case "icon":
137
- return css`
138
-
139
- `;
146
+ &:hover {
147
+ color: ${colors.primary50};
148
+ }
149
+ `}
150
+ `
151
+ case 'icon':
152
+ return css``
140
153
  }
141
154
  }}
142
155
 
143
-
144
- ${({ removeLabel }) => removeLabel && `
145
- @media only screen and (max-width: ${responsiveMedia}) {
146
- & span {
147
- display: none
156
+ ${({ removeLabel }) =>
157
+ removeLabel &&
158
+ css`
159
+ @media only screen and (max-width: ${responsiveMedia}) {
160
+ & span {
161
+ display: none;
162
+ }
163
+
164
+ & * ~ span,
165
+ & span ~ * {
166
+ margin-left: 0;
167
+ }
148
168
  }
169
+ `}
149
170
 
150
- & *~span,
151
- & span~* {
152
- margin-left: 0
153
- }
154
- }
155
- `}
156
-
157
- ${({ disabled }) => disabled && `
171
+ ${({ disabled }) =>
172
+ disabled &&
173
+ css`
158
174
  color: ${colors.gray50} !important;
159
175
  border: 1px solid transparent;
160
176
 
161
177
  pointer-events: none;
162
178
  user-select: none;
163
179
  `}
164
-
165
- `;
180
+ `