design-system-govbr-rnp/dist/utilities/Movement/Movement.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.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _Movement = _interopRequireDefault(require("./Movement"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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: "Utilities/CSS/Movement",
  component: _Movement.default,
  argTypes: {
    component: {
      name: "Tag",
      type: {
        name: "string"
      },
      description: "Tag do componente",
      control: {
        type: "select",
        options: ["h1", "h2", "h3", "h4", "h5", "h6", "label", "div", "span"]
      }
    },
    easing: {
      name: "Easing",
      description: "Aceleração",
      control: {
        type: "select",
        options: ["ease", "ease-in", "ease-out", "ease-in-out", "ease-linear"]
      }
    },
    duration: {
      name: "Duration",
      type: {
        name: "string"
      },
      description: "Duração",
      control: {
        type: "select",
        options: ["very-fast", "fast", "moderate", "slow", "very-slow"]
      }
    }
  }
};
exports.default = _default;
var Template = function Template(args) {
  return /*#__PURE__*/_react.default.createElement(_Movement.default, _extends({}, args, {
    style: {
      border: "1px solid #000",
      width: "500px",
      height: "200px",
      transitionProperty: "background",
      textAlign: "center",
      display: "inline-grid",
      alignItems: "center",
      backgroundColor: "var(--red-vivid-50)"
    },
    id: "component",
    onMouseOver: function onMouseOver() {
      return document.getElementById("component").style.backgroundColor = "var(--blue-warm-vivid-40)";
    },
    onMouseOut: function onMouseOut() {
      return document.getElementById("component").style.backgroundColor = "var(--red-vivid-50)";
    }
  }), /*#__PURE__*/_react.default.createElement("h2", {
    style: {
      color: "#fff"
    }
  }, "Mouse over"));
};
var Default = Template.bind({});
exports.Default = Default;
Default.storyName = "Movement";
Default.args = {
  component: "div",
  easing: "ease",
  duration: "moderate"
};