@agility/plenum-ui 1.3.37 → 1.3.39

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.
Files changed (44) hide show
  1. package/coverage/base.css +224 -0
  2. package/coverage/block-navigation.js +87 -0
  3. package/coverage/components/Button/Button.tsx.html +739 -0
  4. package/coverage/components/Button/index.html +116 -0
  5. package/coverage/components/Forms/BaseField/BaseField.tsx.html +415 -0
  6. package/coverage/components/Forms/BaseField/index.html +116 -0
  7. package/coverage/components/Forms/Checkbox/Checkbox.tsx.html +346 -0
  8. package/coverage/components/Forms/Checkbox/index.html +116 -0
  9. package/coverage/components/Forms/InputCounter/InputCounter.tsx.html +139 -0
  10. package/coverage/components/Forms/InputCounter/index.html +116 -0
  11. package/coverage/components/Forms/InputLabel/InputLabel.tsx.html +211 -0
  12. package/coverage/components/Forms/InputLabel/index.html +131 -0
  13. package/coverage/components/Forms/InputLabel/index.ts.html +94 -0
  14. package/coverage/components/Forms/Radio/Radio.tsx.html +364 -0
  15. package/coverage/components/Forms/Radio/index.html +116 -0
  16. package/coverage/components/Forms/Select/Select.tsx.html +394 -0
  17. package/coverage/components/Forms/Select/index.html +116 -0
  18. package/coverage/components/Forms/TextInputAddon/InputCta/InputCta.tsx.html +271 -0
  19. package/coverage/components/Forms/TextInputAddon/InputCta/index.html +116 -0
  20. package/coverage/components/Forms/TextInputSelect/InputSelect/InputSelect.tsx.html +259 -0
  21. package/coverage/components/Forms/TextInputSelect/InputSelect/index.html +116 -0
  22. package/coverage/components/Switch/Switch.tsx.html +253 -0
  23. package/coverage/components/Switch/index.html +116 -0
  24. package/coverage/components/ToggleSwitch/ToggleSwitch.tsx.html +424 -0
  25. package/coverage/components/ToggleSwitch/index.html +116 -0
  26. package/coverage/coverage-final.json +14 -0
  27. package/coverage/favicon.png +0 -0
  28. package/coverage/index.html +251 -0
  29. package/coverage/prettify.css +1 -0
  30. package/coverage/prettify.js +2 -0
  31. package/coverage/sort-arrow-sprite.png +0 -0
  32. package/coverage/sorter.js +196 -0
  33. package/coverage/util/DynamicIcons.tsx.html +151 -0
  34. package/coverage/util/Loader.tsx.html +139 -0
  35. package/coverage/util/index.html +146 -0
  36. package/coverage/util/useID.ts.html +133 -0
  37. package/lib/components/ToggleSwitch/ToggleSwitch.d.ts +11 -12
  38. package/lib/components/ToggleSwitch/ToggleSwitch.stories.d.ts +15 -3
  39. package/lib/index.esm.js +23 -15
  40. package/lib/index.esm.js.map +1 -1
  41. package/lib/index.js +23 -15
  42. package/lib/index.js.map +1 -1
  43. package/lib/tailwind.css +20 -0
  44. package/package.json +1 -1
