@rws-aoa/react-library
Version:
RWS AOA Design System
129 lines (128 loc) • 4.03 kB
JavaScript
import { jsx as a } from "react/jsx-runtime";
import { ChevronRight as d } from "@mui/icons-material";
import { Button as v, buttonClasses as r } from "@mui/material";
import { l as s } from "../../../chunks/lodash.CA_K01A9.js";
import { FontNormalSxProps as b } from "../../../_constants.js";
function g({
type: o,
startIcon: t,
"data-qa": i,
children: c,
buttonType: n,
...l
}) {
let e = "contained";
return o === "text" && (e = "text"), o === "secondary" && (e = "outlined"), /* @__PURE__ */ a(v, { ...l, "data-qa": i, disableElevation: !0, endIcon: o === "text" && /* @__PURE__ */ a(d, {}), startIcon: o !== "text" && t, sx: s.merge({
// Styles that apply to all button types and colors
appearance: "none",
border: "1px solid",
borderRadius: 0,
boxSizing: "border-box",
color: "var(--color-text-light)",
cursor: "pointer",
display: "inline-flex",
lineHeight: "var(--font-lineheight-text)",
minHeight: 20,
padding: "12px 16px",
position: "relative",
textDecoration: "none",
textShadow: "none",
textTransform: "none",
verticalAlign: "middle",
":focus": {
outline: "2px dashed var(--color-text)",
outlineOffset: "3px",
boxShadow: "none"
},
// Styles that apply to contained (type === primary)
[`&.${r.contained}`]: {
[`&.${r.colorPrimary}`]: {
backgroundColor: "var(--color-primary)",
borderColor: "var(--color-primary)",
":hover, :active, :focus": {
backgroundColor: "var(--color-primary-hover)"
}
},
[`&.${r.colorError}`]: {
backgroundColor: "var(--color-error)",
borderColor: "var(--color-error)",
":hover, :active, :focus": {
backgroundColor: "var(--color-error-hover)"
}
},
[`&.${r.disabled}`]: {
backgroundColor: "var(--color-disabled)",
borderColor: "var(--color-disabled)",
color: "var(--color-text-disabled)"
},
":hover, :active, :focus": {
color: "var(--color-text-light)"
}
},
// Styles that apply to outlined (type === secondary)
[`&.${r.outlined}`]: {
background: "none",
border: "1px solid var(--color-primary)",
boxSizing: "border-box",
[`&.${r.colorPrimary}`]: {
color: "var(--color-primary)",
borderColor: "var(--color-primary)",
":hover, :active, :focus": {
borderColor: "var(--color-primary-hover)",
color: "var(--color-primary-hover)"
}
},
[`&.${r.colorError}`]: {
color: "var(--color-error)",
borderColor: "var(--color-error)",
":hover, :active, :focus": {
borderColor: "var(--color-error-hover)",
color: "var(--color-error-hover)"
}
},
":disabled": {
backgroundColor: "transparent",
borderColor: "var(--color-text-disabled)",
color: "var(--color-text-disabled)"
}
},
// Styles that apply to text (type === text)
[`&.${r.text}`]: {
background: "none",
borderColor: "transparent",
display: "inline-block",
textTransform: "uppercase",
fontWeight: "bold",
fontSize: "1.075rem",
verticalAlign: "middle",
[`&.${r.colorPrimary}`]: {
color: "var(--color-primary)",
":hover": {
backgroundColor: "var(--color-rijks-skyblue-light)"
}
},
[`&.${r.colorError}`]: {
color: "var(--color-error)",
":hover": {
backgroundColor: "var(--color-rijks-red-1-light)"
}
},
[`&.${r.endIcon}`]: {
width: "1rem",
height: "1rem",
verticalAlign: "text-top"
},
":disabled": {
backgroundColor: "transparent",
color: "var(--color-text-disabled)",
[`&.${r.endIcon}`]: {
fill: "var(--color-text-disabled)"
}
}
}
}, l.sx, b), type: n, variant: e, children: c });
}
export {
g as AoaButton
};
//# sourceMappingURL=Button.js.map