@preply/ds-web-lib 0.25.0 → 0.26.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.
@@ -1,18 +1,4 @@
1
- import type { ButtonSize, ButtonVariant, Dataset } from '@preply/ds-core';
2
- import { FC, MouseEvent } from 'react';
3
- export interface Props {
4
- variant?: ButtonVariant;
5
- size?: ButtonSize;
6
- fullWidth?: boolean;
7
- wrap?: boolean;
8
- url?: string;
9
- opensInNewTab?: boolean;
10
- submitsForm?: boolean;
11
- a11yLabel?: string;
12
- assistiveText?: string;
13
- onClick?: (event: MouseEvent) => void;
14
- disabled?: boolean;
15
- busy?: boolean;
16
- dataset?: Dataset;
17
- }
1
+ import { FC } from 'react';
2
+ import { ButtonBaseProps } from '../private/ButtonBase/ButtonBase';
3
+ export declare type Props = Omit<ButtonBaseProps, 'isIconButton'>;
18
4
  export declare const Button: FC<Props>;
@@ -1,61 +1,9 @@
1
- import { BUTTON_VARIANT_DEFAULT, BUTTON_SIZE_DEFAULT } from '@preply/ds-core';
2
- import { useInstrument, useStyleExtract, safeClassName, localClasses, getDatasetProps, getExternalUrlProps, mapEdgeKeyToStandard } from '@preply/ds-web-core';
3
- import React__default, { useRef } from 'react';
4
- import { Spinner } from '../Spinner/Spinner.js';
5
- import styles from './style/index.module.less.js';
1
+ import React__default from 'react';
2
+ import { ButtonBase } from '../private/ButtonBase/ButtonBase.js';
6
3
 
