@dktunited-techoff/techoff-suite-ui 0.8.13 → 0.8.14

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 (21) hide show
  1. package/esm/components/Inputs/BooleanInput/BooleanInput.css +7 -0
  2. package/esm/components/Inputs/BooleanInput/BooleanInput.d.ts +1 -1
  3. package/esm/components/Inputs/BooleanInput/BooleanInput.js +4 -4
  4. package/esm/components/Inputs/BooleanInput/BooleanInput.js.map +1 -1
  5. package/esm/components/Inputs/BooleanInput/BooleanInput.tsx +4 -4
  6. package/esm/components/Inputs/BooleanInput/BooleanInput.types.d.ts +3 -2
  7. package/esm/components/Inputs/BooleanInput/BooleanInput.types.ts +3 -2
  8. package/esm/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +10 -1
  9. package/lib/components/Inputs/BooleanInput/BooleanInput.css +7 -0
  10. package/lib/components/Inputs/BooleanInput/BooleanInput.d.ts +1 -1
  11. package/lib/components/Inputs/BooleanInput/BooleanInput.js +4 -4
  12. package/lib/components/Inputs/BooleanInput/BooleanInput.js.map +1 -1
  13. package/lib/components/Inputs/BooleanInput/BooleanInput.tsx +4 -4
  14. package/lib/components/Inputs/BooleanInput/BooleanInput.types.d.ts +3 -2
  15. package/lib/components/Inputs/BooleanInput/BooleanInput.types.ts +3 -2
  16. package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +10 -1
  17. package/package.json +1 -1
  18. package/src/components/Inputs/BooleanInput/BooleanInput.css +7 -0
  19. package/src/components/Inputs/BooleanInput/BooleanInput.tsx +4 -4
  20. package/src/components/Inputs/BooleanInput/BooleanInput.types.ts +3 -2
  21. package/src/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx +10 -1
package/esm/components/Inputs/BooleanInput/BooleanInput.css CHANGED
@@ -12,6 +12,13 @@
12
12
  display: flex;
13
13
  }
14
14
 
15
+ .boolean-input--disabled {
16
+ opacity: 0.5;
17
+ }
18
+ .boolean-input--disabled .boolean-input-content > div {
19
+ cursor: not-allowed;
20
+ }
21
+
15
22
  /* ######## */
16
23
  /* INPUTS */
17
24
  .boolean-input-content {
package/esm/components/Inputs/BooleanInput/BooleanInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { BooleanInputProps } from './BooleanInput.types';
3
3
  import './BooleanInput.css';
4
- export declare const BooleanInput: ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => React.JSX.Element;
4
+ export declare const BooleanInput: ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => React.JSX.Element;
package/esm/components/Inputs/BooleanInput/BooleanInput.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import * as React from 'react';
2
2
  import './BooleanInput.css';
3
- export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }) => {
3
+ export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }) => {
4
4
  // #########
5
5
  // Rendering
6
- return (React.createElement("div", { className: "boolean-input" },
6
+ return (React.createElement("div", { className: `boolean-input ${disabled ? 'boolean-input--disabled' : ''}` },
7
7
  label && React.createElement("label", null, label),
8
8
  React.createElement("div", { className: "boolean-input-container" },
9
9
  React.createElement("div", { className: "boolean-input-content" },
10
- React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue ?? 'Yes'),
11
- React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse ?? 'No')))));
10
+ React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue),
11
+ React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse)))));
12
12
  };
13
13
  //# sourceMappingURL=BooleanInput.js.map
package/esm/components/Inputs/BooleanInput/BooleanInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACnG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC3B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,IAAI,KAAK,CACf;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,IAAI,IAAI,CACf,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,oBAAoB,CAAC;AAE5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7G,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE;QACzE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,CACN;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,CACP,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/components/Inputs/BooleanInput/BooleanInput.tsx CHANGED
@@ -2,20 +2,20 @@ import * as React from 'react';
2
2
  import { BooleanInputProps } from './BooleanInput.types';
3
3
  import './BooleanInput.css';
4
4
 
