Fix code review issues

Author: Marek Rozmus

examples/src/App.css

@@ -6,15 +6,16 @@ body {
 }
 
 .page-content__title {
-  font-size: 19px;
+  font-size: 20px;
   font-weight: bold;
-  margin-top: 17px;
+  margin-top: 16px;
   margin-bottom: 0;
 }
 
 .page-content__subtitle {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: bold;
+  margin: 0;
 }
 
 .footer {
@@ -132,13 +133,13 @@ body {
   }
 
   /* The screen (or content) of the device */
-  .smartfone__content {
+  .smartphone__content {
     width: 360px;
     height: 640px;
     background: white;
   }
 
-  .smartfone__footer {
+  .smartphone__footer {
     padding: 56px 0;
     margin-top: unset;
   }

examples/src/App.js

@@ -63,10 +63,10 @@ class App extends PureComponent {
 
     return (
       <div className="page-content">
-        <div className="page-content__title">react-swipeable-list example</div>
-        <div className="page-content__subtitle">
+        <h1 className="page-content__title">react-swipeable-list example</h1>
+        <h2 className="page-content__subtitle">
           (try also mobile view in dev tools for touch events)
-        </div>
+        </h2>
         <select
           className="page__select"
           value={selectedExample}

examples/src/animations/AnimationsExample.js

@@ -11,6 +11,7 @@ import { findKey, mapEntries } from '@sandstreamdev/std/object';
 
 import BasicListItem from '../list-items/BasicListItem';
 import BasicSwipeContent from '../list-items/BasicSwipeContent';
+
 import './AnimationsExample.css';
 
 const AnimationsExample = () => {
@@ -32,13 +33,13 @@ const AnimationsExample = () => {
     setItems([...items, { id: uuidv4(), text: `New item` }]);
 
   const swipeRightOptions = id => ({
-    content: <BasicSwipeContent direction="left" label="Delete" />,
+    content: <BasicSwipeContent label="Delete" position="left" />,
     actionAnimation: contentAnimation,
     action: () => deleteItemById(id)
   });
 
   const swipeLeftOptions = id => ({
-    content: <BasicSwipeContent direction="right" label="Delete" />,
+    content: <BasicSwipeContent label="Delete" position="right" />,
     actionAnimation: contentAnimation,
     action: () => deleteItemById(id)
   });

examples/src/basic/BasicExample.js

@@ -7,6 +7,7 @@ import '@sandstreamdev/react-swipeable-list/dist/styles.css';
 
 import BasicListItem from '../list-items/BasicListItem';
 import BasicSwipeContent from '../list-items/BasicSwipeContent';
+
 import './BasicExample.css';
 
 const BasicExample = () => {
@@ -15,12 +16,12 @@ const BasicExample = () => {
   const [swipeAction, handleSwipeAction] = useState('None');
 
   const swipeRightOptions = name => ({
-    content: <BasicSwipeContent direction="left" label="Left content" />,
+    content: <BasicSwipeContent label="Left content" position="left" />,
     action: () => triggerItemAction(`Swipe right action on "${name}"`)
   });
 
   const swipeLeftOptions = name => ({
-    content: <BasicSwipeContent direction="right" label="Right content" />,
+    content: <BasicSwipeContent label="Right content" position="right" />,
     action: () => triggerItemAction(`Swipe left action on "${name}"`)
   });
 
@@ -62,7 +63,7 @@ const BasicExample = () => {
             onSwipeProgress={handleSwipeProgress}
             onSwipeStart={handleSwipeStart}
           >
-            <BasicListItem label="Item with both swipes" />{' '}
+            <BasicListItem label="Item with both swipes" />
           </SwipeableListItem>
           <SwipeableListItem>
             <BasicListItem label="Item without swipe actions" />

examples/src/complex/ComplexExample.js

@@ -8,6 +8,7 @@ import '@sandstreamdev/react-swipeable-list/dist/styles.css';
 import ComplexListItem from '../list-items/ComplexListItem';
 import ComplexSwipeContent from '../list-items/ComplexSwipeContent';
 import { MailIcon, ReplyIcon, DeleteIcon } from '../../images/icons';
+
 import './ComplexExample.css';
 
 const ComplexExample = () => {
@@ -24,9 +25,9 @@ const ComplexExample = () => {
   const swipeRightOptions = name => ({
     content: (
       <ComplexSwipeContent
-        direction="left"
         icon={<DeleteIcon />}
         label="Delete"
+        position="left"
       />
     ),
     action: () => triggerItemAction(`Delete action triggered on "${name}" item`)
@@ -35,9 +36,9 @@ const ComplexExample = () => {
   const swipeLeftOptions = name => ({
     content: (
       <ComplexSwipeContent
-        direction="right"
         icon={<ReplyIcon />}
         label="Reply"
+        position="right"
       />
     ),
     action: () => triggerItemAction(`Reply action triggered on "${name}" item`)

examples/src/index.js

@@ -7,14 +7,19 @@ import App from './App';
 ReactDOM.render(
   <div className="application">
     <div className="smartphone">
-      <div className="smartfone__content">
+      <div className="smartphone__content">
         <App />
       </div>
     </div>
-    <footer className="footer smartfone__footer">
+    <footer className="footer smartphone__footer">
       <span>
         {`Made with ❤️ by `}
-        <a className="footer__link" href="https://sanddev.com/">
+        <a
+          className="footer__link"
+          href="https://sanddev.com/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
           Sandstream Development
         </a>
       </span>
@@ -23,6 +28,8 @@ ReactDOM.render(
           <a
             className="footer__link"
             href="https://github.com/sandstreamdev/react-swipeable-list"
+            rel="noopener noreferrer"
+            target="_blank"
           >
             GitHub
           </a>
@@ -33,6 +40,8 @@ ReactDOM.render(
           <a
             className="footer__link"
             href="https://github.com/sandstreamdev/react-swipeable-list/blob/master/LICENSE"
+            rel="noopener noreferrer"
+            target="_blank"
           >
             MIT
           </a>

examples/src/list-items/BasicSwipeContent.js

@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 
 import './BasicSwipeContent.css';
 
-const BasicSwipeContent = ({ direction, label }) => (
-  <div className={`basic-swipeable-list__item-content-${direction}`}>
+const BasicSwipeContent = ({ label, position }) => (
+  <div className={`basic-swipeable-list__item-content-${position}`}>
     <span>{label}</span>
   </div>
 );
 
 BasicSwipeContent.propTypes = {
-  direction: PropTypes.oneOf(['left', 'right']).isRequired,
-  label: PropTypes.string
+  label: PropTypes.string,
+  position: PropTypes.oneOf(['left', 'right']).isRequired
 };
 
 export default BasicSwipeContent;

examples/src/list-items/ComplexListItem.css

@@ -8,12 +8,12 @@
   cursor: pointer;
 }
 
-.complex-swipeable-list__item--label {
+.complex-swipeable-list__item-label {
   display: flex;
   align-items: center;
 }
 
-.complex-swipeable-list__item--label > svg {
+.complex-swipeable-list__item-icon {
   width: 24px;
   min-width: 24px;
   max-width: 24px;
@@ -23,7 +23,7 @@
   fill: #083749;
 }
 
-.complex-swipeable-list__item--name {
+.complex-swipeable-list__item-name {
   font-weight: bold;
   font-size: 22px;
   line-height: 27px;
@@ -34,7 +34,7 @@
   text-overflow: ellipsis;
 }
 
-.complex-swipeable-list__item--description {
+.complex-swipeable-list__item-description {
   margin-left: 2px;
   margin-top: 4px;
   color: #959595;

examples/src/list-items/ComplexListItem.js

@@ -5,12 +5,12 @@ import './ComplexListItem.css';
 
 const ComplexListItem = ({ description, icon, name }) => (
   <div className="complex-swipeable-list__item">
-    <div className="complex-swipeable-list__item--label">
-      {icon}
-      <span className="complex-swipeable-list__item--name">{name}</span>
+    <div className="complex-swipeable-list__item-label">
+      <span className="complex-swipeable-list__item-icon">{icon}</span>
+      <span className="complex-swipeable-list__item-name">{name}</span>
     </div>
     {description && (
-      <div className="complex-swipeable-list__item--description">
+      <div className="complex-swipeable-list__item-description">
         {description}
       </div>
     )}

examples/src/list-items/ComplexSwipeContent.css

@@ -32,7 +32,7 @@
   padding-top: 8px;
 }
 
-.complex-swipeable-list__svg {
+.complex-swipeable-list__icon {
   fill: white;
   width: 32px;
   height: 32px;

examples/src/list-items/ComplexSwipeContent.js

@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
 
 import './ComplexSwipeContent.css';
 
-const ComplexSwipeConent = ({ direction, icon, label }) => (
-  <div className={`complex-swipeable-list__item-content-${direction}`}>
+const ComplexSwipeConent = ({ icon, label, position }) => (
+  <div className={`complex-swipeable-list__item-content-${position}`}>
     <div className="complex-swipeable-list__content">
-      <span className="complex-swipeable-list__svg">{icon}</span>
+      <span className="complex-swipeable-list__icon">{icon}</span>
       {label && <span>{label}</span>}
     </div>
   </div>
 );
 
 ComplexSwipeConent.propTypes = {
-  direction: PropTypes.oneOf(['left', 'right']).isRequired,
   icon: PropTypes.node,
-  label: PropTypes.string
+  label: PropTypes.string,
+  position: PropTypes.oneOf(['left', 'right']).isRequired
 };
 
 export default ComplexSwipeConent;

examples/src/size-to-content/SizeToContentExample.js

@@ -9,6 +9,7 @@ import { noOp } from '@sandstreamdev/std/function';
 import ComplexListItem from '../list-items/ComplexListItem';
 import ComplexSwipeContent from '../list-items/ComplexSwipeContent';
 import { MailIcon, ReplyIcon, DeleteIcon } from '../../images/icons';
+
 import './SizeToContentExample.css';
 
 const SizeToContentExample = () => {
@@ -30,10 +31,9 @@ const SizeToContentExample = () => {
   const swipeRightOptions = () => ({
     content: (
       <ComplexSwipeContent
-        color="red"
-        direction="right"
         icon={<DeleteIcon />}
         label="Delete"
+        position="left"
       />
     ),
     action: noOp
@@ -42,10 +42,9 @@ const SizeToContentExample = () => {
   const swipeLeftOptions = () => ({
     content: (
       <ComplexSwipeContent
-        color="green"
-        direction="left"
         icon={<ReplyIcon />}
         label="Reply"
+        position="right"
       />
     ),
     action: noOp

examples/src/styled/StyledExample.js

@@ -5,10 +5,12 @@ import {
   SwipeableListItem
 } from '@sandstreamdev/react-swipeable-list';
 import '@sandstreamdev/react-swipeable-list/dist/styles.css';
+import { classNames } from '@sandstreamdev/std/web';
 import { noOp } from '@sandstreamdev/std/function';
 
 import BasicListItem from '../list-items/BasicListItem';
 import BasicSwipeContent from '../list-items/BasicSwipeContent';
+
 import './StyledExample.css';
 
 const StyledExample = () => {
@@ -20,12 +22,12 @@ const StyledExample = () => {
   ];
 
   const swipeRightOptions = () => ({
-    content: <BasicSwipeContent direction="left" label="Delete" />,
+    content: <BasicSwipeContent label="Delete" position="left" />,
     action: noOp
   });
 
   const swipeLeftOptions = () => ({
-    content: <BasicSwipeContent direction="right" label="Delete" />,
+    content: <BasicSwipeContent label="Delete" position="right" />,
     action: noOp
   });
 
@@ -35,7 +37,7 @@ const StyledExample = () => {
       <div className="styled-swipeable-list__container">
         <SwipeableList>
           {({ className, ...rest }) => (
-            <div className={`${className} styled-swipeable-list`}>
+            <div className={classNames(className, 'styled-swipeable-list')}>
               {items.map(({ id, text }) => (
                 <SwipeableListItem
                   key={id}