7
- const BUTTON = 'Button';
8
- const renderContent = ({ children, busy }) => {
9
- const contentClassNames = [...localClasses(styles, BUTTON, ['content'])];
10
- const busyClassNames = [...localClasses(styles, BUTTON, ['busy'])];
11
- return (React__default.createElement(React__default.Fragment, null,
12
- React__default.createElement("span", { className: contentClassNames.join(' ') }, children),
13
- busy && (React__default.createElement("span", { className: busyClassNames.join(' ') },
14
- React__default.createElement(Spinner, null)))));
15
- };
16
- const Button = ({ variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAULT, fullWidth, wrap, url, opensInNewTab, submitsForm, a11yLabel, assistiveText, onClick, disabled, busy, dataset, children, }) => {
17
- useInstrument('render', { component: BUTTON, props: { variant, size, a11yLabel } });
18
- useStyleExtract(styles);
19
- const ref = useRef(null);
20
- const handleClick = (event) => {
21
- if (disabled || busy) {
22
- event.preventDefault();
23
- }
24
- if (onClick) {
25
- onClick(event);
26
- }
27
- };
28
- const handleKeyPress = (event) => {
29
- var _a;
30
- const key = mapEdgeKeyToStandard(event.key);
31
- if (key === ' ' || key === 'Enter') {
32
- event.preventDefault();
33
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
34
- }
35
- };
36
- const classNames = [
37
- safeClassName(styles, BUTTON),
38
- ...localClasses(styles, BUTTON, [
39
- ['variant', variant],
40
- ['size', size],
41
- { if: !wrap, then: 'no-wrap' },
42
- { if: fullWidth, then: 'width-full' },
43
- { if: busy, then: 'is-busy' },
44
- ]),
45
- ];
46
- const props = {
47
- ...getDatasetProps(dataset),
48
- className: classNames.join(' '),
49
- 'aria-label': assistiveText || a11yLabel,
50
- onClick: handleClick,
51
- disabled,
52
- 'aria-disabled': disabled || busy ? true : undefined,
53
- };
54
- if (!url) {
55
- return (React__default.createElement("button", Object.assign({}, props, { type: submitsForm ? 'submit' : 'button' }), renderContent({ children, busy })));
56
- }
57
- return (React__default.createElement("a", Object.assign({}, props, getExternalUrlProps(url, opensInNewTab), { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, href: url, onKeyDown: handleKeyPress }), renderContent({ children, busy })));
4
+ const Button = props => {
5
+ return React__default.createElement(ButtonBase, Object.assign({}, props, { isIconButton: false }));
58
6
  };
59
7
 
60
8
  export { Button };
61
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IEJ1dHRvblNpemUsIEJ1dHRvblZhcmlhbnQsIERhdGFzZXQgfSBmcm9tICdAcHJlcGx5L2RzLWNvcmUnO1xuaW1wb3J0IHsgQlVUVE9OX1NJWkVfREVGQVVMVCwgQlVUVE9OX1ZBUklBTlRfREVGQVVMVCB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQge1xuICAgIGdldERhdGFzZXRQcm9wcyxcbiAgICBnZXRFeHRlcm5hbFVybFByb3BzLFxuICAgIGxvY2FsQ2xhc3NlcyxcbiAgICBtYXBFZGdlS2V5VG9TdGFuZGFyZCxcbiAgICBzYWZlQ2xhc3NOYW1lLFxuICAgIHVzZUluc3RydW1lbnQsXG4gICAgdXNlU3R5bGVFeHRyYWN0LFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgS2V5Ym9hcmRFdmVudCwgTW91c2VFdmVudCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBTcGlubmVyIH0gZnJvbSAnLi4vU3Bpbm5lci9TcGlubmVyJztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBQcm9wcyB7XG4gICAgdmFyaWFudD86IEJ1dHRvblZhcmlhbnQ7XG4gICAgc2l6ZT86IEJ1dHRvblNpemU7XG4gICAgZnVsbFdpZHRoPzogYm9vbGVhbjtcbiAgICB3cmFwPzogYm9vbGVhbjtcbiAgICB1cmw/OiBzdHJpbmc7XG4gICAgb3BlbnNJbk5ld1RhYj86IGJvb2xlYW47XG4gICAgc3VibWl0c0Zvcm0/OiBib29sZWFuO1xuICAgIGExMXlMYWJlbD86IHN0cmluZztcbiAgICBhc3Npc3RpdmVUZXh0Pzogc3RyaW5nO1xuICAgIG9uQ2xpY2s/OiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XG4gICAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICAgIGJ1c3k/OiBib29sZWFuO1xuICAgIGRhdGFzZXQ/OiBEYXRhc2V0O1xufVxuXG5jb25zdCBCVVRUT04gPSAnQnV0dG9uJztcblxuY29uc3QgcmVuZGVyQ29udGVudDogRkM8UHJvcHM+ID0gKHsgY2hpbGRyZW4sIGJ1c3kgfSkgPT4ge1xuICAgIGNvbnN0IGNvbnRlbnRDbGFzc05hbWVzID0gWy4uLmxvY2FsQ2xhc3NlcyhzdHlsZXMsIEJVVFRPTiwgWydjb250ZW50J10pXTtcbiAgICBjb25zdCBidXN5Q2xhc3NOYW1lcyA9IFsuLi5sb2NhbENsYXNzZXMoc3R5bGVzLCBCVVRUT04sIFsnYnVzeSddKV07XG4gICAgcmV0dXJuIChcbiAgICAgICAgPD5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT17Y29udGVudENsYXNzTmFtZXMuam9pbignICcpfT57Y2hpbGRyZW59PC9zcGFuPlxuICAgICAgICAgICAge2J1c3kgJiYgKFxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT17YnVzeUNsYXNzTmFtZXMuam9pbignICcpfT5cbiAgICAgICAgICAgICAgICAgICAgPFNwaW5uZXIgLz5cbiAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICApfVxuICAgICAgICA8Lz5cbiAgICApO1xufTtcblxuZXhwb3J0IGNvbnN0IEJ1dHRvbjogRkM8UHJvcHM+ID0gKHtcbiAgICB2YXJpYW50ID0gQlVUVE9OX1ZBUklBTlRfREVGQVVMVCxcbiAgICBzaXplID0gQlVUVE9OX1NJWkVfREVGQVVMVCxcbiAgICBmdWxsV2lkdGgsXG4gICAgd3JhcCxcbiAgICB1cmwsXG4gICAgb3BlbnNJbk5ld1RhYixcbiAgICBzdWJtaXRzRm9ybSxcbiAgICBhMTF5TGFiZWwsXG4gICAgYXNzaXN0aXZlVGV4dCxcbiAgICBvbkNsaWNrLFxuICAgIGRpc2FibGVkLFxuICAgIGJ1c3ksXG4gICAgZGF0YXNldCxcbiAgICBjaGlsZHJlbixcbn0pID0+IHtcbiAgICB1c2VJbnN0cnVtZW50KCdyZW5kZXInLCB7IGNvbXBvbmVudDogQlVUVE9OLCBwcm9wczogeyB2YXJpYW50LCBzaXplLCBhMTF5TGFiZWwgfSB9KTtcbiAgICB1c2VTdHlsZUV4dHJhY3Qoc3R5bGVzKTtcblxuICAgIGNvbnN0IHJlZiA9IHVzZVJlZjxIVE1MQW5jaG9yRWxlbWVudD4obnVsbCk7XG5cbiAgICBjb25zdCBoYW5kbGVDbGljayA9IChldmVudDogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBpZiAoZGlzYWJsZWQgfHwgYnVzeSkge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgfVxuICAgICAgICBpZiAob25DbGljaykge1xuICAgICAgICAgICAgb25DbGljayhldmVudCk7XG4gICAgICAgIH1cbiAgICB9O1xuXG4gICAgY29uc3QgaGFuZGxlS2V5UHJlc3MgPSAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHtcbiAgICAgICAgY29uc3Qga2V5ID0gbWFwRWRnZUtleVRvU3RhbmRhcmQoZXZlbnQua2V5KTtcbiAgICAgICAgaWYgKGtleSA9PT0gJyAnIHx8IGtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIHJlZi5jdXJyZW50Py5jbGljaygpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIGNvbnN0IGNsYXNzTmFtZXMgPSBbXG4gICAgICAgIHNhZmVDbGFzc05hbWUoc3R5bGVzLCBCVVRUT04pLFxuICAgICAgICAuLi5sb2NhbENsYXNzZXMoc3R5bGVzLCBCVVRUT04sIFtcbiAgICAgICAgICAgIFsndmFyaWFudCcsIHZhcmlhbnRdLFxuICAgICAgICAgICAgWydzaXplJywgc2l6ZV0sXG4gICAgICAgICAgICB7IGlmOiAhd3JhcCwgdGhlbjogJ25vLXdyYXAnIH0sXG4gICAgICAgICAgICB7IGlmOiBmdWxsV2lkdGgsIHRoZW46ICd3aWR0aC1mdWxsJyB9LFxuICAgICAgICAgICAgeyBpZjogYnVzeSwgdGhlbjogJ2lzLWJ1c3knIH0sXG4gICAgICAgIF0pLFxuICAgIF07XG5cbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgICAgLi4uZ2V0RGF0YXNldFByb3BzKGRhdGFzZXQpLFxuICAgICAgICBjbGFzc05hbWU6IGNsYXNzTmFtZXMuam9pbignICcpLFxuICAgICAgICAnYXJpYS1sYWJlbCc6IGFzc2lzdGl2ZVRleHQgfHwgYTExeUxhYmVsLFxuICAgICAgICBvbkNsaWNrOiBoYW5kbGVDbGljayxcbiAgICAgICAgZGlzYWJsZWQsXG4gICAgICAgICdhcmlhLWRpc2FibGVkJzogZGlzYWJsZWQgfHwgYnVzeSA/IHRydWUgOiB1bmRlZmluZWQsXG4gICAgfTtcblxuICAgIGlmICghdXJsKSB7XG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8YnV0dG9uIHsuLi5wcm9wc30gdHlwZT17c3VibWl0c0Zvcm0gPyAnc3VibWl0JyA6ICdidXR0b24nfT5cbiAgICAgICAgICAgICAgICB7cmVuZGVyQ29udGVudCh7IGNoaWxkcmVuLCBidXN5IH0pfVxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPGFcbiAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgIHsuLi5nZXRFeHRlcm5hbFVybFByb3BzKHVybCwgb3BlbnNJbk5ld1RhYil9XG4gICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgIHJvbGU9XCJidXR0b25cIlxuICAgICAgICAgICAgdGFiSW5kZXg9e2Rpc2FibGVkID8gLTEgOiAwfVxuICAgICAgICAgICAgaHJlZj17dXJsfVxuICAgICAgICAgICAgb25LZXlEb3duPXtoYW5kbGVLZXlQcmVzc31cbiAgICAgICAgPlxuICAgICAgICAgICAge3JlbmRlckNvbnRlbnQoeyBjaGlsZHJlbiwgYnVzeSB9KX1cbiAgICAgICAgPC9hPlxuICAgICk7XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFpQ0EsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO0FBRXhCLE1BQU0sYUFBYSxHQUFjLENBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFO0lBQ2hELE1BQU0saUJBQWlCLEdBQUcsQ0FBQyxHQUFHLFlBQVksQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3pFLE1BQU0sY0FBYyxHQUFHLENBQUMsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNuRSxRQUNJQTtRQUNJQSx1Q0FBTSxTQUFTLEVBQUUsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFHLFFBQVEsQ0FBUTtRQUM5RCxJQUFJLEtBQ0RBLHVDQUFNLFNBQVMsRUFBRSxjQUFjLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztZQUNyQ0EsNkJBQUMsT0FBTyxPQUFHLENBQ1IsQ0FDVixDQUNGLEVBQ0w7QUFDTixDQUFDLENBQUM7TUFFVyxNQUFNLEdBQWMsQ0FBQyxFQUM5QixPQUFPLEdBQUcsc0JBQXNCLEVBQ2hDLElBQUksR0FBRyxtQkFBbUIsRUFDMUIsU0FBUyxFQUNULElBQUksRUFDSixHQUFHLEVBQ0gsYUFBYSxFQUNiLFdBQVcsRUFDWCxTQUFTLEVBQ1QsYUFBYSxFQUNiLE9BQU8sRUFDUCxRQUFRLEVBQ1IsSUFBSSxFQUNKLE9BQU8sRUFDUCxRQUFRLEdBQ1g7SUFDRyxhQUFhLENBQUMsUUFBUSxFQUFFLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNwRixlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7SUFFeEIsTUFBTSxHQUFHLEdBQUcsTUFBTSxDQUFvQixJQUFJLENBQUMsQ0FBQztJQUU1QyxNQUFNLFdBQVcsR0FBRyxDQUFDLEtBQWlCO1FBQ2xDLElBQUksUUFBUSxJQUFJLElBQUksRUFBRTtZQUNsQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7U0FDMUI7UUFDRCxJQUFJLE9BQU8sRUFBRTtZQUNULE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNsQjtLQUNKLENBQUM7SUFFRixNQUFNLGNBQWMsR0FBRyxDQUFDLEtBQW9COztRQUN4QyxNQUFNLEdBQUcsR0FBRyxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDNUMsSUFBSSxHQUFHLEtBQUssR0FBRyxJQUFJLEdBQUcsS0FBSyxPQUFPLEVBQUU7WUFDaEMsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1lBQ3ZCLE1BQUEsR0FBRyxDQUFDLE9BQU8sMENBQUUsS0FBSyxHQUFHO1NBQ3hCO0tBQ0osQ0FBQztJQUVGLE1BQU0sVUFBVSxHQUFHO1FBQ2YsYUFBYSxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUM7UUFDN0IsR0FBRyxZQUFZLENBQUMsTUFBTSxFQUFFLE1BQU0sRUFBRTtZQUM1QixDQUFDLFNBQVMsRUFBRSxPQUFPLENBQUM7WUFDcEIsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDO1lBQ2QsRUFBRSxFQUFFLEVBQUUsQ0FBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRTtZQUM5QixFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsSUFBSSxFQUFFLFlBQVksRUFBRTtZQUNyQyxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRTtTQUNoQyxDQUFDO0tBQ0wsQ0FBQztJQUVGLE1BQU0sS0FBSyxHQUFHO1FBQ1YsR0FBRyxlQUFlLENBQUMsT0FBTyxDQUFDO1FBQzNCLFNBQVMsRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUMvQixZQUFZLEVBQUUsYUFBYSxJQUFJLFNBQVM7UUFDeEMsT0FBTyxFQUFFLFdBQVc7UUFDcEIsUUFBUTtRQUNSLGVBQWUsRUFBRSxRQUFRLElBQUksSUFBSSxHQUFHLElBQUksR0FBRyxTQUFTO0tBQ3ZELENBQUM7SUFFRixJQUFJLENBQUMsR0FBRyxFQUFFO1FBQ04sUUFDSUEseURBQVksS0FBSyxJQUFFLElBQUksRUFBRSxXQUFXLEdBQUcsUUFBUSxHQUFHLFFBQVEsS0FDckQsYUFBYSxDQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxDQUFDLENBQzdCLEVBQ1g7S0FDTDtJQUVELFFBQ0lBLG9EQUNRLEtBQUssRUFDTCxtQkFBbUIsQ0FBQyxHQUFHLEVBQUUsYUFBYSxDQUFDLElBQzNDLEdBQUcsRUFBRSxHQUFHLEVBQ1IsSUFBSSxFQUFDLFFBQVEsRUFDYixRQUFRLEVBQUUsUUFBUSxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsRUFDM0IsSUFBSSxFQUFFLEdBQUcsRUFDVCxTQUFTLEVBQUUsY0FBYyxLQUV4QixhQUFhLENBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FDbEMsRUFDTjtBQUNOOzs7OyJ9
9
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgRkMgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJ1dHRvbkJhc2UsIEJ1dHRvbkJhc2VQcm9wcyB9IGZyb20gJy4uL3ByaXZhdGUvQnV0dG9uQmFzZS9CdXR0b25CYXNlJztcblxuZXhwb3J0IHR5cGUgUHJvcHMgPSBPbWl0PEJ1dHRvbkJhc2VQcm9wcywgJ2lzSWNvbkJ1dHRvbic+O1xuXG5leHBvcnQgY29uc3QgQnV0dG9uOiBGQzxQcm9wcz4gPSBwcm9wcyA9PiB7XG4gICAgcmV0dXJuIDxCdXR0b25CYXNlIHsuLi5wcm9wc30gaXNJY29uQnV0dG9uPXtmYWxzZX0gLz47XG59O1xuIl0sIm5hbWVzIjpbIlJlYWN0Il0sIm1hcHBpbmdzIjoiOzs7TUFNYSxNQUFNLEdBQWMsS0FBSztJQUNsQyxPQUFPQSw2QkFBQyxVQUFVLG9CQUFLLEtBQUssSUFBRSxZQUFZLEVBQUUsS0FBSyxJQUFJLENBQUM7QUFDMUQ7Ozs7In0=
@@ -0,0 +1,9 @@
1
+ import React, { FC, SVGAttributes } from 'react';
2
+ import { ButtonBaseProps } from '../private/ButtonBase/ButtonBase';
3
+ export declare type ReactSVGComponentType = React.ComponentType<SVGAttributes<SVGElement>>;
4
+ export declare type IconButtonProps = Omit<ButtonBaseProps, 'fullWidth' | 'wrap' | 'isIconButton'>;
5
+ export declare type Props = IconButtonProps & {
6
+ assistiveText: string;
7
+ svg: ReactSVGComponentType;
8
+ };
9
+ export declare const IconButton: FC<Props>;
@@ -0,0 +1,19 @@
1
+ import { BUTTON_VARIANT_DEFAULT, BUTTON_SIZE_DEFAULT } from '@preply/ds-core';
2
+ import { useInstrument, useStyleExtract } from '@preply/ds-web-core';
3
+ import React__default from 'react';
4
+ import { ButtonBase } from '../private/ButtonBase/ButtonBase.js';
5
+ import styles from '../private/ButtonBase/style/index.module.less.js';
6
+
7
+ const ICONBUTTON = 'IconButton';
8
+ const IconButton = ({ variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAULT, a11yLabel, svg: Svg, ...props }) => {
9
+ useInstrument('render', {
10
+ component: ICONBUTTON,
11
+ props: { variant, size, a11yLabel },
12
+ });
13
+ useStyleExtract(styles);
14
+ return (React__default.createElement(ButtonBase, Object.assign({}, props, { isIconButton: true, variant: variant, size: size, a11yLabel: a11yLabel }),
15
+ React__default.createElement(Svg, { "aria-hidden": "true", focusable: "false" })));
16
+ };
17
+
18
+ export { IconButton };
19
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSWNvbkJ1dHRvbi5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCVVRUT05fU0laRV9ERUZBVUxULCBCVVRUT05fVkFSSUFOVF9ERUZBVUxUIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7IHVzZUluc3RydW1lbnQsIHVzZVN0eWxlRXh0cmFjdCB9IGZyb20gJ0BwcmVwbHkvZHMtd2ViLWNvcmUnO1xuaW1wb3J0IFJlYWN0LCB7IEZDLCBTVkdBdHRyaWJ1dGVzIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBCdXR0b25CYXNlLCBCdXR0b25CYXNlUHJvcHMgfSBmcm9tICcuLi9wcml2YXRlL0J1dHRvbkJhc2UvQnV0dG9uQmFzZSc7XG5pbXBvcnQgc3R5bGVzIGZyb20gJy4uL3ByaXZhdGUvQnV0dG9uQmFzZS9zdHlsZS9pbmRleC5tb2R1bGUubGVzcyc7XG5cbmV4cG9ydCB0eXBlIFJlYWN0U1ZHQ29tcG9uZW50VHlwZSA9IFJlYWN0LkNvbXBvbmVudFR5cGU8U1ZHQXR0cmlidXRlczxTVkdFbGVtZW50Pj47XG5cbmNvbnN0IElDT05CVVRUT04gPSAnSWNvbkJ1dHRvbic7XG5cbmV4cG9ydCB0eXBlIEljb25CdXR0b25Qcm9wcyA9IE9taXQ8QnV0dG9uQmFzZVByb3BzLCAnZnVsbFdpZHRoJyB8ICd3cmFwJyB8ICdpc0ljb25CdXR0b24nPjtcblxuZXhwb3J0IHR5cGUgUHJvcHMgPSBJY29uQnV0dG9uUHJvcHMgJiB7XG4gICAgYXNzaXN0aXZlVGV4dDogc3RyaW5nO1xuICAgIHN2ZzogUmVhY3RTVkdDb21wb25lbnRUeXBlO1xufTtcblxuZXhwb3J0IGNvbnN0IEljb25CdXR0b246IEZDPFByb3BzPiA9ICh7XG4gICAgdmFyaWFudCA9IEJVVFRPTl9WQVJJQU5UX0RFRkFVTFQsXG4gICAgc2l6ZSA9IEJVVFRPTl9TSVpFX0RFRkFVTFQsXG4gICAgYTExeUxhYmVsLFxuICAgIHN2ZzogU3ZnLFxuICAgIC4uLnByb3BzXG59KSA9PiB7XG4gICAgdXNlSW5zdHJ1bWVudCgncmVuZGVyJywge1xuICAgICAgICBjb21wb25lbnQ6IElDT05CVVRUT04sXG4gICAgICAgIHByb3BzOiB7IHZhcmlhbnQsIHNpemUsIGExMXlMYWJlbCB9LFxuICAgIH0pO1xuICAgIHVzZVN0eWxlRXh0cmFjdChzdHlsZXMpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEJ1dHRvbkJhc2Ugey4uLnByb3BzfSBpc0ljb25CdXR0b24gdmFyaWFudD17dmFyaWFudH0gc2l6ZT17c2l6ZX0gYTExeUxhYmVsPXthMTF5TGFiZWx9PlxuICAgICAgICAgICAgPFN2ZyBhcmlhLWhpZGRlbj1cInRydWVcIiBmb2N1c2FibGU9XCJmYWxzZVwiIC8+XG4gICAgICAgIDwvQnV0dG9uQmFzZT5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBU0EsTUFBTSxVQUFVLEdBQUcsWUFBWSxDQUFDO01BU25CLFVBQVUsR0FBYyxDQUFDLEVBQ2xDLE9BQU8sR0FBRyxzQkFBc0IsRUFDaEMsSUFBSSxHQUFHLG1CQUFtQixFQUMxQixTQUFTLEVBQ1QsR0FBRyxFQUFFLEdBQUcsRUFDUixHQUFHLEtBQUssRUFDWDtJQUNHLGFBQWEsQ0FBQyxRQUFRLEVBQUU7UUFDcEIsU0FBUyxFQUFFLFVBQVU7UUFDckIsS0FBSyxFQUFFLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUU7S0FDdEMsQ0FBQyxDQUFDO0lBQ0gsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLFFBQ0lBLDZCQUFDLFVBQVUsb0JBQUssS0FBSyxJQUFFLFlBQVksUUFBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLFNBQVM7UUFDbEZBLDZCQUFDLEdBQUcsbUJBQWEsTUFBTSxFQUFDLFNBQVMsRUFBQyxPQUFPLEdBQUcsQ0FDbkMsRUFDZjtBQUNOOzs7OyJ9
@@ -0,0 +1,19 @@
1
+ import type { ButtonSize, ButtonVariant, Dataset } from '@preply/ds-core';
2
+ import { FC, MouseEvent } from 'react';
3
+ export interface ButtonBaseProps {
4
+ variant?: ButtonVariant;
5
+ size?: ButtonSize;
6
+ fullWidth?: boolean;
7
+ wrap?: boolean;
8
+ url?: string;
9
+ opensInNewTab?: boolean;
10
+ submitsForm?: boolean;
11
+ a11yLabel?: string;
12
+ assistiveText?: string;
13
+ onClick?: (event: MouseEvent) => void;
14
+ disabled?: boolean;
15
+ busy?: boolean;
16
+ dataset?: Dataset;
17
+ isIconButton: boolean;
18
+ }
19
+ export declare const ButtonBase: FC<ButtonBaseProps>;
@@ -0,0 +1,64 @@
1
+ import { BUTTON_VARIANT_DEFAULT, BUTTON_SIZE_DEFAULT } from '@preply/ds-core';
2
+ import { useStyleExtract, safeClassName, localClasses, getDatasetProps, getExternalUrlProps, mapEdgeKeyToStandard } from '@preply/ds-web-core';
3
+ import React__default, { useRef } from 'react';
4
+ import { Spinner } from '../../Spinner/Spinner.js';
5
+ import styles from './style/index.module.less.js';
6
+
7
+ const BUTTON_BASE = 'ButtonBase';
8
+ const renderContent = ({ children, busy }) => {
9
+ const contentClassNames = [...localClasses(styles, BUTTON_BASE, ['content'])];
10
+ const busyClassNames = [...localClasses(styles, BUTTON_BASE, ['busy'])];
11
+ return (React__default.createElement(React__default.Fragment, null,
12
+ React__default.createElement("span", { className: contentClassNames.join(' ') }, children),
13
+ busy && (React__default.createElement("span", { className: busyClassNames.join(' ') },
14
+ React__default.createElement(Spinner, null)))));
15
+ };
16
+ const ButtonBase = ({ variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAULT, fullWidth, wrap, url, opensInNewTab, submitsForm, a11yLabel, assistiveText, onClick, disabled, busy, dataset, isIconButton, children, }) => {
17
+ useStyleExtract(styles);
18
+ const ref = useRef(null);
19
+ const handleClick = (event) => {
20
+ if (disabled || busy) {
21
+ event.preventDefault();
22
+ }
23
+ if (onClick) {
24
+ onClick(event);
25
+ }
26
+ };
27
+ const handleKeyPress = (event) => {
28
+ var _a;
29
+ const key = mapEdgeKeyToStandard(event.key);
30
+ if (key === ' ' || key === 'Enter') {
31
+ event.preventDefault();
32
+ (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
33
+ }
34
+ };
35
+ const classNames = [
36
+ safeClassName(styles, BUTTON_BASE),
37
+ ...localClasses(styles, BUTTON_BASE, [
38
+ ['variant', variant],
39
+ ['size', size],
40
+ { if: !wrap, then: 'no-wrap' },
41
+ { if: fullWidth, then: 'width-full' },
42
+ { if: busy, then: 'is-busy' },
43
+ { if: isIconButton, then: 'is-icon-button' },
44
+ ]),
45
+ ];
46
+ const title = isIconButton ? assistiveText || a11yLabel : undefined;
47
+ const ariaLabel = !isIconButton ? assistiveText || a11yLabel : undefined;
48
+ const props = {
49
+ ...getDatasetProps(dataset),
50
+ className: classNames.join(' '),
51
+ title,
52
+ 'aria-label': ariaLabel,
53
+ onClick: handleClick,
54
+ disabled,
55
+ 'aria-disabled': disabled || busy ? true : undefined,
56
+ };
57
+ if (url) {
58
+ return (React__default.createElement("a", Object.assign({}, props, getExternalUrlProps(url, opensInNewTab), { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, href: url, onKeyDown: handleKeyPress }), renderContent({ children, busy, isIconButton })));
59
+ }
60
+ return (React__default.createElement("button", Object.assign({}, props, { type: submitsForm ? 'submit' : 'button' }), renderContent({ children, busy, isIconButton })));
61
+ };
62
+
63
+ export { ButtonBase };
64
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uQmFzZS5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJpdmF0ZS9CdXR0b25CYXNlL0J1dHRvbkJhc2UudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgQnV0dG9uU2l6ZSwgQnV0dG9uVmFyaWFudCwgRGF0YXNldCB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQgeyBCVVRUT05fU0laRV9ERUZBVUxULCBCVVRUT05fVkFSSUFOVF9ERUZBVUxUIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7XG4gICAgZ2V0RGF0YXNldFByb3BzLFxuICAgIGdldEV4dGVybmFsVXJsUHJvcHMsXG4gICAgbG9jYWxDbGFzc2VzLFxuICAgIG1hcEVkZ2VLZXlUb1N0YW5kYXJkLFxuICAgIHNhZmVDbGFzc05hbWUsXG4gICAgdXNlU3R5bGVFeHRyYWN0LFxufSBmcm9tICdAcHJlcGx5L2RzLXdlYi1jb3JlJztcbmltcG9ydCBSZWFjdCwgeyBGQywgS2V5Ym9hcmRFdmVudCwgTW91c2VFdmVudCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnO1xuXG5pbXBvcnQgeyBTcGlubmVyIH0gZnJvbSAnLi4vLi4vU3Bpbm5lci9TcGlubmVyJztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuZXhwb3J0IGludGVyZmFjZSBCdXR0b25CYXNlUHJvcHMge1xuICAgIHZhcmlhbnQ/OiBCdXR0b25WYXJpYW50O1xuICAgIHNpemU/OiBCdXR0b25TaXplO1xuICAgIGZ1bGxXaWR0aD86IGJvb2xlYW47XG4gICAgd3JhcD86IGJvb2xlYW47XG4gICAgdXJsPzogc3RyaW5nO1xuICAgIG9wZW5zSW5OZXdUYWI/OiBib29sZWFuO1xuICAgIHN1Ym1pdHNGb3JtPzogYm9vbGVhbjtcbiAgICBhMTF5TGFiZWw/OiBzdHJpbmc7XG4gICAgYXNzaXN0aXZlVGV4dD86IHN0cmluZztcbiAgICBvbkNsaWNrPzogKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB2b2lkO1xuICAgIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgICBidXN5PzogYm9vbGVhbjtcbiAgICBkYXRhc2V0PzogRGF0YXNldDtcbiAgICBpc0ljb25CdXR0b246IGJvb2xlYW47XG59XG5cbmNvbnN0IEJVVFRPTl9CQVNFID0gJ0J1dHRvbkJhc2UnO1xuXG5jb25zdCByZW5kZXJDb250ZW50OiBGQzxCdXR0b25CYXNlUHJvcHM+ID0gKHsgY2hpbGRyZW4sIGJ1c3kgfSkgPT4ge1xuICAgIGNvbnN0IGNvbnRlbnRDbGFzc05hbWVzID0gWy4uLmxvY2FsQ2xhc3NlcyhzdHlsZXMsIEJVVFRPTl9CQVNFLCBbJ2NvbnRlbnQnXSldO1xuICAgIGNvbnN0IGJ1c3lDbGFzc05hbWVzID0gWy4uLmxvY2FsQ2xhc3NlcyhzdHlsZXMsIEJVVFRPTl9CQVNFLCBbJ2J1c3knXSldO1xuICAgIHJldHVybiAoXG4gICAgICAgIDw+XG4gICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9e2NvbnRlbnRDbGFzc05hbWVzLmpvaW4oJyAnKX0+e2NoaWxkcmVufTwvc3Bhbj5cbiAgICAgICAgICAgIHtidXN5ICYmIChcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9e2J1c3lDbGFzc05hbWVzLmpvaW4oJyAnKX0+XG4gICAgICAgICAgICAgICAgICAgIDxTcGlubmVyIC8+XG4gICAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgPC8+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBCdXR0b25CYXNlOiBGQzxCdXR0b25CYXNlUHJvcHM+ID0gKHtcbiAgICB2YXJpYW50ID0gQlVUVE9OX1ZBUklBTlRfREVGQVVMVCxcbiAgICBzaXplID0gQlVUVE9OX1NJWkVfREVGQVVMVCxcbiAgICBmdWxsV2lkdGgsXG4gICAgd3JhcCxcbiAgICB1cmwsXG4gICAgb3BlbnNJbk5ld1RhYixcbiAgICBzdWJtaXRzRm9ybSxcbiAgICBhMTF5TGFiZWwsXG4gICAgYXNzaXN0aXZlVGV4dCxcbiAgICBvbkNsaWNrLFxuICAgIGRpc2FibGVkLFxuICAgIGJ1c3ksXG4gICAgZGF0YXNldCxcbiAgICBpc0ljb25CdXR0b24sXG4gICAgY2hpbGRyZW4sXG59KSA9PiB7XG4gICAgdXNlU3R5bGVFeHRyYWN0KHN0eWxlcyk7XG5cbiAgICBjb25zdCByZWYgPSB1c2VSZWY8SFRNTEFuY2hvckVsZW1lbnQ+KG51bGwpO1xuXG4gICAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICAgICAgaWYgKGRpc2FibGVkIHx8IGJ1c3kpIHtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKG9uQ2xpY2spIHtcbiAgICAgICAgICAgIG9uQ2xpY2soZXZlbnQpO1xuICAgICAgICB9XG4gICAgfTtcblxuICAgIGNvbnN0IGhhbmRsZUtleVByZXNzID0gKGV2ZW50OiBLZXlib2FyZEV2ZW50KSA9PiB7XG4gICAgICAgIGNvbnN0IGtleSA9IG1hcEVkZ2VLZXlUb1N0YW5kYXJkKGV2ZW50LmtleSk7XG4gICAgICAgIGlmIChrZXkgPT09ICcgJyB8fCBrZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICByZWYuY3VycmVudD8uY2xpY2soKTtcbiAgICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBjbGFzc05hbWVzID0gW1xuICAgICAgICBzYWZlQ2xhc3NOYW1lKHN0eWxlcywgQlVUVE9OX0JBU0UpLFxuICAgICAgICAuLi5sb2NhbENsYXNzZXMoc3R5bGVzLCBCVVRUT05fQkFTRSwgW1xuICAgICAgICAgICAgWyd2YXJpYW50JywgdmFyaWFudF0sXG4gICAgICAgICAgICBbJ3NpemUnLCBzaXplXSxcbiAgICAgICAgICAgIHsgaWY6ICF3cmFwLCB0aGVuOiAnbm8td3JhcCcgfSxcbiAgICAgICAgICAgIHsgaWY6IGZ1bGxXaWR0aCwgdGhlbjogJ3dpZHRoLWZ1bGwnIH0sXG4gICAgICAgICAgICB7IGlmOiBidXN5LCB0aGVuOiAnaXMtYnVzeScgfSxcbiAgICAgICAgICAgIHsgaWY6IGlzSWNvbkJ1dHRvbiwgdGhlbjogJ2lzLWljb24tYnV0dG9uJyB9LFxuICAgICAgICBdKSxcbiAgICBdO1xuXG4gICAgY29uc3QgdGl0bGUgPSBpc0ljb25CdXR0b24gPyBhc3Npc3RpdmVUZXh0IHx8IGExMXlMYWJlbCA6IHVuZGVmaW5lZDtcbiAgICBjb25zdCBhcmlhTGFiZWwgPSAhaXNJY29uQnV0dG9uID8gYXNzaXN0aXZlVGV4dCB8fCBhMTF5TGFiZWwgOiB1bmRlZmluZWQ7XG5cbiAgICBjb25zdCBwcm9wcyA9IHtcbiAgICAgICAgLi4uZ2V0RGF0YXNldFByb3BzKGRhdGFzZXQpLFxuICAgICAgICBjbGFzc05hbWU6IGNsYXNzTmFtZXMuam9pbignICcpLFxuICAgICAgICB0aXRsZSxcbiAgICAgICAgJ2FyaWEtbGFiZWwnOiBhcmlhTGFiZWwsXG4gICAgICAgIG9uQ2xpY2s6IGhhbmRsZUNsaWNrLFxuICAgICAgICBkaXNhYmxlZCxcbiAgICAgICAgJ2FyaWEtZGlzYWJsZWQnOiBkaXNhYmxlZCB8fCBidXN5ID8gdHJ1ZSA6IHVuZGVmaW5lZCxcbiAgICB9O1xuXG4gICAgaWYgKHVybCkge1xuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgPGFcbiAgICAgICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgICAgICAgey4uLmdldEV4dGVybmFsVXJsUHJvcHModXJsLCBvcGVuc0luTmV3VGFiKX1cbiAgICAgICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgICAgICByb2xlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICB0YWJJbmRleD17ZGlzYWJsZWQgPyAtMSA6IDB9XG4gICAgICAgICAgICAgICAgaHJlZj17dXJsfVxuICAgICAgICAgICAgICAgIG9uS2V5RG93bj17aGFuZGxlS2V5UHJlc3N9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3JlbmRlckNvbnRlbnQoeyBjaGlsZHJlbiwgYnVzeSwgaXNJY29uQnV0dG9uIH0pfVxuICAgICAgICAgICAgPC9hPlxuICAgICAgICApO1xuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICAgIDxidXR0b24gey4uLnByb3BzfSB0eXBlPXtzdWJtaXRzRm9ybSA/ICdzdWJtaXQnIDogJ2J1dHRvbid9PlxuICAgICAgICAgICAge3JlbmRlckNvbnRlbnQoeyBjaGlsZHJlbiwgYnVzeSwgaXNJY29uQnV0dG9uIH0pfVxuICAgICAgICA8L2J1dHRvbj5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBaUNBLE1BQU0sV0FBVyxHQUFHLFlBQVksQ0FBQztBQUVqQyxNQUFNLGFBQWEsR0FBd0IsQ0FBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7SUFDMUQsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLEdBQUcsWUFBWSxDQUFDLE1BQU0sRUFBRSxXQUFXLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDOUUsTUFBTSxjQUFjLEdBQUcsQ0FBQyxHQUFHLFlBQVksQ0FBQyxNQUFNLEVBQUUsV0FBVyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3hFLFFBQ0lBO1FBQ0lBLHVDQUFNLFNBQVMsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUcsUUFBUSxDQUFRO1FBQzlELElBQUksS0FDREEsdUNBQU0sU0FBUyxFQUFFLGNBQWMsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO1lBQ3JDQSw2QkFBQyxPQUFPLE9BQUcsQ0FDUixDQUNWLENBQ0YsRUFDTDtBQUNOLENBQUMsQ0FBQztNQUVXLFVBQVUsR0FBd0IsQ0FBQyxFQUM1QyxPQUFPLEdBQUcsc0JBQXNCLEVBQ2hDLElBQUksR0FBRyxtQkFBbUIsRUFDMUIsU0FBUyxFQUNULElBQUksRUFDSixHQUFHLEVBQ0gsYUFBYSxFQUNiLFdBQVcsRUFDWCxTQUFTLEVBQ1QsYUFBYSxFQUNiLE9BQU8sRUFDUCxRQUFRLEVBQ1IsSUFBSSxFQUNKLE9BQU8sRUFDUCxZQUFZLEVBQ1osUUFBUSxHQUNYO0lBQ0csZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBRXhCLE1BQU0sR0FBRyxHQUFHLE1BQU0sQ0FBb0IsSUFBSSxDQUFDLENBQUM7SUFFNUMsTUFBTSxXQUFXLEdBQUcsQ0FBQyxLQUFpQjtRQUNsQyxJQUFJLFFBQVEsSUFBSSxJQUFJLEVBQUU7WUFDbEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1NBQzFCO1FBQ0QsSUFBSSxPQUFPLEVBQUU7WUFDVCxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbEI7S0FDSixDQUFDO0lBRUYsTUFBTSxjQUFjLEdBQUcsQ0FBQyxLQUFvQjs7UUFDeEMsTUFBTSxHQUFHLEdBQUcsb0JBQW9CLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQzVDLElBQUksR0FBRyxLQUFLLEdBQUcsSUFBSSxHQUFHLEtBQUssT0FBTyxFQUFFO1lBQ2hDLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixNQUFBLEdBQUcsQ0FBQyxPQUFPLDBDQUFFLEtBQUssR0FBRztTQUN4QjtLQUNKLENBQUM7SUFFRixNQUFNLFVBQVUsR0FBRztRQUNmLGFBQWEsQ0FBQyxNQUFNLEVBQUUsV0FBVyxDQUFDO1FBQ2xDLEdBQUcsWUFBWSxDQUFDLE1BQU0sRUFBRSxXQUFXLEVBQUU7WUFDakMsQ0FBQyxTQUFTLEVBQUUsT0FBTyxDQUFDO1lBQ3BCLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQztZQUNkLEVBQUUsRUFBRSxFQUFFLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUU7WUFDOUIsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxZQUFZLEVBQUU7WUFDckMsRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUU7WUFDN0IsRUFBRSxFQUFFLEVBQUUsWUFBWSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRTtTQUMvQyxDQUFDO0tBQ0wsQ0FBQztJQUVGLE1BQU0sS0FBSyxHQUFHLFlBQVksR0FBRyxhQUFhLElBQUksU0FBUyxHQUFHLFNBQVMsQ0FBQztJQUNwRSxNQUFNLFNBQVMsR0FBRyxDQUFDLFlBQVksR0FBRyxhQUFhLElBQUksU0FBUyxHQUFHLFNBQVMsQ0FBQztJQUV6RSxNQUFNLEtBQUssR0FBRztRQUNWLEdBQUcsZUFBZSxDQUFDLE9BQU8sQ0FBQztRQUMzQixTQUFTLEVBQUUsVUFBVSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7UUFDL0IsS0FBSztRQUNMLFlBQVksRUFBRSxTQUFTO1FBQ3ZCLE9BQU8sRUFBRSxXQUFXO1FBQ3BCLFFBQVE7UUFDUixlQUFlLEVBQUUsUUFBUSxJQUFJLElBQUksR0FBRyxJQUFJLEdBQUcsU0FBUztLQUN2RCxDQUFDO0lBRUYsSUFBSSxHQUFHLEVBQUU7UUFDTCxRQUNJQSxvREFDUSxLQUFLLEVBQ0wsbUJBQW1CLENBQUMsR0FBRyxFQUFFLGFBQWEsQ0FBQyxJQUMzQyxHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBQyxRQUFRLEVBQ2IsUUFBUSxFQUFFLFFBQVEsR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDLEVBQzNCLElBQUksRUFBRSxHQUFHLEVBQ1QsU0FBUyxFQUFFLGNBQWMsS0FFeEIsYUFBYSxDQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxZQUFZLEVBQUUsQ0FBQyxDQUNoRCxFQUNOO0tBQ0w7SUFFRCxRQUNJQSx5REFBWSxLQUFLLElBQUUsSUFBSSxFQUFFLFdBQVcsR0FBRyxRQUFRLEdBQUcsUUFBUSxLQUNyRCxhQUFhLENBQUMsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLFlBQVksRUFBRSxDQUFDLENBQzNDLEVBQ1g7QUFDTjs7OzsifQ==
@@ -1,11 +1,12 @@
1
1
  @import '@preply/ds-web-core/dist/typography/style/mixins.less';
2
+ @import '@preply/ds-web-core/dist/actions/style/action.mixins.less';
2
3
  @import './mixins.less';
3
4
 
4
- .Button {
5
+ .ButtonBase {
5
6
  .type-base();
6
7
  .button-base();
7
- .button-sizes();
8
- .button-variants();
8
+ .action-sizes();
9
+ .action-variants();
9
10
 
10
11
  &--width-full {
11
12
  width: 100%;
@@ -0,0 +1,9 @@
1
+ import styleInject from '../../../../external/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = "._31l8bu{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background-color:transparent;border:1px solid transparent;border-radius:var(--8d513);color:var(--aface);cursor:pointer;font-family:var(--0e309);font-size:var(--8d63e);font-weight:var(--6e979);line-height:var(--d4313);position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}._1Mv9ye,._31l8bu{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}._1Mv9ye{grid-gap:var(--0aee7);gap:var(--0aee7);vertical-align:baseline}._3B1mWU ._1Mv9ye svg{height:var(--f02c4);width:var(--f02c4)}._3B1mWU ._1Mv9ye svg path{fill:currentColor}.dDiXSd{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}._31l8bu[disabled]{background-color:var(--04dae);border-color:var(--e0528);color:var(--a8b89);cursor:default;pointer-events:none}._31l8bu._1FbZSm{outline-color:var(--603ec);outline-offset:var(--c0b12);outline-style:solid;outline-width:var(--99d31)}._31l8bu:focus-visible{outline-color:var(--603ec);outline-offset:var(--c0b12);outline-style:solid;outline-width:var(--99d31)}._1S4uD4{cursor:default;pointer-events:none}._1S4uD4 ._1Mv9ye{visibility:hidden}._2UUzTb{font-size:var(--357dd);min-height:var(--50cc6);padding:var(--fec17) var(--29b03)}._3B1mWU._2UUzTb{height:var(--50cc6);padding:0;width:var(--50cc6)}.f5AXpU{font-size:var(--b47a6);min-height:var(--2f2e0);padding:var(--9a573) var(--65766)}._3B1mWU.f5AXpU{height:var(--2f2e0);padding:0;width:var(--2f2e0)}._1jI8S4{font-size:var(--89a35);min-height:var(--bcfcb);padding:var(--3b902) var(--0f2d7)}._3B1mWU._1jI8S4{height:var(--bcfcb);padding:0;width:var(--bcfcb)}._3MD2lP{font-size:var(--a899b);min-height:var(--26156);padding:var(--303c6) var(--b1c76)}._3B1mWU._3MD2lP{height:var(--26156);padding:0;width:var(--26156)}._33xIkb{font-size:var(--f7be0);min-height:var(--d6bfc);padding:var(--da188) var(--88eef)}._3B1mWU._33xIkb{height:var(--d6bfc);padding:0;width:var(--d6bfc)}._hzLAU{background-color:var(--508b3);border-color:var(--44bfe);color:var(--d2baa)}._hzLAU:hover{background-color:var(--902b5);color:var(--df615)}._hzLAU:active{background-color:var(--c1c1c);color:var(--15cee)}.wj4gqc{background-color:var(--e5616);border-color:var(--ab736);color:var(--1614c)}.wj4gqc:hover{background-color:var(--0d124);color:var(--0d6ae)}.wj4gqc:active{background-color:var(--33b43);color:var(--22cb4)}._3xhNOP{background-color:var(--28f3c);border-color:var(--10556);color:var(--93754)}._3xhNOP:hover{background-color:var(--ec17b);color:var(--175a7)}._3xhNOP:active{background-color:var(--b0bf5);color:var(--8274e)}._3A21nR{background-color:var(--e4644);border-color:var(--0e9e0);color:var(--9cf6e)}._3A21nR:hover{background-color:var(--afc17);color:var(--6609c)}._3A21nR:active{background-color:var(--2ee55);color:var(--e9f22)}._2ssLbd{background-color:var(--bbb35);border-color:var(--0cad8);color:var(--122a9)}._2ssLbd:hover{background-color:var(--df2ac);color:var(--1265d)}._2ssLbd:active{background-color:var(--435fa);color:var(--a4162)}._2Uo_yl{background-color:var(--118bd);border-color:var(--ab597);color:var(--efde5)}._2Uo_yl:hover{background-color:var(--e0b0f);color:var(--6f5d5)}._2Uo_yl:active{background-color:var(--a5eaa);color:var(--6b4e9)}.WxNTfY{width:100%}._1rbWLs{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";
4
+ var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/private/ButtonBase/style/index.module.less",__css:css_248z,"ButtonBase":"_31l8bu","ButtonBase--content":"_1Mv9ye","ButtonBase--is-icon-button":"_3B1mWU","ButtonBase--busy":"dDiXSd","focus-visible":"_1FbZSm","ButtonBase--is-busy":"_1S4uD4","ButtonBase--size-xs":"_2UUzTb","ButtonBase--size-s":"f5AXpU","ButtonBase--size-m":"_1jI8S4","ButtonBase--size-l":"_3MD2lP","ButtonBase--size-xl":"_33xIkb","ButtonBase--variant-primary":"_hzLAU","ButtonBase--variant-secondary":"wj4gqc","ButtonBase--variant-tertiary":"_3xhNOP","ButtonBase--variant-quaternary":"_3A21nR","ButtonBase--variant-plain":"_2ssLbd","ButtonBase--variant-dangerous":"_2Uo_yl","ButtonBase--width-full":"WxNTfY","ButtonBase--no-wrap":"_1rbWLs"};
5
+ var stylesheet=css_248z;
6
+ styleInject(css_248z);
7
+
8
+ export { styles as default, stylesheet };
9
+
@@ -27,6 +27,15 @@
27
27
  vertical-align: baseline;
28
28
  }
29
29
 
30
+ &--is-icon-button &--content svg {
31
+ width: @root-size-300;
32
+ height: @root-size-300;
33
+
34
+ path {
35
+ fill: currentColor;
36
+ }
37
+ }
38
+
30
39
  &--busy {
31
40
  position: absolute;
32
41
  top: 0;
@@ -56,44 +65,9 @@
56
65
  &--is-busy {
57
66
  cursor: default;
58
67
  pointer-events: none;
59
-
60
- .Button--content {
61
- visibility: hidden;
62
- }
63
68
  }
64
- }
65
69
 
66
- .button-sizes() {
67
- each(@BUTTON_SIZE_OPTIONS, {
68
- &--size-@{value} {
69
- @token: 'size-@{value}';
70
- .min-height('action', @token);
71
- .verticalAndHorizontalPadding('action', @token);
72
- .font-size('action', @token);
73
- }
74
- });
75
- }
76
-
77
- .button-variants() {
78
- each(@BUTTON_VARIANT_OPTIONS, #(@variant) {
79
- &--variant-@{variant} {
80
- @token: 'variant-@{variant}';
81
-
82
- .color('action', @token);
83
- .bg-color('action', @token);
84
- .border-color('action', @token);
85
-
86
- &:hover {
87
- @token: 'variant-@{variant}-hover';
88
- .color('action', @token);
89
- .bg-color('action', @token);
90
- }
91
-
92
- &:active {
93
- @token: 'variant-@{variant}-active';
94
- .color('action', @token);
95
- .bg-color('action', @token);
96
- }
97
- }
98
- });
70
+ &--is-busy &--content {
71
+ visibility: hidden;
72
+ }
99
73
  }
@@ -1,8 +1,8 @@
1
- import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
1
+ import styleInject from '../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
3
  var css_248z = "";
4
4
  var stylesheet="";
5
5
  styleInject(css_248z);
6
6
 
7
7
  export { css_248z as default, stylesheet };
8
- //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9
8
+ //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3QiwyREFBK0Q7QUFDdkY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@preply/ds-web-lib",
3
- "version": "0.25.0",
3
+ "version": "0.26.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -19,25 +19,25 @@
19
19
  "dev": "run build:rollup -w"
20
20
  },
21
21
  "dependencies": {
22
- "@preply/ds-core": "0.25.0",
23
- "@preply/ds-media-icons": "0.25.0",
24
- "@preply/ds-web-core": "0.25.0",
25
- "@preply/ds-web-root": "0.25.0"
22
+ "@preply/ds-core": "0.26.0",
23
+ "@preply/ds-media-icons": "0.26.0",
24
+ "@preply/ds-web-core": "0.26.0",
25
+ "@preply/ds-web-root": "0.26.0"
26
26
  },
27
27
  "peerDependencies": {
28
- "@preply/ds-core": "0.25.0",
29
- "@preply/ds-media-icons": "0.25.0",
30
- "@preply/ds-web-core": "0.25.0",
31
- "@preply/ds-web-root": "0.25.0",
28
+ "@preply/ds-core": "0.26.0",
29
+ "@preply/ds-media-icons": "0.26.0",
30
+ "@preply/ds-web-core": "0.26.0",
31
+ "@preply/ds-web-root": "0.26.0",
32
32
  "react": "^16.8.3",
33
33
  "react-dom": "^16.8.3"
34
34
  },
35
35
  "devDependencies": {
36
- "@preply/ds-docs-toolkit": "0.25.0",
37
- "@preply/ds-theme-base-ui": "0.25.0",
36
+ "@preply/ds-docs-toolkit": "0.26.0",
37
+ "@preply/ds-theme-base-ui": "0.26.0",
38
38
  "@storybook/addon-docs": "6.4.18",
39
39
  "@storybook/react": "6.4.18",
40
40
  "@testing-library/react": "11.2.7"
41
41
  },
42
- "gitHead": "057c4b0b235d206ee7b08aef99e3c32933320ca6"
42
+ "gitHead": "58f5c6795b17348097f54abfef49d7fdae81ee62"
43
43
  }
@@ -1,9 +0,0 @@
1
- import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
2
-
3
- var css_248z = "._2K2A6a{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background-color:transparent;border:1px solid transparent;border-radius:var(--8d513);color:var(--aface);cursor:pointer;font-family:var(--0e309);font-size:var(--8d63e);font-weight:var(--6e979);line-height:var(--d4313);position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}._1Wa9oz,._2K2A6a{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}._1Wa9oz{grid-gap:var(--0aee7);gap:var(--0aee7);vertical-align:baseline}._15fNhn{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}._2K2A6a[disabled]{background-color:var(--04dae);border-color:var(--e0528);color:var(--a8b89);cursor:default;pointer-events:none}._2K2A6a._2l4V5u{outline-color:var(--603ec);outline-offset:var(--c0b12);outline-style:solid;outline-width:var(--99d31)}._2K2A6a:focus-visible{outline-color:var(--603ec);outline-offset:var(--c0b12);outline-style:solid;outline-width:var(--99d31)}._2vrhF4{cursor:default;pointer-events:none}._2vrhF4 ._1Wa9oz{visibility:hidden}._2cFsf0{font-size:var(--357dd);min-height:var(--50cc6);padding:var(--fec17) var(--29b03)}.sMUHXO{font-size:var(--b47a6);min-height:var(--2f2e0);padding:var(--9a573) var(--65766)}._25alve{font-size:var(--89a35);min-height:var(--bcfcb);padding:var(--3b902) var(--0f2d7)}._3SuAaY{font-size:var(--a899b);min-height:var(--26156);padding:var(--303c6) var(--b1c76)}._2-lhss{font-size:var(--f7be0);min-height:var(--d6bfc);padding:var(--da188) var(--88eef)}._2oPEsT{background-color:var(--508b3);border-color:var(--44bfe);color:var(--d2baa)}._2oPEsT:hover{background-color:var(--902b5);color:var(--df615)}._2oPEsT:active{background-color:var(--c1c1c);color:var(--15cee)}.M4_8bJ{background-color:var(--e5616);border-color:var(--ab736);color:var(--1614c)}.M4_8bJ:hover{background-color:var(--0d124);color:var(--0d6ae)}.M4_8bJ:active{background-color:var(--33b43);color:var(--22cb4)}._3pHOqs{background-color:var(--28f3c);border-color:var(--10556);color:var(--93754)}._3pHOqs:hover{background-color:var(--ec17b);color:var(--175a7)}._3pHOqs:active{background-color:var(--b0bf5);color:var(--8274e)}._2wKHX3{background-color:var(--e4644);border-color:var(--0e9e0);color:var(--9cf6e)}._2wKHX3:hover{background-color:var(--afc17);color:var(--6609c)}._2wKHX3:active{background-color:var(--2ee55);color:var(--e9f22)}._2MKEet{background-color:var(--bbb35);border-color:var(--0cad8);color:var(--122a9)}._2MKEet:hover{background-color:var(--df2ac);color:var(--1265d)}._2MKEet:active{background-color:var(--435fa);color:var(--a4162)}._3efdqm{background-color:var(--118bd);border-color:var(--ab597);color:var(--efde5)}._3efdqm:hover{background-color:var(--e0b0f);color:var(--6f5d5)}._3efdqm:active{background-color:var(--a5eaa);color:var(--6b4e9)}._31304r{width:100%}._18Yfzb{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}";
4
- var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Button/style/index.module.less",__css:css_248z,"Button":"_2K2A6a","Button--content":"_1Wa9oz","Button--busy":"_15fNhn","focus-visible":"_2l4V5u","Button--is-busy":"_2vrhF4","Button--size-xs":"_2cFsf0","Button--size-s":"sMUHXO","Button--size-m":"_25alve","Button--size-l":"_3SuAaY","Button--size-xl":"_2-lhss","Button--variant-primary":"_2oPEsT","Button--variant-secondary":"M4_8bJ","Button--variant-tertiary":"_3pHOqs","Button--variant-quaternary":"_2wKHX3","Button--variant-plain":"_2MKEet","Button--variant-dangerous":"_3efdqm","Button--width-full":"_31304r","Button--no-wrap":"_18Yfzb"};
5
- var stylesheet=css_248z;
6
- styleInject(css_248z);
7
-
8
- export { styles as default, stylesheet };
9
-