Navigation Menu

Skip to content

Commit

Permalink
final renaming of class prefixes to fit library name
Browse files Browse the repository at this point in the history
  • Loading branch information
@justinrhodes1
justinrhodes1 committed Nov 25, 2018
1 parent ba7ca9a commit 3e2cd89
Show file tree
Hide file tree
Showing 15 changed files with 146 additions and 146 deletions.
52 changes: 26 additions & 26 deletions __tests__/Tooltip.test.jsx
View file
Expand Up @@ -13,7 +13,7 @@ const numClassesOf = (el) => {

const setPropsAndgetRctContainer = (wrapper, str) => {
wrapper.setProps({ position: str });
return wrapper.find('.rct-container');
return wrapper.find('.rpt-container');
};


Expand Down Expand Up @@ -103,7 +103,7 @@ describe('DEEP component testing', () => {
beforeEach(() => {
wrapper = mount(singleTooltip);
span = wrapper.find('span');
arrow = wrapper.find('.rct-arrow');
arrow = wrapper.find('.rpt-arrow');
});

it('renders no tooltip if show prop = false', () => {
Expand Down Expand Up @@ -143,19 +143,19 @@ describe('DEEP component testing', () => {
const updatedSpan = wrapper.find('span');
expect(updatedSpan).toHaveStyle('backgroundColor', hoverBackground);
expect(updatedSpan).toHaveStyle('color', hoverColor);
const updatedArrow = wrapper.find('.rct-arrow');
const updatedArrow = wrapper.find('.rpt-arrow');
expect(updatedArrow).toHaveStyle('backgroundColor', hoverBackground);
expect(updatedSpan.parent().hasClass('rct-hover')).toEqual(true);
expect(updatedSpan.parent().hasClass('rpt-hover')).toEqual(true);
});

it('renders correct arrow style when textbox unhovered', () => {
const { backgroundColor } = defaultSettings;
// component updates before tests
span.simulate('mouseover');
wrapper.update();
wrapper.find('.rct-textbox').simulate('mouseleave');
wrapper.find('.rpt-textbox').simulate('mouseleave');
wrapper.update();
const updatedArrow = wrapper.find('.rct-arrow');
const updatedArrow = wrapper.find('.rpt-arrow');
expect(updatedArrow).toHaveStyle('backgroundColor', backgroundColor);
});

Expand All @@ -167,105 +167,105 @@ describe('DEEP component testing', () => {
wrapper.update();
const updatedSpan = wrapper.find('span');
expect(updatedSpan).toHaveStyle('backgroundColor', backgroundColor);
expect(updatedSpan.parent().hasClass('rct-hover')).toEqual(false);
expect(updatedSpan.parent().hasClass('rpt-hover')).toEqual(false);
});

it('renders no shadows if flat prop = true', () => {
wrapper.setProps({ flat: true });
arrow = wrapper.find('.rct-arrow');
arrow = wrapper.find('.rpt-arrow');
expect(arrow).toHaveStyle('boxShadow', null);
shadowContainer = wrapper.find('.rct-shadow-container');
expect(shadowContainer.hasClass('rct-no-shadow')).toEqual(true);
shadowContainer = wrapper.find('.rpt-shadow-container');
expect(shadowContainer.hasClass('rpt-no-shadow')).toEqual(true);
});

it('renders correct tooltip position: right top', () => {
wrapper.setProps({ position: 'right top' });
const rctContainer = wrapper.find('.rct-container');
expect(rctContainer.hasClass('rct-right')).toEqual(true);
const rctContainer = wrapper.find('.rpt-container');
expect(rctContainer.hasClass('rpt-right')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(2);
});

it('renders correct tooltip position: right center', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'right center');
expect(rctContainer.hasClass('rct-right rct-align-center')).toEqual(true);
expect(rctContainer.hasClass('rpt-right rpt-align-center')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct tooltip position: right bottom', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'right bottom');
expect(rctContainer.hasClass('rct-right rct-align-bottom')).toEqual(true);
expect(rctContainer.hasClass('rpt-right rpt-align-bottom')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct tooltip position: left top', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'left top');
expect(rctContainer.hasClass('rct-left')).toEqual(true);
expect(rctContainer.hasClass('rpt-left')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(2);
});

it('renders correct tooltip position: left center', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'left center');
expect(rctContainer.hasClass('rct-left rct-align-center')).toEqual(true);
expect(rctContainer.hasClass('rpt-left rpt-align-center')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct tooltip position: left bottom', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'left bottom');
expect(rctContainer.hasClass('rct-left rct-align-bottom')).toEqual(true);
expect(rctContainer.hasClass('rpt-left rpt-align-bottom')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct tooltip position: top left', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'top left');
expect(rctContainer.hasClass('rct-top rct-align-left')).toEqual(true);
expect(rctContainer.hasClass('rpt-top rpt-align-left')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct tooltip position: top center', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'top center');
expect(rctContainer.hasClass('rct-top')).toEqual(true);
expect(rctContainer.hasClass('rpt-top')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(2);
});

it('renders correct tooltip position: top right', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'top right');
expect(rctContainer.hasClass('rct-top rct-align-right')).toEqual(true);
expect(rctContainer.hasClass('rpt-top rpt-align-right')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct tooltip position: bottom left', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'bottom left');
expect(rctContainer.hasClass('rct-bottom rct-align-left')).toEqual(true);
expect(rctContainer.hasClass('rpt-bottom rpt-align-left')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct tooltip position: bottom center', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'bottom center');
expect(rctContainer.hasClass('rct-bottom')).toEqual(true);
expect(rctContainer.hasClass('rpt-bottom')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(2);
});

it('renders correct tooltip position: bottom right', () => {
const rctContainer = setPropsAndgetRctContainer(wrapper, 'bottom right');
expect(rctContainer.hasClass('rct-bottom rct-align-right')).toEqual(true);
expect(rctContainer.hasClass('rpt-bottom rpt-align-right')).toEqual(true);
expect(numClassesOf(rctContainer)).toEqual(3);
});

it('renders correct horizontal arrow position: left', () => {
wrapper.setProps({ arrow: 'left', position: 'bottom center' });
const rctTxtbxContainer = wrapper.find('.rct-textbox-container');
const rctTxtbxContainer = wrapper.find('.rpt-textbox-container');
expect(rctTxtbxContainer).toHaveStyle('left', 'calc(50% - 40px)');
});

it('renders correct horizontal arrow position: center', () => {
wrapper.setProps({ arrow: 'center', position: 'bottom center' });
const rctTxtbxContainer = wrapper.find('.rct-textbox-container');
const rctTxtbxContainer = wrapper.find('.rpt-textbox-container');
expect(rctTxtbxContainer).toHaveStyle('left', '');
});

it('renders correct horizontal arrow position: right', () => {
wrapper.setProps({ arrow: 'right', position: 'bottom center' });
const rctTxtbxContainer = wrapper.find('.rct-textbox-container');
const rctTxtbxContainer = wrapper.find('.rpt-textbox-container');
expect(rctTxtbxContainer).toHaveStyle('right', 'calc(50% - 40px)');
});
});
Expand Down
6 changes: 3 additions & 3 deletions __tests__/tooltip.puppeteer.test.jsx
View file
Expand Up @@ -28,11 +28,11 @@ afterEach(async () => {

it('renders correct textbox positions for arrow positions', async () => {
const styleTop = await page
.$eval('.test-arrow-top .rct-textbox-container', el => el.style.top);
.$eval('.test-arrow-top .rpt-textbox-container', el => el.style.top);
const styleCenter = await page
.$eval('.test-arrow-center .rct-textbox-container', el => el.style.top);
.$eval('.test-arrow-center .rpt-textbox-container', el => el.style.top);
const styleBottom = await page
.$eval('.test-arrow-bottom .rct-textbox-container', el => el.style.top);
.$eval('.test-arrow-bottom .rpt-textbox-container', el => el.style.top);

expect(styleTop).toEqual('calc(((50% - 0px) - 24px) + 0px)');
expect(styleCenter).toEqual('calc(50% - 72px)');
Expand Down
2 changes: 1 addition & 1 deletion docs/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/Tooltip/Arrow.js
View file
Expand Up @@ -18,7 +18,7 @@ var Arrow = function Arrow(_ref) {
var backgroundColor = isHovered ? hovBkg : bkgCol;
var boxShadow = flat ? null : '0 0 0 1px rgba(0,0,0,.18)';
return _react.default.createElement("div", {
className: "rct-arrow",
className: "rpt-arrow",
style: {
backgroundColor: backgroundColor,
boxShadow: boxShadow
Expand Down
12 changes: 6 additions & 6 deletions lib/Tooltip/TextBox.js
View file
Expand Up @@ -272,8 +272,8 @@ function (_Component) {
width: textBoxWidth,
borderRadius: borderRadius
};
var showShadow = flat ? 'rct-no-shadow' : 'rct-shadow';
var alertStyle = alert ? 'rct-alert' : '';
var showShadow = flat ? 'rpt-no-shadow' : 'rpt-shadow';
var alertStyle = alert ? 'rpt-alert' : '';
var rgb = alert || 'rgb(248, 109, 109)';
var boxShadow = alert ? "0 0 0 ".concat(rgb.slice(0, rgb.length - 1), ", 0.4)") : null;

Expand All @@ -282,28 +282,28 @@ function (_Component) {
};

return _react.default.createElement("div", {
className: "rct-textbox-container ".concat(alertStyle),
className: "rpt-textbox-container ".concat(alertStyle),
style: _objectSpread({}, boxStyle, {
position: 'absolute',
boxShadow: boxShadow,
padding: "".concat(move.down, "px ").concat(move.left, "px ").concat(move.up, "px ").concat(move.right, "px")
})
}, _react.default.createElement("div", {
className: "rct-shadow-container ".concat(showShadow),
className: "rpt-shadow-container ".concat(showShadow),
style: {
borderRadius: borderRadius,
height: "calc(100% - ".concat(noNeg(move.down) + noNeg(move.up), "px)"),
width: "calc(100% - ".concat(noNeg(move.left) + noNeg(move.right), "px)")
}
}), _react.default.createElement("div", {
className: "rct-textbox",
className: "rpt-textbox",
onMouseLeave: this.unsetHover,
style: {
backgroundColor: backgroundColor,
borderRadius: borderRadius
}
}, _react.default.createElement("div", {
className: !tpStatic ? 'rct-hover' : null,
className: !tpStatic ? 'rpt-hover' : null,
style: {
borderRadius: borderRadius,
overflow: 'hidden'
Expand Down
12 changes: 6 additions & 6 deletions lib/Tooltip/TextBox.jsx
View file
Expand Up @@ -186,15 +186,15 @@ class TextBox extends Component {
borderRadius
};

const showShadow = flat ? 'rct-no-shadow' : 'rct-shadow';
const alertStyle = alert ? 'rct-alert' : '';
const showShadow = flat ? 'rpt-no-shadow' : 'rpt-shadow';
const alertStyle = alert ? 'rpt-alert' : '';
const rgb = alert || 'rgb(248, 109, 109)';
const boxShadow = alert ? `0 0 0 ${rgb.slice(0, rgb.length - 1)}, 0.4)` : null;
const noNeg = number => number > 0 ? number : 0;

return (
<div
className={`rct-textbox-container ${alertStyle}`}
className={`rpt-textbox-container ${alertStyle}`}
style={{
...boxStyle,
position: 'absolute',
Expand All @@ -203,23 +203,23 @@ class TextBox extends Component {
}}
>
<div
className={`rct-shadow-container ${showShadow}`}
className={`rpt-shadow-container ${showShadow}`}
style={{
borderRadius,
height: `calc(100% - ${noNeg(move.down) + noNeg(move.up)}px)`,
width: `calc(100% - ${noNeg(move.left) + noNeg(move.right)}px)`
}}
/>
<div
className="rct-textbox"
className="rpt-textbox"
onMouseLeave={this.unsetHover}
style={{
backgroundColor,
borderRadius
}}
>
<div
className={!tpStatic ? 'rct-hover' : null}
className={!tpStatic ? 'rpt-hover' : null}
style={{
borderRadius,
overflow: 'hidden'
Expand Down
20 changes: 10 additions & 10 deletions lib/Tooltip/index.js
View file
Expand Up @@ -142,7 +142,7 @@ function (_Component) {

var side = position.side,
align = position.align;
var classes = ['rct-container'];
var classes = ['rpt-container'];
var tooltipStyle = {};
var bottom;

Expand All @@ -159,20 +159,20 @@ function (_Component) {

switch (side) {
case 'bottom':
arrange('100%', '0px', '', '', '100%', 'rct-bottom');
arrange('100%', '0px', '', '', '100%', 'rpt-bottom');
break;

case 'top':
arrange('', '0px', '', '', '100%', 'rct-top');
arrange('', '0px', '', '', '100%', 'rpt-top');
bottom = '100%';
break;

case 'right':
arrange('0px', '100%', '', '100%', '', 'rct-right');
arrange('0px', '100%', '', '100%', '', 'rpt-right');
break;

default:
arrange('0px', '', '100%', '100%', '', 'rct-left');
arrange('0px', '', '100%', '100%', '', 'rpt-left');
break;
}

Expand All @@ -195,23 +195,23 @@ function (_Component) {

switch (align) {
case 'left':
if (onAxis.y) classes.push('rct-align-left');
if (onAxis.y) classes.push('rpt-align-left');
break;

case 'right':
if (onAxis.y) classes.push('rct-align-right');
if (onAxis.y) classes.push('rpt-align-right');
break;

case 'bottom':
if (onAxis.x) classes.push('rct-align-bottom');
if (onAxis.x) classes.push('rpt-align-bottom');
break;

case 'top':
break;

default:
if (onAxis.x) {
classes.push('rct-align-center');
classes.push('rpt-align-center');

if (!oneMovePropIsNeg) {
move.down *= 2;
Expand Down Expand Up @@ -246,7 +246,7 @@ function (_Component) {
style: {
display: 'flex',
justifyContent: 'center',
animation: show ? "rct-".concat(animation, " 0.2s") : "rct-".concat(animation, "-out 0.15s")
animation: show ? "rpt-".concat(animation, " 0.2s") : "rpt-".concat(animation, "-out 0.15s")
}
}, _react.default.createElement(_Arrow.default, {
isHovered: this.state.hoverArrow,
Expand Down

0 comments on commit 3e2cd89

Please sign in to comment.