@apify/ui-library 1.99.0 → 1.100.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 +6 -2
- package/dist/src/components/button.d.ts.map +1 -1
- package/dist/src/components/button.js +35 -8
- package/dist/src/components/button.js.map +1 -1
- package/dist/src/components/button.stories.d.ts +6 -0
- package/dist/src/components/button.stories.d.ts.map +1 -0
- package/dist/src/components/button.stories.js +46 -0
- package/dist/src/components/button.stories.js.map +1 -0
- package/dist/src/components/chip.d.ts +1 -1
- package/dist/src/components/chip.d.ts.map +1 -1
- package/dist/src/components/icon_button.d.ts +55 -0
- package/dist/src/components/icon_button.d.ts.map +1 -0
- package/dist/src/components/icon_button.js +134 -0
- package/dist/src/components/icon_button.js.map +1 -0
- package/dist/src/components/icon_button.stories.d.ts +36 -0
- package/dist/src/components/icon_button.stories.d.ts.map +1 -0
- package/dist/src/components/icon_button.stories.js +59 -0
- package/dist/src/components/icon_button.stories.js.map +1 -0
- package/dist/src/components/index.d.ts +2 -0
- package/dist/src/components/index.d.ts.map +1 -1
- package/dist/src/components/index.js +2 -0
- package/dist/src/components/index.js.map +1 -1
- package/dist/src/components/spinner.d.ts +32 -0
- package/dist/src/components/spinner.d.ts.map +1 -0
- package/dist/src/components/spinner.js +84 -0
- package/dist/src/components/spinner.js.map +1 -0
- package/dist/src/components/spinner.stories.d.ts +8 -0
- package/dist/src/components/spinner.stories.d.ts.map +1 -0
- package/dist/src/components/spinner.stories.js +24 -0
- package/dist/src/components/spinner.stories.js.map +1 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/{button.stories.jsx → button.stories.tsx} +26 -11
- package/src/components/button.tsx +43 -11
- package/src/components/chip.tsx +1 -1
- package/src/components/icon_button.stories.tsx +251 -0
- package/src/components/icon_button.tsx +211 -0
- package/src/components/index.ts +2 -0
- package/src/components/spinner.stories.tsx +37 -0
- package/src/components/spinner.tsx +116 -0
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { AriaAttributes } from 'react';
|
|
2
2
|
import type React from 'react';
|
|
3
|
+
import { type IconSize } from '@apify/ui-icons';
|
|
3
4
|
import { type WithRequired } from '../type_utils.js';
|
|
4
5
|
import { type MarginSpacingProps, type RegularBoxProps } from './box.js';
|
|
5
6
|
import { type LinkProps } from './link.js';
|
|
6
|
-
type ButtonSize = 'medium' | 'small';
|
|
7
|
+
export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
|
|
7
8
|
type ButtonColor = 'default' | 'success' | 'danger';
|
|
8
9
|
type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
|
|
9
10
|
export interface TransientButtonProps {
|
|
@@ -24,8 +25,11 @@ export type ButtonProps = CommonButtonProps & WithRequired<RegularBoxProps, 'onC
|
|
|
24
25
|
export type AnchorButtonProps = CommonButtonProps & RegularBoxProps & LinkProps;
|
|
25
26
|
type ButtonSizeCombinations = {
|
|
26
27
|
[Size in ButtonSize]: {
|
|
28
|
+
typography: string;
|
|
29
|
+
size: number;
|
|
27
30
|
horizontalPadding: number;
|
|
28
|
-
|
|
31
|
+
borderRadius: string;
|
|
32
|
+
iconSize: IconSize;
|
|
29
33
|
};
|
|
30
34
|
};
|
|
31
35
|
export declare const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,EAAE,KAAK,YAAY,EAA2B,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAC9E,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAEhE,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AACpF,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAC;AAG9E,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,eAAe,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAEjH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC;AA6BhF,KAAK,sBAAsB,GAAG;KACzB,IAAI,IAAI,UAAU,GAAG;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,QAAQ,CAAC;KACtB;CACJ,CAAC;AA+EF,eAAO,MAAM,wBAAwB,EAAE,sBAoCtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,aAAa,aAAa,UAAqB,WAAW,2DAqC1F,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAU,UAAU,2DAgBnD,CAAC;AA4BF,eAAO,MAAM,MAAM,uGAmEjB,CAAC"}
|
|
@@ -88,13 +88,40 @@ const BUTTON_COLOR_VARIANTS_CSS = {
|
|
|
88
88
|
},
|
|
89
89
|
};
|
|
90
90
|
export const BUTTON_SIZE_VARIANTS_CSS = {
|
|
91
|
+
extraLarge: {
|
|
92
|
+
typography: theme.typography.shared.mobile.bodyMMedium,
|
|
93
|
+
size: 40,
|
|
94
|
+
horizontalPadding: 12,
|
|
95
|
+
borderRadius: theme.radius.radius8,
|
|
96
|
+
iconSize: '20',
|
|
97
|
+
},
|
|
98
|
+
large: {
|
|
99
|
+
typography: theme.typography.shared.mobile.bodyMMedium,
|
|
100
|
+
size: 36,
|
|
101
|
+
horizontalPadding: 12,
|
|
102
|
+
borderRadius: theme.radius.radius6,
|
|
103
|
+
iconSize: '20',
|
|
104
|
+
},
|
|
91
105
|
medium: {
|
|
92
|
-
|
|
106
|
+
typography: theme.typography.shared.mobile.bodyMMedium,
|
|
107
|
+
size: 32,
|
|
93
108
|
horizontalPadding: 12,
|
|
109
|
+
borderRadius: theme.radius.radius6,
|
|
110
|
+
iconSize: '16',
|
|
94
111
|
},
|
|
95
112
|
small: {
|
|
96
|
-
|
|
113
|
+
typography: theme.typography.shared.mobile.bodyMMedium,
|
|
114
|
+
size: 28,
|
|
97
115
|
horizontalPadding: 8,
|
|
116
|
+
borderRadius: theme.radius.radius6,
|
|
117
|
+
iconSize: '16',
|
|
118
|
+
},
|
|
119
|
+
extraSmall: {
|
|
120
|
+
typography: theme.typography.shared.mobile.bodySMedium,
|
|
121
|
+
size: 24,
|
|
122
|
+
horizontalPadding: 6,
|
|
123
|
+
borderRadius: theme.radius.radius6,
|
|
124
|
+
iconSize: '12',
|
|
98
125
|
},
|
|
99
126
|
};
|
|
100
127
|
export const getButtonColorStyles = (variant = 'primary', color = 'default') => {
|
|
@@ -126,23 +153,24 @@ export const getButtonColorStyles = (variant = 'primary', color = 'default') =>
|
|
|
126
153
|
`;
|
|
127
154
|
};
|
|
128
155
|
export const getButtonSizeStyles = (size = 'medium') => {
|
|
129
|
-
const { height, horizontalPadding, } = BUTTON_SIZE_VARIANTS_CSS[size];
|
|
156
|
+
const { typography, size: height, horizontalPadding, borderRadius, } = BUTTON_SIZE_VARIANTS_CSS[size];
|
|
130
157
|
return css `
|
|
158
|
+
${typography};
|
|
131
159
|
height: ${height}px;
|
|
132
160
|
/* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
|
|
133
161
|
padding: 0 ${horizontalPadding}px;
|
|
162
|
+
border-radius: ${borderRadius};
|
|
163
|
+
|
|
134
164
|
`;
|
|
135
165
|
};
|
|
136
166
|
const StyledButton = styled(Box) `
|
|
137
|
-
${theme.typography.shared.mobile.bodyMMedium};
|
|
138
|
-
|
|
139
167
|
/* Basic positioning */
|
|
140
168
|
display: inline-flex;
|
|
141
169
|
align-items: center;
|
|
142
170
|
/* NOT sure about this. It needs to be set when we want 100% width button */
|
|
143
171
|
/* Maybe we can add block property */
|
|
144
172
|
justify-content: center;
|
|
145
|
-
gap: ${theme.space.
|
|
173
|
+
gap: ${theme.space.space4};
|
|
146
174
|
|
|
147
175
|
/* Basic styles */
|
|
148
176
|
white-space: nowrap;
|
|
@@ -152,7 +180,6 @@ const StyledButton = styled(Box) `
|
|
|
152
180
|
/* Border is always defined, but it can be set to transparent */
|
|
153
181
|
border-style: solid;
|
|
154
182
|
border-width: 1px;
|
|
155
|
-
border-radius: ${theme.radius.radius6};
|
|
156
183
|
border-color: transparent;
|
|
157
184
|
|
|
158
185
|
/* Colors */
|
|
@@ -170,7 +197,7 @@ export const Button = forwardRef((props, ref) => {
|
|
|
170
197
|
if (onClick)
|
|
171
198
|
onClick(e);
|
|
172
199
|
};
|
|
173
|
-
const iconSize = size
|
|
200
|
+
const { iconSize } = BUTTON_SIZE_VARIANTS_CSS[size];
|
|
174
201
|
if (isAnchorButton(props)) {
|
|
175
202
|
const isExternal = isUrlExternal(props.to, windowLocationHost);
|
|
176
203
|
const EffectiveRightIcon = (isExternal && !props.hideExternalIcon) ? ExternalLinkIcon : RightIcon;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta } from '@storybook/react-vite';
|
|
2
|
+
import { Button } from './button.js';
|
|
3
|
+
declare const _default: Meta<typeof Button>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
//# sourceMappingURL=button.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAQlD,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;wBAWlD,IAAI,CAAC,OAAO,MAAM,CAAC;AATxB,wBASyB;AA6FzB,eAAO,MAAM,OAAO,+CA6BnB,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// eslint-disable-next-line import/extensions
|
|
3
|
+
import { action } from 'storybook/actions';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import { CrossIcon } from '@apify/ui-icons';
|
|
6
|
+
import { theme } from '../design_system/theme.js';
|
|
7
|
+
import { Button } from './button.js';
|
|
8
|
+
export default {
|
|
9
|
+
title: 'UI-Library/Button',
|
|
10
|
+
component: Button,
|
|
11
|
+
parameters: {
|
|
12
|
+
design: {
|
|
13
|
+
type: 'figma',
|
|
14
|
+
url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5235-24898&t=fCZgSCLJK79g0Omo-4',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
const Wrapper = styled.div `
|
|
19
|
+
background-color: ${theme.color.neutral.background};
|
|
20
|
+
padding: 2rem;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
align-items: flex-start;
|
|
24
|
+
gap: 8px;
|
|
25
|
+
`;
|
|
26
|
+
const TwoColumns = styled.div `
|
|
27
|
+
display: grid;
|
|
28
|
+
grid-template-columns: repeat(5, auto);
|
|
29
|
+
gap: 40px;
|
|
30
|
+
`;
|
|
31
|
+
const ButtonGrid = styled.div `
|
|
32
|
+
display: flex;
|
|
33
|
+
gap: 8px;
|
|
34
|
+
margin-bottom: 16px;
|
|
35
|
+
`;
|
|
36
|
+
const ButtonSection = ({ ...rest }) => {
|
|
37
|
+
const props = {
|
|
38
|
+
...rest,
|
|
39
|
+
onClick: action('onClick'),
|
|
40
|
+
};
|
|
41
|
+
return (_jsxs(Wrapper, { children: [_jsxs(ButtonGrid, { children: [_jsx(Button, { ...props, variant: 'primary', children: "Primary" }), _jsx(Button, { ...props, variant: 'secondary', children: "Secondary" }), _jsx(Button, { ...props, variant: 'tertiary', children: "Tertiary" }), _jsx(Button, { ...props, disabled: true, children: "Disabled" })] }), _jsx("h6", { children: "With leading icon" }), _jsxs(ButtonGrid, { children: [_jsx(Button, { ...props, LeftIcon: CrossIcon, variant: 'primary', children: "Primary" }), _jsx(Button, { ...props, LeftIcon: CrossIcon, variant: 'secondary', children: "Secondary" }), _jsx(Button, { ...props, LeftIcon: CrossIcon, variant: 'tertiary', children: "Tertiary" }), _jsx(Button, { ...props, LeftIcon: CrossIcon, disabled: true, children: "Disabled" })] }), _jsx("h6", { children: "With trailing icon" }), _jsxs(ButtonGrid, { children: [_jsx(Button, { ...props, RightIcon: CrossIcon, variant: 'primary', children: "Primary" }), _jsx(Button, { ...props, RightIcon: CrossIcon, variant: 'secondary', children: "Secondary" }), _jsx(Button, { ...props, RightIcon: CrossIcon, variant: 'tertiary', children: "Tertiary" }), _jsx(Button, { ...props, RightIcon: CrossIcon, disabled: true, children: "Disabled" })] }), _jsx("h6", { children: "With both icons" }), _jsxs(ButtonGrid, { children: [_jsx(Button, { ...props, RightIcon: CrossIcon, LeftIcon: CrossIcon, variant: 'primary', children: "Primary test" }), _jsx(Button, { ...props, RightIcon: CrossIcon, LeftIcon: CrossIcon, variant: 'secondary', children: "Secondary" }), _jsx(Button, { ...props, RightIcon: CrossIcon, LeftIcon: CrossIcon, variant: 'tertiary', children: "Tertiary" }), _jsx(Button, { ...props, RightIcon: CrossIcon, LeftIcon: CrossIcon, disabled: true, children: "Disabled" })] })] }));
|
|
42
|
+
};
|
|
43
|
+
export const Default = () => {
|
|
44
|
+
return (_jsxs(Wrapper, { children: [_jsx("h4", { children: "Primary" }), _jsxs(TwoColumns, { children: [_jsx(ButtonSection, { color: 'default', size: 'extraLarge' }), _jsx(ButtonSection, { color: 'default', size: 'large' }), _jsx(ButtonSection, { color: 'default', size: 'medium' }), _jsx(ButtonSection, { color: 'default', size: 'small' }), _jsx(ButtonSection, { color: 'default', size: 'extraSmall' })] }), _jsx("h4", { children: "Success" }), _jsxs(TwoColumns, { children: [_jsx(ButtonSection, { color: 'success', size: 'extraLarge' }), _jsx(ButtonSection, { color: 'success', size: 'large' }), _jsx(ButtonSection, { color: 'success', size: 'medium' }), _jsx(ButtonSection, { color: 'success', size: 'small' }), _jsx(ButtonSection, { color: 'success', size: 'extraSmall' })] }), _jsx("h4", { children: "Danger" }), _jsxs(TwoColumns, { children: [_jsx(ButtonSection, { color: 'danger', size: 'extraLarge' }), _jsx(ButtonSection, { color: 'danger', size: 'large' }), _jsx(ButtonSection, { color: 'danger', size: 'medium' }), _jsx(ButtonSection, { color: 'danger', size: 'small' }), _jsx(ButtonSection, { color: 'danger', size: 'extraSmall' })] })] }));
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=button.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ export declare const CHIP_TYPES: {
|
|
|
16
16
|
readonly WARNING: "WARNING";
|
|
17
17
|
readonly DANGER: "DANGER";
|
|
18
18
|
};
|
|
19
|
-
type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
|
|
19
|
+
export type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
|
|
20
20
|
export declare const classNames: {
|
|
21
21
|
BODY: string;
|
|
22
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AACX,KAAK,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AACX,
|
|
1
|
+
{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AACX,KAAK,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU;;CAEtB,CAAC;AAmEF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACtC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI;eA3EG,MAChB,SAAQ;;YACE,MAAO,aACZ;kBACD,MAAA,UAAS;;;SAOA,MAAO,WAExB;;WAqDW,UAAU;WACV,UAAU;WACV,KAAK,CAAC,SAAS;gBACV,OAAO;iCAiBrB,CAAC;AAIH,KAAK,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAEhD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAA2D,CAAC;AACzG,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { IconComponent } from '@apify/ui-icons';
|
|
2
|
+
import type { ValueOf } from '@apify-packages/types';
|
|
3
|
+
import type { RegularBoxProps } from './box.js';
|
|
4
|
+
import { type RegularButtonProps, type TransientButtonProps } from './button.js';
|
|
5
|
+
import { type RegularLinkProps } from './link.js';
|
|
6
|
+
export declare const ICON_BUTTON_VARIANTS: {
|
|
7
|
+
readonly DEFAULT: "DEFAULT";
|
|
8
|
+
readonly BORDERED: "BORDERED";
|
|
9
|
+
readonly DANGER: "DANGER";
|
|
10
|
+
readonly DANGER_BORDERED: "DANGER_BORDERED";
|
|
11
|
+
};
|
|
12
|
+
export type ICON_BUTTON_VARIANTS = ValueOf<typeof ICON_BUTTON_VARIANTS>;
|
|
13
|
+
type IconButtonNodeType = Extract<React.ElementType, 'a' | 'button'>;
|
|
14
|
+
type IconButtonNodePropsMap = {
|
|
15
|
+
a: {
|
|
16
|
+
element: HTMLAnchorElement;
|
|
17
|
+
props: RegularLinkProps;
|
|
18
|
+
};
|
|
19
|
+
button: {
|
|
20
|
+
element: HTMLButtonElement;
|
|
21
|
+
props: RegularButtonProps;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps & Pick<TransientButtonProps, 'size'> & {
|
|
25
|
+
as?: T;
|
|
26
|
+
variant?: ICON_BUTTON_VARIANTS;
|
|
27
|
+
Icon: IconComponent;
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
isLoading?: boolean;
|
|
30
|
+
title?: string;
|
|
31
|
+
tooltipProps?: unknown;
|
|
32
|
+
} & Omit<IconButtonNodePropsMap[T]['props'], 'size' | 'variant'>;
|
|
33
|
+
/**
|
|
34
|
+
* Simplified button component that displays an icon.
|
|
35
|
+
* Has a tooltip and a loading state.
|
|
36
|
+
*/
|
|
37
|
+
export declare const IconButton: import("react").ForwardRefExoticComponent<{
|
|
38
|
+
children?: React.ReactNode;
|
|
39
|
+
className?: string;
|
|
40
|
+
style?: React.CSSProperties;
|
|
41
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
42
|
+
id?: string;
|
|
43
|
+
} & {
|
|
44
|
+
as?: React.ElementType;
|
|
45
|
+
} & Pick<TransientButtonProps, "size"> & {
|
|
46
|
+
as?: IconButtonNodeType | undefined;
|
|
47
|
+
variant?: ICON_BUTTON_VARIANTS;
|
|
48
|
+
Icon: IconComponent;
|
|
49
|
+
disabled?: boolean;
|
|
50
|
+
isLoading?: boolean;
|
|
51
|
+
title?: string;
|
|
52
|
+
tooltipProps?: unknown;
|
|
53
|
+
} & Omit<RegularLinkProps | RegularButtonProps, "size" | "variant"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
54
|
+
export {};
|
|
55
|
+
//# sourceMappingURL=icon_button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon_button.d.ts","sourceRoot":"","sources":["../../../src/components/icon_button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,iBAAiB,CAAC;AAE/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAqD,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEpI,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAGxD,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AACX,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,OAAO,oBAAoB,CAAC,CAAC;AA2HxE,KAAK,kBAAkB,GAAG,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;AACrE,KAAK,sBAAsB,GAAG;IAC1B,CAAC,EAAE;QACC,OAAO,EAAE,iBAAiB,CAAC;QAC3B,KAAK,EAAE,gBAAgB,CAAC;KAC3B,CAAC;IACF,MAAM,EAAE;QACJ,OAAO,EAAE,iBAAiB,CAAC;QAC3B,KAAK,EAAE,kBAAkB,CAAC;KAC7B,CAAC;CACL,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,kBAAkB,IAAI,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAC/G,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,CAAC,EAAE,oBAAoB,CAAA;IAC9B,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,UAAU;eArJlB,MAAO,SAAS;;YAAqC,MAAO,aAE7D;kBAAkB,MAAO,UACvB;;;SAG+B,MAAO,WACrC;;;cAkIO,oBAAoB;UACxB,aAAa;eACR,OAAO;gBACN,OAAO;YACX,MAAM;mBACC,OAAO;2IA8CxB,CAAC"}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import styled, { css } from 'styled-components';
|
|
4
|
+
import { theme } from '../design_system/theme.js';
|
|
5
|
+
import { Button, BUTTON_SIZE_VARIANTS_CSS } from './button.js';
|
|
6
|
+
import { Tooltip } from './floating/tooltip.js';
|
|
7
|
+
import { Link } from './link.js';
|
|
8
|
+
import { InlineSpinner, spinnerClassNames } from './spinner.js';
|
|
9
|
+
export const ICON_BUTTON_VARIANTS = {
|
|
10
|
+
DEFAULT: 'DEFAULT',
|
|
11
|
+
BORDERED: 'BORDERED',
|
|
12
|
+
DANGER: 'DANGER',
|
|
13
|
+
DANGER_BORDERED: 'DANGER_BORDERED',
|
|
14
|
+
};
|
|
15
|
+
const iconButtonVariantStyle = {
|
|
16
|
+
[ICON_BUTTON_VARIANTS.DEFAULT]: {
|
|
17
|
+
backgroundColor: 'transparent',
|
|
18
|
+
backgroundHoverColor: theme.color.neutral.hover,
|
|
19
|
+
backgroundDisabledColor: 'transparent',
|
|
20
|
+
borderColor: 'transparent',
|
|
21
|
+
borderHoverColor: 'transparent',
|
|
22
|
+
borderDisabledColor: 'transparent',
|
|
23
|
+
iconColor: theme.color.neutral.text,
|
|
24
|
+
},
|
|
25
|
+
[ICON_BUTTON_VARIANTS.BORDERED]: {
|
|
26
|
+
backgroundColor: theme.color.neutral.backgroundMuted,
|
|
27
|
+
backgroundHoverColor: theme.color.neutral.hover,
|
|
28
|
+
backgroundDisabledColor: theme.color.neutral.disabled,
|
|
29
|
+
borderColor: theme.color.neutral.border,
|
|
30
|
+
borderHoverColor: theme.color.neutral.border,
|
|
31
|
+
borderDisabledColor: theme.color.neutral.border,
|
|
32
|
+
iconColor: theme.color.neutral.text,
|
|
33
|
+
},
|
|
34
|
+
[ICON_BUTTON_VARIANTS.DANGER_BORDERED]: {
|
|
35
|
+
backgroundColor: theme.color.neutral.backgroundMuted,
|
|
36
|
+
backgroundHoverColor: theme.color.danger.backgroundHover,
|
|
37
|
+
backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
|
|
38
|
+
borderColor: theme.color.neutral.border,
|
|
39
|
+
borderHoverColor: theme.color.danger.borderSubtle,
|
|
40
|
+
borderDisabledColor: theme.color.neutral.border,
|
|
41
|
+
iconColor: theme.color.danger.text,
|
|
42
|
+
},
|
|
43
|
+
[ICON_BUTTON_VARIANTS.DANGER]: {
|
|
44
|
+
backgroundColor: 'transparent',
|
|
45
|
+
backgroundHoverColor: theme.color.danger.backgroundHover,
|
|
46
|
+
backgroundDisabledColor: theme.color.neutral.backgroundSubtle,
|
|
47
|
+
borderColor: 'transparent',
|
|
48
|
+
borderHoverColor: 'transparent',
|
|
49
|
+
borderDisabledColor: 'transparent',
|
|
50
|
+
iconColor: theme.color.danger.text,
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
const iconButtonSizeConfig = {
|
|
54
|
+
extraLarge: {
|
|
55
|
+
iconSize: '24',
|
|
56
|
+
spinnerSize: '2.4rem',
|
|
57
|
+
},
|
|
58
|
+
large: {
|
|
59
|
+
iconSize: '20',
|
|
60
|
+
spinnerSize: '2rem',
|
|
61
|
+
},
|
|
62
|
+
medium: {
|
|
63
|
+
iconSize: '16',
|
|
64
|
+
spinnerSize: '1.6rem',
|
|
65
|
+
},
|
|
66
|
+
small: {
|
|
67
|
+
iconSize: '16',
|
|
68
|
+
spinnerSize: '1.6rem',
|
|
69
|
+
},
|
|
70
|
+
extraSmall: {
|
|
71
|
+
iconSize: '12',
|
|
72
|
+
spinnerSize: '1.2rem',
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
const getIconButtonColorStyles = (variant) => {
|
|
76
|
+
const { backgroundColor, backgroundHoverColor, backgroundDisabledColor, borderDisabledColor, borderColor, borderHoverColor, iconColor, } = iconButtonVariantStyle[variant];
|
|
77
|
+
return css `
|
|
78
|
+
color: ${iconColor};
|
|
79
|
+
background-color: ${backgroundColor};
|
|
80
|
+
border-color: ${borderColor};
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
background-color: ${backgroundHoverColor};
|
|
84
|
+
border-color: ${borderHoverColor || borderColor};
|
|
85
|
+
color: ${iconColor};
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&:focus {
|
|
89
|
+
border-color: ${theme.color.primary.fieldBorderActive};
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&:active {
|
|
93
|
+
background-color: ${theme.color.neutral.actionSecondaryActive};
|
|
94
|
+
border-color: ${theme.color.neutral.actionSecondaryActive};
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&:disabled {
|
|
98
|
+
color: ${theme.color.neutral.iconDisabled};
|
|
99
|
+
background-color: ${backgroundDisabledColor};
|
|
100
|
+
border-color: ${borderDisabledColor};
|
|
101
|
+
|
|
102
|
+
cursor: default;
|
|
103
|
+
}
|
|
104
|
+
`;
|
|
105
|
+
};
|
|
106
|
+
const StyledButton = styled(Button) `
|
|
107
|
+
${({ $variant }) => getIconButtonColorStyles($variant)}
|
|
108
|
+
|
|
109
|
+
/* Override default button styles */
|
|
110
|
+
box-sizing: border-box;
|
|
111
|
+
width: ${({ $size }) => (BUTTON_SIZE_VARIANTS_CSS[$size].size)}px;
|
|
112
|
+
padding: 0;
|
|
113
|
+
|
|
114
|
+
.${spinnerClassNames.SPINNER} .path {
|
|
115
|
+
stroke: ${theme.color.neutral.icon};
|
|
116
|
+
}
|
|
117
|
+
`;
|
|
118
|
+
/**
|
|
119
|
+
* Simplified button component that displays an icon.
|
|
120
|
+
* Has a tooltip and a loading state.
|
|
121
|
+
*/
|
|
122
|
+
export const IconButton = forwardRef(({ variant = ICON_BUTTON_VARIANTS.DEFAULT, size = 'medium', as = 'button', title, disabled = false, isLoading = false, Icon, tooltipProps, ...passThroughProps }, ref) => {
|
|
123
|
+
const otherProps = { ...passThroughProps, size };
|
|
124
|
+
const component = as === 'a' ? Link : as;
|
|
125
|
+
const { iconSize, spinnerSize } = iconButtonSizeConfig[size];
|
|
126
|
+
const button = (_jsx(StyledButton, { forwardedAs: component, ref: ref, disabled: disabled || isLoading, type: 'button', "aria-label": title, LeftIcon: isLoading ? () => _jsx(InlineSpinner, { size: spinnerSize }) : () => _jsx(Icon, { size: iconSize }),
|
|
127
|
+
// We apply our own styles to the button, so we need to override the default variant
|
|
128
|
+
variant: "tertiary", "$size": size, "$variant": variant, ...otherProps }));
|
|
129
|
+
return title ? (
|
|
130
|
+
// @ts-expect-error tooltip is not migrated to TS yet
|
|
131
|
+
_jsx(Tooltip, { content: title, ...tooltipProps, children: button })) : button;
|
|
132
|
+
});
|
|
133
|
+
IconButton.displayName = 'IconButton';
|
|
134
|
+
//# sourceMappingURL=icon_button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon_button.js","sourceRoot":"","sources":["../../../src/components/icon_button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { Meta } from '@storybook/react-vite';
|
|
2
|
+
import { IconButton, type IconButtonProps } from './icon_button.js';
|
|
3
|
+
declare const _default: Meta<typeof IconButton>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const Default: (props: IconButtonProps<"button">) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const Playground: {
|
|
7
|
+
(props: IconButtonProps<"button">): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
args: {
|
|
9
|
+
variant: "DEFAULT";
|
|
10
|
+
size: string;
|
|
11
|
+
disabled: boolean;
|
|
12
|
+
isLoading: boolean;
|
|
13
|
+
};
|
|
14
|
+
argTypes: {
|
|
15
|
+
variant: {
|
|
16
|
+
options: {
|
|
17
|
+
readonly DEFAULT: "DEFAULT";
|
|
18
|
+
readonly BORDERED: "BORDERED";
|
|
19
|
+
readonly DANGER: "DANGER";
|
|
20
|
+
readonly DANGER_BORDERED: "DANGER_BORDERED";
|
|
21
|
+
};
|
|
22
|
+
control: string;
|
|
23
|
+
};
|
|
24
|
+
size: {
|
|
25
|
+
options: string[];
|
|
26
|
+
control: string;
|
|
27
|
+
};
|
|
28
|
+
disabled: {
|
|
29
|
+
control: string;
|
|
30
|
+
};
|
|
31
|
+
isLoading: {
|
|
32
|
+
control: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=icon_button.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon_button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/icon_button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAUlD,OAAO,EAEH,UAAU,EACV,KAAK,eAAe,EACvB,MAAM,kBAAkB,CAAC;wBAcrB,IAAI,CAAC,OAAO,UAAU,CAAC;AAZ5B,wBAY6B;AAS7B,eAAO,MAAM,OAAO,UAAW,eAAe,CAAC,QAAQ,CAAC,4CAsKvD,CAAC;AAQF,eAAO,MAAM,UAAU;YAAW,eAAe,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe1D,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
// eslint-disable-next-line import/extensions
|
|
3
|
+
import { action } from 'storybook/actions';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import { BellIcon, DeleteIcon, PeopleIcon, } from '@apify/ui-icons';
|
|
6
|
+
import { ICON_BUTTON_VARIANTS, IconButton, } from './icon_button.js';
|
|
7
|
+
export default {
|
|
8
|
+
title: 'UI-Library/IconButton',
|
|
9
|
+
component: IconButton,
|
|
10
|
+
args: {
|
|
11
|
+
onClick: action('onClick'),
|
|
12
|
+
},
|
|
13
|
+
parameters: {
|
|
14
|
+
design: {
|
|
15
|
+
type: 'figma',
|
|
16
|
+
url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=5236-40552&t=fCZgSCLJK79g0Omo-4',
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
const Table = styled.table `
|
|
21
|
+
td {
|
|
22
|
+
padding: 8px;
|
|
23
|
+
}
|
|
24
|
+
margin-bottom: 32px;
|
|
25
|
+
`;
|
|
26
|
+
export const Default = (props) => {
|
|
27
|
+
return (_jsx(_Fragment, { children: _jsx(Table, { children: _jsx("tbody", { children: Object.values(ICON_BUTTON_VARIANTS).map((variant) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'extraLarge', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'large', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'medium', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'small', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, size: 'extraSmall', title: 'Delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'extraLarge', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'large', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'medium', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'small', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, disabled: true, size: 'extraSmall', title: 'Disabled delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'extraLarge', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'extraLarge', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'large', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'medium', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'small', title: 'Loading delete example' }) }), _jsx("td", { children: _jsx(IconButton, { ...props, variant: variant, Icon: DeleteIcon, isLoading: true, size: 'extraSmall', title: 'Loading delete example' }) })] }, variant))) }) }) }));
|
|
28
|
+
};
|
|
29
|
+
const StyledPlayground = styled.div `
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: row;
|
|
32
|
+
gap: 8px;
|
|
33
|
+
`;
|
|
34
|
+
export const Playground = (props) => {
|
|
35
|
+
return (_jsxs(StyledPlayground, { children: [_jsx(IconButton, { ...props, Icon: PeopleIcon }), _jsx(IconButton, { ...props, Icon: DeleteIcon }), _jsx(IconButton, { ...props, Icon: BellIcon })] }));
|
|
36
|
+
};
|
|
37
|
+
Playground.args = {
|
|
38
|
+
variant: ICON_BUTTON_VARIANTS.DEFAULT,
|
|
39
|
+
size: 'medium',
|
|
40
|
+
disabled: false,
|
|
41
|
+
isLoading: false,
|
|
42
|
+
};
|
|
43
|
+
Playground.argTypes = {
|
|
44
|
+
variant: {
|
|
45
|
+
options: ICON_BUTTON_VARIANTS,
|
|
46
|
+
control: 'select',
|
|
47
|
+
},
|
|
48
|
+
size: {
|
|
49
|
+
options: ['medium', 'small'],
|
|
50
|
+
control: 'select',
|
|
51
|
+
},
|
|
52
|
+
disabled: {
|
|
53
|
+
control: 'boolean',
|
|
54
|
+
},
|
|
55
|
+
isLoading: {
|
|
56
|
+
control: 'boolean',
|
|
57
|
+
},
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=icon_button.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon_button.stories.js","sourceRoot":"","sources":["../../../src/components/icon_button.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export declare const spinnerClassNames: {
|
|
2
|
+
SPINNER: string;
|
|
3
|
+
};
|
|
4
|
+
export type SpinnerProps = {
|
|
5
|
+
id?: string;
|
|
6
|
+
as?: React.ElementType;
|
|
7
|
+
className?: string;
|
|
8
|
+
style?: React.CSSProperties;
|
|
9
|
+
small?: boolean;
|
|
10
|
+
loadingReason?: string;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* Visualize loading state of a component.
|
|
14
|
+
*
|
|
15
|
+
* Use this spinner when a page or section is waiting for asynchronous data.
|
|
16
|
+
* Do not use it for buttons and small components, apply only for bigger sections.
|
|
17
|
+
*
|
|
18
|
+
* Keep the spinner centered (eg. by setting position to parent container).
|
|
19
|
+
*/
|
|
20
|
+
export declare const Spinner: ({ loadingReason, small, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
/**
|
|
22
|
+
* Spinner with basic block styling
|
|
23
|
+
* This styles should probably be in default spinner, but it's dangerous to modify it as it's used on so many places
|
|
24
|
+
*/
|
|
25
|
+
export declare const BlockSpinner: import("styled-components").StyledComponent<({ loadingReason, small, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
|
|
26
|
+
/**
|
|
27
|
+
* Use the inline variant within buttons, texts etc. The color of the spinner is set to current color of text.
|
|
28
|
+
*/
|
|
29
|
+
export declare const InlineSpinner: import("styled-components").StyledComponent<({ loadingReason, small, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element, any, {
|
|
30
|
+
size?: string;
|
|
31
|
+
}, never>;
|
|
32
|
+
//# sourceMappingURL=spinner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB;;CAE7B,CAAC;AAuBF,MAAM,MAAM,YAAY,GAAG;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AA4BF;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,uCAAwC,YAAY,4CAgBvE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,mFAtBmC,YAAY,6DA0BvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,mFA/BkC,YAAY;WA+BnB,MAAM;SAW1D,CAAC"}
|