Merge pull request #33 from blockchain-certificates/fix/755-fixed-ima…

…ge-missing-alt

Fix/755 fixed image missing alt

src/blockcerts-verifier/BlockcertsVerifier.js

@@ -5,7 +5,7 @@ import '../components/organisms/VerificationModal';
 import '../components/atoms/DragAndDrop';
 import ErrorMessage from '../components/atoms/ErrorMessage/';
 import CSS from '../components/atoms/GlobalStylesheet';
-import '../components/atoms/CardCertificate';
+import '../components/organisms/CardCertificate';
 import '../components/organisms/FullCertificate';
 import Footer from '../components/molecules/Footer/Footer';
 import { APICamelCase } from '../models/API';

src/components/organisms/CardCertificate/CardCertificate.js

@@ -0,0 +1,108 @@
+import { html, LitElement } from '@polymer/lit-element';
+import CSS from './_components.card-css';
+import '../../molecules/VerifyButton';
+
+class CardCertificate extends LitElement {
+  constructor () {
+    super();
+    this.logoHasError = false;
+    this.onImageLoadError = this.onImageLoadError.bind(this);
+  }
+
+  static get properties () {
+    return {
+      hasCertificateDefinition: Boolean,
+      recipientName: String,
+      certificateTitle: String,
+      issuedOn: String,
+      issueDate: String,
+      issuerName: String,
+      issuerLogo: String,
+      recordLink: String,
+      hideRecordLink: Boolean,
+      hideVerifyButton: Boolean,
+      logoHasError: Boolean
+    };
+  }
+
+  onImageLoadError () {
+    this.logoHasError = true;
+  }
+
+  organizationName (props) {
+    return html`<p class="buv-o-text-15">${props.issuerName}</p>`;
+  }
+
+  organizationLogo (props) {
+    return html`<img src='${props.issuerLogo}' alt='${props.issuerName}' onerror='${this.onImageLoadError}' class='buv-c-card__img'/>`;
+  }
+
+  _render (props) {
+    const {
+      hasCertificateDefinition,
+      recipientName,
+      certificateTitle,
+      issuedOn,
+      issueDate,
+      issuerName,
+      recordLink,
+      hideRecordLink,
+      hideVerifyButton } = props;
+
+    if (!hasCertificateDefinition) {
+      return null;
+    }
+
+    const titleClass = [
+      'buv-c-card__title',
+      hideRecordLink ? 'buv-c-card__title--no-padding' : ''
+    ].join(' ');
+
+    return html`
+      ${CSS}
+      <section class='buv-c-card'>
+        <div class='buv-c-card__img-wrapper'>
+          ${!this.logoHasError ? this.organizationLogo(props) : this.organizationName(props)}
+        </div>
+        <div class='buv-c-card__title-wrapper'>
+          <h1 class$=${titleClass}>${certificateTitle}</h1>
+          <h2 class$='${titleClass}  buv-c-card__recipient'>${recipientName}</h2>
+          <span class='buv-o-text-12'>Issued on <time datetime$='${issuedOn}'>${issueDate}</time> by ${issuerName}</span>
+        </div>
+      ${
+  hideRecordLink
+    ? ''
+    : html`<a class='buv-o-text-12  buv-o-link  buv-c-card__record-link' href='${recordLink}' target='_blank'>
+    <span class='buv-o-link__text--underline'>View Record</span>
+    </a>`
+}
+      </section>
+      ${hideVerifyButton
+    ? ''
+    : html`<buv-verify-button isHollow class='buv-c-card__verify-button'></buv-verify-button>`
+}
+    `;
+  }
+}
+
+window.customElements.define('buv-card-certificate-raw', CardCertificate);
+
+// wrap CardCertificate in order to plug into Container
+// necessary trade-off to deal with class component in the store connector
+function CardCertificateWrapper (props) {
+  return html`
+  <buv-card-certificate-raw
+    hasCertificateDefinition='${props.hasCertificateDefinition}'
+    recipientName='${props.recipientName}'
+    certificateTitle='${props.certificateTitle}'
+    issuedOn='${props.issuedOn}'
+    issueDate='${props.issueDate}'
+    issuerName='${props.issuerName}'
+    issuerLogo='${props.issuerLogo}'
+    recordLink='${props.recordLink}'
+    hideRecordLink='${props.hideRecordLink}'
+    hideVerifyButton='${props.hideVerifyButton}'
+  ></buv-card-certificate-raw>`;
+}
+
+export { CardCertificateWrapper as CardCertificate };

src/components/atoms/CardCertificate/CardCertificateContainer.js → src/components/organisms/CardCertificate/CardCertificateContainer.js

@@ -1,5 +1,5 @@
 import connector from '../../../store/connector';
-import CardCertificate from './CardCertificate';
+import { CardCertificate } from './CardCertificate';
 import {
   getCertificateDefinition,
   getCertificateTitle,

src/components/organisms/VerificationModal/VerificationModal.js

@@ -2,6 +2,7 @@ import { html } from '@polymer/lit-element';
 import CSS from './_components.verification-modal-css';
 import Footer from '../../molecules/Footer/Footer';
 import '../../molecules/Modal';
+import '../CardCertificate';
 import '../VerificationProcess';
 
 function VerificationModal ({ isOpen, onClose }) {

test/components/verification/manual-verification-modal.test.html

@@ -36,13 +36,14 @@
           describe('when a verification is manually started', function () {
             it('should show the verification modal', async function () {
               const el = fixture('manualVerification').shadowRoot.querySelectorAll('buv-raw')[0];
+              await wait(300);
               const modalWrapper = el.shadowRoot.querySelectorAll('buv-verification-modal')[0];
               const modalComponent = modalWrapper.shadowRoot.querySelectorAll('buv-modal')[0];
               const modalElement = modalComponent.shadowRoot.querySelectorAll('.buv-qa-modal')[0];
-              await wait(300);
 
-              const certificateComponent = el.shadowRoot.querySelectorAll('buv-card-certificate')[0];
-              const verifyButtonComponent = certificateComponent.shadowRoot.querySelectorAll('buv-verify-button')[0];
+              const cardCertificateWrapper = el.shadowRoot.querySelectorAll('buv-card-certificate')[0];
+              const cardCertificateComponent = cardCertificateWrapper.shadowRoot.querySelectorAll('buv-card-certificate-raw')[0];
+              const verifyButtonComponent = cardCertificateComponent.shadowRoot.querySelectorAll('buv-verify-button')[0];
               const verifyButtonRawComponent = verifyButtonComponent.shadowRoot.querySelectorAll('buv-verify-button-raw')[0];
               const button = verifyButtonRawComponent.shadowRoot.querySelectorAll('button')[0];