LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(dashboard-v2): allow <Button> to be type=submit

This commit is contained in:
Michał Leszczyk 2022-03-23 11:23:55 +01:00
parent c964086f7b
commit 3356b88a3e
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard-v2/src/components/Button/Button.js
View File

@ -5,8 +5,8 @@ import styled from "styled-components";
/** /**
* Primary UI component for user interaction * Primary UI component for user interaction
*/ */
export const Button = styled.button.attrs(({ disabled, $primary }) => ({ export const Button = styled.button.attrs(({ disabled, $primary, type }) => ({
type: "button", type,
className: cn("px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide transition-[opacity_filter]", { className: cn("px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide transition-[opacity_filter]", {
"bg-primary text-palette-600": $primary, "bg-primary text-palette-600": $primary,
"bg-white border-2 border-black text-palette-600": !$primary, "bg-white border-2 border-black text-palette-600": !$primary,
@ -14,6 +14,7 @@ export const Button = styled.button.attrs(({ disabled, $primary }) => ({
"hover:brightness-90": !disabled, "hover:brightness-90": !disabled,
}), }),
}))``; }))``;
Button.propTypes = { Button.propTypes = {
/** /**
* Is this the principal call to action on the page? * Is this the principal call to action on the page?
@ -23,9 +24,14 @@ Button.propTypes = {
* Prevent interaction on the button * Prevent interaction on the button
*/ */
disabled: PropTypes.bool, disabled: PropTypes.bool,
/**
* Type of button (button / submit)
*/
type: PropTypes.oneOf(["button", "submit"]),
}; };
Button.defaultProps = { Button.defaultProps = {
$primary: false, $primary: false,
disabled: false, disabled: false,
type: "button",
}; };