@reltio/components 1.4.1954 → 1.4.1955

package/cjs/ViewMoreToggle/ViewMoreToggle.js

@@ -8,14 +8,15 @@ var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
 var Link_1 = __importDefault(require("@mui/material/Link"));
-var ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+var ExpandLess_1 = __importDefault(require("@mui/icons-material/ExpandLess"));
 var styles_1 = require("./styles");
 var ViewMoreToggle = function (_a) {
-    var _b;
     var active = _a.active, onClick = _a.onClick, className = _a.className;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(Link_1.default, { className: (0, classnames_1.default)(styles.viewMoreLessLink, className), onClick: onClick, underline: "none" },
-        react_1.default.createElement(ArrowDropDown_1.default, { "data-reltio-id": "more-arrow-icon", className: (0, classnames_1.default)(styles.arrow, (_b = {}, _b[styles.rotated] = active, _b)) }),
+    var Icon = active ? ExpandLess_1.default : ExpandMore_1.default;
+    return (react_1.default.createElement(Link_1.default, { className: (0, classnames_1.default)(styles.link, className), onClick: onClick, underline: "none" },
+        react_1.default.createElement(Icon, { className: styles.icon }),
         active ? ui_i18n_1.default.text('View less') : ui_i18n_1.default.text('View more')));
 };
 exports.ViewMoreToggle = ViewMoreToggle;

package/cjs/ViewMoreToggle/ViewMoreToggle.test.js

@@ -53,6 +53,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var test_utils_1 = require("../test-utils");
 var ViewMoreToggle_1 = require("./ViewMoreToggle");
 describe('ViewMoreToggle tests', function () {
     var defaultProps = {
@@ -64,15 +65,15 @@ describe('ViewMoreToggle tests', function () {
         var user = user_event_1.default.setup();
         return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(ViewMoreToggle_1.ViewMoreToggle, __assign({}, defaultProps, props))));
     };
-    it('should render Link with "View less" label and arrow icon rotated if props.active is true', function () {
+    it('should render Link with "View less" label and expand less icon if props.active is true', function () {
         setUp({ active: true });
-        expect(react_2.screen.getByText('View less')).toBeInTheDocument();
-        expect(react_2.screen.getByTestId('more-arrow-icon')).toHaveClass('rotated');
+        react_2.screen.getByText('View less');
+        expect((0, test_utils_1.getMuiIconByName)('ExpandLess')).toBeInTheDocument();
     });
-    it('should render Link with "View more" label and arrow icon if props.active is false', function () {
+    it('should render Link with "View more" label and expand more icon if props.active is false', function () {
         setUp({ active: false });
-        expect(react_2.screen.getByText('View more')).toBeInTheDocument();
-        expect(react_2.screen.getByTestId('more-arrow-icon')).not.toHaveClass('rotated');
+        react_2.screen.getByText('View more');
+        expect((0, test_utils_1.getMuiIconByName)('ExpandMore')).toBeInTheDocument();
     });
     it('should call props.onClick on Link click', function () { return __awaiter(void 0, void 0, void 0, function () {
         var user;

package/cjs/ViewMoreToggle/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"arrow" | "viewMoreLessLink" | "rotated">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "link">;

package/cjs/ViewMoreToggle/styles.js

@@ -2,19 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
-    viewMoreLessLink: {
+exports.useStyles = (0, styles_1.makeStyles)({
+    link: {
         display: 'flex',
         alignItems: 'center',
         cursor: 'pointer'
     },
-    arrow: {
-        marginRight: '8px',
-        marginLeft: '-2px',
-        transform: 'rotate(0deg)',
-        transition: 'transform 0.35s ease'
-    },
-    rotated: {
-        transform: 'rotate(-180deg)'
+    icon: {
+        fontSize: '20px',
+        marginRight: '4px',
+        marginLeft: '-2px'
     }
-}); });
+});

package/esm/ViewMoreToggle/ViewMoreToggle.js

@@ -2,13 +2,14 @@ import React from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import Link from '@mui/material/Link';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { useStyles } from './styles';
 export var ViewMoreToggle = function (_a) {
-    var _b;
     var active = _a.active, onClick = _a.onClick, className = _a.className;
     var styles = useStyles();
-    return (React.createElement(Link, { className: classnames(styles.viewMoreLessLink, className), onClick: onClick, underline: "none" },
-        React.createElement(ArrowDropDownIcon, { "data-reltio-id": "more-arrow-icon", className: classnames(styles.arrow, (_b = {}, _b[styles.rotated] = active, _b)) }),
+    var Icon = active ? ExpandLessIcon : ExpandMoreIcon;
+    return (React.createElement(Link, { className: classnames(styles.link, className), onClick: onClick, underline: "none" },
+        React.createElement(Icon, { className: styles.icon }),
         active ? i18n.text('View less') : i18n.text('View more')));
 };

package/esm/ViewMoreToggle/ViewMoreToggle.test.js

@@ -48,6 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { getMuiIconByName } from '../test-utils';
 import { ViewMoreToggle } from './ViewMoreToggle';
 describe('ViewMoreToggle tests', function () {
     var defaultProps = {
@@ -59,15 +60,15 @@ describe('ViewMoreToggle tests', function () {
         var user = userEvent.setup();
         return __assign({ user: user }, render(React.createElement(ViewMoreToggle, __assign({}, defaultProps, props))));
     };
-    it('should render Link with "View less" label and arrow icon rotated if props.active is true', function () {
+    it('should render Link with "View less" label and expand less icon if props.active is true', function () {
         setUp({ active: true });
-        expect(screen.getByText('View less')).toBeInTheDocument();
-        expect(screen.getByTestId('more-arrow-icon')).toHaveClass('rotated');
+        screen.getByText('View less');
+        expect(getMuiIconByName('ExpandLess')).toBeInTheDocument();
     });
-    it('should render Link with "View more" label and arrow icon if props.active is false', function () {
+    it('should render Link with "View more" label and expand more icon if props.active is false', function () {
         setUp({ active: false });
-        expect(screen.getByText('View more')).toBeInTheDocument();
-        expect(screen.getByTestId('more-arrow-icon')).not.toHaveClass('rotated');
+        screen.getByText('View more');
+        expect(getMuiIconByName('ExpandMore')).toBeInTheDocument();
     });
     it('should call props.onClick on Link click', function () { return __awaiter(void 0, void 0, void 0, function () {
         var user;

package/esm/ViewMoreToggle/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"arrow" | "viewMoreLessLink" | "rotated">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "link">;

package/esm/ViewMoreToggle/styles.js

@@ -1,17 +1,13 @@
 import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
-    viewMoreLessLink: {
+export var useStyles = makeStyles({
+    link: {
         display: 'flex',
         alignItems: 'center',
         cursor: 'pointer'
     },
-    arrow: {
-        marginRight: '8px',
-        marginLeft: '-2px',
-        transform: 'rotate(0deg)',
-        transition: 'transform 0.35s ease'
-    },
-    rotated: {
-        transform: 'rotate(-180deg)'
+    icon: {
+        fontSize: '20px',
+        marginRight: '4px',
+        marginLeft: '-2px'
     }
-}); });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1954",
+  "version": "1.4.1955",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",