@apify/ui-library 1.107.0 → 1.108.0
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.
- package/dist/src/components/button.d.ts +1 -1
- package/dist/src/components/button.d.ts.map +1 -1
- package/dist/src/components/button.js +21 -0
- package/dist/src/components/button.js.map +1 -1
- package/dist/src/components/button.stories.d.ts.map +1 -1
- package/dist/src/components/button.stories.js +1 -1
- package/dist/src/components/button.stories.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/button.stories.tsx +8 -0
- package/src/components/button.tsx +22 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apify/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.108.0",
|
|
4
4
|
"description": "React UI library used by apify.com",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"src",
|
|
65
65
|
"style"
|
|
66
66
|
],
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "3f8cf59750db332abb44cf2a410bad57c487868a"
|
|
68
68
|
}
|
|
@@ -137,6 +137,14 @@ export const Default = () => {
|
|
|
137
137
|
<ButtonSection color='danger' size='small' />
|
|
138
138
|
<ButtonSection color='danger' size='extraSmall' />
|
|
139
139
|
</TwoColumns>
|
|
140
|
+
<h4>Primary Black - WIP</h4>
|
|
141
|
+
<TwoColumns>
|
|
142
|
+
<ButtonSection color='primaryBlack' size='extraLarge' />
|
|
143
|
+
<ButtonSection color='primaryBlack' size='large' />
|
|
144
|
+
<ButtonSection color='primaryBlack' size='medium' />
|
|
145
|
+
<ButtonSection color='primaryBlack' size='small' />
|
|
146
|
+
<ButtonSection color='primaryBlack' size='extraSmall' />
|
|
147
|
+
</TwoColumns>
|
|
140
148
|
</Wrapper>
|
|
141
149
|
);
|
|
142
150
|
};
|
|
@@ -12,7 +12,7 @@ import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
|
|
|
12
12
|
import { isUrlExternal, Link, type LinkProps } from './link.js';
|
|
13
13
|
|
|
14
14
|
export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
|
|
15
|
-
type ButtonColor = 'default' | 'success' | 'danger';
|
|
15
|
+
type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';
|
|
16
16
|
type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
|
|
17
17
|
|
|
18
18
|
export interface TransientButtonProps {
|
|
@@ -98,6 +98,13 @@ export const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
|
|
|
98
98
|
hoverColor: theme.color.danger.actionHover,
|
|
99
99
|
activeColor: theme.color.danger.actionActive,
|
|
100
100
|
},
|
|
101
|
+
primaryBlack: {
|
|
102
|
+
textColor: theme.color.neutral.textOnPrimary,
|
|
103
|
+
backgroundColor: theme.color.primaryBlack.action,
|
|
104
|
+
borderColor: theme.color.primaryBlack.action,
|
|
105
|
+
hoverColor: theme.color.primaryBlack.actionHover,
|
|
106
|
+
activeColor: theme.color.primaryBlack.actionActive,
|
|
107
|
+
},
|
|
101
108
|
},
|
|
102
109
|
secondary: {
|
|
103
110
|
default: {
|
|
@@ -125,6 +132,13 @@ export const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
|
|
|
125
132
|
activeColor: theme.color.danger.actionActive,
|
|
126
133
|
activeTextColor: theme.color.neutral.textOnPrimary,
|
|
127
134
|
},
|
|
135
|
+
primaryBlack: {
|
|
136
|
+
textColor: theme.color.neutral.textOnPrimary,
|
|
137
|
+
backgroundColor: theme.color.primaryBlack.action,
|
|
138
|
+
borderColor: theme.color.primaryBlack.action,
|
|
139
|
+
hoverColor: theme.color.primaryBlack.actionHover,
|
|
140
|
+
activeColor: theme.color.primaryBlack.actionActive,
|
|
141
|
+
},
|
|
128
142
|
},
|
|
129
143
|
tertiary: {
|
|
130
144
|
default: {
|
|
@@ -149,6 +163,13 @@ export const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
|
|
|
149
163
|
hoverColor: theme.color.danger.backgroundSubtleHover,
|
|
150
164
|
activeColor: theme.color.danger.backgroundSubtleActive,
|
|
151
165
|
},
|
|
166
|
+
primaryBlack: {
|
|
167
|
+
textColor: theme.color.neutral.textOnPrimary,
|
|
168
|
+
backgroundColor: theme.color.primaryBlack.action,
|
|
169
|
+
borderColor: theme.color.primaryBlack.action,
|
|
170
|
+
hoverColor: theme.color.primaryBlack.actionHover,
|
|
171
|
+
activeColor: theme.color.primaryBlack.actionActive,
|
|
172
|
+
},
|
|
152
173
|
},
|
|
153
174
|
};
|
|
154
175
|
|