IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed description

Browse Source
This commit is contained in:
mushka 2022-03-11 14:16:17 +03:00
parent 30c63620a3
commit 88da9381f4
3 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/asc-web-components/button/README.md
View File

@ -10,7 +10,7 @@ import Button from "@appserver/components/button";
```jsx
<Button
size="base"
size="extraSmall"
isDisabled={false}
onClick={() => alert("Button clicked")}
label="OK"
@ -19,20 +19,20 @@ import Button from "@appserver/components/button";
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :---------------------------------------: | :----------: | ----------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `icon` | `node` | - | - | `null` | Icon node element |
| `id` | `string` | - | - | - | Accepts id |
| `isClicked` | `bool` | - | - | `false` | Tells when the button should present a clicked state |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isHovered` | `bool` | - | - | `false` | Tells when the button should present a hovered state |
| `isLoading` | `bool` | - | - | `false` | Tells when the button should show loader icon |
| `label` | `string` | - | - | - | Button text |
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
| `size` | `oneOf` | - | `extraSmall`, `small`, `normal`, `medium` | `extraSmall` | Size of button |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
| `minWidth` | `string` | - | - | `null` | Sets the min width of the button |
| Props | Type | Required | Values | Default | Description |
| ------------ | :------------: | :------: | :---------------------------------------: | :----------: | ---------------------------------------------------------------------------------------------------- |
| `className` | `string` | - | - | - | Accepts class |
| `icon` | `node` | - | - | `null` | Icon node element |
| `id` | `string` | - | - | - | Accepts id |
| `isClicked` | `bool` | - | - | `false` | Tells when the button should present a clicked state |
| `isDisabled` | `bool` | - | - | `false` | Tells when the button should present a disabled state |
| `isHovered` | `bool` | - | - | `false` | Tells when the button should present a hovered state |
| `isLoading` | `bool` | - | - | `false` | Tells when the button should show loader icon |
| `label` | `string` | - | - | - | Button text |
| `onClick` | `func` | - | - | - | What the button will trigger when clicked |
| `primary` | `bool` | - | - | `false` | Tells when the button should be primary |
| `scale` | `bool` | - | - | `false` | Scale width of button to 100% |
| `size` | `oneOf` | - | `extraSmall`, `small`, `normal`, `medium` | `extraSmall` | Size of button. The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tabIndex` | `number` | - | - | `-1` | Button tab index |
| `minWidth` | `string` | - | - | `null` | Sets the min width of the button |

4
packages/asc-web-components/button/button.stories.js
View File

@ -32,7 +32,9 @@ const Wrapper = (props) => (
</div>
);
const Template = (args) => <Button {...args} />;
const Template = (args) => (
<Button {...args} onClick={() => alert("Button clicked")} />
);
const PrimaryTemplate = (args) => {
return (
<Wrapper>

5
packages/asc-web-components/button/index.js
View File

@ -3,7 +3,6 @@ import PropTypes from "prop-types";
import Loader from "../loader";
import StyledButton from "./styled-button";
import Base from "../themes/base";
import { isDesktop } from "../utils/device";
// eslint-disable-next-line no-unused-vars, react/prop-types
@ -72,7 +71,9 @@ Button.propTypes = {
label: PropTypes.string,
/** Tells when the button should be primary */
primary: PropTypes.bool,
/** Size of button */
/** Size of button.
The normal size equals 36px and 40px in height on the Desktop and Touchcreen devices. */
size: PropTypes.oneOf(["extraSmall", "small", "normal", "medium"]),
/** Scale width of button to 100% */
scale: PropTypes.bool,