@dhis2-ui/divider 9.3.0 → 9.4.0-alpha.1

package/build/cjs/divider.js

@@ -15,6 +15,16 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const flipMargin = margin => {
+  const splitMargin = margin.split(/\s+/);
+
+  if ((splitMargin === null || splitMargin === void 0 ? void 0 : splitMargin.length) === 4) {
+    return [splitMargin[0], splitMargin[3], splitMargin[2], splitMargin[1]].join(' ');
+  }
+
+  return margin;
+};
+
 const Divider = _ref => {
   let {
     className,
@@ -24,14 +34,14 @@ const Divider = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
-    className: _style.default.dynamic([["3889267139", [_uiConstants.colors.grey300]], ["3486645161", [dense ? "".concat(_uiConstants.spacers.dp4, " 0") : margin]]]) + " " + (className || "")
+    className: _style.default.dynamic([["2418722155", [_uiConstants.colors.grey300]], ["3247041537", [dense ? "".concat(_uiConstants.spacers.dp4, " 0") : margin, dense ? "".concat(_uiConstants.spacers.dp4, " 0") : flipMargin(margin)]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3889267139",
+    id: "2418722155",
     dynamic: [_uiConstants.colors.grey300]
   }, ["div.__jsx-style-dynamic-selector{display:inline-block;width:100%;height:1px;background-color:".concat(_uiConstants.colors.grey300, ";}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3486645161",
-    dynamic: [dense ? "".concat(_uiConstants.spacers.dp4, " 0") : margin]
-  }, ["div.__jsx-style-dynamic-selector{margin:".concat(dense ? "".concat(_uiConstants.spacers.dp4, " 0") : margin, ";}")]));
+    id: "3247041537",
+    dynamic: [dense ? "".concat(_uiConstants.spacers.dp4, " 0") : margin, dense ? "".concat(_uiConstants.spacers.dp4, " 0") : flipMargin(margin)]
+  }, ["div.__jsx-style-dynamic-selector{margin:".concat(dense ? "".concat(_uiConstants.spacers.dp4, " 0") : margin, ";}"), ".__jsx-style-dynamic-selector:dir(rtl){margin:".concat(dense ? "".concat(_uiConstants.spacers.dp4, " 0") : flipMargin(margin), ";}")]));
 };
 
 exports.Divider = Divider;

package/build/cjs/divider.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Margin = exports.Dense = exports.Default = void 0;
+exports.default = exports.RTLUnevenMargin = exports.Margin = exports.Dense = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -47,4 +47,13 @@ const Margin = Template.bind({});
 exports.Margin = Margin;
 Margin.args = {
   margin: '20px 20px 20px 20px'
+};
+
+const RTLUnevenMargin = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(Template, args));
+
+exports.RTLUnevenMargin = RTLUnevenMargin;
+RTLUnevenMargin.args = {
+  margin: '10px 5px 40px 50px'
 };

package/build/es/divider.js

@@ -3,6 +3,16 @@ import { colors, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+const flipMargin = margin => {
+  const splitMargin = margin.split(/\s+/);
+
+  if ((splitMargin === null || splitMargin === void 0 ? void 0 : splitMargin.length) === 4) {
+    return [splitMargin[0], splitMargin[3], splitMargin[2], splitMargin[1]].join(' ');
+  }
+
+  return margin;
+};
+
 const Divider = _ref => {
   let {
     className,
@@ -12,14 +22,14 @@ const Divider = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3889267139", [colors.grey300]], ["3486645161", [dense ? "".concat(spacers.dp4, " 0") : margin]]]) + " " + (className || "")
+    className: _JSXStyle.dynamic([["2418722155", [colors.grey300]], ["3247041537", [dense ? "".concat(spacers.dp4, " 0") : margin, dense ? "".concat(spacers.dp4, " 0") : flipMargin(margin)]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3889267139",
+    id: "2418722155",
     dynamic: [colors.grey300]
   }, ["div.__jsx-style-dynamic-selector{display:inline-block;width:100%;height:1px;background-color:".concat(colors.grey300, ";}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3486645161",
-    dynamic: [dense ? "".concat(spacers.dp4, " 0") : margin]
-  }, ["div.__jsx-style-dynamic-selector{margin:".concat(dense ? "".concat(spacers.dp4, " 0") : margin, ";}")]));
+    id: "3247041537",
+    dynamic: [dense ? "".concat(spacers.dp4, " 0") : margin, dense ? "".concat(spacers.dp4, " 0") : flipMargin(margin)]
+  }, ["div.__jsx-style-dynamic-selector{margin:".concat(dense ? "".concat(spacers.dp4, " 0") : margin, ";}"), ".__jsx-style-dynamic-selector:dir(rtl){margin:".concat(dense ? "".concat(spacers.dp4, " 0") : flipMargin(margin), ";}")]));
 };
 
 Divider.defaultProps = {

package/build/es/divider.stories.js

@@ -32,4 +32,10 @@ Dense.args = {
 export const Margin = Template.bind({});
 Margin.args = {
   margin: '20px 20px 20px 20px'
+};
+export const RTLUnevenMargin = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(Template, args));
+RTLUnevenMargin.args = {
+  margin: '10px 5px 40px 50px'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/divider",
-    "version": "9.3.0",
+    "version": "9.4.0-alpha.1",
     "description": "UI Divider",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.3.0",
+        "@dhis2/ui-constants": "9.4.0-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },