style: fix pagination example (#370)

library/styleguideComponents/ReactComponent/utilsTab.js

@@ -14,7 +14,11 @@ function TabItem({ response }) {
 }
 
 TabItem.propTypes = {
-    response: PropTypes.object.isRequired,
+    response: PropTypes.object,
+};
+
+TabItem.defaultProps = {
+    response: undefined,
 };
 
 export default function UtilsTab({ name }) {

src/components/AvatarMenu/styles.css

@@ -13,7 +13,7 @@
   transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }
   .rainbow-avatar-menu_button:focus, .rainbow-avatar-menu_button:active {
     outline: 0;
-    box-shadow: 0 0 2px #01b6f5; }
+    box-shadow: 0 0 0 4px #e3e5ed; }
   .rainbow-avatar-menu_button:hover {
     box-shadow: 0 0 0 4px #e3e5ed;
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }

src/components/AvatarMenu/styles.scss

@@ -28,7 +28,7 @@
     &:focus,
     &:active {
         outline: 0;
-        box-shadow: $shadow-outline;
+        box-shadow: 0 0 0 4px $color-gray-2;
     }
 
     &:hover {

src/components/Card/styles.css

@@ -38,8 +38,7 @@
   color: inherit;
   text-align: center;
   border-top: 0.0625rem solid #e3e5ed;
-  padding: 0.75rem 1rem;
-  margin-top: 0.75rem; }
+  padding: 0.75rem 1rem; }
 
 .rainbow-card_header-link {
   font-size: inherit;

src/components/Card/styles.scss

@@ -61,7 +61,6 @@
     text-align: center;
     border-top: 0.0625rem solid $color-gray-2;
     padding: $padding-small $padding-medium;
-    margin-top: $margin-small;
 }
 
 .rainbow-card_header-link {

src/components/Pagination/__test__/pageButtons.spec.js

@@ -16,7 +16,7 @@ describe('<PageButtons />', () => {
     it('should set the right className to the active page button', () => {
         const component = mount(<PageButtons pages={7} onChange={() => {}} activePage={3} />);
         const pageButtons = component.find('li.rainbow-pagination_button');
-        expect(pageButtons.get(2).props.className).toBe('rainbow-pagination_button rainbow-pagination_button--active');
+        expect(pageButtons.get(2).props.className).toBe('rainbow-pagination_button');
     });
     it('should set aria-current to "page" to the active anchor element', () => {
         const component = mount(<PageButtons pages={7} onChange={() => {}} activePage={3} />);

src/components/Pagination/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import LeftArrow from './leftArrow';
 import RightArrow from './rightArrow';
 import NavigationButton from './navigationButton';
@@ -10,25 +9,27 @@ import './styles.css';
 export default function Pagination(props) {
     const { pages, activePage, onChange, className, style } = props;
 
-    const getContainerClassNames = () => classnames('rainbow-pagination', className);
-
     const isFirstItemSelected = activePage === 1;
     const isLastItemSelected = activePage === pages;
 
     return (
-        <nav className={getContainerClassNames()} style={style} aria-label="pagination">
-            <ul className="rainbow-pagination_container">
+        <nav className={className} aria-label="pagination" style={style}>
+            <ul className="rainbow-pagination">
                 <NavigationButton
                     dataId="previous-page-button"
                     icon={<LeftArrow />}
                     onClick={event => onChange(event, activePage - 1)}
-                    disabled={isFirstItemSelected} />
+                    disabled={isFirstItemSelected}
+                    ariaLabel="Goto Previous Page" />
+
                 <PageButtons onChange={onChange} pages={pages} activePage={activePage} />
                 <NavigationButton
                     dataId="next-page-button"
                     icon={<RightArrow />}
                     onClick={event => onChange(event, activePage + 1)}
-                    disabled={isLastItemSelected} />
+                    disabled={isLastItemSelected}
+                    ariaLabel="Goto Next Page" />
+
             </ul>
         </nav>
     );

src/components/Pagination/leftArrow.js

@@ -2,15 +2,8 @@ import React from 'react';
 
 export default function LeftArrow() {
     return (
-        <svg width="7px" height="10px" viewBox="0 0 7 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
-            <title>arrow-left</title>
-            <desc>Created with Sketch.</desc>
-            <defs />
-            <g id="components-left" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                <g id="arrow-left" fill="#576574" fillRule="nonzero">
-                    <path d="M3.25545171,7.98130841 L-0.981308411,3.74454829 C-1.2741433,3.4517134 -1.2741433,2.97819315 -0.981308411,2.68847352 L-0.277258567,1.98442368 C0.015576324,1.69158879 0.489096573,1.69158879 0.778816199,1.98442368 L3.78193146,4.98753894 L6.78504673,1.98442368 C7.07788162,1.69158879 7.55140187,1.69158879 7.8411215,1.98442368 L8.54517134,2.68847352 C8.83800623,2.98130841 8.83800623,3.45482866 8.54517134,3.74454829 L4.30841121,7.98130841 C4.02180685,8.2741433 3.5482866,8.2741433 3.25545171,7.98130841 Z" id="shape-left" transform="translate(3.781931, 4.982866) scale(-1, 1) rotate(-90.000000) translate(-3.781931, -4.982866) " />
-                </g>
-            </g>
+        <svg fill="#576574" width="6.46px" height="10px" viewBox="0 0 6.46 10" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.239130435,4.47204969 L4.46273292,0.248447205 C4.75465839,-0.0434782609 5.22670807,-0.0434782609 5.51552795,0.248447205 L6.2173913,0.950310559 C6.50931677,1.24223602 6.50931677,1.71428571 6.2173913,2.00310559 L3.22670807,5 L6.22049689,7.99378882 C6.51242236,8.28571429 6.51242236,8.75776398 6.22049689,9.04658385 L5.51863354,9.7515528 C5.22670807,10.0434783 4.75465839,10.0434783 4.46583851,9.7515528 L0.242236025,5.52795031 C-0.0527950311,5.23602484 -0.0527950311,4.76397516 0.239130435,4.47204969 Z" />
         </svg>
     );
 }

src/components/Pagination/navigationButton.js

@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default function NavigationButton(props) {
-    const { onClick, icon, disabled, dataId } = props;
+    const { onClick, icon, disabled, dataId, ariaLabel } = props;
 
-    const getClassName = () => classnames('rainbow-pagination_navigation-button', {
-        'rainbow-pagination_navigation-button--disabled': disabled,
+    const getClassName = () => classnames('rainbow-pagination_navigation-button-content', {
+        'rainbow-pagination_navigation-button-content--disabled': disabled,
     });
 
     const handleOnClick = (event) => {
@@ -16,14 +16,23 @@ export default function NavigationButton(props) {
         }
     };
 
+    const getTabIndex = () => {
+        if (disabled) {
+            return -1;
+        }
+        return 0;
+    };
+
     return (
-        <li className={getClassName()}>
+        <li className="rainbow-pagination_navigation-button">
             <a
-                className="rainbow-pagination_navigation-button-content"
+                className={getClassName()}
                 data-id={dataId}
                 onClick={handleOnClick}
                 href="javascript:void(0);"
-                aria-disabled={!!disabled}>
+                aria-disabled={!!disabled}
+                tabIndex={getTabIndex()}
+                aria-label={ariaLabel}>
                 {icon}
             </a>
         </li>
@@ -35,9 +44,11 @@ NavigationButton.propTypes = {
     icon: PropTypes.node.isRequired,
     disabled: PropTypes.bool,
     dataId: PropTypes.string,
+    ariaLabel: PropTypes.string,
 };
 
 NavigationButton.defaultProps = {
     disabled: false,
     dataId: undefined,
+    ariaLabel: undefined,
 };

src/components/Pagination/pageButtons.js

@@ -7,8 +7,8 @@ import getFirstItem from './get-first-item';
 export default function PageButtons(props) {
     const { pages, activePage, onChange } = props;
 
-    const getButtonClassName = page => classnames('rainbow-pagination_button', {
-        'rainbow-pagination_button--active': activePage === page,
+    const getButtonClassName = page => classnames('rainbow-pagination_button-content', {
+        'rainbow-pagination_button-content--active': activePage === page,
     });
 
     const getAriaCurrent = (page) => {
@@ -29,9 +29,9 @@ export default function PageButtons(props) {
             return (
                 <li
                     key={key}
-                    className={getButtonClassName(page)}>
+                    className="rainbow-pagination_button">
                     <a
-                        className="rainbow-pagination_button-content"
+                        className={getButtonClassName(page)}
                         onClick={event => onChange(event, page)}
                         aria-current={getAriaCurrent(page)}
                         aria-label={ariaLabel}

src/components/Pagination/readme.md

@@ -1,8 +1,8 @@
 Pagination base:
 
-    const cardStyles = { width: '32%' };
-    const cardContentStyles = { height: '70%' };
-    const cardImageStyles = { width: '100%', flex: '1' };
+    const cardImageContainerStyles = { height: 160};
+    const cardImageStyles = { height: '105%'};
+    const cardStyles = { width: 240};
 
     class PaginationExample extends React.Component {
         constructor(props) {
@@ -13,49 +13,49 @@ Pagination base:
             this.handleOnChange = this.handleOnChange.bind(this);
             this.content = [
                 {
-                    title: 'Rainbow happy',
-                    image: 'images/illustrations/Illustration-rainbow-1.svg',
-                },
-                {
-                    title: 'The Big Rainbow',
-                    image: 'images/illustrations/Illustration-rainbow-2.svg',
-                },
-                {
-                    title: 'Rainbow friendly',
+                    title: 'Rainbow',
                     image: 'images/illustrations/Illustration-rainbow-3.svg',
                 },
                 {
-                    title: 'Rainbow 4',
+                    title: 'Rainbow friendly',
                     image: 'images/illustrations/Illustration-rainbow-4.svg',
                 },
                 {
-                    title: 'Rainbow 5',
+                    title: 'Rainbow happy',
                     image: 'images/illustrations/Illustration-rainbow-5.svg',
                 },
                 {
-                    title: 'Rainbow 6',
+                    title: 'Rainbow',
                     image: 'images/illustrations/Illustration-rainbow-6.svg',
                 },
                 {
-                    title: 'Rainbow 7',
+                    title: 'Rainbow growing',
                     image: 'images/illustrations/Illustration-rainbow-7.svg',
                 },
                 {
-                    title: 'Rainbow 8',
+                    title: 'Rainbow in the rain',
                     image: 'images/illustrations/Illustration-rainbow-8.svg',
                 },
                 {
-                    title: 'Rainbow 9',
+                    title: 'Rainbow sad',
                     image: 'images/illustrations/Illustration-rainbow-9.svg',
                 },
                 {
-                    title: 'Rainbow 10',
+                    title: 'Rainbow growing',
                     image: 'images/illustrations/Illustration-rainbow-10.svg',
                 },
                 {
-                    title: 'Rainbow 11',
+                    title: 'The big Rainbow',
                     image: 'images/illustrations/Illustration-rainbow-11.svg',
                 },
+                {
+                    title: 'Rainbow happy',
+                    image: 'images/illustrations/Illustration-rainbow-1.svg',
+                },
+                {
+                    title: 'Rainbow friendly',
+                    image: 'images/illustrations/Illustration-rainbow-2.svg',
+                },
             ];
         }
 
@@ -65,10 +65,11 @@ Pagination base:
             const firstItem = lastItem - 3;
             return this.content.slice(firstItem, lastItem).map(({ title, image }) => (
                 <Card
-                    className="rainbow-m-bottom_x-large rainbow-m-right_small"
+                    key={title}
                     style={cardStyles}
+                    className="rainbow-m-bottom_x-large rainbow-m-right_small"
                     footer={<span className="rainbow-font-size-text_large rainbow-color_dark-1">{title}</span>}>
-                    <div className="rainbow-flex rainbow-flex_column rainbow_vertical-stretch" style={cardContentStyles}>
+                    <div className="rainbow-flex rainbow-flex_column rainbow_vertical-stretch" style={cardImageContainerStyles}>
                         <img src={image} style={cardImageStyles} />
                     </div>
                 </Card>
@@ -84,8 +85,8 @@ Pagination base:
             return (
                 <div>
                     <GlobalHeader src="images/user/user3.jpg" />
-                    <div className="rainbow-p-around_x-large rainbow-p-around_x-large">
-                        <div className="rainbow-flex">
+                    <div className="rainbow-p-around_xx-large rainbow-align-content_center rainbow-flex_column">
+                        <div className="rainbow-flex rainbow-justify_space-around rainbow-flex_wrap">
                             {this.getContent()}
                         </div>
                         <Pagination className="rainbow-m_auto" pages={4} activePage={activePage} onChange={this.handleOnChange} />

src/components/Pagination/rightArrow.js

@@ -2,23 +2,8 @@ import React from 'react';
 
 export default function RightArrow() {
     return (
-        <svg width="7px" height="10px" viewBox="0 0 7 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
-            <title>arrow-right</title>
-            <desc>Created with Sketch.</desc>
-            <defs />
-            <g id="components-right" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-                <g id="pagination-component-V2" transform="translate(-837.000000, -1090.000000)" fill="#576574" fillRule="nonzero">
-                    <g id="Group-78" transform="translate(613.000000, 1079.000000)">
-                        <g id="Group-76" transform="translate(40.000000, 0.000000)">
-                            <g id="Group-31" transform="translate(128.000000, 0.000000)">
-                                <g id="arrow-right" transform="translate(56.000000, 11.000000)">
-                                    <path d="M2.69158879,7.98130841 L-1.54517134,3.74454829 C-1.83800623,3.4517134 -1.83800623,2.97819315 -1.54517134,2.68847352 L-0.841121495,1.98442368 C-0.548286604,1.69158879 -0.0747663551,1.69158879 0.214953271,1.98442368 L3.21806854,4.98753894 L6.2211838,1.98442368 C6.51401869,1.69158879 6.98753894,1.69158879 7.27725857,1.98442368 L7.98130841,2.68847352 C8.2741433,2.98130841 8.2741433,3.45482866 7.98130841,3.74454829 L3.74454829,7.98130841 C3.45794393,8.2741433 2.98442368,8.2741433 2.69158879,7.98130841 Z" id="shape-right" transform="translate(3.218069, 4.982866) rotate(-90.000000) translate(-3.218069, -4.982866) " />
-                                </g>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
+        <svg fill="#576574" width="6.46px" height="10px" viewBox="0 0 6.46 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6.22049689,5.52795031 L1.99689441,9.7515528 C1.70496894,10.0434783 1.23291925,10.0434783 0.944099379,9.7515528 L0.242236025,9.04968944 C-0.049689441,8.75776398 -0.049689441,8.28571429 0.242236025,7.99689441 L3.23602484,5.00310559 L0.242236025,2.00931677 C-0.049689441,1.7173913 -0.049689441,1.24534161 0.242236025,0.956521739 L0.940993789,0.248447205 C1.23291925,-0.0434782609 1.70496894,-0.0434782609 1.99378882,0.248447205 L6.2173913,4.47204969 C6.51242236,4.76397516 6.51242236,5.23602484 6.22049689,5.52795031 Z" />
         </svg>
     );
 }