design-system-govbr-rnp/dist/components/SignIn/SignIn.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.SignInText = exports.SignInImage = exports.SignInIcon = exports.SignInEnfases = exports.SignInDensidades = exports.InvertedStories = exports.IconicSignIn = exports.BlockSignIn = void 0;
var _react = _interopRequireDefault(require("react"));
var _SignIn = _interopRequireDefault(require("./SignIn"));
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
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/SignIn",
  component: _SignIn.default,
  argTypes: {
    variant: {
      name: "Variante",
      type: {
        name: "string",
        required: false
      },
      description: "Variante do botão",
      control: {
        type: "select",
        options: ["primary", "secondary"]
      }
    },
    title: {
      name: "Título",
      type: {
        name: "string",
        required: true
      },
      description: "Título do Botão",
      table: {
        type: {
          summary: "string"
        }
      },
      control: {
        type: "text"
      }
    },
    inverted: {
      name: "Invertido",
      type: {
        name: "boolean",
        required: false
      },
      description: "Aplicar em fundos escuros",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: "false"
        }
      },
      control: {
        type: "boolean"
      }
    },
    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"]
      }
    },
    block: {
      name: "Bloco",
      type: {
        name: "string",
        required: false
      },
      description: "Ocupação do Contexto Atual",
      table: {
        type: {
          summary: "string"
        }
      },
      control: {
        type: "boolean"
      }
    },
    iconProps: {
      description: "Objeto que configura o ícone que vai no botão. Recebe como parâmetro o ícone e o aria label para descrever o botão."
    },
    altText: {
      name: "Texto Secundário",
      type: {
        name: "string",
        required: false
      },
      description: "Texto Secundário",
      table: {
        type: {
          summary: "string"
        }
      },
      control: {
        type: "text"
      }
    },
    imgProps: {
      description: "Objeto que configura a imagem que vai no botão. Recebe como parâmetro o local da imagem e o texto alternativo"
    },
    onClick: {
      description: "Função callback que será executada quando o botão for apertado"
    },
    circle: {
      name: "Círculo",
      type: {
        name: "boolean",
        required: false
      },
      description: "Aplica variante circular",
      table: {
        type: {
          summary: "string"
        },
        defaultValue: {
          summary: "false"
        }
      },
      control: {
        type: "boolean"
      }
    }
  }
};
exports.default = _default;
var Template = function Template(args) {
  return /*#__PURE__*/_react.default.createElement(_SignIn.default, args);
};
var ImageSignIn = function ImageSignIn(_ref) {
  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      background: "#fff",
      padding: "24px"
    }
  }, /*#__PURE__*/_react.default.createElement(_SignIn.default, args));
};
var SignInImage = ImageSignIn.bind({});
exports.SignInImage = SignInImage;
SignInImage.storyName = "Uso de Imagem";
SignInImage.args = {
  variant: "secondary",
  title: "Entrar com",
  imgProps: {
    src: "https://www.gov.br/++theme++padrao_govbr/img/govbr-colorido-b.png",
    alt: "gov.br"
  },
  density: "medium",
  inverted: false,
  block: false,
  onClick: function onClick() {
    return console.log("Clicado");
  }
};
SignInImage.parameters = {
  controls: {
    exclude: ["Texto Secundário", "Círculo", "iconProps", "onClick"]
  }
};
var SignInText = Template.bind({});
exports.SignInText = SignInText;
SignInText.storyName = "Uso de Texto";
SignInText.args = {
  variant: "primary",
  title: "Entrar com",
  altText: "gov.br",
  density: "medium",
  inverted: false,
  block: false,
  onClick: function onClick() {
    return console.log("Clicado");
  }
};
SignInText.parameters = {
  controls: {
    exclude: ["Círculo", "iconProps", "onClick", "imgProps"]
  }
};
var SignInIcon = Template.bind({});
exports.SignInIcon = SignInIcon;
SignInIcon.storyName = "Uso de Ícone";
SignInIcon.args = {
  variant: "primary",
  title: "Entrar",
  iconProps: {
    icon: _freeSolidSvgIcons.faUser,
    ariaLabel: "Ícone Cidade"
  },
  density: "medium",
  inverted: false,
  block: false,
  onClick: function onClick() {
    return console.log("Clicado");
  }
};
SignInIcon.parameters = {
  controls: {
    exclude: ["Texto Secundário", "Círculo", "onClick", "imgProps"]
  }
};
var IconicSignIn = Template.bind({});
exports.IconicSignIn = IconicSignIn;
IconicSignIn.storyName = "Icônico";
IconicSignIn.args = {
  variant: "primary",
  title: "Entrar",
  circle: true,
  iconProps: {
    icon: _freeSolidSvgIcons.faUser,
    ariaLabel: "Ícone Usuário"
  },
  density: "medium",
  inverted: false,
  onClick: function onClick() {
    return console.log("Clicado");
  }
};
IconicSignIn.parameters = {
  controls: {
    exclude: ["Bloco", "Texto Secundário", "onClick", "imgProps"]
  }
};
var BlockSignIn = Template.bind({});
exports.BlockSignIn = BlockSignIn;
BlockSignIn.storyName = "Bloco";
BlockSignIn.args = {
  variant: "primary",
  title: "Entrar",
  iconProps: {
    icon: _freeSolidSvgIcons.faUser,
    ariaLabel: "Ícone Usuário"
  },
  density: "medium",
  block: true,
  inverted: false,
  onClick: function onClick() {
    return console.log("Clicado");
  }
};
BlockSignIn.parameters = {
  controls: {
    exclude: ["Texto Secundário", "onClick", "Círculo"]
  }
};
var Densidades = function Densidades(_ref2) {
  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: "20px",
      display: "flex",
      justifyContent: "space-evenly"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: "10px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Padr\xE3o Densidade Alta"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    density: "small"
  }, args))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Padr\xE3o Densidade M\xE9dia"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    density: "medium"
  }, args))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Padr\xE3o Densidade Baixa"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    density: "large"
  }, args)))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: "10px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Circular Densidade Alta"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    iconProps: {
      icon: _freeSolidSvgIcons.faUser,
      ariaLabel: "Ícone Usuário"
    },
    circle: true,
    density: "small"
  }, args))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Circular Densidade M\xE9dia"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    iconProps: {
      icon: _freeSolidSvgIcons.faUser,
      ariaLabel: "Ícone Usuário"
    },
    circle: true,
    density: "medium"
  }, args))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Circular Densidade Baixa"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    iconProps: {
      icon: _freeSolidSvgIcons.faUser,
      ariaLabel: "Ícone Usuário"
    },
    circle: true,
    density: "large"
  }, args)))));
};
var SignInDensidades = Densidades.bind({});
exports.SignInDensidades = SignInDensidades;
SignInDensidades.storyName = "Densidades";
SignInDensidades.args = {
  title: "Entrar com",
  altText: "gov.br",
  variant: "primary",
  inverted: false,
  onClick: function onClick() {
    return console.log("Clicado");
  }
};
SignInDensidades.parameters = {
  controls: {
    exclude: ["Densidade", "Bloco", "onClick", "iconProps", "imgProps", "Círculo"]
  }
};
var Enfases = function Enfases(_ref3) {
  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      padding: "20px",
      display: "flex",
      justifyContent: "space-evenly"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: "10px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Padr\xE3o Prim\xE1rio"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    variant: "primary"
  }, args))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Padr\xE3o Secund\xE1rio "), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    variant: "secondary"
  }, args)))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: "10px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Circular Prim\xE1rio"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    iconProps: {
      icon: _freeSolidSvgIcons.faUser,
      ariaLabel: "Ícone Usuário"
    },
    circle: true,
    variant: "primary"
  }, args))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Sign-in Circular Secund\xE1rio "), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({
    iconProps: {
      icon: _freeSolidSvgIcons.faUser,
      ariaLabel: "Ícone Usuário"
    },
    circle: true,
    variant: "secondary"
  }, args)))));
};
var SignInEnfases = Enfases.bind({});
exports.SignInEnfases = SignInEnfases;
SignInEnfases.storyName = "Enfases";
SignInEnfases.args = {
  title: "Entrar com",
  altText: "gov.br",
  inverted: false,
  onClick: function onClick() {
    return console.log("clicado");
  }
};
SignInEnfases.parameters = {
  controls: {
    exclude: ["Variante", "Bloco", "onClick", "iconProps", "imgProps", "Círculo"]
  }
};
var Inverted = function Inverted(_ref4) {
  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      backgroundColor: "var(--blue-warm-vivid-90)",
      padding: "20px",
      display: "flex",
      justifyContent: "space-evenly"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: "10px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", {
    style: {
      color: "white"
    }
  }, "Sign-in Circular Prim\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({}, args, {
    iconProps: {
      icon: _freeSolidSvgIcons.faUser,
      ariaLabel: "Ícone Usuário"
    },
    variant: "primary",
    circle: true,
    inverted: true
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: "32px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", {
    style: {
      color: "white"
    }
  }, "Sign-in Padr\xE3o prim\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({}, args, {
    variant: "primary",
    inverted: true
  })))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: "10px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", {
    style: {
      color: "white"
    }
  }, "Sign-in Circular Secund\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({}, args, {
    iconProps: {
      icon: _freeSolidSvgIcons.faUser,
      ariaLabel: "Ícone Usuário"
    },
    variant: "secondary",
    circle: true,
    inverted: true
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: "32px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", {
    style: {
      color: "white"
    }
  }, "Sign-in Padr\xE3o Secund\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_SignIn.default, _extends({}, args, {
    variant: "secondary",
    inverted: true
  })))));
};
var InvertedStories = Inverted.bind({});
exports.InvertedStories = InvertedStories;
InvertedStories.storyName = "Invertido";
InvertedStories.args = {
  density: "medium",
  title: "Entrar com",
  altText: "gov.br",
  onClick: function onClick() {
    return console.log("cliquei");
  }
};
InvertedStories.parameters = {
  controls: {
    exclude: ["Bloco", "Invertido", "Variante", "onClick", "iconProps", "imgProps", "Círculo"]
  }
};