package/coverage/util/useID.ts.html ADDED
@@ -0,0 +1,133 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for util/useID.ts</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../prettify.css" />
9
+ <link rel="stylesheet" href="../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../index.html">All files</a> / <a href="index.html">util</a> useID.ts</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">91.66% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>11/12</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">33.33% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>1/3</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>3/3</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>8/8</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input oninput="onInput()" type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">3x</span>
83
+ <span class="cline-any cline-neutral">&nbsp;</span>
84
+ <span class="cline-any cline-yes">3x</span>
85
+ <span class="cline-any cline-neutral">&nbsp;</span>
86
+ <span class="cline-any cline-yes">33x</span>
87
+ <span class="cline-any cline-neutral">&nbsp;</span>
88
+ <span class="cline-any cline-neutral">&nbsp;</span>
89
+ <span class="cline-any cline-yes">3x</span>
90
+ <span class="cline-any cline-neutral">&nbsp;</span>
91
+ <span class="cline-any cline-yes">45x</span>
92
+ <span class="cline-any cline-neutral">&nbsp;</span>
93
+ <span class="cline-any cline-yes">45x</span>
94
+ <span class="cline-any cline-yes">1x</span>
95
+ <span class="cline-any cline-neutral">&nbsp;</span>
96
+ <span class="cline-any cline-neutral">&nbsp;</span>
97
+ <span class="cline-any cline-yes">45x</span>
98
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useLayoutEffect, useState } from "react"
99
+ &nbsp;
100
+ let id = 0
101
+ function generateId() {
102
+ return ++id
103
+ }
104
+ &nbsp;
105
+ export const useId = () =&gt; {
106
+ &nbsp;
107
+ const [id, setId] = useState(generateId)
108
+ &nbsp;
109
+ useLayoutEffect(() =&gt; {
110
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (id === null) <span class="cstat-no" title="statement not covered" >setId(generateId())</span>
111
+ }, [id])
112
+ &nbsp;
113
+ return id != null ? '' + id : <span class="branch-1 cbranch-no" title="branch not covered" >undefined</span>
114
+ }</pre></td></tr></table></pre>
115
+
116
+ <div class='push'></div><!-- for sticky footer -->
117
+ </div><!-- /wrapper -->
118
+ <div class='footer quiet pad2 space-top1 center small'>
119
+ Code coverage generated by
120
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
121
+ at Wed Nov 02 2022 14:37:03 GMT-0400 (Eastern Daylight Time)
122
+ </div>
123
+ <script src="../prettify.js"></script>
124
+ <script>
125
+ window.onload = function () {
126
+ prettyPrint();
127
+ };
128
+ </script>
129
+ <script src="../sorter.js"></script>
130
+ <script src="../block-navigation.js"></script>
131
+ </body>
132
+ </html>
133
+
package/lib/components/ToggleSwitch/ToggleSwitch.d.ts CHANGED
@@ -1,27 +1,26 @@
1
1
  import { FC } from "react";
2
2
  export interface IToggleSwitchProps {
3
- /** size state */
3
+ /** size of the toggle - default value is "md" */
4
4
  size?: "sm" | "md" | "lg";
5
5
  /** Toggle Switch label */
6
6
  label?: string | null;
7
- /** A Classname string to be used for the label*/
7
+ /** A Classname to be used for the label*/
8
8
  labelStyles?: string;
9
- /** A Classname string to style the Switch Group*/
9
+ /** A Classname to style the Switch Group*/
10
10
  groupStyles?: string;
11
- /** Toggle Switch ID */
12
- id?: string;
13
- /** Disabled state */
11
+ /** Toggle Switch ID*/
12
+ id: string;
13
+ /** Disabled state - default value is false*/
14
14
  isDisabled?: boolean;
15
- /** The value used when using this component inside a form, if it is checked.*/
16
- value: "on" | "off";
17
15
  /** Whether or not the switch is checked. */
18
16
  isChecked: boolean;
19
- /** If field is required */
17
+ /**A function to update isChecked State*/
18
+ onChangeHandler: (state: boolean, value: string) => void;
19
+ /** If field is required - default value is false */
20
20
  isRequired?: boolean;
21
- /** Error state */
21
+ /** Error state - default value is false*/
22
+ isError?: boolean;
22
23
  /** Message or description */
23
- /** The function to call when the switch is toggled. */
24
- onChange?: (value: string) => void;
25
24
  /** The name used when using this component inside a form.*/
26
25
  name: string;
27
26
  }
