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

TeamForm's Design System, aka: ORCS

import React from "react";
import Box from "../Box";
import { ButtonGroupContainer, ButtonGroupItem } from ".";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/ButtonGroup",
  component: ButtonGroupContainer
};
export const defaultButtonGroup = () => /*#__PURE__*/_jsx(Box, {
  bg: "white",
  p: "r",
  children: /*#__PURE__*/_jsxs(ButtonGroupContainer, {
    controlLabel: "View:",
    labelDark: true,
    children: [/*#__PURE__*/_jsx(ButtonGroupItem, {
      name: "viewMode",
      label: "Chapters",
      value: "Chapters view"
    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
      name: "viewMode",
      label: "Groups",
      value: "Groups view",
      checked: true
    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
      name: "viewMode",
      label: "Constraints",
      value: "Constraints view"
    })]
  })
});
defaultButtonGroup.story = {
  name: "Default button group"
};
export const invertedButtonGroup = () => /*#__PURE__*/_jsx(Box, {
  bg: "greyDark",
  p: "r",
  children: /*#__PURE__*/_jsxs(ButtonGroupContainer, {
    controlLabel: "View:",
    children: [/*#__PURE__*/_jsx(ButtonGroupItem, {
      name: "viewMode",
      label: "Chapters",
      value: "Chapters view"
    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
      name: "viewMode",
      label: "Groups",
      value: "Groups view",
      checked: true
    }), /*#__PURE__*/_jsx(ButtonGroupItem, {
      name: "viewMode",
      label: "Constraints",
      value: "Constraints view"
    })]
  })
});
invertedButtonGroup.story = {
  name: "Inverted button group"
};
defaultButtonGroup.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultButtonGroup"
};
invertedButtonGroup.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "invertedButtonGroup"
};