Adds moment card component (#859)

* [WIP] Moment card * feature(card): adds moment card component * fix(rspec tests): updates rspec test corresponding to created, edited locales changes * fix(moment card): adds unit test for moment card and requested changes * fix(moment card): fixes css issues of the card layout * chore(moment card): wraps card in grid layout * fix(Gemfile): updates rails-html-sanitizer version to fix XSS vulnerability * chore(Gemfile): updates parser version to 2.5.0.5
ifmeorg · Mar 30, 2018 · 5e269a7 · 5e269a7
1 parent 7503e3d
commit 5e269a7
Show file tree

Hide file tree

Showing 33 changed files with 638 additions and 98 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -65,7 +65,7 @@ GEM
     bundler-audit (0.6.0)
       bundler (~> 1.2)
       thor (~> 0.18)
-    byebug (10.0.0)
+    byebug (10.0.1)
     capybara (2.15.4)
       addressable
       mini_mime (>= 0.1.3)
@@ -78,7 +78,7 @@ GEM
       activesupport (>= 4.0.0)
       mime-types (>= 1.16)
     certified (1.0.0)
-    childprocess (0.8.0)
+    childprocess (0.9.0)
       ffi (~> 1.0, >= 1.0.11)
     choice (0.2.0)
     chromedriver-helper (1.2.0)
@@ -118,10 +118,10 @@ GEM
     database_cleaner (1.6.2)
     declarative (0.0.10)
     declarative-option (0.1.0)
-    devise (4.4.1)
+    devise (4.4.3)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
-      railties (>= 4.1.0, < 5.2)
+      railties (>= 4.1.0, < 6.0)
       responders
       warden (~> 1.2.3)
     devise_invitable (1.7.3)
@@ -131,14 +131,14 @@ GEM
       devise (>= 3.0.0)
       railties (>= 3.0)
     diff-lcs (1.3)
-    docile (1.1.5)
+    docile (1.3.0)
     domain_name (0.5.20170404)
       unf (>= 0.0.5, < 1.0.0)
     dotenv (2.2.1)
     dotenv-rails (2.2.1)
       dotenv (= 2.2.1)
       railties (>= 3.2, < 5.2)
-    erubi (1.7.0)
+    erubi (1.7.1)
     erubis (2.7.0)
     et-orbi (1.0.9)
       tzinfo
@@ -241,7 +241,7 @@ GEM
     multipart-post (2.0.0)
     mustermann (1.0.2)
     netrc (0.11.0)
-    nio4r (2.2.0)
+    nio4r (2.3.0)
     nokogiri (1.8.2)
       mini_portile2 (~> 2.3.0)
     oauth2 (1.4.0)
@@ -263,7 +263,7 @@ GEM
     orm_adapter (0.5.0)
     os (0.9.6)
     parallel (1.12.1)
-    parser (2.5.0.2)
+    parser (2.5.0.5)
       ast (~> 2.4.0)
     pg (0.18.4)
     phantomjs (2.1.1.0)
@@ -277,7 +277,7 @@ GEM
     pry-rails (0.3.6)
       pry (>= 0.10.4)
     public_suffix (3.0.2)
-    puma (3.11.2)
+    puma (3.11.3)
     pusher (1.1.0)
       httpclient (~> 2.7)
       multi_json (~> 1.0)
@@ -333,8 +333,8 @@ GEM
       thor (>= 0.18.1, < 2.0)
     rainbow (2.2.2)
       rake
-    rake (12.3.0)
-    rb-fsevent (0.10.2)
+    rake (12.3.1)
+    rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rdoc (4.3.0)
@@ -401,9 +401,9 @@ GEM
     rspec-support (3.6.0)
     rspec_junit_formatter (0.3.0)
       rspec-core (>= 2, < 4, != 2.12.0)
-    rubocop (0.52.1)
+    rubocop (0.54.0)
       parallel (~> 1.10)
-      parser (>= 2.4.0.2, < 3.0)
+      parser (>= 2.5)
       powerpack (~> 0.1)
       rainbow (>= 2.2.2, < 4.0)
       ruby-progressbar (~> 1.7)
@@ -431,8 +431,8 @@ GEM
       faraday (~> 0.9)
       jwt (>= 1.5, < 3.0)
       multi_json (~> 1.10)
-    simplecov (0.15.1)
-      docile (~> 1.1.0)
+    simplecov (0.16.1)
+      docile (~> 1.1)
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)

diff --git a/app/assets/stylesheets/application/shared.scss b/app/assets/stylesheets/application/shared.scss
@@ -22,11 +22,13 @@
 .ally {
   @include box-sizing(border-box);
   width: calc(50% - 10px);
-  border: 1px solid $container-color;
   padding: 20px;
-  box-shadow: 0 0 2px $container-color inset;
   margin-bottom: 20px;
 
+  background: $background-color;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+
   @media screen and (max-width: $medium) {
     width: 100%;
     padding: 10px;
@@ -45,56 +47,74 @@
   }
 }
 
