@navinc/base-react-components/dist/button-action.js

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled, useTheme } from 'styled-components';
import { Button } from './button.js';
import { Icon } from './icon.js';
import { isKeyOf } from '@navinc/utils';
const carrotSizes = {
    small: {
        width: '23px',
        height: '23px',
    },
    medium: {
        width: '26px',
        height: '26px',
    },
    large: {
        width: '28px',
        height: '28px',
    },
    extraLarge: {
        width: '32px',
        height: '32px',
    },
};
const getSize = (size) => {
    return isKeyOf(size, carrotSizes) ? carrotSizes[size] : carrotSizes.medium;
};
const StyledIcon = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-zfwp38" }) `
  overflow: hidden;
  transition: all 0.3s ease-out;
  transform: ${({ position }) => {
    const rotations = {
        collapsed: 'rotate(0.75turn) !important',
        navigate: 'rotate(0.50turn) !important',
        expanded: '',
    };
    return rotations[position];
}};
  padding: 5px;
  cursor: pointer;

  & {
    ${({ size }) => getSize(size)}
  }
`;
const ButtonActionWrapper = styled.div.withConfig({ displayName: "brc-sc-ButtonActionWrapper", componentId: "brc-sc-1cvt8r5" }) `
  display: flex;
  align-items: center;
`;
export const ButtonAction = (props) => {
    const theme = useTheme();
    const { position: _position } = props, buttonProps = __rest(props, ["position"]);
    const { children: _children } = props, iconProps = __rest(props, ["children"]);
    return (_jsxs(ButtonActionWrapper, { children: [_jsx(Button, Object.assign({}, buttonProps, { variation: "buttonAction" })), _jsx(StyledIcon, Object.assign({}, iconProps, { color: theme.navNeutral400, name: "actions/carrot-up" }))] }));
};
//# sourceMappingURL=button-action.js.map