design-system-govbr-rnp
Version:
## 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
344 lines (343 loc) • 13.4 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.WrapGrid = exports.OrderGrid = exports.JustifyContentGrid = exports.FlexboxGrid = exports.FillGrowShrinkGrid = exports.DirectionGrid = exports.AlignSelfGrid = exports.AlignItemsGrid = exports.AlignContentGrid = void 0;
var _react = _interopRequireDefault(require("react"));
var _Flexbox = _interopRequireDefault(require("./Flexbox"));
var _FlexboxRow = _interopRequireDefault(require("./FlexboxRow"));
var _excluded = ["style"],
_excluded2 = ["rowStyle"];
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); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var flexboxStyles = {
border: "1px solid var(--gray-40)",
padding: "var(--spacing-scale-2x)",
display: "flex"
};
var flexboxRowStyles = {
border: "1px dashed var(--gray-40)",
padding: "var(--spacing-scale-2x)",
fontSize: "var(--font-size-scale-up-02)"
};
var _default = {
title: "Utilities/CSS/Flexbox",
component: _Flexbox.default,
argTypes: {
display: {
name: "Display",
type: {
name: "string"
},
control: {
type: "select",
options: ["flex", "inline-flex"]
}
},
direction: {
name: "Direction",
type: {
name: "string"
},
control: {
type: "select",
options: ["row", "row-reverse", "column", "column-reverse"]
}
},
justifyContent: {
name: "JustifyContent",
type: {
name: "string"
},
control: {
type: "select",
options: ["start", "end", "center", "space-between", "space-around", "space-evenly"]
}
},
alignItems: {
name: "AlignItems",
type: {
name: "string"
},
control: {
type: "select",
options: ["start", "end", "center", "baseline", "stretch"]
}
},
wrap: {
name: "Wrap",
type: {
name: "string"
},
control: {
type: "select",
options: ["wrap", "nowrap", "wrap-reverse"]
}
},
alignSelf: {
name: "AlignSelf",
type: {
name: "string"
},
control: {
type: "select",
options: ["start", "end", "center", "baseline", "stretch"]
}
},
fillGrowShrink: {
name: "FillGrowShrink",
type: {
name: "string"
},
control: {
type: "select",
options: ["flex-fill", "flex-grow-1", "flex-grow-0", "flex-shrink-1", "flex-shrink-0"]
}
},
order: {
name: "Order",
type: {
name: "string"
},
control: {
type: "select",
options: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
}
},
alignContent: {
name: "AlignContent",
type: {
name: "string"
},
control: {
type: "select",
options: ["start", "end", "center", "around", "evenly", "stretch"]
}
}
}
};
exports.default = _default;
var filterExcludeItems = function filterExcludeItems(includedItems) {
var allItems = ["type", "Display", "Direction", "JustifyContent", "AlignItems", "Wrap", "AlignSelf", "FillGrowShrink", "Order", "AlignContent", "rowStyle", "style"];
return allItems.filter(function (item) {
return item !== includedItems;
});
};
var FlexboxTemplate = function FlexboxTemplate(_ref) {
var style = _ref.style,
args = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/_react.default.createElement(_Flexbox.default, _extends({}, args, {
style: _objectSpread(_objectSpread({}, flexboxStyles), style)
}), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, _extends({}, args, {
style: flexboxRowStyles
}), "Item 1"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, _extends({}, args, {
style: flexboxRowStyles
}), "Item 2"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, _extends({}, args, {
style: flexboxRowStyles
}), "".concat(!args.label ? "Item 3" : args.fillGrowShrink)), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, _extends({}, args, {
style: flexboxRowStyles
}), "Item 4"));
};
var FlexboxGrid = FlexboxTemplate.bind({});
exports.FlexboxGrid = FlexboxGrid;
FlexboxGrid.storyName = "Flexbox";
FlexboxGrid.args = {
type: "flexbox",
display: "flex"
};
FlexboxGrid.parameters = {
controls: {
exclude: filterExcludeItems("Display")
}
};
var DirectionGrid = FlexboxTemplate.bind({});
exports.DirectionGrid = DirectionGrid;
DirectionGrid.storyName = "Direction";
DirectionGrid.args = {
type: "direction",
direction: "row"
};
DirectionGrid.parameters = {
controls: {
exclude: filterExcludeItems("Direction")
}
};
var JustifyContentGrid = FlexboxTemplate.bind({});
exports.JustifyContentGrid = JustifyContentGrid;
JustifyContentGrid.storyName = "Justify content";
JustifyContentGrid.args = {
type: "justifyContent",
justifyContent: "start"
};
JustifyContentGrid.parameters = {
controls: {
exclude: filterExcludeItems("JustifyContent")
}
};
var AlignItemsGrid = FlexboxTemplate.bind({});
exports.AlignItemsGrid = AlignItemsGrid;
AlignItemsGrid.storyName = "Align items";
AlignItemsGrid.args = {
type: "alignItems",
alignItems: "start",
style: {
height: "200px"
}
};
AlignItemsGrid.parameters = {
controls: {
exclude: filterExcludeItems("AlignItems")
}
};
var WrapGrid = FlexboxTemplate.bind({});
exports.WrapGrid = WrapGrid;
WrapGrid.storyName = "Wrap";
WrapGrid.args = {
type: "wrap",
wrap: "wrap",
style: {
width: "200px",
whiteSpace: "nowrap"
}
};
WrapGrid.parameters = {
controls: {
exclude: filterExcludeItems("Wrap")
}
};
var AlignSelfTemplate = function AlignSelfTemplate(_ref2) {
var rowStyle = _ref2.rowStyle,
args = _objectWithoutProperties(_ref2, _excluded2);
return /*#__PURE__*/_react.default.createElement(_Flexbox.default, _extends({}, args, {
style: flexboxStyles
}), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: _objectSpread(_objectSpread({}, rowStyle), flexboxRowStyles)
}, "Item 1"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: _objectSpread(_objectSpread({}, rowStyle), flexboxRowStyles)
}, "Item 2"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, _extends({}, args, {
style: _objectSpread(_objectSpread(_objectSpread({}, rowStyle), flexboxRowStyles), {}, {
height: "40px",
padding: "0 20px"
})
}), "Item 3"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: _objectSpread(_objectSpread({}, rowStyle), flexboxRowStyles)
}, "Item 4"));
};
var AlignSelfGrid = AlignSelfTemplate.bind({});
exports.AlignSelfGrid = AlignSelfGrid;
AlignSelfGrid.storyName = "Align self";
AlignSelfGrid.args = {
type: "alignSelf",
alignSelf: "start",
rowStyle: {
display: "inline-flex",
flexWrap: "nowrap",
whiteSpace: "nowrap"
}
};
AlignSelfGrid.parameters = {
controls: {
exclude: filterExcludeItems("AlignSelf")
}
};
var FillGrowShrinkGrid = FlexboxTemplate.bind({});
exports.FillGrowShrinkGrid = FillGrowShrinkGrid;
FillGrowShrinkGrid.storyName = "Fill, Grow e Shrink";
FillGrowShrinkGrid.args = {
type: "fillGrowShrink",
fillGrowShrink: "fill",
label: true
};
FillGrowShrinkGrid.parameters = {
controls: {
exclude: filterExcludeItems("FillGrowShrink")
}
};
var OrderTemplate = function OrderTemplate(_ref3) {
var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
var customRowStyles = _objectSpread(_objectSpread({}, flexboxRowStyles), {}, {
display: "inline-flex",
whiteSpace: "nowrap"
});
return /*#__PURE__*/_react.default.createElement(_Flexbox.default, _extends({}, args, {
style: flexboxStyles
}), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, _extends({}, args, {
style: customRowStyles
}), "Order: ", args.order), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "0"
}, "Item 0"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "1"
}, "Item 1"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "2"
}, "Item 2"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "3"
}, "Item 3"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "4"
}, "Item 4"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "5"
}, "Item 5"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "6"
}, "Item 6"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "7"
}, "Item 7"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "8"
}, "Item 8"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "9"
}, "Item 9"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "10"
}, "Item 10"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "11"
}, "Item 11"), /*#__PURE__*/_react.default.createElement(_FlexboxRow.default, {
style: customRowStyles,
order: "12"
}, "Item 12"));
};
var OrderGrid = OrderTemplate.bind({});
exports.OrderGrid = OrderGrid;
OrderGrid.storyName = "Order";
OrderGrid.args = {
type: "order",
order: 0
};
OrderGrid.parameters = {
controls: {
exclude: filterExcludeItems("Order")
}
};
var AlignContentGrid = FlexboxTemplate.bind({});
exports.AlignContentGrid = AlignContentGrid;
AlignContentGrid.storyName = "Align content";
AlignContentGrid.args = {
type: "alignSelf",
alignContent: "start",
style: {
flexWrap: "wrap",
height: "300px"
}
};
AlignContentGrid.parameters = {
controls: {
exclude: filterExcludeItems("AlignContent")
}
};