Merge pull request #9 from mbustosp/feature/counter-creation

Feature/counter creation

src/common/_variables.scss

@@ -4,11 +4,14 @@ $color-destructive-red: #FF3B30;
 $color-main: #C4C4C4;
 $color-background-tip: #FAFAFA;
 $color-background: #F9F9F9;
+$color-silver: #ECECEC;
+$color-almost-silver: #DCDCDF;
 $color-input-disabled: #C4C4C4;
 $color-text-input-placeholder: #888B90;
 $color-button-cancel: #4A4A4A;
 $color-dark-black: #2B2B2B;
 
+
 // Icons
 $counters-font-family: "counters" !default;
 

src/components/atoms/OvalButton/OvalButton.scss

@@ -0,0 +1,13 @@
+@import '../../../common/variables';
+
+.oval-button {
+  height: 40px;
+  background-color: $color-silver;
+
+  border: 1px solid $color-almost-silver;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 99px;
+
+  padding: 8px 18px;
+  box-sizing: border-box;
+}

src/components/atoms/OvalButton/index.jsx

@@ -0,0 +1,28 @@
+/**
+ * Core dependencies
+ */
+import React from 'react';
+import classNames from 'classnames';
+import Button from '../Button';
+
+/**
+ * Styles
+ */
+import './OvalButton.scss';
+
+const OvalButton = ({ onClick, label, className, disabled, children }) => {
+  return (
+    <Button
+      className={classNames('oval-button', { 'oval-button--disabled': disabled }, className)}
+      onClick={onClick}
+      label={label}
+      disabled={disabled}
+    >
+      {children}
+    </Button>
+  );
+};
+
+OvalButton.propTypes = { ...Button.propTypes };
+
+export default OvalButton;

src/components/atoms/TextInput/TextInput.scss

