design-system-govbr-rnp/dist/components/Input/Input.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.InputWithValidationMessage = exports.InputWithSideLabel = exports.InputWithIcon = exports.InputWithHighlight = exports.InputWithDensity = exports.InputWithButton = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Input = _interopRequireDefault(require("./Input"));
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = {
  title: 'Components/Input',
  component: _Input.default,
  argTypes: {
    buttonProps: {
      description: 'Propriedades para os botões laterais, recebe como parâmetro o icone do botão, o label descritivo para acessibilidade e a função de onClick desse botão.'
    },
    density: {
      description: 'Representa a densidade dos inputs, podendo ser: small, medium e large.'
    },
    disabled: {
      description: 'Desabilita o input.'
    },
    feedback: {
      description: 'Objeto que detalha as mensagens para os campos de input. A propriedade message é a mensagem que deverar ser apresentada na parte de baixo do input. A propriedade type descreve qual o tipo de sinalização será visível, podendo ser: success (sucesso), error (erros), info (para textos contendo informações), warn (alerta de campo).'
    },
    icon: {
      description: 'Icone do fontawesome para ser mostrado em tela.'
    },
    id: {
      description: 'Id único para fazer o campo de input e referenciar o label para o input.'
    },
    informativeText: {
      description: 'Texto informativo fixo abaixo do input.'
    },
    label: {
      description: 'Label relacionado ao input.'
    },
    placeholder: {
      description: 'Placeholder do input.'
    },
    ref: {
      description: 'Referencência do input para manipulações.'
    },
    required: {
      description: 'Coloca obrigatoriedade do campo.'
    },
    styles: {
      description: 'Outros estilos caso haja necessida.'
    },
    type: {
      description: 'Tipo de campo de input, podendo ser: text, password e email.'
    }
  }
};
exports.default = _default;
var Template = function Template(args) {
  return /*#__PURE__*/_react.default.createElement(_Input.default, args);
};
var Default = Template.bind({});
exports.Default = Default;
Default.storyName = 'Input padrão';
Default.args = {
  label: 'Label / Rótulo',
  name: 'myInput',
  placeholder: 'Placeholder',
  informativeText: 'Texto auxiliar. Função de previnir erros.',
  type: 'text'
};
var InputWithButton = Template.bind({});
exports.InputWithButton = InputWithButton;
InputWithButton.storyName = 'Input com botões';
InputWithButton.args = {
  buttonProps: {
    icon: _freeSolidSvgIcons.faEye,
    label: 'Mostrar senha',
    onClick: function onClick() {
      return console.log('clickei');
    }
  },
  label: 'Senha',
  name: 'myInput',
  placeholder: 'Digite sua senha',
  type: 'password'
};
var InputWithHighlight = Template.bind({});
exports.InputWithHighlight = InputWithHighlight;
InputWithHighlight.storyName = 'Input com destaque';
InputWithHighlight.args = {
  buttonProps: {
    icon: _freeSolidSvgIcons.faSearch,
    label: 'Pesquisar',
    onClick: function onClick() {
      return console.log('clickei');
    }
  },
  label: 'Pesquisar',
  name: 'myInput',
  placeholder: 'Pesquisar',
  type: 'text',
  variant: 'hightlight'
};
var InputWithSideLabel = Template.bind({});
exports.InputWithSideLabel = InputWithSideLabel;
InputWithSideLabel.storyName = 'Input com rótulo lateral';
InputWithSideLabel.args = {
  buttonProps: {
    icon: _freeSolidSvgIcons.faLock,
    label: 'Mostrar senha',
    onClick: function onClick() {
      return console.log('clickei');
    }
  },
  icon: _freeSolidSvgIcons.faEnvelope,
  label: 'Email',
  name: 'myInput',
  placeholder: 'Digite aqui seu email...',
  type: 'email',
  variant: 'sided'
};
var InputWithValidationMessage = function InputWithValidationMessage() {
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Label/R\xF3tulo",
    name: "myInput",
    placeholder: "Digite aqui...",
    feedback: {
      type: 'success',
      message: 'Mensagem de sucesso'
    },
    type: "text"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Label/R\xF3tulo",
    name: "myInput",
    placeholder: "Digite aqui...",
    feedback: {
      type: 'error',
      message: 'Mensagem de erro'
    },
    type: "text"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Label/R\xF3tulo",
    name: "myInput",
    placeholder: "Digite aqui...",
    feedback: {
      type: 'info',
      message: 'Mensagem informativa'
    },
    type: "text"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Label/R\xF3tulo",
    name: "myInput",
    placeholder: "Digite aqui...",
    feedback: {
      type: 'warn',
      message: 'Mensagem de alerta'
    },
    type: "text"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Label/R\xF3tulo",
    name: "myInput",
    placeholder: "Digite aqui...",
    feedback: {
      type: 'warn',
      message: 'Campo desabilitado'
    },
    disabled: true,
    type: "text"
  })));
};
exports.InputWithValidationMessage = InputWithValidationMessage;
InputWithValidationMessage.storyName = 'Input com validações e estados';
var InputWithDensity = function InputWithDensity() {
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Baixa densidade",
    name: "myInput",
    placeholder: "Digite aqui...",
    density: "small",
    type: "text"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Densidade m\xE9dia",
    name: "myInput",
    placeholder: "Digite aqui...",
    density: "medium",
    type: "text"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: '32px'
    }
  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
    label: "Alta densidade",
    name: "myInput",
    placeholder: "Digite aqui...",
    density: "large",
    type: "text"
  })));
};
exports.InputWithDensity = InputWithDensity;
InputWithDensity.storyName = 'Densidades';
var InputWithIcon = Template.bind({});
exports.InputWithIcon = InputWithIcon;
InputWithIcon.storyName = 'Input com ícones';
InputWithIcon.args = {
  label: 'Usuário',
  name: 'myInput',
  placeholder: 'Digite...',
  type: 'text',
  icon: _freeSolidSvgIcons.faUser
};