@preply/ds-web-lib 0.73.0 → 0.74.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/components/Button/Button.d.ts +10 -1
- package/dist/components/Button/Button.js +11 -4
- package/dist/components/Button/style/index.module.less +7 -0
- package/dist/components/Button/style/index.module.less.js +9 -0
- package/dist/components/Button/style/mixins.less +23 -0
- package/dist/components/Button/style/mixins.less.js +8 -0
- package/package.json +12 -12
|
@@ -1,4 +1,13 @@
|
|
|
1
|
+
import { ReactSVGComponentType } from '@preply/ds-web-core';
|
|
1
2
|
import { FC } from 'react';
|
|
2
3
|
import { ButtonBaseProps } from '../private/ButtonBase/ButtonBase';
|
|
3
|
-
|
|
4
|
+
declare type LeadingOrTrailingSvgIcon = {
|
|
5
|
+
leadingSvgIcon?: ReactSVGComponentType;
|
|
6
|
+
trailingSvgIcon?: never;
|
|
7
|
+
} | {
|
|
8
|
+
trailingSvgIcon?: ReactSVGComponentType;
|
|
9
|
+
leadingSvgIcon?: never;
|
|
10
|
+
};
|
|
11
|
+
export declare type Props = Omit<ButtonBaseProps, 'isIconButton'> & LeadingOrTrailingSvgIcon;
|
|
4
12
|
export declare const Button: FC<Props>;
|
|
13
|
+
export {};
|
|
@@ -1,16 +1,23 @@
|
|
|
1
1
|
import { BUTTON_VARIANT_DEFAULT, BUTTON_SIZE_DEFAULT } from '@preply/ds-core';
|
|
2
|
-
import { useInstrument } from '@preply/ds-web-core';
|
|
2
|
+
import { useInstrument, moduleLocals } from '@preply/ds-web-core';
|
|
3
3
|
import React__default from 'react';
|
|
4
4
|
import { ButtonBase } from '../private/ButtonBase/ButtonBase.js';
|
|
5
|
+
import styles from './style/index.module.less.js';
|
|
5
6
|
|
|
6
7
|
const BUTTON = 'Button';
|
|
7
|
-
const Button = ({ variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAULT, url, a11yLabel, ...props }) => {
|
|
8
|
+
const Button = ({ variant = BUTTON_VARIANT_DEFAULT, size = BUTTON_SIZE_DEFAULT, url, a11yLabel, leadingSvgIcon: LeadingSvgIcon, trailingSvgIcon: TrailingSvgIcon, children, ...props }) => {
|
|
8
9
|
useInstrument('render', {
|
|
9
10
|
component: BUTTON,
|
|
10
11
|
props: { variant, size, url, a11yLabel },
|
|
11
12
|
});
|
|
12
|
-
|
|
13
|
+
const iconClassNames = [...moduleLocals(styles, BUTTON, ['icon'])];
|
|
14
|
+
return (React__default.createElement(ButtonBase, Object.assign({}, props, { isIconButton: false, variant: variant, size: size, url: url, a11yLabel: a11yLabel }),
|
|
15
|
+
!!LeadingSvgIcon && (React__default.createElement("span", { className: iconClassNames.join(' ') },
|
|
16
|
+
React__default.createElement(LeadingSvgIcon, { "aria-hidden": "true", focusable: "false" }))),
|
|
17
|
+
children,
|
|
18
|
+
!!TrailingSvgIcon && (React__default.createElement("span", { className: iconClassNames.join(' ') },
|
|
19
|
+
React__default.createElement(TrailingSvgIcon, { "aria-hidden": "true", focusable: "false" })))));
|
|
13
20
|
};
|
|
14
21
|
|
|
15
22
|
export { Button };
|
|
16
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
23
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQnV0dG9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9CdXR0b24vQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBCVVRUT05fU0laRV9ERUZBVUxULCBCVVRUT05fVkFSSUFOVF9ERUZBVUxUIH0gZnJvbSAnQHByZXBseS9kcy1jb3JlJztcbmltcG9ydCB7IFJlYWN0U1ZHQ29tcG9uZW50VHlwZSwgbW9kdWxlTG9jYWxzLCB1c2VJbnN0cnVtZW50IH0gZnJvbSAnQHByZXBseS9kcy13ZWItY29yZSc7XG5pbXBvcnQgUmVhY3QsIHsgRkMgfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7IEJ1dHRvbkJhc2UsIEJ1dHRvbkJhc2VQcm9wcyB9IGZyb20gJy4uL3ByaXZhdGUvQnV0dG9uQmFzZS9CdXR0b25CYXNlJztcblxuaW1wb3J0IHN0eWxlcyBmcm9tICcuL3N0eWxlL2luZGV4Lm1vZHVsZS5sZXNzJztcblxuY29uc3QgQlVUVE9OID0gJ0J1dHRvbic7XG5cbnR5cGUgTGVhZGluZ09yVHJhaWxpbmdTdmdJY29uID1cbiAgICB8IHtcbiAgICAgICAgICBsZWFkaW5nU3ZnSWNvbj86IFJlYWN0U1ZHQ29tcG9uZW50VHlwZTtcbiAgICAgICAgICB0cmFpbGluZ1N2Z0ljb24/OiBuZXZlcjtcbiAgICAgIH1cbiAgICB8IHtcbiAgICAgICAgICB0cmFpbGluZ1N2Z0ljb24/OiBSZWFjdFNWR0NvbXBvbmVudFR5cGU7XG4gICAgICAgICAgbGVhZGluZ1N2Z0ljb24/OiBuZXZlcjtcbiAgICAgIH07XG5cbmV4cG9ydCB0eXBlIFByb3BzID0gT21pdDxCdXR0b25CYXNlUHJvcHMsICdpc0ljb25CdXR0b24nPiAmIExlYWRpbmdPclRyYWlsaW5nU3ZnSWNvbjtcblxuZXhwb3J0IGNvbnN0IEJ1dHRvbjogRkM8UHJvcHM+ID0gKHtcbiAgICB2YXJpYW50ID0gQlVUVE9OX1ZBUklBTlRfREVGQVVMVCxcbiAgICBzaXplID0gQlVUVE9OX1NJWkVfREVGQVVMVCxcbiAgICB1cmwsXG4gICAgYTExeUxhYmVsLFxuICAgIGxlYWRpbmdTdmdJY29uOiBMZWFkaW5nU3ZnSWNvbixcbiAgICB0cmFpbGluZ1N2Z0ljb246IFRyYWlsaW5nU3ZnSWNvbixcbiAgICBjaGlsZHJlbixcbiAgICAuLi5wcm9wc1xufSkgPT4ge1xuICAgIHVzZUluc3RydW1lbnQoJ3JlbmRlcicsIHtcbiAgICAgICAgY29tcG9uZW50OiBCVVRUT04sXG4gICAgICAgIHByb3BzOiB7IHZhcmlhbnQsIHNpemUsIHVybCwgYTExeUxhYmVsIH0sXG4gICAgfSk7XG5cbiAgICBjb25zdCBpY29uQ2xhc3NOYW1lcyA9IFsuLi5tb2R1bGVMb2NhbHMoc3R5bGVzLCBCVVRUT04sIFsnaWNvbiddKV07XG5cbiAgICByZXR1cm4gKFxuICAgICAgICA8QnV0dG9uQmFzZVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgaXNJY29uQnV0dG9uPXtmYWxzZX1cbiAgICAgICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgICAgICBzaXplPXtzaXplfVxuICAgICAgICAgICAgdXJsPXt1cmx9XG4gICAgICAgICAgICBhMTF5TGFiZWw9e2ExMXlMYWJlbH1cbiAgICAgICAgPlxuICAgICAgICAgICAgeyEhTGVhZGluZ1N2Z0ljb24gJiYgKFxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT17aWNvbkNsYXNzTmFtZXMuam9pbignICcpfT5cbiAgICAgICAgICAgICAgICAgICAgPExlYWRpbmdTdmdJY29uIGFyaWEtaGlkZGVuPVwidHJ1ZVwiIGZvY3VzYWJsZT1cImZhbHNlXCIgLz5cbiAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICApfVxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgICAgeyEhVHJhaWxpbmdTdmdJY29uICYmIChcbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9e2ljb25DbGFzc05hbWVzLmpvaW4oJyAnKX0+XG4gICAgICAgICAgICAgICAgICAgIDxUcmFpbGluZ1N2Z0ljb24gYXJpYS1oaWRkZW49XCJ0cnVlXCIgZm9jdXNhYmxlPVwiZmFsc2VcIiAvPlxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICl9XG4gICAgICAgIDwvQnV0dG9uQmFzZT5cbiAgICApO1xufTtcbiJdLCJuYW1lcyI6WyJSZWFjdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBUUEsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO01BY1gsTUFBTSxHQUFjLENBQUMsRUFDOUIsT0FBTyxHQUFHLHNCQUFzQixFQUNoQyxJQUFJLEdBQUcsbUJBQW1CLEVBQzFCLEdBQUcsRUFDSCxTQUFTLEVBQ1QsY0FBYyxFQUFFLGNBQWMsRUFDOUIsZUFBZSxFQUFFLGVBQWUsRUFDaEMsUUFBUSxFQUNSLEdBQUcsS0FBSyxFQUNYO0lBQ0csYUFBYSxDQUFDLFFBQVEsRUFBRTtRQUNwQixTQUFTLEVBQUUsTUFBTTtRQUNqQixLQUFLLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUU7S0FDM0MsQ0FBQyxDQUFDO0lBRUgsTUFBTSxjQUFjLEdBQUcsQ0FBQyxHQUFHLFlBQVksQ0FBQyxNQUFNLEVBQUUsTUFBTSxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBRW5FLFFBQ0lBLDZCQUFDLFVBQVUsb0JBQ0gsS0FBSyxJQUNULFlBQVksRUFBRSxLQUFLLEVBQ25CLE9BQU8sRUFBRSxPQUFPLEVBQ2hCLElBQUksRUFBRSxJQUFJLEVBQ1YsR0FBRyxFQUFFLEdBQUcsRUFDUixTQUFTLEVBQUUsU0FBUztRQUVuQixDQUFDLENBQUMsY0FBYyxLQUNiQSx1Q0FBTSxTQUFTLEVBQUUsY0FBYyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7WUFDckNBLDZCQUFDLGNBQWMsbUJBQWEsTUFBTSxFQUFDLFNBQVMsRUFBQyxPQUFPLEdBQUcsQ0FDcEQsQ0FDVjtRQUNBLFFBQVE7UUFDUixDQUFDLENBQUMsZUFBZSxLQUNkQSx1Q0FBTSxTQUFTLEVBQUUsY0FBYyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUM7WUFDckNBLDZCQUFDLGVBQWUsbUJBQWEsTUFBTSxFQUFDLFNBQVMsRUFBQyxPQUFPLEdBQUcsQ0FDckQsQ0FDVixDQUNRLEVBQ2Y7QUFDTjs7OzsifQ==
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "._3k_9Uf{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:calc(var(--f316e1)*-1/2);margin-top:calc(var(--f316e1)*-1/2)}._3k_9Uf svg{height:var(--f316e1);width:var(--f316e1)}._3k_9Uf svg path{fill:currentColor}";
|
|
4
|
+
var styles = {__id:"/home/jenkins/workspace/design-system_main/packages/web-lib/src/components/Button/style/index.module.less",__css:css_248z,"Button--icon":"_3k_9Uf"};
|
|
5
|
+
var stylesheet=css_248z;
|
|
6
|
+
styleInject(css_248z);
|
|
7
|
+
|
|
8
|
+
export { styles as default, stylesheet };
|
|
9
|
+
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.button() {
|
|
2
|
+
@icon-size: @sizing-24;
|
|
3
|
+
&--icon {
|
|
4
|
+
display: flex;
|
|
5
|
+
|
|
6
|
+
// In Tokyo UI, the icons are always the same height, regardless the button size.
|
|
7
|
+
// Using the icons with small buttons result in the text being shorter than the icon, and
|
|
8
|
+
// the button gets taller because of the icon itself. This is, from a Designers perspective,
|
|
9
|
+
// an unexpected height. That's why we need to ensure the icon does not pushes the button's
|
|
10
|
+
// height
|
|
11
|
+
margin-top: calc(-1 * @icon-size / 2);
|
|
12
|
+
margin-bottom: calc(-1 * @icon-size / 2);
|
|
13
|
+
|
|
14
|
+
svg {
|
|
15
|
+
width: @icon-size;
|
|
16
|
+
height: @icon-size;
|
|
17
|
+
|
|
18
|
+
path {
|
|
19
|
+
fill: currentColor;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../../external/style-inject/dist/style-inject.es.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "";
|
|
4
|
+
var stylesheet="";
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { css_248z as default, stylesheet };
|
|
8
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjpudWxsLCJzb3VyY2VzIjpbbnVsbF0sInNvdXJjZXNDb250ZW50IjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdCQUF3Qix3REFBNEQ7QUFDcEY7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOyJ9
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@preply/ds-web-lib",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.74.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -19,26 +19,26 @@
|
|
|
19
19
|
"dev": "run build:rollup -w"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@preply/ds-core": "0.
|
|
23
|
-
"@preply/ds-media-icons": "0.
|
|
24
|
-
"@preply/ds-web-core": "0.
|
|
25
|
-
"@preply/ds-web-root": "0.
|
|
22
|
+
"@preply/ds-core": "0.74.0",
|
|
23
|
+
"@preply/ds-media-icons": "0.74.0",
|
|
24
|
+
"@preply/ds-web-core": "0.74.0",
|
|
25
|
+
"@preply/ds-web-root": "0.74.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@preply/ds-core": "0.
|
|
29
|
-
"@preply/ds-media-icons": "0.
|
|
30
|
-
"@preply/ds-web-core": "0.
|
|
31
|
-
"@preply/ds-web-root": "0.
|
|
28
|
+
"@preply/ds-core": "0.74.0",
|
|
29
|
+
"@preply/ds-media-icons": "0.74.0",
|
|
30
|
+
"@preply/ds-web-core": "0.74.0",
|
|
31
|
+
"@preply/ds-web-root": "0.74.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.
|
|
37
|
-
"@preply/ds-theme-base-ui": "0.
|
|
36
|
+
"@preply/ds-docs-toolkit": "0.74.0",
|
|
37
|
+
"@preply/ds-theme-base-ui": "0.74.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
|
"jsdom-testing-mocks": "^1.7.0"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "015b20c66e061f7ec9cc399cb68ae2aa4c0419dc"
|
|
44
44
|
}
|