design-system-govbr-rnp/dist/components/Button/Button.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.StoryEnfases = exports.InvertedStories = exports.CircleStoryEnfases = exports.Block = void 0;
var _react = _interopRequireDefault(require("react"));
var _Button = _interopRequireDefault(require("./Button"));
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/Button",
  component: _Button.default,
  argTypes: {
    variant: {
      name: "Variante",
      type: {
        name: "string",
        required: false
      },
      description: "Variante do botão",
      control: {
        type: "select",
        options: ["primary", "secondary", "terciary"]
      }
    },
    loading: {
      name: "Carregando",
      table: {
        disabled: true
      }
    },
    loadingTitle: {
      name: "Título Carregando"
    },
    children: {
      name: "Children",
      type: {
        name: "string",
        required: true
      },
      description: "Valor 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"]
      }
    },
    disabled: {
      name: "Desabilitado",
      type: {
        name: "boolean",
        required: false
      },
      description: "Desativa o botão",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: "false"
        }
      },
      control: {
        type: "boolean"
      }
    },
    active: {
      name: "Ativo",
      type: {
        name: "boolean",
        required: false
      },
      description: "Aplica ativado",
      table: {
        type: {
          summary: "boolean"
        },
        defaultValue: {
          summary: "false"
        }
      },
      control: {
        type: "boolean"
      }
    },
    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."
    },
    onClick: {
      description: "Função callback que será executada quando o botão for apertado"
    }
  }
};
exports.default = _default;
var Template = function Template(args) {
  return /*#__PURE__*/_react.default.createElement(_Button.default, args);
};
var Enfases = function Enfases(_ref) {
  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  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, "Bot\xE3o Padr\xE3o Prim\xE1rio "), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
    variant: "primary"
  }, args)))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginRight: "10px"
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginBottom: "16px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", null, "Bot\xE3o Padr\xE3o Secund\xE1rio "), /*#__PURE__*/_react.default.createElement(_Button.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, "Bot\xE3o Padr\xE3o Terci\xE1rio "), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
    variant: "terciary"
  }, args)))));
};
var StoryEnfases = Enfases.bind({});
exports.StoryEnfases = StoryEnfases;
StoryEnfases.storyName = "Enfases Padrão";
StoryEnfases.args = {
  loadingTitle: "",
  children: "Botão",
  density: "medium",
  disabled: false,
  active: false,
  loading: false,
  iconProps: {
    icon: _freeSolidSvgIcons.faCity,
    ariaLabel: "Ícone Cidade"
  },
  onClick: function onClick() {
    return console.log("cliquei");
  }
};
StoryEnfases.parameters = {
  controls: {
    exclude: ["Bloco", "Invertido", "blockType", "Variante"]
  }
};
var CircleStoryEnfases = Enfases.bind({});
exports.CircleStoryEnfases = CircleStoryEnfases;
CircleStoryEnfases.storyName = "Enfases Circulares";
CircleStoryEnfases.args = {
  density: "medium",
  disabled: false,
  active: false,
  loading: false,
  circle: true,
  iconProps: {
    icon: _freeSolidSvgIcons.faCity,
    ariaLabel: "Ícone Cidade"
  },
  onClick: function onClick() {
    return console.log("cliquei");
  }
};
CircleStoryEnfases.parameters = {
  controls: {
    exclude: ["Bloco", "Invertido", "blockType", "Variante", "circle", "Título", "Título Carregando"]
  }
};
var Block = Template.bind({});
exports.Block = Block;
Block.storyName = "Bloco";
Block.args = {
  children: "Primário",
  variant: "primary",
  inverted: false,
  density: "",
  disabled: false,
  active: false,
  loading: false,
  iconProps: {
    icon: _freeSolidSvgIcons.faCity,
    ariaLabel: "Texto descritivo"
  },
  onClick: function onClick() {
    return console.log("cliquei");
  },
  block: true
};
Block.parameters = {
  controls: {
    exclude: ["blockType", "loading", "Bloco"]
  }
};
var Inverted = function Inverted(_ref2) {
  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
  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"
    }
  }, "Bot\xE3o Circular Prim\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, args, {
    variant: "primary",
    circle: true,
    inverted: true
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: "32px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", {
    style: {
      color: "white"
    }
  }, "Bot\xE3o Padr\xE3o prim\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_Button.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"
    }
  }, "Bot\xE3o Circular Secund\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, args, {
    variant: "secondary",
    circle: true,
    inverted: true
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: "32px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", {
    style: {
      color: "white"
    }
  }, "Bot\xE3o Padr\xE3o Secund\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, args, {
    variant: "secondary",
    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"
    }
  }, "Bot\xE3o Circular Terci\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, args, {
    variant: "terciary",
    type: "button",
    circle: true,
    inverted: true
  }))), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: "32px"
    }
  }, /*#__PURE__*/_react.default.createElement("h4", {
    style: {
      color: "white"
    }
  }, "Bot\xE3o Padr\xE3o Terci\xE1rio Invertido"), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({}, args, {
    variant: "terciary",
    inverted: true
  })))));
};
var InvertedStories = Inverted.bind({});
exports.InvertedStories = InvertedStories;
InvertedStories.storyName = "Invertido";
InvertedStories.args = {
  loadingTitle: "",
  children: "Botão",
  density: "medium",
  disabled: false,
  active: false,
  loading: false,
  iconProps: {
    icon: _freeSolidSvgIcons.faCity,
    ariaLabel: "Ícone Cidade"
  },
  onClick: function onClick() {
    return console.log("cliquei");
  }
};
InvertedStories.parameters = {
  controls: {
    exclude: ["Bloco", "Invertido", "blockType", "Variante"]
  }
};