UNPKG

@workday/canvas-kit-labs-react

Version:

Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi

32 lines (31 loc) 1.52 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.ExpandableTarget = void 0; const react_1 = __importDefault(require("react")); const common_1 = require("@workday/canvas-kit-react/common"); const layout_1 = require("@workday/canvas-kit-react/layout"); const tokens_1 = require("@workday/canvas-kit-react/tokens"); const useExpandableTarget_1 = require("./hooks/useExpandableTarget"); const useExpandableModel_1 = require("./hooks/useExpandableModel"); const StyledButton = (0, common_1.styled)(layout_1.Flex.as('button'))({ cursor: 'pointer', '&:focus-visible, &.focus': { ...(0, common_1.focusRing)(), }, '&:hover': { background: tokens_1.colors.soap300, }, }); const Heading = (0, common_1.styled)('h1')({ margin: 0, }); exports.ExpandableTarget = (0, common_1.createSubcomponent)('button')({ modelHook: useExpandableModel_1.useExpandableModel, elemPropsHook: useExpandableTarget_1.useExpandableTarget, })(({ children, headingLevel, ...elementProps }, Element) => { const button = (react_1.default.createElement(StyledButton, { as: Element, background: "none", border: "none", borderRadius: "m", flexDirection: "row", padding: "xxs", width: "100%", ...elementProps }, children)); return !!headingLevel ? react_1.default.createElement(Heading, { as: headingLevel }, button) : button; });