@stokr/components-library/dist/components/Button/Button.stories.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithMinWidth = exports.WithMargin = exports.WithBottomMargin = exports.Secondary = exports.Primary = exports.OutlineBlack = exports.Outline = exports.OnlyText = exports.Negative = exports.Fluid = exports.Disabled = exports.Centered = exports.ButtonGroup = void 0;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("./Button.styles"));
var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
var _ButtonContainer = require("../ButtonContainer/ButtonContainer.styles");
var _global = _interopRequireDefault(require("../../styles/global"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// import { DoubleButtons } from '../DoubleButton/DoubleButton.styles'
var _default = exports.default = {
  title: 'Components Library/Buttons/Button',
  component: _Button.default,
  argTypes: {
    children: {
      control: 'text'
    },
    onClick: {
      action: 'clicked'
    },
    secondary: {
      control: 'boolean'
    },
    disabled: {
      control: 'boolean'
    },
    negative: {
      control: 'boolean'
    },
    center: {
      control: 'boolean'
    },
    fluid: {
      control: 'boolean'
    },
    outline: {
      control: 'boolean'
    },
    outlineBlack: {
      control: 'boolean'
    },
    onlyText: {
      control: 'boolean'
    },
    minWidth: {
      control: 'text'
    },
    marginTop: {
      control: 'text'
    },
    marginRight: {
      control: 'text'
    },
    withMarginBottom: {
      control: 'boolean'
    }
  }
};
const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ButtonContainer.ButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Button.default, args, "Button"))));
const Primary = exports.Primary = Template.bind({});
Primary.args = {
  children: 'Primary Button'
};
const Secondary = exports.Secondary = Template.bind({});
Secondary.args = {
  children: 'Secondary Button',
  secondary: true
};
const Disabled = exports.Disabled = Template.bind({});
Disabled.args = {
  children: 'Disabled Button',
  disabled: true
};
const Negative = exports.Negative = Template.bind({});
Negative.args = {
  children: 'Negative Button',
  negative: true
};
const Outline = exports.Outline = Template.bind({});
Outline.args = {
  children: 'Outline Button',
  outline: true
};
const OutlineBlack = exports.OutlineBlack = Template.bind({});
OutlineBlack.args = {
  children: 'Outline Black Button',
  outlineBlack: true
};
const OnlyText = exports.OnlyText = Template.bind({});
OnlyText.args = {
  children: 'Text Only Button',
  onlyText: true
};
const Fluid = exports.Fluid = Template.bind({});
Fluid.args = {
  children: 'Fluid Width Button',
  fluid: true
};
const WithMinWidth = exports.WithMinWidth = Template.bind({});
WithMinWidth.args = {
  children: 'Min Width Button',
  minWidth: '200px'
};
const Centered = exports.Centered = Template.bind({});
Centered.args = {
  children: 'Centered Button',
  center: true
};
const WithMargin = exports.WithMargin = Template.bind({});
WithMargin.args = {
  children: 'Button with Margin',
  marginTop: '20px',
  marginRight: '20px'
};
const WithBottomMargin = exports.WithBottomMargin = Template.bind({});
WithBottomMargin.args = {
  children: 'Button with Bottom Margin',
  withMarginBottom: true
};
const ButtonGroup = () => /*#__PURE__*/_react.default.createElement("div", {
  style: {
    display: 'flex',
    gap: '10px'
  }
}, /*#__PURE__*/_react.default.createElement(_Button.default, null, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  secondary: true
}, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  outlineBlack: true
}, "Outline Black"), /*#__PURE__*/_react.default.createElement(_Button.default, {
  negative: true
}, "Negative"));

// export const DoubleButton = args => (
//   <ComponentWrapper>
//     <DoubleButtons />
//   </ComponentWrapper>
// )

// doublecheck:
//other props mentioned in Button.styles that are not in propTypes:
//type, minWidth, fluid, onlyText, outLine, marginTop, isUpdates, isDone..
// Doublebuttons not showing, cannot find use
exports.ButtonGroup = ButtonGroup;