v2.6.0 - Voting (#383)

* add voting indicator * show poll and poll results * new poll animation + results percentages * show poll notification in sidebar * use real voted user setting * use backend poll results * finish voting * update version * hide survey banner by default * restrict next page * update translations * style poll option * show text after voting * fix prop type warning * better expandable styles * use one decimal place for percentages * style tweaks * update numbers * add more button colors * fix css * adjusted voted to integer * update version * update vote state after voting
nthiebes · Apr 25, 2021 · 5915b67 · 5915b67
1 parent 80d38ab
commit 5915b67
Show file tree

Hide file tree

Showing 26 changed files with 480 additions and 61 deletions.
diff --git a/_source/_assets/symbol-defs.svg b/_source/_assets/symbol-defs.svg
diff --git a/_source/_state/user/actions.js b/_source/_state/user/actions.js
@@ -231,3 +231,28 @@ export const importBookmarks = ({ params, onSuccess, onError }) => () => {
     }
   });
 };
+
+export const getPollResults = ({ onSuccess, onError }) => () => {
+  fetcher({
+    url: '/polls',
+    onSuccess: (data) => {
+      onSuccess && onSuccess(data);
+    },
+    onError: (error) => {
+      onError && onError(error);
+    }
+  });
+};
+
+export const vote = ({ id, onSuccess, onError }) => () => {
+  fetcher({
+    url: `/polls/${id}`,
+    method: 'POST',
+    onSuccess: (data) => {
+      onSuccess && onSuccess(data);
+    },
+    onError: (error) => {
+      onError && onError(error);
+    }
+  });
+};
diff --git a/_source/atoms/button/ButtonSmall.scss b/_source/atoms/button/ButtonSmall.scss
@@ -208,3 +208,67 @@
     }
   }
 }
+
+.button--small-green {
+  background-color: transparent;
+  border-color: $color--green;
+  color: $color--green;
+
+  @include mobile-tablet() {
+    &:active,
+    &:focus {
+      background-color: $color--green;
+      color: $color-font--white;
+    }
+
+    &:active .icon,
+    &:focus .icon {
+      color: $color-font--white;
+    }
+  }
+
+  @include desktop() {
+    &:hover,
+    &:focus {
+      background-color: $color--green;
+      color: $color-font--white;
+    }
+
+    &:hover .icon,
+    &:focus .icon {
+      color: $color-font--white;
+    }
+  }
+}
+
+.button--small-blue {
+  background-color: transparent;
+  border-color: $color--blue;
+  color: $color--blue;
+
+  @include mobile-tablet() {
+    &:active,
+    &:focus {
+      background-color: $color--blue;
+      color: $color-font--white;
+    }
+
+    &:active .icon,
+    &:focus .icon {
+      color: $color-font--white;
+    }
+  }
+
+  @include desktop() {
+    &:hover,
+    &:focus {
+      background-color: $color--blue;
+      color: $color-font--white;
+    }
+
+    &:hover .icon,
+    &:focus .icon {
+      color: $color-font--white;
+    }
+  }
+}
diff --git a/_source/atoms/button/index.js b/_source/atoms/button/index.js
@@ -21,15 +21,15 @@ export function ButtonSmallDark(props) {
 }
 ButtonSmallDark.displayName = 'ButtonSmallDark';
 
-// export function ButtonSmallBlue(props) {
-//   return <Button { ...props } size="small" color="blue" />;
-// }
-// ButtonSmallBlue.displayName = 'ButtonSmallBlue';
-
-// export function ButtonSmallGreen(props) {
-//   return <Button { ...props } size="small" color="green" />;
-// }
-// ButtonSmallBlue.displayName = 'ButtonSmallGreen';
+export function ButtonSmallBlue(props) {
+  return <Button {...props} size="small" color="blue" />;
+}
+ButtonSmallBlue.displayName = 'ButtonSmallBlue';
+
+export function ButtonSmallGreen(props) {
+  return <Button {...props} size="small" color="green" />;
+}
+ButtonSmallBlue.displayName = 'ButtonSmallGreen';
 
 export function ButtonLargePrimary(props) {
   return <Button {...props} size="large" color="primary" />;

diff --git a/_source/atoms/headline/Headline.scss b/_source/atoms/headline/Headline.scss
@@ -119,7 +119,9 @@
   text-decoration: none;
   transition: opacity 0.2s linear, color 0.2s linear;
 
-  &:hover {
+  &:hover,
+  &:focus {
+    opacity: 1;
     color: $color-font--primary;
     text-decoration: underline;
   }

diff --git a/_source/atoms/link/Link.js b/_source/atoms/link/Link.js
@@ -88,6 +88,7 @@ export default class Link extends Component {
     );
   }
 }
