@dhis2-ui/button 8.14.10 → 8.14.11
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.Icon = exports.Disabled = exports.Destructive = exports.Basic = void 0;
|
|
6
|
+
exports.default = exports.ToggledDisabled = exports.Toggled = exports.Small = exports.Secondary = exports.Primary = exports.Loading = exports.Large = exports.InitialFocus = exports.IconSmall = exports.IconOnlySmall = exports.IconOnly = exports.Icon = exports.Disabled = exports.Destructive = exports.Basic = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -61,14 +61,24 @@ var _default = {
|
|
|
61
61
|
};
|
|
62
62
|
exports.default = _default;
|
|
63
63
|
|
|
64
|
-
const
|
|
64
|
+
const DemoIcon24 = /*#__PURE__*/_react.default.createElement("svg", {
|
|
65
65
|
height: "24",
|
|
66
66
|
viewBox: "0 0 24 24",
|
|
67
67
|
width: "24",
|
|
68
68
|
xmlns: "http://www.w3.org/2000/svg"
|
|
69
69
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
70
70
|
d: "m10.7071068 13.2928932c.3604839.360484.3882135.927715.0831886 1.3200062l-.0831886.0942074-5.2921068 5.2918932 2.585.001c.51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211c0 .5128358-.38604019.9355072-.88337887.9932723l-.11662113.0067277h-5l-.0193545-.0001861c-.02332655-.0004488-.04664039-.0017089-.06989557-.0037803l.08925007.0039664c-.05062028 0-.10036209-.0037612-.14896122-.0110193-.01698779-.0026088-.03441404-.0056829-.05176454-.0092208-.02202032-.0043997-.04371072-.0095935-.06511385-.0154809-.01562367-.0043767-.03101173-.0090077-.04630291-.0140171-.01965516-.0063844-.03943668-.0135776-.058916-.0213659-.01773713-.0070924-.03503998-.014575-.05216303-.0225694-.02066985-.0097032-.0410724-.0201205-.0610554-.0312024-.01211749-.006623-.02433616-.0137311-.0364318-.0211197-.0255662-.0157232-.05042194-.0324946-.07445055-.050318-.00744374-.0054399-.01468311-.010971-.02186305-.0166142-.0631594-.049624-.12042594-.1068905-.17019169-.1703222l.08010726.0903567c-.03539405-.0353941-.06758027-.0727812-.09655864-.1118002-.01784449-.0241759-.03461588-.0490316-.05026715-.0746464-.00746051-.0120471-.0145686-.0242658-.02139626-.0365981-.01087725-.0197682-.02129453-.0401707-.03101739-.060963-.00797473-.0170006-.01545736-.0343035-.02242829-.0517631-.00790975-.0197568-.015103-.0395383-.02167881-.0595996-.00481796-.0148851-.00944895-.0302731-.01370154-.0457434-.00601151-.0215565-.01120534-.0432469-.01567999-.0651989-.00346298-.0174188-.00653707-.0348451-.00914735-.0523272-.00160026-.010231-.00303174-.021012-.00429007-.0318458l-.00276132-.027371c-.00207143-.0232552-.00333152-.0465691-.00378026-.0698956l-.00018615-.0193545v-5c0-.5522847.44771525-1 1-1 .51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211v2.584l5.29289322-5.2911068c.39052429-.3905243 1.02368928-.3905243 1.41421358 0zm9.2928932-3.2928932v10h-10v-2h8v-8zm-6-6v2h-8v7h-2v-9zm7-2 .0193545.00018615c.0233265.00044874.0466404.00170883.0698956.00378026l-.0892501-.00396641c.0506203 0 .1003621.00376119.1489612.01101934.0169878.00260874.0344141.00568283.0517646.00922073.0220203.00439973.0437107.00959356.0651138.0154809.0156237.00437676.0310117.00900775.0463029.01401712.0196552.0063844.0394367.01357765.058916.02136587.0177371.00709246.03504.01457509.052163.0225694.0206699.00970328.0410724.02012056.0610555.03120241.0121174.00662306.0243361.01373115.0364318.02111968.0255662.01572325.0504219.03249464.0744505.05031806.0074437.00543993.0146831.01097097.021863.01661418.0631595.04962402.120426.10689056.1701917.17032223l-.0801072-.0903567c.035394.03539405.0675802.0727812.0965586.11180017.0178445.02417592.0346159.04903166.0502672.07464642.0074605.01204708.0145686.02426575.0213962.03659809.0108773.01976815.0212946.0401707.0310174.06096295.0079748.01700065.0154574.0343035.0224283.05176313.0079098.01975682.015103.03953834.0216788.05959961.004818.01488507.009449.03027313.0137016.04574344.0060115.02155649.0112053.04324689.0156799.06519887.003463.01741884.0065371.03484509.0091474.05232723.0016003.01023098.0030317.02101195.0042901.03184574l.0030256.03039033c.0015457.01796531.0026074.03596443.003185.05397618l.0005171.03225462v5c0 .55228475-.4477153 1-1 1-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113v-2.586l-5.2928932 5.2931068c-.3905243.3905243-1.0236893.3905243-1.4142136 0-.3604839-.360484-.3882135-.92771504-.0831886-1.32000624l.0831886-.09420734 5.2911068-5.29289322h-2.584c-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113c0-.51283584.3860402-.93550716.8833789-.99327227l.1166211-.00672773z",
|
|
71
|
-
fill: "
|
|
71
|
+
fill: "inherit"
|
|
72
|
+
}));
|
|
73
|
+
|
|
74
|
+
const DemoIcon16 = /*#__PURE__*/_react.default.createElement("svg", {
|
|
75
|
+
height: "16",
|
|
76
|
+
viewBox: "0 0 16 16",
|
|
77
|
+
width: "16",
|
|
78
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
79
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
80
|
+
d: "m6.85355339 9.14644661c.17356635.17356635.1928515.44299075.05785545.63785889l-.05785545.06924789-4.14755339 4.14644661h2.794c.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756c0 .2454599-.17687516.4496084-.41012437.4919443l-.08987563.0080557h-4c-.24545989 0-.44960837-.1768752-.49194433-.4101244l-.00805567-.0898756v-4c0-.2761424.22385763-.5.5-.5.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756v2.792l4.14644661-4.14555339c.19526215-.19526215.51184463-.19526215.70710678 0zm6.14644661-2.14644661v6h-6v-1h5v-5zm-4-4v1h-5v5h-1v-6zm5.5-2c.2454599 0 .4496084.17687516.4919443.41012437l.0080557.08987563v4c0 .27614237-.2238576.5-.5.5-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563v-2.794l-4.14644661 4.14755339c-.19526215.19526215-.51184463.19526215-.70710678 0-.17356635-.17356635-.1928515-.44299075-.05785545-.63785889l.05785545-.06924789 4.14655339-4.14744661-2.793.001c-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563c0-.24545989.1768752-.44960837.4101244-.49194433l.0898756-.00805567z",
|
|
81
|
+
fill: "inherit"
|
|
72
82
|
}));
|
|
73
83
|
|
|
74
84
|
const Template = args => /*#__PURE__*/_react.default.createElement(_button.Button, args);
|
|
@@ -208,7 +218,7 @@ const Icon = args => /*#__PURE__*/_react.default.createElement(_react.default.Fr
|
|
|
208
218
|
|
|
209
219
|
exports.Icon = Icon;
|
|
210
220
|
Icon.args = {
|
|
211
|
-
icon:
|
|
221
|
+
icon: DemoIcon24,
|
|
212
222
|
name: 'Icon button'
|
|
213
223
|
};
|
|
214
224
|
Icon.parameters = {
|
|
@@ -222,19 +232,34 @@ Icon.parameters = {
|
|
|
222
232
|
}
|
|
223
233
|
}
|
|
224
234
|
};
|
|
235
|
+
const IconOnly = Template.bind({});
|
|
236
|
+
exports.IconOnly = IconOnly;
|
|
237
|
+
IconOnly.args = {
|
|
238
|
+
icon: DemoIcon24,
|
|
239
|
+
name: 'Icon only button',
|
|
240
|
+
children: null
|
|
241
|
+
};
|
|
225
242
|
const IconSmall = Template.bind({});
|
|
226
243
|
exports.IconSmall = IconSmall;
|
|
227
244
|
IconSmall.args = {
|
|
228
|
-
icon:
|
|
245
|
+
icon: DemoIcon16,
|
|
229
246
|
small: true,
|
|
230
247
|
name: 'Icon small button',
|
|
248
|
+
children: 'Label me!'
|
|
249
|
+
};
|
|
250
|
+
const IconOnlySmall = Template.bind({});
|
|
251
|
+
exports.IconOnlySmall = IconOnlySmall;
|
|
252
|
+
IconOnlySmall.args = {
|
|
253
|
+
icon: DemoIcon16,
|
|
254
|
+
small: true,
|
|
255
|
+
name: 'Icon only small button',
|
|
231
256
|
children: null
|
|
232
257
|
};
|
|
233
258
|
const Toggled = Template.bind({});
|
|
234
259
|
exports.Toggled = Toggled;
|
|
235
260
|
Toggled.args = {
|
|
236
261
|
toggled: true,
|
|
237
|
-
icon:
|
|
262
|
+
icon: DemoIcon24,
|
|
238
263
|
name: 'Toggled button',
|
|
239
264
|
children: null
|
|
240
265
|
};
|
|
@@ -256,7 +281,7 @@ exports.ToggledDisabled = ToggledDisabled;
|
|
|
256
281
|
ToggledDisabled.args = {
|
|
257
282
|
toggled: true,
|
|
258
283
|
disabled: true,
|
|
259
|
-
icon:
|
|
284
|
+
icon: DemoIcon24,
|
|
260
285
|
name: 'Toggled button',
|
|
261
286
|
children: null
|
|
262
287
|
};
|
|
@@ -274,7 +299,7 @@ Loading.args = {
|
|
|
274
299
|
name: 'Loading button',
|
|
275
300
|
loading: true,
|
|
276
301
|
children: 'Loading...',
|
|
277
|
-
icon:
|
|
302
|
+
icon: DemoIcon24
|
|
278
303
|
};
|
|
279
304
|
Loading.parameters = {
|
|
280
305
|
docs: {
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
const _defaultExport = ["button.jsx-
|
|
11
|
-
_defaultExport.__hash = "
|
|
10
|
+
const _defaultExport = ["button.jsx-3952608485{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(_uiConstants.colors.grey900, ";height:36px;padding:0 ").concat(_uiConstants.spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(_uiConstants.colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-3952608485:disabled{cursor:not-allowed;}", "button.jsx-3952608485:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-3952608485:focus.jsx-3952608485:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-3952608485:active.jsx-3952608485:focus,button.jsx-3952608485:disabled.jsx-3952608485:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-3952608485:hover{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";}"), "button.jsx-3952608485:active,button.jsx-3952608485:active.jsx-3952608485:focus{border-color:".concat(_uiConstants.colors.grey500, ";background-color:").concat(_uiConstants.colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-3952608485:focus{background-color:#f9fafb;}", "button.jsx-3952608485:disabled{border-color:".concat(_uiConstants.colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".small.jsx-3952608485{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-3952608485{height:43px;padding:0 ".concat(_uiConstants.spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-3952608485{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".primary.jsx-3952608485:hover{border-color:".concat(_uiConstants.theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-3952608485:active,.primary.jsx-3952608485:active.jsx-3952608485:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-3952608485:focus{background:".concat(_uiConstants.colors.blue800, ";border-color:").concat(_uiConstants.colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-3952608485:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".secondary.jsx-3952608485{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-3952608485:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-3952608485:active,.secondary.jsx-3952608485:active.jsx-3952608485:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-3952608485:focus{background-color:transparent;}", ".secondary.jsx-3952608485:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(_uiConstants.theme.disabled, ";fill:").concat(_uiConstants.theme.disabled, ";}"), ".destructive.jsx-3952608485{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";font-weight:500;}"), ".destructive.jsx-3952608485:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-3952608485:active,.destructive.jsx-3952608485:active.jsx-3952608485:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-3952608485:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-3952608485:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".icon-only.jsx-3952608485{padding:0 0 0 5px;}", ".button-icon.jsx-3952608485{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-3952608485 .button-icon.jsx-3952608485{margin-right:5px;}", ".small.icon-only.jsx-3952608485{padding:0 4px 0 5px;}", ".small.jsx-3952608485 .button-icon.jsx-3952608485{margin-right:2px;}", ".small.icon-only.jsx-3952608485 .button-icon.jsx-3952608485{margin-right:1px;}", ".toggled.jsx-3952608485{background:".concat(_uiConstants.colors.grey700, ";border:1px solid ").concat(_uiConstants.colors.grey900, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".toggled.jsx-3952608485:focus{background:".concat(_uiConstants.colors.grey800, ";}"), ".toggled.jsx-3952608485:hover{background:".concat(_uiConstants.colors.grey800, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-3952608485:active,.toggled.jsx-3952608485:active.jsx-3952608485:focus{background:".concat(_uiConstants.colors.grey900, ";border-color:").concat(_uiConstants.colors.grey900, ";}"), ".toggled.jsx-3952608485:disabled{background:".concat(_uiConstants.colors.grey500, ";border-color:").concat(_uiConstants.colors.grey600, ";color:").concat(_uiConstants.colors.grey050, ";fill:").concat(_uiConstants.colors.grey050, ";}"), ".loader.jsx-3952608485{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-3952608485+.button-icon.jsx-3952608485{display:none;}", ".icon-only.jsx-3952608485 .loader.jsx-3952608485{margin:0 8px 0 4px;}", ".small.icon-only.jsx-3952608485 .loader.jsx-3952608485{margin:0 4px;}"];
|
|
11
|
+
_defaultExport.__hash = "3952608485";
|
|
12
12
|
var _default = _defaultExport;
|
|
13
13
|
exports.default = _default;
|
|
@@ -47,14 +47,23 @@ export default {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
|
-
const
|
|
50
|
+
const DemoIcon24 = /*#__PURE__*/React.createElement("svg", {
|
|
51
51
|
height: "24",
|
|
52
52
|
viewBox: "0 0 24 24",
|
|
53
53
|
width: "24",
|
|
54
54
|
xmlns: "http://www.w3.org/2000/svg"
|
|
55
55
|
}, /*#__PURE__*/React.createElement("path", {
|
|
56
56
|
d: "m10.7071068 13.2928932c.3604839.360484.3882135.927715.0831886 1.3200062l-.0831886.0942074-5.2921068 5.2918932 2.585.001c.51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211c0 .5128358-.38604019.9355072-.88337887.9932723l-.11662113.0067277h-5l-.0193545-.0001861c-.02332655-.0004488-.04664039-.0017089-.06989557-.0037803l.08925007.0039664c-.05062028 0-.10036209-.0037612-.14896122-.0110193-.01698779-.0026088-.03441404-.0056829-.05176454-.0092208-.02202032-.0043997-.04371072-.0095935-.06511385-.0154809-.01562367-.0043767-.03101173-.0090077-.04630291-.0140171-.01965516-.0063844-.03943668-.0135776-.058916-.0213659-.01773713-.0070924-.03503998-.014575-.05216303-.0225694-.02066985-.0097032-.0410724-.0201205-.0610554-.0312024-.01211749-.006623-.02433616-.0137311-.0364318-.0211197-.0255662-.0157232-.05042194-.0324946-.07445055-.050318-.00744374-.0054399-.01468311-.010971-.02186305-.0166142-.0631594-.049624-.12042594-.1068905-.17019169-.1703222l.08010726.0903567c-.03539405-.0353941-.06758027-.0727812-.09655864-.1118002-.01784449-.0241759-.03461588-.0490316-.05026715-.0746464-.00746051-.0120471-.0145686-.0242658-.02139626-.0365981-.01087725-.0197682-.02129453-.0401707-.03101739-.060963-.00797473-.0170006-.01545736-.0343035-.02242829-.0517631-.00790975-.0197568-.015103-.0395383-.02167881-.0595996-.00481796-.0148851-.00944895-.0302731-.01370154-.0457434-.00601151-.0215565-.01120534-.0432469-.01567999-.0651989-.00346298-.0174188-.00653707-.0348451-.00914735-.0523272-.00160026-.010231-.00303174-.021012-.00429007-.0318458l-.00276132-.027371c-.00207143-.0232552-.00333152-.0465691-.00378026-.0698956l-.00018615-.0193545v-5c0-.5522847.44771525-1 1-1 .51283584 0 .93550716.3860402.99327227.8833789l.00672773.1166211v2.584l5.29289322-5.2911068c.39052429-.3905243 1.02368928-.3905243 1.41421358 0zm9.2928932-3.2928932v10h-10v-2h8v-8zm-6-6v2h-8v7h-2v-9zm7-2 .0193545.00018615c.0233265.00044874.0466404.00170883.0698956.00378026l-.0892501-.00396641c.0506203 0 .1003621.00376119.1489612.01101934.0169878.00260874.0344141.00568283.0517646.00922073.0220203.00439973.0437107.00959356.0651138.0154809.0156237.00437676.0310117.00900775.0463029.01401712.0196552.0063844.0394367.01357765.058916.02136587.0177371.00709246.03504.01457509.052163.0225694.0206699.00970328.0410724.02012056.0610555.03120241.0121174.00662306.0243361.01373115.0364318.02111968.0255662.01572325.0504219.03249464.0744505.05031806.0074437.00543993.0146831.01097097.021863.01661418.0631595.04962402.120426.10689056.1701917.17032223l-.0801072-.0903567c.035394.03539405.0675802.0727812.0965586.11180017.0178445.02417592.0346159.04903166.0502672.07464642.0074605.01204708.0145686.02426575.0213962.03659809.0108773.01976815.0212946.0401707.0310174.06096295.0079748.01700065.0154574.0343035.0224283.05176313.0079098.01975682.015103.03953834.0216788.05959961.004818.01488507.009449.03027313.0137016.04574344.0060115.02155649.0112053.04324689.0156799.06519887.003463.01741884.0065371.03484509.0091474.05232723.0016003.01023098.0030317.02101195.0042901.03184574l.0030256.03039033c.0015457.01796531.0026074.03596443.003185.05397618l.0005171.03225462v5c0 .55228475-.4477153 1-1 1-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113v-2.586l-5.2928932 5.2931068c-.3905243.3905243-1.0236893.3905243-1.4142136 0-.3604839-.360484-.3882135-.92771504-.0831886-1.32000624l.0831886-.09420734 5.2911068-5.29289322h-2.584c-.5128358 0-.9355072-.38604019-.9932723-.88337887l-.0067277-.11662113c0-.51283584.3860402-.93550716.8833789-.99327227l.1166211-.00672773z",
|
|
57
|
-
fill: "
|
|
57
|
+
fill: "inherit"
|
|
58
|
+
}));
|
|
59
|
+
const DemoIcon16 = /*#__PURE__*/React.createElement("svg", {
|
|
60
|
+
height: "16",
|
|
61
|
+
viewBox: "0 0 16 16",
|
|
62
|
+
width: "16",
|
|
63
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
64
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
65
|
+
d: "m6.85355339 9.14644661c.17356635.17356635.1928515.44299075.05785545.63785889l-.05785545.06924789-4.14755339 4.14644661h2.794c.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756c0 .2454599-.17687516.4496084-.41012437.4919443l-.08987563.0080557h-4c-.24545989 0-.44960837-.1768752-.49194433-.4101244l-.00805567-.0898756v-4c0-.2761424.22385763-.5.5-.5.24545989 0 .44960837.1768752.49194433.4101244l.00805567.0898756v2.792l4.14644661-4.14555339c.19526215-.19526215.51184463-.19526215.70710678 0zm6.14644661-2.14644661v6h-6v-1h5v-5zm-4-4v1h-5v5h-1v-6zm5.5-2c.2454599 0 .4496084.17687516.4919443.41012437l.0080557.08987563v4c0 .27614237-.2238576.5-.5.5-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563v-2.794l-4.14644661 4.14755339c-.19526215.19526215-.51184463.19526215-.70710678 0-.17356635-.17356635-.1928515-.44299075-.05785545-.63785889l.05785545-.06924789 4.14655339-4.14744661-2.793.001c-.2454599 0-.4496084-.17687516-.4919443-.41012437l-.0080557-.08987563c0-.24545989.1768752-.44960837.4101244-.49194433l.0898756-.00805567z",
|
|
66
|
+
fill: "inherit"
|
|
58
67
|
}));
|
|
59
68
|
|
|
60
69
|
const Template = args => /*#__PURE__*/React.createElement(Button, args);
|
|
@@ -181,7 +190,7 @@ export const Icon = args => /*#__PURE__*/React.createElement(React.Fragment, nul
|
|
|
181
190
|
destructive: true
|
|
182
191
|
}, args)));
|
|
183
192
|
Icon.args = {
|
|
184
|
-
icon:
|
|
193
|
+
icon: DemoIcon24,
|
|
185
194
|
name: 'Icon button'
|
|
186
195
|
};
|
|
187
196
|
Icon.parameters = {
|
|
@@ -195,17 +204,30 @@ Icon.parameters = {
|
|
|
195
204
|
}
|
|
196
205
|
}
|
|
197
206
|
};
|
|
207
|
+
export const IconOnly = Template.bind({});
|
|
208
|
+
IconOnly.args = {
|
|
209
|
+
icon: DemoIcon24,
|
|
210
|
+
name: 'Icon only button',
|
|
211
|
+
children: null
|
|
212
|
+
};
|
|
198
213
|
export const IconSmall = Template.bind({});
|
|
199
214
|
IconSmall.args = {
|
|
200
|
-
icon:
|
|
215
|
+
icon: DemoIcon16,
|
|
201
216
|
small: true,
|
|
202
217
|
name: 'Icon small button',
|
|
218
|
+
children: 'Label me!'
|
|
219
|
+
};
|
|
220
|
+
export const IconOnlySmall = Template.bind({});
|
|
221
|
+
IconOnlySmall.args = {
|
|
222
|
+
icon: DemoIcon16,
|
|
223
|
+
small: true,
|
|
224
|
+
name: 'Icon only small button',
|
|
203
225
|
children: null
|
|
204
226
|
};
|
|
205
227
|
export const Toggled = Template.bind({});
|
|
206
228
|
Toggled.args = {
|
|
207
229
|
toggled: true,
|
|
208
|
-
icon:
|
|
230
|
+
icon: DemoIcon24,
|
|
209
231
|
name: 'Toggled button',
|
|
210
232
|
children: null
|
|
211
233
|
};
|
|
@@ -226,7 +248,7 @@ export const ToggledDisabled = Template.bind({});
|
|
|
226
248
|
ToggledDisabled.args = {
|
|
227
249
|
toggled: true,
|
|
228
250
|
disabled: true,
|
|
229
|
-
icon:
|
|
251
|
+
icon: DemoIcon24,
|
|
230
252
|
name: 'Toggled button',
|
|
231
253
|
children: null
|
|
232
254
|
};
|
|
@@ -241,7 +263,7 @@ Loading.args = {
|
|
|
241
263
|
name: 'Loading button',
|
|
242
264
|
loading: true,
|
|
243
265
|
children: 'Loading...',
|
|
244
|
-
icon:
|
|
266
|
+
icon: DemoIcon24
|
|
245
267
|
};
|
|
246
268
|
Loading.parameters = {
|
|
247
269
|
docs: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { colors, theme, spacers } from '@dhis2/ui-constants';
|
|
2
|
-
const _defaultExport = ["button.jsx-
|
|
3
|
-
_defaultExport.__hash = "
|
|
2
|
+
const _defaultExport = ["button.jsx-3952608485{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;font-weight:400;-webkit-letter-spacing:0.5px;-moz-letter-spacing:0.5px;-ms-letter-spacing:0.5px;letter-spacing:0.5px;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:".concat(colors.grey900, ";height:36px;padding:0 ").concat(spacers.dp12, ";font-size:14px;line-height:16px;border:1px solid ").concat(colors.grey500, ";background-color:#f9fafb;}"), "button.jsx-3952608485:disabled{cursor:not-allowed;}", "button.jsx-3952608485:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;-webkit-text-decoration:underline;text-decoration:underline;}"), "button.jsx-3952608485:focus.jsx-3952608485:not(:focus-visible){outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-3952608485:active.jsx-3952608485:focus,button.jsx-3952608485:disabled.jsx-3952608485:focus{outline:none;-webkit-text-decoration:none;text-decoration:none;}", "button.jsx-3952608485:hover{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";}"), "button.jsx-3952608485:active,button.jsx-3952608485:active.jsx-3952608485:focus{border-color:".concat(colors.grey500, ";background-color:").concat(colors.grey200, ";box-shadow:0 0 0 1px rgb(0,0,0,0.1) inset;}"), "button.jsx-3952608485:focus{background-color:#f9fafb;}", "button.jsx-3952608485:disabled{border-color:".concat(colors.grey400, ";background-color:#f9fafb;box-shadow:none;color:").concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".small.jsx-3952608485{height:28px;padding:0 6px;font-size:14px;line-height:16px;}", ".large.jsx-3952608485{height:43px;padding:0 ".concat(spacers.dp24, ";font-size:16px;-webkit-letter-spacing:0.57px;-moz-letter-spacing:0.57px;-ms-letter-spacing:0.57px;letter-spacing:0.57px;line-height:19px;}"), ".primary.jsx-3952608485{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#1565c0 0%,#0650a3 100%);background-color:#2b61b3;color:").concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".primary.jsx-3952608485:hover{border-color:".concat(theme.primary800, ";background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#21539f;}"), ".primary.jsx-3952608485:active,.primary.jsx-3952608485:active.jsx-3952608485:focus{background:linear-gradient(180deg,#054fa3 0%,#034793 100%);background-color:#1c4a90;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".primary.jsx-3952608485:focus{background:".concat(colors.blue800, ";border-color:").concat(colors.blue900, ";outline-offset:-5px;}"), ".primary.jsx-3952608485:disabled{border-color:#93a6bd;background:#b3c6de;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".secondary.jsx-3952608485{border-color:rgba(74,87,104,0.25);background-color:transparent;}", ".secondary.jsx-3952608485:hover{border-color:rgba(74,87,104,0.5);background-color:rgba(160,173,186,0.05);}", ".secondary.jsx-3952608485:active,.secondary.jsx-3952608485:active.jsx-3952608485:focus{background-color:rgba(160,173,186,0.2);box-shadow:none;}", ".secondary.jsx-3952608485:focus{background-color:transparent;}", ".secondary.jsx-3952608485:disabled{border-color:rgba(74,87,104,0.25);background-color:transparent;box-shadow:none;color:".concat(theme.disabled, ";fill:").concat(theme.disabled, ";}"), ".destructive.jsx-3952608485{border-color:#a10b0b;background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b9242b;color:".concat(colors.white, ";fill:").concat(colors.white, ";font-weight:500;}"), ".destructive.jsx-3952608485:hover{border-color:#a10b0b;background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac0f1a;}", ".destructive.jsx-3952608485:active,.destructive.jsx-3952608485:active.jsx-3952608485:focus{background:linear-gradient(180deg,#b81c1c 0%,#b80c0b 100%);background-color:#ac101b;box-shadow:0 0 0 1px rgba(0,0,0,0.18) inset;}", ".destructive.jsx-3952608485:focus{background:linear-gradient(180deg,#d32f2f 0%,#b71c1c 100%);background-color:#b72229;}", ".destructive.jsx-3952608485:disabled{border-color:#c59898;background:#d6a8a8;box-shadow:none;color:".concat(colors.white, ";fill:").concat(colors.white, ";}"), ".icon-only.jsx-3952608485{padding:0 0 0 5px;}", ".button-icon.jsx-3952608485{margin-right:6px;color:inherit;fill:inherit;font-size:26px;vertical-align:middle;pointer-events:none;}", ".icon-only.jsx-3952608485 .button-icon.jsx-3952608485{margin-right:5px;}", ".small.icon-only.jsx-3952608485{padding:0 4px 0 5px;}", ".small.jsx-3952608485 .button-icon.jsx-3952608485{margin-right:2px;}", ".small.icon-only.jsx-3952608485 .button-icon.jsx-3952608485{margin-right:1px;}", ".toggled.jsx-3952608485{background:".concat(colors.grey700, ";border:1px solid ").concat(colors.grey900, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".toggled.jsx-3952608485:focus{background:".concat(colors.grey800, ";}"), ".toggled.jsx-3952608485:hover{background:".concat(colors.grey800, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-3952608485:active,.toggled.jsx-3952608485:active.jsx-3952608485:focus{background:".concat(colors.grey900, ";border-color:").concat(colors.grey900, ";}"), ".toggled.jsx-3952608485:disabled{background:".concat(colors.grey500, ";border-color:").concat(colors.grey600, ";color:").concat(colors.grey050, ";fill:").concat(colors.grey050, ";}"), ".loader.jsx-3952608485{width:16px;height:16px;margin-right:8px;}", ".loader.jsx-3952608485+.button-icon.jsx-3952608485{display:none;}", ".icon-only.jsx-3952608485 .loader.jsx-3952608485{margin:0 8px 0 4px;}", ".small.icon-only.jsx-3952608485 .loader.jsx-3952608485{margin:0 4px;}"];
|
|
3
|
+
_defaultExport.__hash = "3952608485";
|
|
4
4
|
export default _defaultExport;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "8.14.
|
|
3
|
+
"version": "8.14.11",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.1.2",
|
|
35
|
-
"@dhis2-ui/layer": "8.14.
|
|
36
|
-
"@dhis2-ui/loader": "8.14.
|
|
37
|
-
"@dhis2-ui/popper": "8.14.
|
|
38
|
-
"@dhis2/ui-constants": "8.14.
|
|
39
|
-
"@dhis2/ui-icons": "8.14.
|
|
35
|
+
"@dhis2-ui/layer": "8.14.11",
|
|
36
|
+
"@dhis2-ui/loader": "8.14.11",
|
|
37
|
+
"@dhis2-ui/popper": "8.14.11",
|
|
38
|
+
"@dhis2/ui-constants": "8.14.11",
|
|
39
|
+
"@dhis2/ui-icons": "8.14.11",
|
|
40
40
|
"classnames": "^2.3.1",
|
|
41
41
|
"prop-types": "^15.7.2"
|
|
42
42
|
},
|