package/lib/components/ToggleSwitch/ToggleSwitch.stories.d.ts CHANGED
@@ -4,6 +4,18 @@ import { IToggleSwitchProps } from "./ToggleSwitch";
4
4
  declare const _default: Meta<import("@storybook/react").Args>;
5
5
  export default _default;
6
6
  export declare const AllVariations: Story<IToggleSwitchProps>;
7
- export declare const ToggleSwitchComponentSm: Story<IToggleSwitchProps>;
8
- export declare const ToggleSwitchComponentMd: Story<IToggleSwitchProps>;
9
- export declare const ToggleSwitchComponentLg: Story<IToggleSwitchProps>;
7
+ export declare const ToggleSwitchComponentSmDisabled: Story<IToggleSwitchProps>;
8
+ export declare const ToggleSwitchComponentSmChecked: Story<IToggleSwitchProps>;
9
+ export declare const ToggleSwitchComponentSmUnchecked: Story<IToggleSwitchProps>;
10
+ export declare const ToggleSwitchComponentSmError: Story<IToggleSwitchProps>;
11
+ export declare const ToggleSwitchComponentSmRequired: Story<IToggleSwitchProps>;
12
+ export declare const ToggleSwitchComponentMdDisabled: Story<IToggleSwitchProps>;
13
+ export declare const ToggleSwitchComponentMdChecked: Story<IToggleSwitchProps>;
14
+ export declare const ToggleSwitchComponentMdUnchecked: Story<IToggleSwitchProps>;
15
+ export declare const ToggleSwitchComponentMdError: Story<IToggleSwitchProps>;
16
+ export declare const ToggleSwitchComponentMdRequired: Story<IToggleSwitchProps>;
17
+ export declare const ToggleSwitchComponentLgDisabled: Story<IToggleSwitchProps>;
18
+ export declare const ToggleSwitchComponentLgChecked: Story<IToggleSwitchProps>;
19
+ export declare const ToggleSwitchComponentLgUnchecked: Story<IToggleSwitchProps>;
20
+ export declare const ToggleSwitchComponentLgError: Story<IToggleSwitchProps>;
21
+ export declare const ToggleSwitchComponentLgRequired: Story<IToggleSwitchProps>;
package/lib/index.esm.js CHANGED
@@ -7312,30 +7312,38 @@ var ButtonDropDown = function (_a) {
7312
7312
 
7313
7313
  /** Comment */
7314
7314
  var ToggleSwitch = function (_a) {
7315
- var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.label, label = _c === void 0 ? "Label" : _c, labelStyles = _a.labelStyles, groupStyles = _a.groupStyles, isDisabled = _a.isDisabled, _d = _a.value, value = _d === void 0 ? "off" : _d, _e = _a.isChecked, isChecked = _e === void 0 ? false : _e, _f = _a.id, id = _f === void 0 ? "" : _f, name = _a.name, onChange = _a.onChange;
7316
- var _g = useState(isChecked), t_isChecked = _g[0], T_setIsChecked = _g[1];
7317
- var _h = useState(t_isChecked ? "on" : "off"), toggleValue = _h[0], setToggleValue = _h[1];
7315
+ var _b = _a.size, size = _b === void 0 ? "md" : _b, label = _a.label, labelStyles = _a.labelStyles, groupStyles = _a.groupStyles, isDisabled = _a.isDisabled, isChecked = _a.isChecked, onChangeHandler = _a.onChangeHandler, id = _a.id, name = _a.name, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, _d = _a.isError
7316
+ // onChange
7317
+ , isError = _d === void 0 ? false : _d
7318
+ // onChange
7319
+ ;
7320
+ var _e = useState(isChecked), toggleChecked = _e[0], setToggleChecked = _e[1];
7321
+ var toggleValue = useState(toggleChecked ? "on" : "off")[0];
7322
+ useEffect(function () { return setToggleChecked(isChecked); }, [isChecked]);
7323
+ //Styles for the switch input/button
7324
+ var switchStyles = cn("relative inline-flex flex-shrink-0 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-75 focus-within:ring-2 focus-within:ring-purple-500 focus-within:ring-opacity-75 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75", { "bg-purple-600": toggleChecked }, { "bg-gray-200": !toggleChecked }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" }, {
7325
+ "focus-visible:ring-red-600 focus-within:ring-red-600 focus:ring-red-600 !bg-red-400": isError
7326
+ }, { "opacity-75 !bg-purple-300": isDisabled });
7327
+ // Styles for the circular button inside the switch
7328
+ var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": toggleChecked }, { "translate-x-0": !toggleChecked }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && toggleChecked }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !toggleChecked });
7318
7329
  var handleToggleChange = function (v) {
7319
7330
  if (v === null)
7320
7331
  return;
7321
- T_setIsChecked(v);
7322
- setToggleValue(!v ? "off" : "on");
7323
- onChange && onChange(toggleValue);
7332
+ console.log(v);
7333
+ setToggleChecked(v);
7334
+ onChangeHandler && onChangeHandler(v, toggleValue);
7324
7335
  };
7325
- var switchStyles = cn("relative inline-flex flex-shrink-0", "border-2 border-transparent rounded-full cursor-pointer", "transition-colors ease-in-out duration-200 focus:outline-none", "focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-opacity-75", "focus-within:ring-2 focus-within:ring-purple-500 focus-within:ring-opacity-75", "focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75", { "bg-purple-600": t_isChecked }, { "bg-gray-200": !t_isChecked }, { "h-[38px] w-[74px]": size === "lg" }, { "h-[28px] w-[64px]": size === "md" }, { "h-[18px] w-[34px]": size === "sm" }, isDisabled && "opacity-75 !bg-purple-300");
7326
- // the circular button inside the switch
7327
- var toggleStyles = cn("pointer-events-none inline-block rounded-full bg-white", " transform ring-0 transition ease-in-out duration-200", { "translate-x-9": t_isChecked }, { "translate-x-0": !t_isChecked }, { "h-[34px] w-[34px]": size === "lg" }, { "h-[24px] w-[24px]": size === "md" }, { "h-[14px] w-[14px] translate-x-4": size === "sm" && t_isChecked }, { "h-[14px] w-[14px] translate-x-0": size === "sm" && !t_isChecked });
7328
7336
  return (React__default.createElement(ue.Group, null,
7329
7337
  React__default.createElement("div", { className: cn("flex items-center justify-between text-center", groupStyles && groupStyles) },
7330
- label && (React__default.createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles
7331
- // isDisabled && "opacity-50"
7332
- ) }, label)),
7333
- React__default.createElement(ue, { checked: t_isChecked || toggleValue === "on" || value === "on", name: name, value: toggleValue, id: id, className: switchStyles, onChange: isDisabled
7338
+ label && (React__default.createElement(ue.Label, { className: cn("mr-2", labelStyles && labelStyles) },
7339
+ label,
7340
+ isRequired && (React__default.createElement("span", { className: "text-red-500" }, "\u00A0*")))),
7341
+ React__default.createElement(ue, { checked: toggleChecked, name: name, value: toggleValue, id: id, className: switchStyles, onChange: isDisabled
7334
7342
  ? function () { return handleToggleChange(null); }
7335
- : function () { return handleToggleChange(!t_isChecked); }, "aria-disabled": isDisabled },
7343
+ : function (v) { return handleToggleChange(v); }, "aria-disabled": isDisabled },
7336
7344
  React__default.createElement("span", { className: "sr-only" },
7337
7345
  "Use space to toggle ",
7338
- toggleValue,
7346
+ toggleChecked ? "on" : "off",
7339
7347
  "."),
7340
7348
  React__default.createElement("span", { "aria-hidden": "true", className: toggleStyles })))));
7341
7349
  };