orcs-design-system/es/components/ButtonGroup/index.js

TeamForm's Design System, aka: ORCS

import PropTypes from "prop-types";
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import { themeGet } from "@styled-system/theme-get";
import Flex from "../Flex/";
import { css } from "@styled-system/css";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const ButtonGroupControlLabel = styled("div").withConfig({
  displayName: "ButtonGroup__ButtonGroupControlLabel",
  componentId: "sc-g7627n-0"
})(props => css({
  color: props.labelDark ? themeGet("colors.greyDark") : themeGet("colors.white")(props),
  fontSize: themeGet("fontSizes.1")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  marginRight: themeGet("space.3")(props)
}));
const ButtonGroupWrapper = styled("div").withConfig({
  displayName: "ButtonGroup__ButtonGroupWrapper",
  componentId: "sc-g7627n-1"
})(props => css({
  display: "flex",
  alignItems: "center",
  background: themeGet("colors.greyDarker")(props),
  borderRadius: themeGet("radii.2")(props),
  padding: "4px",
  height: themeGet("appScale.inputHeightDefault")(props)
}));
const ButtonGroupRadio = styled.input.attrs({
  type: "radio"
}).withConfig({
  displayName: "ButtonGroup__ButtonGroupRadio",
  componentId: "sc-g7627n-2"
})(props => css({
  opacity: "0",
  position: "absolute",
  margin: "0",
  zIndex: "-1",
  width: "0",
  height: "0",
  overflow: "hidden",
  pointerEvents: "none",
  "&:checked + label": {
    cursor: "default",
    color: themeGet("colors.greyDarker")(props),
    backgroundColor: themeGet("colors.white")(props),
    "&:hover": {
      backgroundColor: themeGet("colors.white")(props)
    }
  }
}));
const ButtonGroupLabel = styled("label").withConfig({
  displayName: "ButtonGroup__ButtonGroupLabel",
  componentId: "sc-g7627n-3"
})(props => css({
  height: "100%",
  borderRadius: themeGet("radii.2")(props),
  display: "flex",
  alignItems: "center",
  padding: `0 ${themeGet("space.3")(props)}`,
  transition: themeGet("transition.transitionDefault")(props),
  fontSize: themeGet("fontSizes.1")(props),
  fontWeight: themeGet("fontWeights.2")(props),
  cursor: props.checked ? "default" : "pointer",
  color: props.checked ? themeGet("colors.greyDarker")(props) : themeGet("colors.white")(props),
  backgroundColor: props.checked ? themeGet("colors.white")(props) : "#5e686d",
  "&:hover": {
    backgroundColor: props.checked ? themeGet("colors.white")(props) : themeGet("colors.primary")(props)
  },
  "&:not(:last-of-type)": {
    marginRight: "4px"
  }
}));

/** To do: look at renaming this to ButtonGroup, add a container component that can accept space and layout props */

export const ButtonGroupContainer = _ref => {
  let {
    children,
    theme,
    controlLabel,
    labelDark,
    ...props
  } = _ref;
  const component = /*#__PURE__*/_jsxs(Flex, {
    alignItems: "center",
    ...props,
    children: [controlLabel && /*#__PURE__*/_jsx(ButtonGroupControlLabel, {
      labelDark: labelDark,
      children: controlLabel
    }), /*#__PURE__*/_jsx(ButtonGroupWrapper, {
      children: children
    })]
  });
  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: component
  }) : component;
};
export const ButtonGroupItem = _ref2 => {
  let {
    label,
    name,
    value,
    checked,
    onChange,
    theme
  } = _ref2;
  const component = /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(ButtonGroupRadio, {
      id: label,
      name: name,
      value: value,
      checked: checked,
      onChange: onChange
    }), /*#__PURE__*/_jsx(ButtonGroupLabel, {
      checked: checked,
      htmlFor: label,
      children: label
    })]
  });
  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: component
  }) : component;
};
ButtonGroupContainer.propTypes = {
  children: PropTypes.node,
  controlLabel: PropTypes.string,
  labelDark: PropTypes.bool,
  theme: PropTypes.object
};
ButtonGroupItem.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string,
  value: PropTypes.string,
  checked: PropTypes.bool,
  onChange: PropTypes.func,
  theme: PropTypes.object
};
ButtonGroupContainer.__docgenInfo = {
  "description": "To do: look at renaming this to ButtonGroup, add a container component that can accept space and layout props",
  "methods": [],
  "displayName": "ButtonGroupContainer",
  "props": {
    "children": {
      "description": "",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "controlLabel": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "labelDark": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "theme": {
      "description": "",
      "type": {
        "name": "object"
      },
      "required": false
    }
  }
};
ButtonGroupItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ButtonGroupItem",
  "props": {
    "label": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "name": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "value": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "checked": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "onChange": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "theme": {
      "description": "",
      "type": {
        "name": "object"
      },
      "required": false
    }
  }
};