Merge branch 'master' into alternate-solution-filter-order-post-types

webapp/assets/_new/styles/tokens.scss

@@ -90,6 +90,9 @@ $background-color-primary-inverse: rgb(241, 253, 244);
 $background-color-secondary: rgb(0, 142, 230);
 $background-color-secondary-active: rgb(10, 161, 255);
 $background-color-secondary-inverse: rgb(240, 249, 255);
+$background-color-third: rgb(126, 82, 204);
+$background-color-third-active: rgb(160, 103, 255);
+$background-color-third-inverse: rgb(239, 230, 255);
 $background-color-success: rgb(23, 181, 63);
 $background-color-success-active: rgb(26, 203, 71);
 $background-color-success-inverse: rgb(241, 253, 244);
@@ -395,3 +398,12 @@ $color-toast-orange: $color-warning;
 $color-toast-yellow: $color-yellow;
 $color-toast-blue: $color-secondary;
 $color-toast-green: $color-success;
+
+/**
+ * @tokens Ribbon Color
+ */
+
+$color-ribbon-event: $background-color-third;
+$color-ribbon-event-active: $background-color-third-active;
+$color-ribbon-article: $background-color-secondary;
+$color-ribbon-article-active: $background-color-secondary-active;

webapp/components/InviteButton/InviteButton.spec.js

@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils'
 import InviteButton from './InviteButton.vue'
 
+const localVue = global.localVue
+
 const stubs = {
   'v-popover': {
     template: '<span><slot /></span>',
@@ -26,7 +28,7 @@ describe('InviteButton.vue', () => {
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(InviteButton, { mocks, propsData, stubs })
+      return mount(InviteButton, { mocks, localVue, propsData, stubs })
     }
 
     beforeEach(() => {

webapp/components/Ribbon/index.vue

@@ -25,7 +25,7 @@ export default {
   padding: $size-ribbon $size-ribbon;
   border-radius: $border-radius-small 0 0 $border-radius-small;
   color: $color-neutral-100;
-  background-color: $background-color-secondary-active;
+  background-color: $color-ribbon-article-active;
   font-size: $font-size-x-small;
   font-weight: $font-weight-bold;
 
@@ -36,7 +36,7 @@ export default {
     bottom: -$size-ribbon;
     border-width: $border-size-large 4px $border-size-large $border-size-large;
     border-style: solid;
-    border-color: $background-color-secondary transparent transparent $background-color-secondary;
+    border-color: $color-ribbon-article transparent transparent $color-ribbon-article;
   }
 
   &.--pinned {
@@ -48,10 +48,10 @@ export default {
   }
 }
 .eventBg {
-  background-color: $color-success-active;
+  background-color: $color-ribbon-event-active;
 
   &::before {
-    border-color: $color-success-active transparent transparent $color-success-active;
+    border-color: $color-ribbon-event transparent transparent $color-ribbon-event;
   }
 }
 </style>

webapp/locales/en.json

@@ -740,7 +740,7 @@
       "unpin": "Unpin post",
       "unpinnedSuccessfully": "Post unpinned successfully!"
     },
-    "name": "Post",
+    "name": "Article",
     "pinned": "Announcement",
     "takeAction": {
       "name": "Take action"

webapp/pages/post/create.spec.js

@@ -18,9 +18,13 @@ describe('create.vue', () => {
     },
   }
 
+  const stubs = {
+    ContributionForm: true,
+  }
+
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(create, { mocks, localVue })
+      return mount(create, { mocks, localVue, stubs })
     }
 
     beforeEach(() => {
@@ -28,7 +32,7 @@ describe('create.vue', () => {
     })
 
     it('renders', () => {
-      expect(wrapper.findAll('.contribution-form')).toHaveLength(1)
+      expect(wrapper.findComponent({ name: 'ContributionForm' }).exists()).toBe(true)
     })
   })
 })