@@ -8,7 +8,6 @@
 
   &--non-generic {
     width: 100%;
-    max-width: 380px;
     height: 48px;
     padding: 8px;
     margin: 1px;

src/components/atoms/atoms.stories.jsx

@@ -15,6 +15,7 @@ import CancelButton from './CancelButton';
 import RefreshIndicator from './RefreshIndicator';
 import ActivityIndicator from './ActivityIndicator';
 import PaperNote from './PaperNote';
+import OvalButton from './OvalButton';
 
 /**
  * Styles
@@ -62,6 +63,15 @@ storiesOf('Atoms', module)
       />
     );
   })
+  .add('Button - Oval', () => {
+    return (
+      <OvalButton
+        label={text('label', 'I am an oval button')}
+        onClick={action('Clicked!')}
+        disabled={boolean('disabled', false)}
+      />
+    );
+  })
   .add('Text Input', () => {
     return (
       <TextInput

src/components/molecules/Alert/Alert.scss

@@ -0,0 +1,42 @@
+@import '../../../common/variables';
+
+.alert {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: rgba(black, 0.8);
+  z-index: 5;
+
+  &__content {
+    width: 310px;
+    min-height: 190px;
+    max-height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    background: $color-background-tip;
+    box-shadow: 0 24px 38px rgba(0, 0, 0, 0.14);
+    border-radius: 10px;
+
+    padding: 20px 28px;
+
+    &__title {
+      margin-bottom: 8px;
+    }
+
+    &__message {
+      margin-bottom: 20px;
+    }
+  }
+}

src/components/molecules/Alert/index.jsx

@@ -0,0 +1,36 @@
+/**
+ * Core dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Styles
+ */
+import './Alert.scss';
+
+const Alert = ({ title, message, children }) => {
+  return (
+    <div className="alert">
+      <div className="alert__content">
+        <h1 className="alert__content__title">{title}</h1>
+        <div className="alert__content__message">{message}</div>
+        <div className="alert__content__action">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+Alert.propTypes = {
+  title: PropTypes.string,
+  message: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Alert.defaultProps = {
+  title: '',
+  message: '',
+  children: null,
+};
+
+export default Alert;

src/components/molecules/Counter/index.jsx

@@ -24,8 +24,8 @@ const Counter = ({
 }) => {
   const ref = useRef(null);
   const deleteCounter = () => onDelete(id);
-  const increaseCounter = () => onIncrease(id);
-  const decreaseCounter = () => (value > 0 ? onDecrease(id) : null);
+  const increaseCounter = () => onIncrease({ id, value, title });
+  const decreaseCounter = () => (value > 0 ? onDecrease({ id, value, title }) : null);
   const select = () => onSelection(id);
 
   const keyMap = {

src/components/molecules/ErrorAlert/ErrorAlert.scss

@@ -0,0 +1,14 @@
+@import 'src/common/variables';
+
+.error-alert {
+
+
+
+  &__actions {
+    display: flex;
+
+    button:first-child {
+      margin-right: 10px;
+    }
+  }
+}

src/components/molecules/ErrorAlert/index.jsx

@@ -0,0 +1,42 @@
+/**
+ * Core dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Alert from '../Alert';
+import ActionButton from '../../atoms/ActionButton';
+
+/**
+ * Styles
+ */
+import './ErrorAlert.scss';
+
+const ErrorAlert = ({ title, onDismiss, onRetry }) => {
+  return (
+    <Alert title={title} message="The internet connection appears to be offline">
+      <div className="error-alert__actions">
+        {onRetry ? (
+          <ActionButton className="error-alert__button-retry" onClick={onRetry} label="Retry" />
+        ) : null}
+        <ActionButton
+          className="error-alert__button-dismiss"
+          onClick={onDismiss}
+          label="Dismiss"
+          lightTheme
+        />
+      </div>
+    </Alert>
+  );
+};
+
+ErrorAlert.propTypes = {
+  title: PropTypes.string.isRequired,
+  onDismiss: PropTypes.func.isRequired,
+  onRetry: PropTypes.func,
+};
+
+ErrorAlert.defaultProps = {
+  onRetry: null,
+};
+
+export default ErrorAlert;

src/components/molecules/ExamplesModal/ExamplesModal.scss

@@ -0,0 +1,20 @@
+.examples-modal {
+  z-index: 4;
+
+  &__content {
+    &__section {
+      font-weight: 600;
+      font-size: 17px;
+      line-height: 23px;
+      margin-bottom: 10px;
+    }
+
+    &__examples {
+      overflow-x: auto;
+    }
+
+    &--overflow {
+      padding-right: 0;
+    }
+  }
+}

src/components/molecules/ExamplesModal/index.jsx

@@ -0,0 +1,56 @@
+/**
+ * Core dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Modal from '../Modal';
+import ExamplesScroll from '../ExamplesScroll';
+
+/**
+ * Styles
+ */
+import './ExamplesModal.scss';
+
+const ExamplesModal = ({ onClose, onSelect }) => {
+  return (
+    <Modal
+      title="Examples"
+      onClose={onClose}
+      className="examples-modal"
+      contentClassName="examples-modal__content--overflow"
+    >
+      <div className="examples-modal__content">
+        <h2 className="examples-modal__content__section">Drinks</h2>
+        <div className="examples-modal__content__examples">
+          <ExamplesScroll
+            onClick={(title) => onSelect(title)}
+            titles={['Cups of coffee', 'Glasses of water', 'Shops of Bier']}
+          />
+        </div>
+
+        <h2 className="examples-modal__content__section">Food</h2>
+        <div className="examples-modal__content__examples">
+          <ExamplesScroll
+            onClick={(title) => onSelect(title)}
+            titles={['Pan con pescado', 'Schnitzel', 'Fish & Chips']}
+          />
+        </div>
+
+        <h2 className="examples-modal__content__section">Misc</h2>
+        <div className="examples-modal__content__examples">
+          <ExamplesScroll
+            onClick={(title) => onSelect(title)}
+            titles={['AAA Batteries', 'Printers', 'Partners', 'Friends', 'Face masks']}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+ExamplesModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default ExamplesModal;

src/components/molecules/ExamplesScroll/ExamplesScroll.scss

@@ -0,0 +1,14 @@
+.examples-scroll {
+  display: flex;
+  width: 100%;
+  flex-wrap: nowrap;
+
+  button {
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
+
+  button:last-child {
+    margin-right: 24px;
+  }
+}

src/components/molecules/ExamplesScroll/index.jsx

@@ -0,0 +1,35 @@
+/**
+ * Core dependencies
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import OvalButton from '../../atoms/OvalButton';
+
+/**
+ * Styles
+ */
+import './ExamplesScroll.scss';
+
+const ExamplesScroll = ({ titles, onClick, disabled }) => {
+  return (
+    <div className="examples-scroll">
+      {titles.map((title) => (
+        <OvalButton onClick={() => onClick(title)} disabled={disabled} label={title} />
+      ))}
+    </div>
+  );
+};
+
+ExamplesScroll.propTypes = {
+  titles: PropTypes.arrayOf(PropTypes.string),
+  onClick: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+ExamplesScroll.defaultProps = {
+  titles: '',
+  onClick: () => true,
+  disabled: false,
+};
+
+export default ExamplesScroll;