{/* eslint-disable jsx-a11y/click-events-have-key-events */}
{/* eslint-disable jsx-a11y/no-static-element-interactions */}
{
@@ -78,12 +96,14 @@ Carousel.propTypes = {
theme: PropTypes.oneOfType([PropTypes.object]),
interval: PropTypes.number,
controls: PropTypes.bool,
+ pauseOnHover: PropTypes.bool,
};
Carousel.defaultProps = {
interval: 4000,
theme: defaultTheme,
controls: true,
+ pauseOnHover: true,
};
export default themr('CBCarousel', defaultTheme)(Carousel);
diff --git a/lib/carousel/readMe.md b/lib/carousel/readMe.md
index bed8f084..0ce2238b 100644
--- a/lib/carousel/readMe.md
+++ b/lib/carousel/readMe.md
@@ -8,6 +8,7 @@ A basic Carousel component.
| `data` | `Array` | | An array of image urls or custom children. ( `Required` ) |
| `interval` | `Number` | `4000` | Set an interval ( in ms ) for switching between carousel items. |
| `controls` | `Boolean` | `true` | Set boolean for showing / hiding left and right controls. |
+| `pauseOnHover` | `Boolean` | `true` | Set boolean to pause the carousel animation on mouse hover. |
### Theme
diff --git a/lib/carousel/tests/render.test.js b/lib/carousel/tests/render.test.js
index 7ed51926..2e5dac65 100644
--- a/lib/carousel/tests/render.test.js
+++ b/lib/carousel/tests/render.test.js
@@ -65,4 +65,23 @@ describe('Carousel Render tests', () => {
done();
}, 4000 * data.length);
});
+
+ it('Successfully pauses carousel animation on hover and resume after leaving the carousel area.', () => {
+ const expectedValueBeforeChange = data[0];
+ const expectedValueAfterChange = data[1];
+
+ const simulatedValue = () => wrappedComponent.find('.current').props().children.props.src;
+
+ expect(simulatedValue()).to.equal(expectedValueBeforeChange);
+ wrappedComponent.children().childAt(0).simulate('mouseEnter');
+ setTimeout(() => {
+ expect(simulatedValue()).to.equal(expectedValueBeforeChange);
+ wrappedComponent.children().childAt(0).simulate('mouseLeave');
+ setTimeout(() => {
+ expect(simulatedValue()).to.equal(expectedValueAfterChange);
+ done();
+ }, 4000);
+ }, 6000);
+ });
+
});
diff --git a/lib/carousel/theme.module.scss b/lib/carousel/theme.module.scss
index 5e1aa929..8cf6d885 100644
--- a/lib/carousel/theme.module.scss
+++ b/lib/carousel/theme.module.scss
@@ -1,68 +1,95 @@
:local(.carousel-container) {
- position: relative;
- width: 100%;
- height: 250px;
- display: flex;
- justify-content: center;
- overflow: hidden;
+ position: relative;
+ width: 100%;
+ height: 250px;
+ display: flex;
+ justify-content: center;
+ overflow: hidden;
+ &:hover {
+ &::before,
+ &::after {
+ opacity: 1;
+ }
+ }
+ &::before,
+ &::after {
+ content: '';
+ display: block;
+ height: 100%;
+ width: 9%;
+ position: absolute;
+ transition: opacity 1s ease;
+ opacity: 0;
+ }
+ &::before {
+ left: 0;
+ background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, 70%, transparent);
+ z-index: 1;
+ }
+ &::after {
+ right: 0;
+ background-image: linear-gradient(to left, rgba(0,0,0,0.5) 0, 70%, transparent);
+ }
}
:local(.carousel-item) {
- display: flex;
- width: 100%;
- height: 100%;
- justify-content: center;
- align-items: center;
- &.active {
- opacity: 0;
- transition: 1.5s ease-in-out;
- position: absolute;
- left: 0;
- }
- &.current {
- opacity: 1;
- transition: 1.5s ease-in-out;
- }
- & > img {
- height: 100%;
+ display: flex;
width: 100%;
- }
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ &.active {
+ opacity: 0;
+ transition: 1.5s ease-in-out;
+ position: absolute;
+ left: 0;
+ }
+ &.current {
+ opacity: 1;
+ transition: 1.5s ease-in-out;
+ }
+ &>img {
+ height: 100%;
+ width: 100%;
+ }
}
:local(.dot) {
- position: absolute;
- bottom: 10%;
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- & > span {
- cursor: pointer;
- height: 5px;
- width: 5px;
- margin: 2px;
- border: 1px solid white;
- border-radius: 50%;
- background-color: transparent;
- transition: background-color 1.5s ease-in-out;
- &.active {
- background-color: white;
+ position: absolute;
+ bottom: 10%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ &>span {
+ cursor: pointer;
+ height: 5px;
+ width: 5px;
+ margin: 2px;
+ border: 1px solid white;
+ border-radius: 50%;
+ background-color: transparent;
+ transition: background-color 1.5s ease-in-out;
+ &.active {
+ background-color: white;
+ }
}
- }
}
:local(.left-control),
:local(.right-control) {
- z-index: 1;
- font-size: 2rem;
- color: white;
- position: absolute;
- top: 45%;
- align-self: center;
- cursor: pointer;
+ z-index: 1;
+ font-size: 2rem;
+ color: white;
+ position: absolute;
+ top: 45%;
+ align-self: center;
+ cursor: pointer;
}
+
:local(.left-control) {
- left: 2%;
+ left: 2%;
}
+
:local(.right-control) {
- right: 2%;
-}
+ right: 2%;
+}
\ No newline at end of file
diff --git a/lib/checkbox/theme.module.scss b/lib/checkbox/theme.module.scss
index e86e2765..3975e89e 100644
--- a/lib/checkbox/theme.module.scss
+++ b/lib/checkbox/theme.module.scss
@@ -1,14 +1,19 @@
@import '../globals/theme.scss';
:local(.checkbox) {
+ display: inline-block;
background-color: $secondary-white;
padding: 2px;
- border: 1px solid $secondary-blue;
- &:hover {
- cursor: pointer;
- }
+ border: 2px solid $secondary-blue;
+ height: 25px;
+ width: 25px;
+ box-sizing: border-box;
+ border-radius: 3px;
+ cursor: pointer;
input {
/* Disable the HTML input */
opacity: 0;
+ margin: 0;
+ cursor: pointer;
}
/* Fixes width issue in safari */
@media not all and (min-resolution:.001dpcm) {
@@ -24,14 +29,13 @@
}
:local(.checked) {
- height: 200px;
position: relative;
.check-item {
/* Check Item adds the tick */
/* Builds a rectange with border width and rotates it 45 Degree */
position: absolute;
left: 32%;
- top: 12%;
+ top: 5%;
width: 5px;
height: 12px;
border: solid $secondary-blue;
diff --git a/lib/chip/index.js b/lib/chip/index.js
index c461f5c4..cd5a24e3 100644
--- a/lib/chip/index.js
+++ b/lib/chip/index.js
@@ -46,10 +46,11 @@ const Chip = ({
className: classnames(
avatarElement.props.className,
theme[`${size}Avatar`],
+ theme['chip-avatar'],
),
});
} else if (typeof avatarElement === 'string') {
- avatar = 
;
+ avatar = ;
}
/* DeleteIcon related block */
@@ -65,7 +66,11 @@ const Chip = ({
return (
{}}>
- { avatar }
+ { avatar !== null ? (
+
diff --git a/lib/chip/theme.module.scss b/lib/chip/theme.module.scss
index cbfee38c..221c1ef5 100644
--- a/lib/chip/theme.module.scss
+++ b/lib/chip/theme.module.scss
@@ -1,210 +1,227 @@
@import '../globals/theme.scss';
-
:local(.chip) {
- display: inline-flex;
- align-items: center;
- justify-content: space-between;
- height: auto;
- border: 1px solid $secondary-white;
- box-sizing: border-box;
- &[disabled] {
- cursor: not-allowed;
- opacity: 0.6;
- }
- &.avatarMarginLeft {
- margin-left: 0.5%;
- }
- .icon-cross {
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-between;
+ height: auto;
+ border: 1px solid $secondary-white;
+ box-sizing: border-box;
+ overflow: none;
+ &[disabled] {
+ cursor: not-allowed;
+ opacity: 0.6;
+ }
+ .icon-cross {
+ height: 100%;
+ width: 100%;
+ }
+}
+
+:local(.chip-avatar) {
height: 100%;
- width: 100%;
- }
+ max-width: 2em;
+ display: flex;
+ box-sizing: border-box;
+ align-items: center;
+ justify-content: center;
+ * {
+ height: 100%;
+ }
+ img {
+ height: 100%;
+ width: auto;
+ }
}
:local(.clickable) {
- cursor: pointer;
- text-decoration: none;
+ cursor: pointer;
+ text-decoration: none;
}
+
:local(.label) {
- text-transform: capitalize;
- padding: 6px 12px;
+ text-transform: capitalize;
+ height: 100%;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+ padding: 0.5em;
+ margin: auto;
}
:local(.smallAvatar) {
- overflow: hidden;
- border-radius: 50%;
- max-height: 28px;
- max-width: 28px;
- object-fit: contain;
- margin-left: -2%;
+ overflow: hidden;
+ border-radius: 50%;
+ max-width: 2.5em;
+ object-fit: contain;
}
+
:local(.mediumAvatar) {
- overflow: hidden;
- border-radius: 50%;
- max-height: 36px;
- max-width: 36px;
- object-fit: contain;
- margin-left: -2%;
+ overflow: hidden;
+ border-radius: 50%;
+ object-fit: contain;
}
+
:local(.largeAvatar) {
- overflow: hidden;
- border-radius: 50%;
- max-height: 52px;
- max-width: 52px;
- object-fit: contain;
- margin-left: -2%;
+ overflow: hidden;
+ border-radius: 50%;
+ object-fit: contain;
}
:local(.deleteIcon) {
- font-weight: bold;
- padding: 2px;
- border-radius: 50%;
- cursor: pointer;
- outline: none;
- border: none;
- overflow: hidden;
+ font-weight: bold;
+ padding: 2px;
+ border-radius: 50%;
+ cursor: pointer;
+ outline: none;
+ border: none;
+ overflow: hidden;
}
:local(.smallDelete) {
- width: 16px;
- height: 16px;
- font-size: 10px;
- margin: 0 4px;
+ width: 16px;
+ height: 16px;
+ font-size: 10px;
+ margin: 0 4px;
}
+
:local(.mediumDelete) {
- width: 19px;
- height: 19px;
- font-size: 12px;
- line-height: 16px;
- margin: 0 6px;
+ width: 19px;
+ height: 19px;
+ font-size: 12px;
+ line-height: 16px;
+ margin: 0 6px;
}
+
:local(.largeDelete) {
- width: 25px;
- height: 25px;
- font-size: 16px;
- line-height: 20px;
- margin: 0 8px;
+ width: 25px;
+ height: 25px;
+ font-size: 16px;
+ line-height: 20px;
+ margin: 0 8px;
}
:local(.small) {
- font-size: 10px;
- line-height: 11px;
- border-radius: 34px;
- padding: 0;
- min-width: 55px;
- height: 22px;
+ font-size: 10px;
+ line-height: 11px;
+ border-radius: 34px;
+ padding: 0;
+ min-width: 55px;
+ height: 1.8rem;
}
:local(.medium) {
- font-size: 16px;
- line-height: 19px;
- border-radius: 34px;
- padding: 0;
- min-width: 90px;
- height: 30px;
+ font-size: 16px;
+ line-height: 19px;
+ border-radius: 34px;
+ padding: 0;
+ min-width: 90px;
+ height: 2.2rem;
}
:local(.large) {
- font-size: 18px;
- line-height: 20px;
- border-radius: 34px;
- padding: 0;
- min-width: 105px;
- height: 45px;
+ font-size: 18px;
+ line-height: 20px;
+ border-radius: 34px;
+ padding: 0;
+ min-width: 105px;
+ height: 2.5rem;
}
:local(.primary) {
- color: $original-white;
- background-color: $secondary-violet;
- border-color: $secondary-violet;
+ color: $original-white;
+ background-color: $secondary-violet;
+ border-color: $secondary-violet;
}
:local(.secondary) {
- color: $original-white;
- background-color: $secondary-grey;
- border-color: $secondary-grey;
+ color: $original-white;
+ background-color: $secondary-grey;
+ border-color: $secondary-grey;
}
:local(.success) {
- color: $original-white;
- background-color: $secondary-green;
- border-color: $secondary-green;
+ color: $original-white;
+ background-color: $secondary-green;
+ border-color: $secondary-green;
}
:local(.danger) {
- color: $original-white;
- background-color: $secondary-red;
- border-color: $secondary-red;
+ color: $original-white;
+ background-color: $secondary-red;
+ border-color: $secondary-red;
}
:local(.warning) {
- color: $secondary-black;
- background-color: $secondary-yellow;
- border-color: $secondary-yellow;
+ color: $secondary-black;
+ background-color: $secondary-yellow;
+ border-color: $secondary-yellow;
}
:local(.info) {
- color: $original-white;
- background-color: $secondary-blue;
- border-color: $secondary-blue;
+ color: $original-white;
+ background-color: $secondary-blue;
+ border-color: $secondary-blue;
}
:local(.light) {
- color: $secondary-black;
- background-color: $secondary-white;
- border-color: $secondary-white;
+ color: $secondary-black;
+ background-color: $secondary-white;
+ border-color: $secondary-white;
}
:local(.dark) {
- color: $original-white;
- background-color: $secondary-black;
- border-color: $secondary-black;
+ color: $original-white;
+ background-color: $secondary-black;
+ border-color: $secondary-black;
}
/* Outlined */
+
:local(.primaryOutlined) {
- color: $secondary-violet;
- background-color: $original-white;
- border-color: $secondary-violet;
+ color: $secondary-violet;
+ background-color: $original-white;
+ border-color: $secondary-violet;
}
:local(.secondaryOutlined) {
- color: $secondary-grey;
- background-color: $original-white;
- border-color: $secondary-grey;
+ color: $secondary-grey;
+ background-color: $original-white;
+ border-color: $secondary-grey;
}
:local(.successOutlined) {
- color: $secondary-green;
- background-color: $original-white;
- border-color: $secondary-green;
+ color: $secondary-green;
+ background-color: $original-white;
+ border-color: $secondary-green;
}
:local(.dangerOutlined) {
- color: $secondary-red;
- background-color: $original-white;
- border-color: $secondary-red;
+ color: $secondary-red;
+ background-color: $original-white;
+ border-color: $secondary-red;
}
:local(.warningOutlined) {
- color: $secondary-yellow;
- background-color: $secondary-black;
- border-color: $secondary-yellow;
+ color: $secondary-yellow;
+ background-color: $secondary-black;
+ border-color: $secondary-yellow;
}
:local(.infoOutlined) {
- color: $secondary-blue;
- background-color: $original-white;
- border-color: $secondary-blue;
+ color: $secondary-blue;
+ background-color: $original-white;
+ border-color: $secondary-blue;
}
:local(.lightOutlined) {
- color: $secondary-white;
- background-color: transparent;
- border-color: $secondary-white;
+ color: $secondary-white;
+ background-color: transparent;
+ border-color: $secondary-white;
}
:local(.darkOutlined) {
- color: $secondary-black;
- background-color: $original-white;
- border-color: $secondary-black;
-}
+ color: $secondary-black;
+ background-color: $original-white;
+ border-color: $secondary-black;
+}
\ No newline at end of file
diff --git a/lib/globals/animations.module.scss b/lib/globals/animations.module.scss
index 303383e6..27889a73 100644
--- a/lib/globals/animations.module.scss
+++ b/lib/globals/animations.module.scss
@@ -13,6 +13,21 @@
}
}
+@mixin zoomIn() {
+ -o-animation-name: animateZoom;
+ -moz-animation-name: animateZoom;
+ -webkit-animation-name: animateZoom;
+ animation-name: animateZoom;
+ @keyframes animateZoom {
+ 0% {
+ transform: scale(0.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+ }
+}
+
@mixin sectionEntry($duration) {
visibility: hidden;
opacity: 0;
diff --git a/lib/globals/common.scss b/lib/globals/common.scss
index 0a95a93c..165cb736 100644
--- a/lib/globals/common.scss
+++ b/lib/globals/common.scss
@@ -2,7 +2,7 @@
@mixin customScroll() {
::-webkit-scrollbar {
- width: 10px;
+ width: 7px;
}
/* Track */
@@ -12,7 +12,8 @@
/* Handle */
::-webkit-scrollbar-thumb {
- background: $secondary-grey;
+ background: $secondary-grey;
+ border-radius: 20px;
}
/* Handle on hover */
diff --git a/lib/globals/fonts.scss b/lib/globals/fonts.scss
index b84fc9ca..dfc7562e 100644
--- a/lib/globals/fonts.scss
+++ b/lib/globals/fonts.scss
@@ -27,10 +27,6 @@
content: "\e802";
}
-.icon-cross:before {
- content: "\e807";
-}
-
.icon-menu:before {
content: '\e800';
}
diff --git a/lib/modal/index.js b/lib/modal/index.js
index 7f49e4b4..603a248d 100644
--- a/lib/modal/index.js
+++ b/lib/modal/index.js
@@ -3,6 +3,7 @@ import { findDOMNode } from 'react-dom';
import PropTypes from 'prop-types';
import { themr } from 'react-css-themr';
import cx from 'classnames';
+import { MdClose } from 'react-icons/md';
import { transitionEndEventName } from '../globals/helper';
import defaultTheme from './theme.module.scss';
import '../globals/fonts.scss';
@@ -87,7 +88,7 @@ class Modal extends Component {
const { open } = this.state;
const classes = cx(
theme.modal,
- open ? theme['d-block'] : theme['d-none'],
+ open ? theme['d-block-modal'] : theme['d-none'],
className,
);
const backdrop = cx(
@@ -113,7 +114,16 @@ class Modal extends Component {
this.modalRef = ref;
}}
>
- {this.renderModalTitle(title)}
+
)}
+ { avatar }
+
+ ) : null }
{ label }
{ deleteIcon }
+ {this.renderModalTitle(title)}
+
+ ×
+
+ {title &&
} +
} +
{children || (
typeof body === 'function'
@@ -122,10 +132,6 @@ class Modal extends Component {
) || null}
{this.renderModalFooter(footer)}
-