Merge pull request #41 from manolakis/feat/add_back_button

Feat/add back button
manolakis · Oct 2, 2020 · 7550cf9 · 7550cf9
2 parents fc550e1 + 7059e9a
commit 7550cf9
Show file tree

Hide file tree

Showing 19 changed files with 182 additions and 80 deletions.
diff --git a/.changeset/brave-zebras-tell.md b/.changeset/brave-zebras-tell.md
@@ -0,0 +1,5 @@
+---
+'@pokeapp/app': minor
+---
+
+add back button
diff --git a/.changeset/red-bananas-compete.md b/.changeset/red-bananas-compete.md
@@ -0,0 +1,5 @@
+---
+'@pokeapp/feat-list-pokemons': patch
+---
+
+fix keyboard navigation with Pokemon Card
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
   <base href="/">
   <meta name="Pokemon application">
   <meta name="viewport"
-        content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+        content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
 
   <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
   <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
@@ -22,12 +22,34 @@
   <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
   <link rel="manifest" href="/manifest.webmanifest">
-  <link rel="stylesheet" href="pokeapp.css">
 
   <meta name="msapplication-TileColor" content="#ef5350">
   <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
   <meta name="theme-color" content="#ef5350">
 
+  <style type="text/css">
+    html, body {
+      margin: 0;
+      padding: 0;
+    }
+
+    html {
+      height: 100%;
+    }
+
+    body {
+      font-family: 'Inter', Arial, Helvetica, Verdana, sans-serif;
+      min-height: 100%;
+      position: relative;
+    }
+
+    pokemon-app {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  </style>
+
 </head>
 <body>
   <pokemon-app></pokemon-app>

diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "lint:markdownlint": "git ls-files '*.md' | xargs markdownlint --ignore '{.changeset/*.md,**/CHANGELOG.md}'",
     "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
     "release": "changeset publish",
-    "start": "wds --node-resolve --app-index index.html --open",
+    "start": "wds --node-resolve --app-index index.html --root-dir . --open",
     "start:build": "npm run build && web-dev-server --root-dir dist --app-index index.html --compatibility none --open",
     "storybook": "start-storybook -p 9001 -s ./dev-assets",
     "storybook:build": "NODE_OPTIONS='--max-old-space-size=8192' build-storybook",

diff --git a/packages/application/assets/translations/en-GB.js b/packages/application/assets/translations/en-GB.js
@@ -1,3 +1,4 @@
 export default {
   title: 'PokeApp',
+  search: 'search',
 };
diff --git a/packages/application/assets/translations/es-ES.js b/packages/application/assets/translations/es-ES.js
@@ -1,3 +1,4 @@
 export default {
   title: 'PokeApp',
+  search: 'buscar',
 };
diff --git a/packages/application/src/PokeApp.js b/packages/application/src/PokeApp.js
@@ -5,10 +5,7 @@ import { Router } from '@vaadin/router';
 import logo from '../assets/images/pokeapp.svg.js';
 import { NavigationEvent } from './events/NavigationEvent.js';
 import { pokeAppStyle } from './PokeApp.style.js';
-import { NavigateToPokemonDetailsEvent } from './events/NavigateToPokemonDetailsEvent.js';
-
-/** i18n namespace */
-const namespace = 'pokeapp';
+import { namespace } from './namespace.js';
 
 export class PokeApp extends ScopedElementsMixin(LocalizeMixin(LitElement)) {
   /** @override */
@@ -96,20 +93,14 @@ export class PokeApp extends ScopedElementsMixin(LocalizeMixin(LitElement)) {
    * @param {typeof NavigationEvent} event
    * @private
    */
-  _handleNavigationEvent(event) {
+  _handleNavigationEvent({ details: { url, params } }) {
     if (this.router) {
-      if (event instanceof NavigateToPokemonDetailsEvent) {
-        this.__setRoute(
-          this.router.urlForName('pokeapp-pokemon-details', {
-            name: event.pokemonName,
-          }),
-        );
-      }
+      this.__setRoute(this.router.urlForName(url, params));
     }
   }
 
   /**
-   * Changes the windoe location.
+   * Changes the route.
    *
    * @param {string} newLocation
    * @private

diff --git a/packages/application/src/components/PokeAppPokemonDetails.js b/packages/application/src/components/PokeAppPokemonDetails.js
@@ -0,0 +1,72 @@
+import { LitElement, ScopedElementsMixin, LocalizeMixin, html, ChiButton } from 'chi-wc';
+import { FeatPokemonDetails } from '@pokeapp/feat-pokemon-details';
+import { NavigateToPokemonSearchEvent } from '../events/NavigateToPokemonSearchEvent.js';
+import { pokeAppPokemonDetailsStyle } from './PokeAppPokemonDetails.style.js';
+import { namespace } from '../namespace.js';
+
+export class PokeAppPokemonDetails extends ScopedElementsMixin(LocalizeMixin(LitElement)) {
+  /** @override */
+  static get styles() {
+    return [super.styles || [], pokeAppPokemonDetailsStyle];
+  }
+
+  /** @override */
+  static get scopedElements() {
+    return {
+      'chi-button': ChiButton,
+      'feat-pokemon-details': FeatPokemonDetails,
+    };
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      location: { type: Object },
+    };
+  }
+
+  /** @override */
+  static get localizeNamespaces() {
+    return [
+      ...super.localizeNamespaces,
+      {
+        [namespace]: locale => {
+          switch (locale) {
+            case 'es-ES':
+              return import('../../assets/translations/es-ES.js');
+            default:
+              return import('../../assets/translations/en-GB.js');
+          }
+        },
+      },
+    ];
+  }
+
+  /**
+   * Handles the click to go to search.
+   * @private
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _handleGoToSearchClicked() {
+    this.dispatchEvent(new NavigateToPokemonSearchEvent());
+  }
+
+  /** @override */
+  render() {
+    const {
+      params: { name },
+    } = this.location;
+
+    return html`
+      <div class="header">
+        <chi-button
+          class="search-button"
+          data-testid="search-button"
+          @click="${() => this._handleGoToSearchClicked()}"
+          >＜ ${this.msgLit(`${namespace}:search`)}</chi-button
+        >
+      </div>
+      <feat-pokemon-details data-testid="feature" name="${name}"></feat-pokemon-details>
+    `;
+  }
+}
diff --git a/packages/application/src/components/PokeAppPokemonDetails.style.js b/packages/application/src/components/PokeAppPokemonDetails.style.js
@@ -0,0 +1,14 @@
+import { css } from 'chi-wc';
+import { boxSizingStyle } from '@pokeapp/common';
+
+// language=CSS
+export const pokeAppPokemonDetailsStyle = [
+  boxSizingStyle,
+  css`
+    .header {
+      background-color: #263238;
+      margin: -0.5rem -0.5rem 0.5rem;
+      padding: 0.5rem;
+    }
+  `,
+];
diff --git a/packages/application/src/components/PokeAppPokemonsDetails.js b/packages/application/src/components/PokeAppPokemonsDetails.js
diff --git a/packages/application/src/components/pokeapp-pokemon-details.js b/packages/application/src/components/pokeapp-pokemon-details.js
@@ -1,3 +1,3 @@
-import { PokeAppPokemonDetails } from './PokeAppPokemonsDetails.js';
+import { PokeAppPokemonDetails } from './PokeAppPokemonDetails.js';
 
 customElements.define('pokeapp-pokemon-details', PokeAppPokemonDetails);
diff --git a/packages/application/src/events/NavigateToPokemonDetailsEvent.js b/packages/application/src/events/NavigateToPokemonDetailsEvent.js
@@ -6,8 +6,8 @@ export class NavigateToPokemonDetailsEvent extends NavigationEvent {
    * @param {string} pokemonName
    */
   constructor(pokemonName) {
-    super();
-
-    this.pokemonName = pokemonName;
+    super('pokeapp-pokemon-details', {
+      name: pokemonName,
+    });
   }
 }
diff --git a/packages/application/src/events/NavigateToPokemonSearchEvent.js b/packages/application/src/events/NavigateToPokemonSearchEvent.js
@@ -0,0 +1,10 @@
+import { NavigationEvent } from './NavigationEvent.js';
+
+export class NavigateToPokemonSearchEvent extends NavigationEvent {
+  /**
+   * Creates a NavigateToPokemonSearchEvent instance.
+   */
+  constructor() {
+    super('pokeapp-list-pokemons');
+  }
+}
diff --git a/packages/application/src/events/NavigationEvent.js b/packages/application/src/events/NavigationEvent.js
@@ -10,10 +10,15 @@ export class NavigationEvent extends CustomEvent {
   }
 
   /** Creates an event instance. */
-  constructor() {
+  constructor(url, params) {
     super(NavigationEvent.eventName, {
       bubbles: true,
       composed: true,
     });
+
+    this.details = {
+      url,
+      params,
+    };
   }
 }
diff --git a/packages/application/src/namespace.js b/packages/application/src/namespace.js
@@ -0,0 +1,2 @@
+/** i18n namespace */
+export const namespace = 'pokeapp';
diff --git a/packages/application/test/components/PokeAppPokemonDetails.test.html.js b/packages/application/test/components/PokeAppPokemonDetails.test.html.js
@@ -1,7 +1,8 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
 
-import { PokeAppPokemonDetails } from '../../src/components/PokeAppPokemonsDetails.js';
+import { PokeAppPokemonDetails } from '../../src/components/PokeAppPokemonDetails.js';
+import { NavigateToPokemonSearchEvent } from '../../src/events/NavigateToPokemonSearchEvent.js';
 
 /**
  * Creates a scoped fixture.
@@ -39,8 +40,29 @@ describe('PokeAppPokemonDetails', () => {
       `,
     );
 
-    const $feat = $el.shadowRoot.firstElementChild;
+    const $feat = $el.shadowRoot.querySelector('[data-testid="feature"]');
 
     expect($feat.getAttribute('name')).to.be.equal('pikachu');
   });
+
+  it('should dispatch a navigationEvent clicking on search button', async () => {
+    const stub = sandbox.stub();
+    const $el = await scopedFixture(
+      html`
+        <pokeapp-pokemon-details
+          .location="${{
+            params: {
+              name: 'pikachu',
+            },
+          }}"
+        ></pokeapp-pokemon-details>
+      `,
+    );
+    $el.addEventListener(NavigateToPokemonSearchEvent.eventName, event => stub(event));
+
+    $el._handleGoToSearchClicked();
+
+    expect(stub.calledOnce).to.be.true;
+    expect(stub.firstCall.firstArg).to.be.instanceof(NavigateToPokemonSearchEvent);
+  });
 });
diff --git a/packages/features/feat-list-pokemons/src/components/pokemon-card/PokemonCard.js b/packages/features/feat-list-pokemons/src/components/pokemon-card/PokemonCard.js
@@ -53,14 +53,6 @@ export class PokemonCard extends ScopedElementsMixin(LocalizeMixin(LitElement))
     if (super.connectedCallback) {
       super.connectedCallback();
     }
-
-    if (!this.hasAttribute('tabindex')) {
-      this.setAttribute('tabIndex', 0);
-    }
-
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'button');
-    }
   }
 
   /** @override */
@@ -102,8 +94,10 @@ export class PokemonCard extends ScopedElementsMixin(LocalizeMixin(LitElement))
   /** @override */
   render() {
     return html`
-      <div class="image">${until(this.renderImage(), this.msgLit(`${namespace}:loading`))}</div>
-      <div class="name">${dashesToSpaces(this.name)}</div>
+      <button class="button">
+        <div class="image">${until(this.renderImage(), this.msgLit(`${namespace}:loading`))}</div>
+        <div class="name">${dashesToSpaces(this.name)}</div>
+      </button>
     `;
   }
 }
diff --git a/packages/features/feat-list-pokemons/src/components/pokemon-card/PokemonCard.style.js b/packages/features/feat-list-pokemons/src/components/pokemon-card/PokemonCard.style.js
@@ -1,6 +1,7 @@
 import { css, rem } from 'chi-wc';
 import { boxSizingStyle } from '@pokeapp/common';
 import {
+  tokenColorBackgroundBase,
   tokenColorBackgroundBaseDark,
   tokenColorBorderBase,
 } from 'chi-wc/packages/foundations/tokens/color';
@@ -10,7 +11,7 @@ import { tokenBorderRadiusBase } from 'chi-wc/packages/foundations/tokens/border
 export const pokemonCardStyle = [
   boxSizingStyle,
   css`
-    :host {
+    .button {
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -20,9 +21,11 @@ export const pokemonCardStyle = [
       overflow: hidden;
       border: ${rem[1]} solid ${tokenColorBorderBase};
       border-radius: ${tokenBorderRadiusBase};
+      padding: 0;
+      background-color: ${tokenColorBackgroundBase};
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
     }
-    :host(:hover) {
+    .button:hover {
       cursor: pointer;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
     }

diff --git a/packages/features/feat-list-pokemons/test/components/pokemon-card/PokemonCard.test.js b/packages/features/feat-list-pokemons/test/components/pokemon-card/PokemonCard.test.js
@@ -69,22 +69,4 @@ describe('PokemonCard', () => {
 
     expect(notFoundIcon).to.not.be.null;
   });
-
-  it('should have the tabindex="0', async () => {
-    const pokemonProvider = getPokemonProvider();
-    sandbox.stub(pokemonProvider, 'getPokemon').returns(pikachuData);
-
-    const $el = await scopedFixture(html` <pokemon-card name="pikachu"></pokemon-card> `);
-
-    expect($el.getAttribute('role')).to.be.equal('button');
-  });
-
-  it('should have the role="button', async () => {
-    const pokemonProvider = getPokemonProvider();
-    sandbox.stub(pokemonProvider, 'getPokemon').returns(pikachuData);
-
-    const $el = await scopedFixture(html` <pokemon-card name="pikachu"></pokemon-card> `);
-
-    expect($el.getAttribute('role')).to.be.equal('button');
-  });
 });