design-system-govbr-rnp/dist/components/Switch/Switch.stories.js

## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.LabelSwitch = exports.IconSwitch = exports.DisabledSwitch = exports.DensitySwitch = exports.DefaultSwitch = exports.AlignSwitch = void 0;
var _react = _interopRequireDefault(require("react"));
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
var _Switch = _interopRequireDefault(require("./Switch"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _default = {
  title: 'Components/Switch',
  component: _Switch.default,
  argTypes: {
    checked: {
      name: 'Checado',
      type: {
        name: 'boolean',
        required: false
      },
      description: 'Aplica o estado Checado no Switch',
      table: {
        type: {
          summary: 'boolean'
        },
        defaultValue: {
          summary: 'false'
        }
      },
      control: {
        type: 'boolean'
      }
    },
    disabled: {
      name: 'Desabilitado',
      type: {
        name: 'boolean',
        required: false
      },
      description: 'Desativa o Switch',
      table: {
        type: {
          summary: 'boolean'
        },
        defaultValue: {
          summary: 'false'
        }
      },
      control: {
        type: 'boolean'
      }
    },
    label: {
      name: 'Label',
      type: {
        name: 'string',
        required: true
      },
      description: 'Label do Switch',
      table: {
        type: {
          summary: 'string'
        }
      },
      control: {
        type: 'text'
      }
    },
    id: {
      name: 'id',
      type: {
        name: 'string',
        required: true
      },
      description: 'id do Switch',
      table: {
        type: {
          summary: 'string'
        }
      },
      control: {
        type: 'text'
      }
    },
    density: {
      name: 'Densidade',
      type: {
        name: 'string',
        required: false
      },
      description: 'Aplica densidade',
      table: {
        type: {
          summary: 'string'
        },
        defaultValue: {
          summary: 'medium'
        }
      },
      control: {
        type: 'select',
        options: ['small', 'medium', 'large']
      }
    },
    toggleLabel: {
      description: 'Objeto que configura os rótulos adicionais que vão no Switch'
    },
    iconProps: {
      description: 'Objeto que configura os rótulos adicionais que vão no Switch'
    },
    align: {
      name: 'Alinhamento',
      type: {
        name: 'string',
        required: false
      },
      description: 'Aplica Alinhamento',
      table: {
        type: {
          summary: 'string'
        },
        defaultValue: {
          summary: 'medium'
        }
      },
      control: {
        type: 'select',
        options: ['none', 'top', 'right']
      }
    }
  }
};
exports.default = _default;
var Template = function Template(args) {
  return /*#__PURE__*/_react.default.createElement(_Switch.default, args);
};
var DefaultSwitch = Template.bind({});
exports.DefaultSwitch = DefaultSwitch;
DefaultSwitch.storyName = 'Switch padrão';
DefaultSwitch.args = {
  density: 'medium',
  id: 'padrao',
  label: 'Padrão'
};
DefaultSwitch.parameters = {
  controls: {
    exclude: ['Densidade']
  }
};
var SwitchWithDensity = function SwitchWithDensity() {
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '64px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Switch.default, {
    id: "small",
    label: "Densidade Alta",
    density: "small"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '64px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Switch.default, {
    id: "medium",
    label: "Densidade M\xE9dia",
    density: "medium"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '64px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Switch.default, {
    id: "large",
    label: "Densidade Alta",
    density: "large"
  })));
};
var DensitySwitch = SwitchWithDensity.bind({});
exports.DensitySwitch = DensitySwitch;
DensitySwitch.storyName = 'Densidades';
DensitySwitch.parameters = {
  controls: {
    exclude: ['Densidade', 'align']
  }
};
var SwitchWithAlign = function SwitchWithAlign(_ref) {
  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '64px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Switch.default, _extends({
    id: "default",
    label: "Padr\xE3o"
  }, args))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '64px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Switch.default, _extends({
    id: "top",
    label: "Topo"
  }, args, {
    align: "top"
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '64px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Switch.default, _extends({
    id: "right",
    label: "Direita"
  }, args, {
    align: "right"
  }))));
};
var AlignSwitch = SwitchWithAlign.bind({});
exports.AlignSwitch = AlignSwitch;
AlignSwitch.storyName = 'Alinhamentos';
AlignSwitch.args = {
  density: 'medium'
};
AlignSwitch.parameters = {
  controls: {
    exclude: ['align']
  }
};
var LabelSwitch = Template.bind({});
exports.LabelSwitch = LabelSwitch;
LabelSwitch.storyName = 'Switch Com Rótulos';
LabelSwitch.args = {
  id: 'labelSwitches',
  density: 'medium',
  label: 'Padrão',
  toggleLabel: {
    enabled: 'Ligado',
    disabled: 'Desligado'
  }
};
var DisabledSwitch = Template.bind({});
exports.DisabledSwitch = DisabledSwitch;
DisabledSwitch.storyName = 'Switch Desabilitado';
DisabledSwitch.args = {
  id: 'disabled-switch',
  density: 'medium',
  label: 'Padrão',
  disabled: true
};
var IconSwitch = Template.bind({});
exports.IconSwitch = IconSwitch;
IconSwitch.storyName = 'Switch com Ícone';
IconSwitch.args = {
  id: 'teste',
  label: 'Padrão',
  iconProps: {
    enabled: _freeSolidSvgIcons.faCheck,
    disabled: _freeSolidSvgIcons.faTimes
  }
};