@pareto-engineering/design-system 4.0.0-alpha.24 → 4.0.0-alpha.26
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/cjs/b/Button/Button.js +1 -2
- package/dist/cjs/b/Button/common/index.js +1 -8
- package/dist/es/b/Button/Button.js +2 -3
- package/dist/es/b/Button/common/index.js +1 -2
- package/package.json +3 -3
- package/src/ui/b/Button/Button.jsx +2 -3
- package/src/ui/b/Button/common/index.js +0 -1
- package/tests/__snapshots__/Storyshots.test.js.snap +0 -647
- package/dist/cjs/b/Button/common/WithLink/WithLink.js +0 -60
- package/dist/cjs/b/Button/common/WithLink/index.js +0 -13
- package/dist/cjs/b/Button/common/WithLink/styles.scss +0 -9
- package/dist/es/b/Button/common/WithLink/WithLink.js +0 -52
- package/dist/es/b/Button/common/WithLink/index.js +0 -1
- package/dist/es/b/Button/common/WithLink/styles.scss +0 -9
- package/src/stories/b/Button/WithLink.stories.jsx +0 -38
- package/src/ui/b/Button/common/WithLink/WithLink.jsx +0 -80
- package/src/ui/b/Button/common/WithLink/index.js +0 -1
- package/src/ui/b/Button/common/WithLink/styles.scss +0 -9
|
@@ -41,7 +41,7 @@ const Button = _ref => {
|
|
|
41
41
|
}, children) : children;
|
|
42
42
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|
43
43
|
id: id,
|
|
44
|
-
className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
|
|
44
|
+
className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && _exports.default.modifierGhost, isCompact && _exports.default.modifierCompact, isSimple && _exports.default.modifierSimple, isGradient && _exports.default.modifierGradient, isSpaced && _exports.default.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
|
|
45
45
|
style: style,
|
|
46
46
|
type: "button"
|
|
47
47
|
}, otherProps), isLoading ? /*#__PURE__*/React.createElement(_.LoadingCircle, {
|
|
@@ -105,6 +105,5 @@ Button.defaultProps = {
|
|
|
105
105
|
color: 'main'
|
|
106
106
|
};
|
|
107
107
|
Button.Group = _common.Group;
|
|
108
|
-
Button.WithLink = _common.WithLink;
|
|
109
108
|
var _default = Button;
|
|
110
109
|
exports.default = _default;
|
|
@@ -9,11 +9,4 @@ Object.defineProperty(exports, "Group", {
|
|
|
9
9
|
return _Group.Group;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
|
-
enumerable: true,
|
|
14
|
-
get: function () {
|
|
15
|
-
return _WithLink.WithLink;
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
var _Group = require("./Group");
|
|
19
|
-
var _WithLink = require("./WithLink");
|
|
12
|
+
var _Group = require("./Group");
|
|
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
|
|
|
7
7
|
// Package-level Imports
|
|
8
8
|
import styleNames from '@pareto-engineering/bem/exports';
|
|
9
9
|
import { LoadingCircle } from "../..";
|
|
10
|
-
import { Group
|
|
10
|
+
import { Group } from "./common";
|
|
11
11
|
import "./styles.scss";
|
|
12
12
|
|
|
13
13
|
// Helper Definition
|
|
@@ -36,7 +36,7 @@ const Button = ({
|
|
|
36
36
|
}, children) : children;
|
|
37
37
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|
38
38
|
id: id,
|
|
39
|
-
className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
|
|
39
|
+
className: [baseClassName, componentClassName, userClassName, `x-${color}`, isGhost && styleNames.modifierGhost, isCompact && styleNames.modifierCompact, isSimple && styleNames.modifierSimple, isGradient && styleNames.modifierGradient, isSpaced && styleNames.modifierSpaced, !isLoading && arrowDirection && `arrow-${arrowDirection}`].filter(e => e).join(' '),
|
|
40
40
|
style: style,
|
|
41
41
|
type: "button"
|
|
42
42
|
}, otherProps), isLoading ? /*#__PURE__*/React.createElement(LoadingCircle, {
|
|
@@ -100,5 +100,4 @@ Button.defaultProps = {
|
|
|
100
100
|
color: 'main'
|
|
101
101
|
};
|
|
102
102
|
Button.Group = Group;
|
|
103
|
-
Button.WithLink = WithLink;
|
|
104
103
|
export default Button;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export { Group } from "./Group";
|
|
2
|
-
export { WithLink } from "./WithLink";
|
|
1
|
+
export { Group } from "./Group";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.26",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"dependencies": {
|
|
53
53
|
"@pareto-engineering/assets": "^4.0.0-alpha.23",
|
|
54
54
|
"@pareto-engineering/bem": "^4.0.0-alpha.20",
|
|
55
|
-
"@pareto-engineering/styles": "^4.0.0-alpha.
|
|
55
|
+
"@pareto-engineering/styles": "^4.0.0-alpha.26",
|
|
56
56
|
"@pareto-engineering/utils": "^4.0.0-alpha.23",
|
|
57
57
|
"date-fns": "^2.29.3",
|
|
58
58
|
"downshift": "^6.1.12",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"relay-test-utils": "^15.0.0"
|
|
69
69
|
},
|
|
70
70
|
"browserslist": "> 2%",
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "bf0da5748cde3a0e9765cf71a17c2a34640567f8"
|
|
72
72
|
}
|
|
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
|
|
|
6
6
|
// Package-level Imports
|
|
7
7
|
import styleNames from '@pareto-engineering/bem/exports'
|
|
8
8
|
import { LoadingCircle } from 'ui'
|
|
9
|
-
import { Group
|
|
9
|
+
import { Group } from './common'
|
|
10
10
|
import './styles.scss'
|
|
11
11
|
|
|
12
12
|
// Helper Definition
|
|
@@ -48,7 +48,7 @@ const Button = ({
|
|
|
48
48
|
isSimple && styleNames.modifierSimple,
|
|
49
49
|
isGradient && styleNames.modifierGradient,
|
|
50
50
|
isSpaced && styleNames.modifierSpaced,
|
|
51
|
-
arrowDirection && `arrow-${arrowDirection}`,
|
|
51
|
+
!isLoading && arrowDirection && `arrow-${arrowDirection}`,
|
|
52
52
|
]
|
|
53
53
|
.filter((e) => e)
|
|
54
54
|
.join(' ')}
|
|
@@ -135,6 +135,5 @@ Button.defaultProps = {
|
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
Button.Group = Group
|
|
138
|
-
Button.WithLink = WithLink
|
|
139
138
|
|
|
140
139
|
export default Button
|
|
@@ -11786,653 +11786,6 @@ exports[`Storyshots b/Button/Group Base 1`] = `
|
|
|
11786
11786
|
</div>
|
|
11787
11787
|
`;
|
|
11788
11788
|
|
|
11789
|
-
exports[`Storyshots b/Button/WithLink Base 1`] = `
|
|
11790
|
-
<div
|
|
11791
|
-
className="base button-group"
|
|
11792
|
-
>
|
|
11793
|
-
<a
|
|
11794
|
-
className="base button-with-link"
|
|
11795
|
-
href="#/"
|
|
11796
|
-
onClick={[Function]}
|
|
11797
|
-
>
|
|
11798
|
-
<button
|
|
11799
|
-
className="base button x-main"
|
|
11800
|
-
type="button"
|
|
11801
|
-
>
|
|
11802
|
-
This is a
|
|
11803
|
-
|
|
11804
|
-
main
|
|
11805
|
-
|
|
11806
|
-
button
|
|
11807
|
-
</button>
|
|
11808
|
-
</a>
|
|
11809
|
-
<a
|
|
11810
|
-
className="base button-with-link"
|
|
11811
|
-
href="#/"
|
|
11812
|
-
onClick={[Function]}
|
|
11813
|
-
>
|
|
11814
|
-
<button
|
|
11815
|
-
className="base button x-main-80"
|
|
11816
|
-
type="button"
|
|
11817
|
-
>
|
|
11818
|
-
This is a
|
|
11819
|
-
|
|
11820
|
-
main-80
|
|
11821
|
-
|
|
11822
|
-
button
|
|
11823
|
-
</button>
|
|
11824
|
-
</a>
|
|
11825
|
-
<a
|
|
11826
|
-
className="base button-with-link"
|
|
11827
|
-
href="#/"
|
|
11828
|
-
onClick={[Function]}
|
|
11829
|
-
>
|
|
11830
|
-
<button
|
|
11831
|
-
className="base button x-main-50"
|
|
11832
|
-
type="button"
|
|
11833
|
-
>
|
|
11834
|
-
This is a
|
|
11835
|
-
|
|
11836
|
-
main-50
|
|
11837
|
-
|
|
11838
|
-
button
|
|
11839
|
-
</button>
|
|
11840
|
-
</a>
|
|
11841
|
-
<a
|
|
11842
|
-
className="base button-with-link"
|
|
11843
|
-
href="#/"
|
|
11844
|
-
onClick={[Function]}
|
|
11845
|
-
>
|
|
11846
|
-
<button
|
|
11847
|
-
className="base button x-main2"
|
|
11848
|
-
type="button"
|
|
11849
|
-
>
|
|
11850
|
-
This is a
|
|
11851
|
-
|
|
11852
|
-
main2
|
|
11853
|
-
|
|
11854
|
-
button
|
|
11855
|
-
</button>
|
|
11856
|
-
</a>
|
|
11857
|
-
<a
|
|
11858
|
-
className="base button-with-link"
|
|
11859
|
-
href="#/"
|
|
11860
|
-
onClick={[Function]}
|
|
11861
|
-
>
|
|
11862
|
-
<button
|
|
11863
|
-
className="base button x-interactive"
|
|
11864
|
-
type="button"
|
|
11865
|
-
>
|
|
11866
|
-
This is a
|
|
11867
|
-
|
|
11868
|
-
interactive
|
|
11869
|
-
|
|
11870
|
-
button
|
|
11871
|
-
</button>
|
|
11872
|
-
</a>
|
|
11873
|
-
<a
|
|
11874
|
-
className="base button-with-link"
|
|
11875
|
-
href="#/"
|
|
11876
|
-
onClick={[Function]}
|
|
11877
|
-
>
|
|
11878
|
-
<button
|
|
11879
|
-
className="base button x-interactive-icons"
|
|
11880
|
-
type="button"
|
|
11881
|
-
>
|
|
11882
|
-
This is a
|
|
11883
|
-
|
|
11884
|
-
interactive-icons
|
|
11885
|
-
|
|
11886
|
-
button
|
|
11887
|
-
</button>
|
|
11888
|
-
</a>
|
|
11889
|
-
<a
|
|
11890
|
-
className="base button-with-link"
|
|
11891
|
-
href="#/"
|
|
11892
|
-
onClick={[Function]}
|
|
11893
|
-
>
|
|
11894
|
-
<button
|
|
11895
|
-
className="base button x-shadow"
|
|
11896
|
-
type="button"
|
|
11897
|
-
>
|
|
11898
|
-
This is a
|
|
11899
|
-
|
|
11900
|
-
shadow
|
|
11901
|
-
|
|
11902
|
-
button
|
|
11903
|
-
</button>
|
|
11904
|
-
</a>
|
|
11905
|
-
<a
|
|
11906
|
-
className="base button-with-link"
|
|
11907
|
-
href="#/"
|
|
11908
|
-
onClick={[Function]}
|
|
11909
|
-
>
|
|
11910
|
-
<button
|
|
11911
|
-
className="base button x-success"
|
|
11912
|
-
type="button"
|
|
11913
|
-
>
|
|
11914
|
-
This is a
|
|
11915
|
-
|
|
11916
|
-
success
|
|
11917
|
-
|
|
11918
|
-
button
|
|
11919
|
-
</button>
|
|
11920
|
-
</a>
|
|
11921
|
-
<a
|
|
11922
|
-
className="base button-with-link"
|
|
11923
|
-
href="#/"
|
|
11924
|
-
onClick={[Function]}
|
|
11925
|
-
>
|
|
11926
|
-
<button
|
|
11927
|
-
className="base button x-warning"
|
|
11928
|
-
type="button"
|
|
11929
|
-
>
|
|
11930
|
-
This is a
|
|
11931
|
-
|
|
11932
|
-
warning
|
|
11933
|
-
|
|
11934
|
-
button
|
|
11935
|
-
</button>
|
|
11936
|
-
</a>
|
|
11937
|
-
<a
|
|
11938
|
-
className="base button-with-link"
|
|
11939
|
-
href="#/"
|
|
11940
|
-
onClick={[Function]}
|
|
11941
|
-
>
|
|
11942
|
-
<button
|
|
11943
|
-
className="base button x-error"
|
|
11944
|
-
type="button"
|
|
11945
|
-
>
|
|
11946
|
-
This is a
|
|
11947
|
-
|
|
11948
|
-
error
|
|
11949
|
-
|
|
11950
|
-
button
|
|
11951
|
-
</button>
|
|
11952
|
-
</a>
|
|
11953
|
-
<a
|
|
11954
|
-
className="base button-with-link"
|
|
11955
|
-
href="#/"
|
|
11956
|
-
onClick={[Function]}
|
|
11957
|
-
>
|
|
11958
|
-
<button
|
|
11959
|
-
className="base button x-blocked"
|
|
11960
|
-
type="button"
|
|
11961
|
-
>
|
|
11962
|
-
This is a
|
|
11963
|
-
|
|
11964
|
-
blocked
|
|
11965
|
-
|
|
11966
|
-
button
|
|
11967
|
-
</button>
|
|
11968
|
-
</a>
|
|
11969
|
-
<a
|
|
11970
|
-
className="base button-with-link"
|
|
11971
|
-
href="#/"
|
|
11972
|
-
onClick={[Function]}
|
|
11973
|
-
>
|
|
11974
|
-
<button
|
|
11975
|
-
className="base button x-backlog"
|
|
11976
|
-
type="button"
|
|
11977
|
-
>
|
|
11978
|
-
This is a
|
|
11979
|
-
|
|
11980
|
-
backlog
|
|
11981
|
-
|
|
11982
|
-
button
|
|
11983
|
-
</button>
|
|
11984
|
-
</a>
|
|
11985
|
-
<a
|
|
11986
|
-
className="base button-with-link"
|
|
11987
|
-
href="#/"
|
|
11988
|
-
onClick={[Function]}
|
|
11989
|
-
>
|
|
11990
|
-
<button
|
|
11991
|
-
className="base button x-in-progress"
|
|
11992
|
-
type="button"
|
|
11993
|
-
>
|
|
11994
|
-
This is a
|
|
11995
|
-
|
|
11996
|
-
in-progress
|
|
11997
|
-
|
|
11998
|
-
button
|
|
11999
|
-
</button>
|
|
12000
|
-
</a>
|
|
12001
|
-
<a
|
|
12002
|
-
className="base button-with-link"
|
|
12003
|
-
href="#/"
|
|
12004
|
-
onClick={[Function]}
|
|
12005
|
-
>
|
|
12006
|
-
<button
|
|
12007
|
-
className="base button x-in-review"
|
|
12008
|
-
type="button"
|
|
12009
|
-
>
|
|
12010
|
-
This is a
|
|
12011
|
-
|
|
12012
|
-
in-review
|
|
12013
|
-
|
|
12014
|
-
button
|
|
12015
|
-
</button>
|
|
12016
|
-
</a>
|
|
12017
|
-
<a
|
|
12018
|
-
className="base button-with-link"
|
|
12019
|
-
href="#/"
|
|
12020
|
-
onClick={[Function]}
|
|
12021
|
-
>
|
|
12022
|
-
<button
|
|
12023
|
-
className="base button x-requested"
|
|
12024
|
-
type="button"
|
|
12025
|
-
>
|
|
12026
|
-
This is a
|
|
12027
|
-
|
|
12028
|
-
requested
|
|
12029
|
-
|
|
12030
|
-
button
|
|
12031
|
-
</button>
|
|
12032
|
-
</a>
|
|
12033
|
-
<a
|
|
12034
|
-
className="base button-with-link"
|
|
12035
|
-
href="#/"
|
|
12036
|
-
onClick={[Function]}
|
|
12037
|
-
>
|
|
12038
|
-
<button
|
|
12039
|
-
className="base button x-completed"
|
|
12040
|
-
type="button"
|
|
12041
|
-
>
|
|
12042
|
-
This is a
|
|
12043
|
-
|
|
12044
|
-
completed
|
|
12045
|
-
|
|
12046
|
-
button
|
|
12047
|
-
</button>
|
|
12048
|
-
</a>
|
|
12049
|
-
<a
|
|
12050
|
-
className="base button-with-link"
|
|
12051
|
-
href="#/"
|
|
12052
|
-
onClick={[Function]}
|
|
12053
|
-
>
|
|
12054
|
-
<button
|
|
12055
|
-
className="base button x-background-far"
|
|
12056
|
-
type="button"
|
|
12057
|
-
>
|
|
12058
|
-
This is a
|
|
12059
|
-
|
|
12060
|
-
background-far
|
|
12061
|
-
|
|
12062
|
-
button
|
|
12063
|
-
</button>
|
|
12064
|
-
</a>
|
|
12065
|
-
<a
|
|
12066
|
-
className="base button-with-link"
|
|
12067
|
-
href="#/"
|
|
12068
|
-
onClick={[Function]}
|
|
12069
|
-
>
|
|
12070
|
-
<button
|
|
12071
|
-
className="base button x-background-near"
|
|
12072
|
-
type="button"
|
|
12073
|
-
>
|
|
12074
|
-
This is a
|
|
12075
|
-
|
|
12076
|
-
background-near
|
|
12077
|
-
|
|
12078
|
-
button
|
|
12079
|
-
</button>
|
|
12080
|
-
</a>
|
|
12081
|
-
<a
|
|
12082
|
-
className="base button-with-link"
|
|
12083
|
-
href="#/"
|
|
12084
|
-
onClick={[Function]}
|
|
12085
|
-
>
|
|
12086
|
-
<button
|
|
12087
|
-
className="base button x-background-cards"
|
|
12088
|
-
type="button"
|
|
12089
|
-
>
|
|
12090
|
-
This is a
|
|
12091
|
-
|
|
12092
|
-
background-cards
|
|
12093
|
-
|
|
12094
|
-
button
|
|
12095
|
-
</button>
|
|
12096
|
-
</a>
|
|
12097
|
-
<a
|
|
12098
|
-
className="base button-with-link"
|
|
12099
|
-
href="#/"
|
|
12100
|
-
onClick={[Function]}
|
|
12101
|
-
>
|
|
12102
|
-
<button
|
|
12103
|
-
className="base button x-background-cards-80"
|
|
12104
|
-
type="button"
|
|
12105
|
-
>
|
|
12106
|
-
This is a
|
|
12107
|
-
|
|
12108
|
-
background-cards-80
|
|
12109
|
-
|
|
12110
|
-
button
|
|
12111
|
-
</button>
|
|
12112
|
-
</a>
|
|
12113
|
-
<a
|
|
12114
|
-
className="base button-with-link"
|
|
12115
|
-
href="#/"
|
|
12116
|
-
onClick={[Function]}
|
|
12117
|
-
>
|
|
12118
|
-
<button
|
|
12119
|
-
className="base button x-background-cards-50"
|
|
12120
|
-
type="button"
|
|
12121
|
-
>
|
|
12122
|
-
This is a
|
|
12123
|
-
|
|
12124
|
-
background-cards-50
|
|
12125
|
-
|
|
12126
|
-
button
|
|
12127
|
-
</button>
|
|
12128
|
-
</a>
|
|
12129
|
-
<a
|
|
12130
|
-
className="base button-with-link"
|
|
12131
|
-
href="#/"
|
|
12132
|
-
onClick={[Function]}
|
|
12133
|
-
>
|
|
12134
|
-
<button
|
|
12135
|
-
className="base button x-background-inputs"
|
|
12136
|
-
type="button"
|
|
12137
|
-
>
|
|
12138
|
-
This is a
|
|
12139
|
-
|
|
12140
|
-
background-inputs
|
|
12141
|
-
|
|
12142
|
-
button
|
|
12143
|
-
</button>
|
|
12144
|
-
</a>
|
|
12145
|
-
<a
|
|
12146
|
-
className="base button-with-link"
|
|
12147
|
-
href="#/"
|
|
12148
|
-
onClick={[Function]}
|
|
12149
|
-
>
|
|
12150
|
-
<button
|
|
12151
|
-
className="base button x-background-mesh"
|
|
12152
|
-
type="button"
|
|
12153
|
-
>
|
|
12154
|
-
This is a
|
|
12155
|
-
|
|
12156
|
-
background-mesh
|
|
12157
|
-
|
|
12158
|
-
button
|
|
12159
|
-
</button>
|
|
12160
|
-
</a>
|
|
12161
|
-
<a
|
|
12162
|
-
className="base button-with-link"
|
|
12163
|
-
href="#/"
|
|
12164
|
-
onClick={[Function]}
|
|
12165
|
-
>
|
|
12166
|
-
<button
|
|
12167
|
-
className="base button x-heading"
|
|
12168
|
-
type="button"
|
|
12169
|
-
>
|
|
12170
|
-
This is a
|
|
12171
|
-
|
|
12172
|
-
heading
|
|
12173
|
-
|
|
12174
|
-
button
|
|
12175
|
-
</button>
|
|
12176
|
-
</a>
|
|
12177
|
-
<a
|
|
12178
|
-
className="base button-with-link"
|
|
12179
|
-
href="#/"
|
|
12180
|
-
onClick={[Function]}
|
|
12181
|
-
>
|
|
12182
|
-
<button
|
|
12183
|
-
className="base button x-paragraph"
|
|
12184
|
-
type="button"
|
|
12185
|
-
>
|
|
12186
|
-
This is a
|
|
12187
|
-
|
|
12188
|
-
paragraph
|
|
12189
|
-
|
|
12190
|
-
button
|
|
12191
|
-
</button>
|
|
12192
|
-
</a>
|
|
12193
|
-
<a
|
|
12194
|
-
className="base button-with-link"
|
|
12195
|
-
href="#/"
|
|
12196
|
-
onClick={[Function]}
|
|
12197
|
-
>
|
|
12198
|
-
<button
|
|
12199
|
-
className="base button x-subtitle"
|
|
12200
|
-
type="button"
|
|
12201
|
-
>
|
|
12202
|
-
This is a
|
|
12203
|
-
|
|
12204
|
-
subtitle
|
|
12205
|
-
|
|
12206
|
-
button
|
|
12207
|
-
</button>
|
|
12208
|
-
</a>
|
|
12209
|
-
<a
|
|
12210
|
-
className="base button-with-link"
|
|
12211
|
-
href="#/"
|
|
12212
|
-
onClick={[Function]}
|
|
12213
|
-
>
|
|
12214
|
-
<button
|
|
12215
|
-
className="base button x-metadata"
|
|
12216
|
-
type="button"
|
|
12217
|
-
>
|
|
12218
|
-
This is a
|
|
12219
|
-
|
|
12220
|
-
metadata
|
|
12221
|
-
|
|
12222
|
-
button
|
|
12223
|
-
</button>
|
|
12224
|
-
</a>
|
|
12225
|
-
<a
|
|
12226
|
-
className="base button-with-link"
|
|
12227
|
-
href="#/"
|
|
12228
|
-
onClick={[Function]}
|
|
12229
|
-
>
|
|
12230
|
-
<button
|
|
12231
|
-
className="base button x-link"
|
|
12232
|
-
type="button"
|
|
12233
|
-
>
|
|
12234
|
-
This is a
|
|
12235
|
-
|
|
12236
|
-
link
|
|
12237
|
-
|
|
12238
|
-
button
|
|
12239
|
-
</button>
|
|
12240
|
-
</a>
|
|
12241
|
-
<a
|
|
12242
|
-
className="base button-with-link"
|
|
12243
|
-
href="#/"
|
|
12244
|
-
onClick={[Function]}
|
|
12245
|
-
>
|
|
12246
|
-
<button
|
|
12247
|
-
className="base button x-transparent"
|
|
12248
|
-
type="button"
|
|
12249
|
-
>
|
|
12250
|
-
This is a
|
|
12251
|
-
|
|
12252
|
-
transparent
|
|
12253
|
-
|
|
12254
|
-
button
|
|
12255
|
-
</button>
|
|
12256
|
-
</a>
|
|
12257
|
-
<a
|
|
12258
|
-
className="base button-with-link"
|
|
12259
|
-
href="#/"
|
|
12260
|
-
onClick={[Function]}
|
|
12261
|
-
>
|
|
12262
|
-
<button
|
|
12263
|
-
className="base button x-highlighted"
|
|
12264
|
-
type="button"
|
|
12265
|
-
>
|
|
12266
|
-
This is a
|
|
12267
|
-
|
|
12268
|
-
highlighted
|
|
12269
|
-
|
|
12270
|
-
button
|
|
12271
|
-
</button>
|
|
12272
|
-
</a>
|
|
12273
|
-
<a
|
|
12274
|
-
className="base button-with-link"
|
|
12275
|
-
href="#/"
|
|
12276
|
-
onClick={[Function]}
|
|
12277
|
-
>
|
|
12278
|
-
<button
|
|
12279
|
-
className="base button x-disabled"
|
|
12280
|
-
type="button"
|
|
12281
|
-
>
|
|
12282
|
-
This is a
|
|
12283
|
-
|
|
12284
|
-
disabled
|
|
12285
|
-
|
|
12286
|
-
button
|
|
12287
|
-
</button>
|
|
12288
|
-
</a>
|
|
12289
|
-
<a
|
|
12290
|
-
className="base button-with-link"
|
|
12291
|
-
href="#/"
|
|
12292
|
-
onClick={[Function]}
|
|
12293
|
-
>
|
|
12294
|
-
<button
|
|
12295
|
-
className="base button x-twitter"
|
|
12296
|
-
type="button"
|
|
12297
|
-
>
|
|
12298
|
-
This is a
|
|
12299
|
-
|
|
12300
|
-
twitter
|
|
12301
|
-
|
|
12302
|
-
button
|
|
12303
|
-
</button>
|
|
12304
|
-
</a>
|
|
12305
|
-
<a
|
|
12306
|
-
className="base button-with-link"
|
|
12307
|
-
href="#/"
|
|
12308
|
-
onClick={[Function]}
|
|
12309
|
-
>
|
|
12310
|
-
<button
|
|
12311
|
-
className="base button x-facebook"
|
|
12312
|
-
type="button"
|
|
12313
|
-
>
|
|
12314
|
-
This is a
|
|
12315
|
-
|
|
12316
|
-
facebook
|
|
12317
|
-
|
|
12318
|
-
button
|
|
12319
|
-
</button>
|
|
12320
|
-
</a>
|
|
12321
|
-
<a
|
|
12322
|
-
className="base button-with-link"
|
|
12323
|
-
href="#/"
|
|
12324
|
-
onClick={[Function]}
|
|
12325
|
-
>
|
|
12326
|
-
<button
|
|
12327
|
-
className="base button x-instagram"
|
|
12328
|
-
type="button"
|
|
12329
|
-
>
|
|
12330
|
-
This is a
|
|
12331
|
-
|
|
12332
|
-
instagram
|
|
12333
|
-
|
|
12334
|
-
button
|
|
12335
|
-
</button>
|
|
12336
|
-
</a>
|
|
12337
|
-
<a
|
|
12338
|
-
className="base button-with-link"
|
|
12339
|
-
href="#/"
|
|
12340
|
-
onClick={[Function]}
|
|
12341
|
-
>
|
|
12342
|
-
<button
|
|
12343
|
-
className="base button x-google"
|
|
12344
|
-
type="button"
|
|
12345
|
-
>
|
|
12346
|
-
This is a
|
|
12347
|
-
|
|
12348
|
-
google
|
|
12349
|
-
|
|
12350
|
-
button
|
|
12351
|
-
</button>
|
|
12352
|
-
</a>
|
|
12353
|
-
<a
|
|
12354
|
-
className="base button-with-link"
|
|
12355
|
-
href="#/"
|
|
12356
|
-
onClick={[Function]}
|
|
12357
|
-
>
|
|
12358
|
-
<button
|
|
12359
|
-
className="base button x-black"
|
|
12360
|
-
type="button"
|
|
12361
|
-
>
|
|
12362
|
-
This is a
|
|
12363
|
-
|
|
12364
|
-
black
|
|
12365
|
-
|
|
12366
|
-
button
|
|
12367
|
-
</button>
|
|
12368
|
-
</a>
|
|
12369
|
-
<a
|
|
12370
|
-
className="base button-with-link"
|
|
12371
|
-
href="#/"
|
|
12372
|
-
onClick={[Function]}
|
|
12373
|
-
>
|
|
12374
|
-
<button
|
|
12375
|
-
className="base button x-anchor"
|
|
12376
|
-
type="button"
|
|
12377
|
-
>
|
|
12378
|
-
This is a
|
|
12379
|
-
|
|
12380
|
-
anchor
|
|
12381
|
-
|
|
12382
|
-
button
|
|
12383
|
-
</button>
|
|
12384
|
-
</a>
|
|
12385
|
-
<a
|
|
12386
|
-
className="base button-with-link"
|
|
12387
|
-
href="#/"
|
|
12388
|
-
onClick={[Function]}
|
|
12389
|
-
>
|
|
12390
|
-
<button
|
|
12391
|
-
className="base button x-grey"
|
|
12392
|
-
type="button"
|
|
12393
|
-
>
|
|
12394
|
-
This is a
|
|
12395
|
-
|
|
12396
|
-
grey
|
|
12397
|
-
|
|
12398
|
-
button
|
|
12399
|
-
</button>
|
|
12400
|
-
</a>
|
|
12401
|
-
<a
|
|
12402
|
-
className="base button-with-link"
|
|
12403
|
-
href="#/"
|
|
12404
|
-
onClick={[Function]}
|
|
12405
|
-
>
|
|
12406
|
-
<button
|
|
12407
|
-
className="base button x-pearl"
|
|
12408
|
-
type="button"
|
|
12409
|
-
>
|
|
12410
|
-
This is a
|
|
12411
|
-
|
|
12412
|
-
pearl
|
|
12413
|
-
|
|
12414
|
-
button
|
|
12415
|
-
</button>
|
|
12416
|
-
</a>
|
|
12417
|
-
<a
|
|
12418
|
-
className="base button-with-link"
|
|
12419
|
-
href="#/"
|
|
12420
|
-
onClick={[Function]}
|
|
12421
|
-
>
|
|
12422
|
-
<button
|
|
12423
|
-
className="base button x-white"
|
|
12424
|
-
type="button"
|
|
12425
|
-
>
|
|
12426
|
-
This is a
|
|
12427
|
-
|
|
12428
|
-
white
|
|
12429
|
-
|
|
12430
|
-
button
|
|
12431
|
-
</button>
|
|
12432
|
-
</a>
|
|
12433
|
-
</div>
|
|
12434
|
-
`;
|
|
12435
|
-
|
|
12436
11789
|
exports[`Storyshots b/Card Base 1`] = `
|
|
12437
11790
|
<div
|
|
12438
11791
|
className="base card"
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var React = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
|
|
10
|
-
var _reactRouterDom = require("react-router-dom");
|
|
11
|
-
var _index = require("../../index");
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /* @pareto-engineering/generator-front 1.0.12 */
|
|
15
|
-
// Local Definitions
|
|
16
|
-
|
|
17
|
-
const baseClassName = _exports.default.base;
|
|
18
|
-
const componentClassName = 'button-with-link';
|
|
19
|
-
const WithLink = _ref => {
|
|
20
|
-
let {
|
|
21
|
-
id,
|
|
22
|
-
className: userClassName,
|
|
23
|
-
children,
|
|
24
|
-
path,
|
|
25
|
-
...otherProps
|
|
26
|
-
} = _ref;
|
|
27
|
-
(0, React.useInsertionEffect)(() => {
|
|
28
|
-
Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
|
|
29
|
-
}, []);
|
|
30
|
-
return /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
|
|
31
|
-
to: path,
|
|
32
|
-
id: id,
|
|
33
|
-
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
|
|
34
|
-
}, /*#__PURE__*/React.createElement(_index.Button, otherProps, children));
|
|
35
|
-
};
|
|
36
|
-
WithLink.propTypes = {
|
|
37
|
-
/**
|
|
38
|
-
* The HTML id for this element
|
|
39
|
-
*/
|
|
40
|
-
id: _propTypes.default.string,
|
|
41
|
-
/**
|
|
42
|
-
* The HTML class names for this element
|
|
43
|
-
*/
|
|
44
|
-
className: _propTypes.default.string,
|
|
45
|
-
/**
|
|
46
|
-
* The React-written, css properties for this element.
|
|
47
|
-
*/
|
|
48
|
-
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
49
|
-
/**
|
|
50
|
-
* The children JSX
|
|
51
|
-
*/
|
|
52
|
-
children: _propTypes.default.node,
|
|
53
|
-
/**
|
|
54
|
-
* The path that this link would point to
|
|
55
|
-
*/
|
|
56
|
-
path: _propTypes.default.string
|
|
57
|
-
};
|
|
58
|
-
WithLink.defaultProps = {};
|
|
59
|
-
var _default = WithLink;
|
|
60
|
-
exports.default = _default;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "WithLink", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _WithLink.default;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _WithLink = _interopRequireDefault(require("./WithLink"));
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { useInsertionEffect } from 'react';
|
|
4
|
-
import PropTypes from 'prop-types';
|
|
5
|
-
import styleNames from '@pareto-engineering/bem/exports';
|
|
6
|
-
import { Link } from 'react-router-dom';
|
|
7
|
-
import { Button } from "../../index";
|
|
8
|
-
|
|
9
|
-
// Local Definitions
|
|
10
|
-
|
|
11
|
-
const baseClassName = styleNames.base;
|
|
12
|
-
const componentClassName = 'button-with-link';
|
|
13
|
-
const WithLink = ({
|
|
14
|
-
id,
|
|
15
|
-
className: userClassName,
|
|
16
|
-
children,
|
|
17
|
-
path,
|
|
18
|
-
...otherProps
|
|
19
|
-
}) => {
|
|
20
|
-
useInsertionEffect(() => {
|
|
21
|
-
import("./styles.scss");
|
|
22
|
-
}, []);
|
|
23
|
-
return /*#__PURE__*/React.createElement(Link, {
|
|
24
|
-
to: path,
|
|
25
|
-
id: id,
|
|
26
|
-
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
|
|
27
|
-
}, /*#__PURE__*/React.createElement(Button, otherProps, children));
|
|
28
|
-
};
|
|
29
|
-
WithLink.propTypes = {
|
|
30
|
-
/**
|
|
31
|
-
* The HTML id for this element
|
|
32
|
-
*/
|
|
33
|
-
id: PropTypes.string,
|
|
34
|
-
/**
|
|
35
|
-
* The HTML class names for this element
|
|
36
|
-
*/
|
|
37
|
-
className: PropTypes.string,
|
|
38
|
-
/**
|
|
39
|
-
* The React-written, css properties for this element.
|
|
40
|
-
*/
|
|
41
|
-
style: PropTypes.objectOf(PropTypes.string),
|
|
42
|
-
/**
|
|
43
|
-
* The children JSX
|
|
44
|
-
*/
|
|
45
|
-
children: PropTypes.node,
|
|
46
|
-
/**
|
|
47
|
-
* The path that this link would point to
|
|
48
|
-
*/
|
|
49
|
-
path: PropTypes.string
|
|
50
|
-
};
|
|
51
|
-
WithLink.defaultProps = {};
|
|
52
|
-
export default WithLink;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as WithLink } from "./WithLink";
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
|
-
import * as React from 'react'
|
|
3
|
-
|
|
4
|
-
import { Button } from 'ui'
|
|
5
|
-
|
|
6
|
-
import { ALL_COLORS } from 'stories/colors'
|
|
7
|
-
import commonDecorators from '@pareto-engineering/utils/src/storybook/decorators'
|
|
8
|
-
|
|
9
|
-
export default {
|
|
10
|
-
title :'b/Button/WithLink',
|
|
11
|
-
component :Button.WithLink,
|
|
12
|
-
decorators:[
|
|
13
|
-
commonDecorators.router,
|
|
14
|
-
],
|
|
15
|
-
|
|
16
|
-
argTypes:{
|
|
17
|
-
path:{ control: { type: 'text' } },
|
|
18
|
-
},
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const Template = (args) => (
|
|
22
|
-
<Button.Group>
|
|
23
|
-
{
|
|
24
|
-
ALL_COLORS.map((colorName) => (
|
|
25
|
-
<Button.WithLink {...args} color={colorName} key={colorName}>
|
|
26
|
-
This is a
|
|
27
|
-
{' '}
|
|
28
|
-
{colorName}
|
|
29
|
-
{' '}
|
|
30
|
-
button
|
|
31
|
-
</Button.WithLink>
|
|
32
|
-
))
|
|
33
|
-
}
|
|
34
|
-
</Button.Group>
|
|
35
|
-
)
|
|
36
|
-
|
|
37
|
-
export const Base = Template.bind({})
|
|
38
|
-
Base.args = { path: '/' }
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
/* @pareto-engineering/generator-front 1.0.12 */
|
|
2
|
-
import * as React from 'react'
|
|
3
|
-
|
|
4
|
-
import { useInsertionEffect } from 'react'
|
|
5
|
-
|
|
6
|
-
import PropTypes from 'prop-types'
|
|
7
|
-
|
|
8
|
-
import styleNames from '@pareto-engineering/bem/exports'
|
|
9
|
-
import { Link } from 'react-router-dom'
|
|
10
|
-
import { Button } from '../../index'
|
|
11
|
-
|
|
12
|
-
// Local Definitions
|
|
13
|
-
|
|
14
|
-
const baseClassName = styleNames.base
|
|
15
|
-
|
|
16
|
-
const componentClassName = 'button-with-link'
|
|
17
|
-
|
|
18
|
-
const WithLink = ({
|
|
19
|
-
id,
|
|
20
|
-
className: userClassName,
|
|
21
|
-
children,
|
|
22
|
-
path,
|
|
23
|
-
...otherProps
|
|
24
|
-
}) => {
|
|
25
|
-
useInsertionEffect(() => {
|
|
26
|
-
import('./styles.scss')
|
|
27
|
-
}, [])
|
|
28
|
-
|
|
29
|
-
return (
|
|
30
|
-
<Link
|
|
31
|
-
to={path}
|
|
32
|
-
id={id}
|
|
33
|
-
className={[
|
|
34
|
-
baseClassName,
|
|
35
|
-
componentClassName,
|
|
36
|
-
userClassName,
|
|
37
|
-
]
|
|
38
|
-
.filter((e) => e)
|
|
39
|
-
.join(' ')}
|
|
40
|
-
>
|
|
41
|
-
<Button
|
|
42
|
-
{...otherProps}
|
|
43
|
-
>
|
|
44
|
-
{children}
|
|
45
|
-
</Button>
|
|
46
|
-
</Link>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
WithLink.propTypes = {
|
|
51
|
-
/**
|
|
52
|
-
* The HTML id for this element
|
|
53
|
-
*/
|
|
54
|
-
id:PropTypes.string,
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* The HTML class names for this element
|
|
58
|
-
*/
|
|
59
|
-
className:PropTypes.string,
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* The React-written, css properties for this element.
|
|
63
|
-
*/
|
|
64
|
-
style:PropTypes.objectOf(PropTypes.string),
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* The children JSX
|
|
68
|
-
*/
|
|
69
|
-
children:PropTypes.node,
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* The path that this link would point to
|
|
73
|
-
*/
|
|
74
|
-
path:PropTypes.string,
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
WithLink.defaultProps = {
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
export default WithLink
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as WithLink } from './WithLink'
|