5
- export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => {
5
+ export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
6
6
  // #########
7
7
  // Rendering
8
8
  return (
9
- <div className="boolean-input">
9
+ <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
10
10
  {label && <label>{label}</label>}
11
11
 
12
12
  <div className="boolean-input-container">
13
13
  <div className="boolean-input-content">
14
14
  <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
15
- {labelTrue ?? 'Yes'}
15
+ {labelTrue}
16
16
  </div>
17
17
  <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
18
- {labelFalse ?? 'No'}
18
+ {labelFalse}
19
19
  </div>
20
20
  </div>
21
21
  </div>
package/esm/components/Inputs/BooleanInput/BooleanInput.types.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export type BooleanInputProps = {
2
2
  label?: string;
3
- labelFalse?: string;
4
- labelTrue?: string;
3
+ labelFalse: string;
4
+ labelTrue: string;
5
+ disabled?: boolean;
5
6
  value?: boolean;
6
7
  onChange: (value: boolean) => void;
7
8
  };
package/esm/components/Inputs/BooleanInput/BooleanInput.types.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export type BooleanInputProps = {
2
2
  label?: string;
3
- labelFalse?: string;
4
- labelTrue?: string;
3
+ labelFalse: string;
4
+ labelTrue: string;
5
+ disabled?: boolean;
5
6
  value?: boolean;
6
7
  onChange: (value: boolean) => void;
7
8
  };
package/esm/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx CHANGED
@@ -17,6 +17,11 @@ export const inputArgType = {
17
17
  control: 'text',
18
18
  description: 'Label of the TRUE value.',
19
19
  },
20
+ disabled: {
21
+ control: 'boolean',
22
+ description: 'Enable state of the input.',
23
+ table: { defaultValue: { summary: 'false' } },
24
+ },
20
25
  value: {
21
26
  control: 'boolean',
22
27
  description: 'Value of the input (can be undefined).',
@@ -34,7 +39,11 @@ The Boolean input is used to quickly switch between two possible states. It is c
34
39
  ## Overview
35
40
 
36
41
  <Canvas>
37
- <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
42
+ <Story
43
+ name="Overview"
44
+ args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false, onChange: () => {} }}
45
+ argTypes={inputArgType}
46
+ >
38
47
  {args => <BooleanInput {...args} />}
39
48
  </Story>
40
49
  </Canvas>
package/lib/components/Inputs/BooleanInput/BooleanInput.css CHANGED
@@ -12,6 +12,13 @@
12
12
  display: flex;
13
13
  }
14
14
 
15
+ .boolean-input--disabled {
16
+ opacity: 0.5;
17
+ }
18
+ .boolean-input--disabled .boolean-input-content > div {
19
+ cursor: not-allowed;
20
+ }
21
+
15
22
  /* ######## */
16
23
  /* INPUTS */
17
24
  .boolean-input-content {
package/lib/components/Inputs/BooleanInput/BooleanInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import * as React from 'react';
2
2
  import { BooleanInputProps } from './BooleanInput.types';
3
3
  import './BooleanInput.css';
4
- export declare const BooleanInput: ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => React.JSX.Element;
4
+ export declare const BooleanInput: ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => React.JSX.Element;
package/lib/components/Inputs/BooleanInput/BooleanInput.js CHANGED
@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.BooleanInput = void 0;
4
4
  const React = require("react");
5
5
  require("./BooleanInput.css");
6
- const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }) => {
6
+ const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }) => {
7
7
  // #########
8
8
  // Rendering
9
- return (React.createElement("div", { className: "boolean-input" },
9
+ return (React.createElement("div", { className: `boolean-input ${disabled ? 'boolean-input--disabled' : ''}` },
10
10
  label && React.createElement("label", null, label),
11
11
  React.createElement("div", { className: "boolean-input-container" },
12
12
  React.createElement("div", { className: "boolean-input-content" },
13
- React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue ?? 'Yes'),
14
- React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse ?? 'No')))));
13
+ React.createElement("div", { className: value === true ? 'boolean-input--selected' : '', onClick: () => onChange(true) }, labelTrue),
14
+ React.createElement("div", { className: value === false ? 'boolean-input--selected' : '', onClick: () => onChange(false) }, labelFalse)))));
15
15
  };
16
16
  exports.BooleanInput = BooleanInput;
17
17
  //# sourceMappingURL=BooleanInput.js.map