+
 Link.defaultProps = {
   color: 'primary'
 };
diff --git a/_source/atoms/link/Link.scss b/_source/atoms/link/Link.scss
@@ -6,7 +6,7 @@
   display: inline-flex;
   cursor: pointer;
   text-decoration-skip-ink: auto;
-  word-break: break-all;
+  word-break: break-word;
 }
 
 .link--noUnderline {
@@ -20,6 +20,7 @@
     height: 7px;
     width: 7px;
     border-radius: 50%;
+    background-color: $color-font--white;
     right: -8px;
     top: 4px;
     animation: 2.5s ease infinite badge;

diff --git a/_source/atoms/paragraph/Paragraph.scss b/_source/atoms/paragraph/Paragraph.scss
@@ -3,6 +3,7 @@
   font-family: $font-family--text;
   line-height: 1.5;
   padding-bottom: 1rem;
+  word-wrap: break-word;
 }
 
 .paragraph--first {

diff --git a/_source/atoms/radio/Radio.js b/_source/atoms/radio/Radio.js
@@ -20,7 +20,8 @@ export default class Radio extends Component {
     inputClassName: PropTypes.string,
     labelClassName: PropTypes.string,
     first: PropTypes.bool,
-    illustration: PropTypes.string
+    illustration: PropTypes.string,
+    required: PropTypes.bool
   };
 
   handleInputChange = (event) => {
@@ -44,7 +45,8 @@ export default class Radio extends Component {
       inputClassName,
       labelClassName,
       first,
-      illustration
+      illustration,
+      required
     } = this.props;
 
     return (
@@ -76,6 +78,7 @@ export default class Radio extends Component {
           value={value}
           onChange={this.handleInputChange}
           defaultChecked={checked}
+          required={required}
         />
         <Label
           htmlFor={id}

diff --git a/_source/config.js b/_source/config.js
@@ -19,5 +19,6 @@ const browser = isOpera
 
 export const config = {
   NEWS_VERSION: 12,
+  POLL_VERSION: 1,
   browser
 };
diff --git a/_source/initialState.js b/_source/initialState.js
@@ -28,7 +28,8 @@ export default {
       minimalBookmarkButton: false,
       closeEditMode: true,
       maxColumnCount: null,
-      newsVersion: 0
+      newsVersion: 0,
+      voted: 0
     }
   },
   dashboards: {

diff --git a/_source/molecules/expandable/Expandable.scss b/_source/molecules/expandable/Expandable.scss
@@ -11,10 +11,17 @@
   color: $color-font--medium;
   line-height: 1.5;
   display: list-item;
+  transition: color 0.2s linear;
 
   &:focus {
     outline: 1px dashed $color-font--medium;
   }
+
+  @media (hover: hover) {
+    &:hover {
+      color: $color-font--primary;
+    }
+  }
 }
 
 .expandable__summary--normal {

diff --git a/_source/molecules/menu/Menu.js b/_source/molecules/menu/Menu.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -48,17 +48,25 @@ const menuItemsLoggedIn = [
   }
 ];
 
-class Menu extends Component {
+class Menu extends PureComponent {
   static propTypes = {
     intl: PropTypes.object.isRequired,
     className: PropTypes.string,
     loggedIn: PropTypes.bool,
     isBeta: PropTypes.bool.isRequired,
-    newsVersion: PropTypes.number.isRequired
+    newsVersion: PropTypes.number.isRequired,
+    voted: PropTypes.number.isRequired
   };
 
   render() {
-    const { className, loggedIn, intl, isBeta, newsVersion } = this.props;
+    const {
+      className,
+      loggedIn,
+      intl,
+      isBeta,
+      newsVersion,
+      voted
+    } = this.props;
     let menuItems = loggedIn ? menuItemsLoggedIn : menuItemsLoggedOut;
 
     menuItems = menuItems.filter((item) => {
@@ -85,7 +93,9 @@ class Menu extends Component {
             color="light"
             isNavLink
             noUnderline
-            hasBadge={name === 'new'}
+            hasBadge={
+              (voted < config.POLL_VERSION && name === 'next') || name === 'new'
+            }
           >
             <Icon icon={name} color="light" />
             <FormattedMessage id={`menu.${name}`} />

diff --git a/_source/molecules/menu/MenuContainer.js b/_source/molecules/menu/MenuContainer.js
@@ -3,7 +3,8 @@ import Component from './Menu';
 
 const mapStateToProps = (state) => ({
   isBeta: state.user.isBeta,
-  newsVersion: state.user.settings.newsVersion
+  newsVersion: state.user.settings.newsVersion,
+  voted: state.user.settings.voted
 });
 const Container = connect(mapStateToProps)(Component);
 

diff --git a/_source/organisms/footer/Footer.js b/_source/organisms/footer/Footer.js
@@ -63,19 +63,19 @@ class Footer extends PureComponent {
           <section>
             <ul className="footer__stats">
               <li className="footer__stats-item">
-                <b>{new Intl.NumberFormat(locale).format(44906)}</b>
+                <b>{new Intl.NumberFormat(locale).format(46178)}</b>
                 <FormattedMessage id="footer.people" />
               </li>
               <li className="footer__stats-item">
-                <b>{new Intl.NumberFormat(locale).format(17500924)}</b>
+                <b>{new Intl.NumberFormat(locale).format(17822647)}</b>
                 <FormattedMessage id="footer.bookmarks" />
               </li>
               <li className="footer__stats-item">
-                <b>{new Intl.NumberFormat(locale).format(1423934)}</b>
+                <b>{new Intl.NumberFormat(locale).format(1451109)}</b>
                 <FormattedMessage id="footer.categories" />
               </li>
               <li className="footer__stats-item">
-                <b>{new Intl.NumberFormat(locale).format(104901)}</b>
+                <b>{new Intl.NumberFormat(locale).format(110298)}</b>
                 <FormattedMessage id="footer.dashboards" />
               </li>
             </ul>

diff --git a/_source/organisms/sidebar/Sidebar.js b/_source/organisms/sidebar/Sidebar.js
@@ -28,7 +28,8 @@ class Sidebar extends PureComponent {
     history: PropTypes.object.isRequired,
     color: PropTypes.number.isRequired,
     isBeta: PropTypes.bool.isRequired,
-    newsVersion: PropTypes.number.isRequired
+    newsVersion: PropTypes.number.isRequired,
+    voted: PropTypes.number.isRequired
   };
 
   static defaultProps = {
@@ -68,7 +69,8 @@ class Sidebar extends PureComponent {
       hasSidebar,
       darkMode,
       isBeta,
-      newsVersion
+      newsVersion,
+      voted
     } = this.props;
     const { pathname } = location;
     const { logoutPending } = this.state;
@@ -248,6 +250,7 @@ class Sidebar extends PureComponent {
                       onClick={closeSidebar}
                       tabIndex={open ? '0' : '-1'}
                       noUnderline
+                      hasBadge={voted < config.POLL_VERSION}
                     >
                       <Icon icon="next" />
                       <span

diff --git a/_source/organisms/sidebar/Sidebar.scss b/_source/organisms/sidebar/Sidebar.scss
@@ -149,7 +149,7 @@
   }
 
   &::before {
-    background-color: $color-font--dark;
+    background-color: $color-font--medium;
   }
 
   &:active,

diff --git a/_source/organisms/sidebar/SidebarContainer.js b/_source/organisms/sidebar/SidebarContainer.js
@@ -10,7 +10,8 @@ export const mapStateToProps = (state) => ({
   darkMode: state.user.settings.darkMode,
   color: state.user.settings.navigationBarColor,
   isBeta: state.user.isBeta,
-  newsVersion: state.user.settings.newsVersion
+  newsVersion: state.user.settings.newsVersion,
+  voted: state.user.settings.voted
 });
 
 export const mapDispatchToProps = {

diff --git a/_source/pages/account/Account.scss b/_source/pages/account/Account.scss
@@ -71,5 +71,5 @@
   align-items: center;
   text-align: left;
   margin-right: 6px;
-  word-break: break-all;
+  word-break: break-word;
 }