Merge pull request #171 from glorious-codes/components_sort

Fix components order on components menu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glorious/pitsby",
-  "version": "1.29.1",
+  "version": "1.29.3",
   "description": "Docs generator for AngularJS, React, Vue and Vanilla components",
   "author": "Rafael Camargo <hello@rafaelcamargo.com>",
   "repository": {

src/webapp/scripts/resources/components.js

@@ -5,10 +5,16 @@ const BASE_URI = '/components';
 
 _public.get = (engine, id) => {
   return dataResource.get(`${BASE_URI}-${engine}`).then(components => {
-    return id ? findComponent(components, id) : components;
+    return id ? findComponent(components, id) : sortComponentsByAscendingName(components);
   });
 };
 
+function sortComponentsByAscendingName(components){
+  return components.sort((component, adjacentComponent) => {
+    return component.name < adjacentComponent.name ? -1 : 1;
+  });
+}
+
 function findComponent(components, id){
   return components.filter(component => {
     return component.id === id;

src/webapp/scripts/resources/components.test.js

@@ -5,11 +5,19 @@ import componentsResource from './components';
 
 describe('Components Resource', () => {
   beforeEach(() => {
+    mockDataResource(componentsMock);
+    // dataResource.get = jest.fn(uri => {
+    //   const engine = uri.split('-')[1];
+    //   return new PromiseMock('success', componentsMock.data[engine]);
+    // });
+  });
+
+  function mockDataResource({ data }){
     dataResource.get = jest.fn(uri => {
       const engine = uri.split('-')[1];
-      return new PromiseMock('success', componentsMock.data[engine]);
+      return new PromiseMock('success', data[engine]);
     });
-  });
+  }
 
   it('should be able to get angular components', () => {
     const components = componentsResource.get('angular');
@@ -30,4 +38,18 @@ describe('Components Resource', () => {
   it('should be able to get a vue single component', () => {
     expect(componentsResource.get('vue', 'badge')).toEqual(componentsMock.data.vue[0]);
   });
+
+  it('should return components sorted by ascending name', () => {
+    const responseMock = {
+      data: {
+        vue: [{ name: 'Button' }, { name: 'Row' }, { name: 'Dialog' }, { name: 'Toaster' }]
+      }
+    };
+    mockDataResource(responseMock);
+    const components = componentsResource.get('vue');
+    expect(components[0].name).toEqual('Button');
+    expect(components[1].name).toEqual('Dialog');
+    expect(components[2].name).toEqual('Row');
+    expect(components[3].name).toEqual('Toaster');
+  });
 });

src/webapp/styles/credits.styl

@@ -2,6 +2,8 @@
 @require '_mixins'
 
 .p-credits
-  color $color-grey
+  color $color-grey-dark
   font-size $font-size-xxs
   text-align center
+  .p-link
+    border-bottom 1px solid $color-blue