package/lib/components/Inputs/BooleanInput/BooleanInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,8BAA4B;AAErB,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACnG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,eAAe;QAC3B,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,IAAI,KAAK,CACf;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,IAAI,IAAI,CACf,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB"}
1
+ {"version":3,"file":"BooleanInput.js","sourceRoot":"","sources":["../../../../src/components/Inputs/BooleanInput/BooleanInput.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,8BAA4B;AAErB,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7G,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAE,iBAAiB,QAAQ,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE;QACzE,KAAK,IAAI,mCAAQ,KAAK,CAAS;QAEhC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uBAAuB;gBACpC,6BAAK,SAAS,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAC3F,SAAS,CACN;gBACN,6BAAK,SAAS,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC7F,UAAU,CACP,CACF,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,YAAY,gBAmBvB"}
package/lib/components/Inputs/BooleanInput/BooleanInput.tsx CHANGED
@@ -2,20 +2,20 @@ import * as React from 'react';
2
2
  import { BooleanInputProps } from './BooleanInput.types';
3
3
  import './BooleanInput.css';
4
4
 
5
- export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => {
5
+ export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
6
6
  // #########
7
7
  // Rendering
8
8
  return (
9
- <div className="boolean-input">
9
+ <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
10
10
  {label && <label>{label}</label>}
11
11
 
12
12
  <div className="boolean-input-container">
13
13
  <div className="boolean-input-content">
14
14
  <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
15
- {labelTrue ?? 'Yes'}
15
+ {labelTrue}
16
16
  </div>
17
17
  <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
18
- {labelFalse ?? 'No'}
18
+ {labelFalse}
19
19
  </div>
20
20
  </div>
21
21
  </div>
package/lib/components/Inputs/BooleanInput/BooleanInput.types.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export type BooleanInputProps = {
2
2
  label?: string;
3
- labelFalse?: string;
4
- labelTrue?: string;
3
+ labelFalse: string;
4
+ labelTrue: string;
5
+ disabled?: boolean;
5
6
  value?: boolean;
6
7
  onChange: (value: boolean) => void;
7
8
  };
package/lib/components/Inputs/BooleanInput/BooleanInput.types.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export type BooleanInputProps = {
2
2
  label?: string;
3
- labelFalse?: string;
4
- labelTrue?: string;
3
+ labelFalse: string;
4
+ labelTrue: string;
5
+ disabled?: boolean;
5
6
  value?: boolean;
6
7
  onChange: (value: boolean) => void;
7
8
  };
package/lib/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx CHANGED
@@ -17,6 +17,11 @@ export const inputArgType = {
17
17
  control: 'text',
18
18
  description: 'Label of the TRUE value.',
19
19
  },
20
+ disabled: {
21
+ control: 'boolean',
22
+ description: 'Enable state of the input.',
23
+ table: { defaultValue: { summary: 'false' } },
24
+ },
20
25
  value: {
21
26
  control: 'boolean',
22
27
  description: 'Value of the input (can be undefined).',
@@ -34,7 +39,11 @@ The Boolean input is used to quickly switch between two possible states. It is c
34
39
  ## Overview
35
40
 
36
41
  <Canvas>
37
- <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
42
+ <Story
43
+ name="Overview"
44
+ args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false, onChange: () => {} }}
45
+ argTypes={inputArgType}
46
+ >
38
47
  {args => <BooleanInput {...args} />}
39
48
  </Story>
40
49
  </Canvas>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "0.8.13",
3
+ "version": "0.8.14",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/Inputs/BooleanInput/BooleanInput.css CHANGED
@@ -12,6 +12,13 @@
12
12
  display: flex;
13
13
  }
14
14
 
15
+ .boolean-input--disabled {
16
+ opacity: 0.5;
17
+ }
18
+ .boolean-input--disabled .boolean-input-content > div {
19
+ cursor: not-allowed;
20
+ }
21
+
15
22
  /* ######## */
16
23
  /* INPUTS */
17
24
  .boolean-input-content {
package/src/components/Inputs/BooleanInput/BooleanInput.tsx CHANGED
@@ -2,20 +2,20 @@ import * as React from 'react';
2
2
  import { BooleanInputProps } from './BooleanInput.types';
3
3
  import './BooleanInput.css';
4
4
 
5
- export const BooleanInput = ({ label, labelFalse, labelTrue, value, onChange }: BooleanInputProps) => {
5
+ export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
6
6
  // #########
7
7
  // Rendering
8
8
  return (
9
- <div className="boolean-input">
9
+ <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
10
10
  {label && <label>{label}</label>}
11
11
 
12
12
  <div className="boolean-input-container">
13
13
  <div className="boolean-input-content">
14
14
  <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
15
- {labelTrue ?? 'Yes'}
15
+ {labelTrue}
16
16
  </div>
17
17
  <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
18
- {labelFalse ?? 'No'}
18
+ {labelFalse}
19
19
  </div>
20
20
  </div>
21
21
  </div>
package/src/components/Inputs/BooleanInput/BooleanInput.types.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  export type BooleanInputProps = {
2
2
  label?: string;
3
- labelFalse?: string;
4
- labelTrue?: string;
3
+ labelFalse: string;
4
+ labelTrue: string;
5
+ disabled?: boolean;
5
6
  value?: boolean;
6
7
  onChange: (value: boolean) => void;
7
8
  };
package/src/components/Inputs/BooleanInput/__stories__/BooleanInput.stories.mdx CHANGED
@@ -17,6 +17,11 @@ export const inputArgType = {
17
17
  control: 'text',
18
18
  description: 'Label of the TRUE value.',
19
19
  },
20
+ disabled: {
21
+ control: 'boolean',
22
+ description: 'Enable state of the input.',
23
+ table: { defaultValue: { summary: 'false' } },
24
+ },
20
25
  value: {
21
26
  control: 'boolean',
22
27
  description: 'Value of the input (can be undefined).',
@@ -34,7 +39,11 @@ The Boolean input is used to quickly switch between two possible states. It is c
34
39
  ## Overview
35
40
 
36
41
  <Canvas>
37
- <Story name="Overview" args={{ label: 'Label', onChange: () => {} }} argTypes={inputArgType}>
42
+ <Story
43
+ name="Overview"
44
+ args={{ label: 'Label', labelFalse: 'No', labelTrue: 'Yes', disabled: false, onChange: () => {} }}
45
+ argTypes={inputArgType}
46
+ >
38
47
  {args => <BooleanInput {...args} />}
39
48
  </Story>
40
49
  </Canvas>