-h1.ally_name,
-h1.category_name,
-h1.group_name,
-h1.meeting_name,
-h1.medication_name,
-h1.moment_name,
-h1.story_name,
-h1.mood_name,
-h1.profile_name,
-h1.strategy_name,
-h1.contributor_name {
-  font-weight: 300;
-  font-size: $font26;
+.ally_name,
+.category_name,
+.group_name,
+.meeting_name,
+.medication_name,
+.moment_name,
+.story_name,
+.mood_name,
+.profile_name,
+.strategy_name,
+.contributor_name {
+  font-weight: 400;
+  font-size: $font18;
   padding: 0;
   margin: 0px 0px 20px 0px;
   color: $secondary-text-color;
 
   @media screen and (max-width: $medium) {
-    font-size: $font22;
+    font-size: $font16;
     margin: 0px 0px 10px 0px;
   }
 }
 
-h1.ally_name a:link,
-h1.ally_name a:visited,
-h1.category_name a:link,
-h1.category_name a:visited,
-h1.group_name a:link,
-h1.group_name a:visited,
-h1.meeting_name a:link,
-h1.meeting_name a:visited,
-h1.medication_name a:link,
-h1.medication_name a:visited,
-h1.moment_name a:link,
-h1.moment_name a:visited,
-h1.story_name a:link,
-h1.story_name a:visited,
-h1.mood_name a:link,
-h1.mood_name a:visited,
-h1.blog_name a:link,
-h1.blog_name a:visited,
-h1.profile_name a:link,
-h1.profile_name a:visited,
-h1.strategy_name a:link,
-h1.strategy_name a:visited {
+.ally_name a:link,
+.ally_name a:visited,
+.category_name a:link,
+.category_name a:visited,
+.group_name a:link,
+.group_name a:visited,
+.meeting_name a:link,
+.meeting_name a:visited,
+.medication_name a:link,
+.medication_name a:visited,
+.moment_name a:link,
+.moment_name a:visited,
+.story_name a:link,
+.story_name a:visited,
+.mood_name a:link,
+.mood_name a:visited,
+.blog_name a:link,
+.blog_name a:visited,
+.profile_name a:link,
+.profile_name a:visited,
+.strategy_name a:link,
+.strategy_name a:visited {
   color: $secondary-text-color;
   text-decoration: none;
   border: none;
 }
 
+.moment_date {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: $date-text-color;
+}
+
+.moment_settings {
+  display: flex;
+  flex-direction: row;
+}
+
+.moment_header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 #page_title_content,
 .sidebar_label,
 .label,
@@ -158,14 +178,14 @@ h1.strategy_name a:visited {
   }
 
   @media screen and (max-width: $small) {
-    h1.story_name {
+    .story_name {
       font-size: $font20;
       margin: 0px 0px 5px 0px;
       padding-bottom: 5px;
       border-bottom: 1px solid $subtle-secondary-text-color;
     }
 
-    h1.ally_name {
+    .ally_name {
       font-size: $font18;
       margin: 0px 0px 10px 0px;
     }
@@ -222,7 +242,7 @@ h1.strategy_name a:visited {
 
   // Align .small_focus children linearly only
   // when min-width is at least 1025px i.e. $medium
-  
+
   @media screen and (min-width: $medium + 1) {
     #most_focus {
       display: flex;
@@ -323,8 +343,8 @@ h1.strategy_name a:visited {
   }
 }
 
-h1.group_type,
-h1.tag_type {
+.group_type,
+.tag_type {
   font-weight: $md;
   font-size: $font30;
   padding: 0;

diff --git a/app/assets/stylesheets/base/_colors.scss b/app/assets/stylesheets/base/_colors.scss
@@ -12,6 +12,7 @@ $overlay-color: rgba(109, 8, 57, 0.1);
 $field-color: rgba(0, 0, 0, 0.2);
 $purple-yay: #A157E8;
 $tag-text-color: rgba(0, 0, 0, 0.6);
+$date-text-color: rgba(109, 8, 57, 0.5);
 
 // Notices & Alerts
 $notice-color: #289900;

diff --git a/client/.flowconfig b/client/.flowconfig
@@ -4,6 +4,7 @@
 .*/node_modules/enzyme-matchers/.*
 .*/node_modules/jasmine-enzyme/.*
 .*/node_modules/radium/.*
+.*/node_modules/draft-js/.*
 
 [include]
 

diff --git a/client/app/bundles/momentCard/components/MomentCard.jsx b/client/app/bundles/momentCard/components/MomentCard.jsx
@@ -0,0 +1,46 @@
+// @flow
+import React from 'react';
+import MomentCardName from './MomentCardName';
+import MomentCardDate from './MomentCardDate';
+import MomentCardDraft from './MomentCardDraft';
+import MomentCardSettings from './MomentCardSettings';
+import MomentCardCategories from './MomentCardCategories';
+import MomentCardMoods from './MomentCardMoods';
+import css from './MomentCard.scss';
+
+type MomentCardProp = {
+  action: {
+    edit?: any,
+    delete?: any,
+    viewer?: any
+  },
+  item: {
+    name: string,
+    category?: Array<string>,
+    mood?: Array<string>,
+  },
+  date: string,
+  cardType: string,
+  draftText?: string
+};
+
+export default class MomentCard extends React.Component <MomentCardProp> {
+  render() {
+    const { action, cardType, date, item, draftText } = this.props;
+
+    return (
+      <div className={css.moment}>
+        <div className={css.header}>
+          { cardType === 'Draft' && <MomentCardDraft draftText={draftText} /> }
+          <MomentCardName name={item.name} />
+          <MomentCardSettings action={action} cardType={cardType} />
+        </div>
+        <MomentCardDate date={date} />
+        <div className={css.tags}>
+          <MomentCardCategories category={item.category} />
+          <MomentCardMoods mood={item.mood} />
+        </div>
+      </div>
+    );
+  }
+}