profile-pane 2.0.0 → 3.0.0-10071733

package/lib/CVCard.d.ts

@@ -1,5 +1,4 @@
-import { TemplateResult } from 'lit-html';
-import { ProfilePresentation } from './presenter';
 import { CVPresentation } from './CVPresenter';
-export declare const CVCard: (profileBasics: ProfilePresentation, cvData: CVPresentation) => TemplateResult;
+import './styles/CVCard.css';
+export declare const CVCard: (cvData: CVPresentation) => import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=CVCard.d.ts.map

package/lib/CVCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CVCard.d.ts","sourceRoot":"","sources":["../src/CVCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAS/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAa9C,eAAO,MAAM,MAAM,GACjB,eAAe,mBAAmB,EAClC,QAAQ,cAAc,KACrB,cAgCF,CAAA"}
+{"version":3,"file":"CVCard.d.ts","sourceRoot":"","sources":["../src/CVCard.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,qBAAqB,CAAA;AAE5B,eAAO,MAAM,MAAM,GACjB,QAAQ,cAAc,yCAkEvB,CAAA"}

package/lib/CVCard.js

@@ -5,85 +5,102 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CVCard = void 0;
 var _litHtml = require("lit-html");
-var _baseStyles = require("./baseStyles");
-var _styleMap = require("lit-html/directives/style-map.js");
-const styles = {
-  image: (0, _styleMap.styleMap)((0, _baseStyles.fullWidth)()),
-  intro: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.textGray)(),
-    ...(0, _baseStyles.textCenter)()
-  }),
-  card: (0, _styleMap.styleMap)((0, _baseStyles.card)()),
-  info: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.paddingSmall)(),
-    ...(0, _baseStyles.textLeft)()
-  }),
-  tools: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.paddingSmall)(),
-    ...(0, _baseStyles.textRight)()
-  })
-};
-const CVCard = (profileBasics, cvData) => {
+require("./styles/CVCard.css");
+const CVCard = cvData => {
   const {
     rolesByType,
     skills,
     languages
   } = cvData;
-  const nameStyle = (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.heading)(),
-    // "text-decoration": "underline",
-    color: profileBasics.highlightColor // was "text-decoration-color"
-  });
-  if (renderRoles(rolesByType['FutureRole']) || renderRoles(rolesByType['CurrentRole']) || renderRoles(rolesByType['PastRole']) || renderSkills(skills) || renderLanguages(languages)) {
-    return (0, _litHtml.html)`
-  <div>
-    <div data-testid="curriculum-vitae" style="${styles.card}">
-      <div style=${styles.info}>
-        <h3 style=${nameStyle}>Bio</h3>
-        <div style=${styles.info}>${renderRoles(rolesByType['FutureRole'])}</div>
-        <hr />
-        <div style=${styles.info}>${renderRoles(rolesByType['CurrentRole'])}</div>
-        <hr />
-        <div style=${styles.info}>${renderRoles(rolesByType['PastRole'])}</div>
-        <hr />
-        <h3 style=${nameStyle}>Skills</h3>
-        <div style=${styles.info}>${renderSkills(skills)}</div>
-        <h3 style=${nameStyle}>Languages</h3>
-        <div style=${styles.info}>${renderLanguages(languages)}</div>
-            
-      </div>
-      </div>
-    </div>
+  const futureRolesArr = rolesByType['FutureRole'] || [];
+  const currentRolesArr = rolesByType['CurrentRole'] || [];
+  const pastRolesArr = rolesByType['PastRole'] || [];
+  const skillsArr = skills || [];
+  const languagesArr = languages || [];
+  const hasFutureRole = Array.isArray(futureRolesArr) && futureRolesArr.length > 0;
+  const hasCurrentRole = Array.isArray(currentRolesArr) && currentRolesArr.length > 0;
+  const hasPastRole = Array.isArray(pastRolesArr) && pastRolesArr.length > 0;
+  const hasSkills = Array.isArray(skillsArr) && skillsArr.length > 0;
+  const hasLanguages = Array.isArray(languagesArr) && languagesArr.length > 0;
+  if (!(hasFutureRole || hasCurrentRole || hasPastRole || hasSkills || hasLanguages)) return (0, _litHtml.html)``;
+  return (0, _litHtml.html)`
+    <article class="cvCard" aria-label="Professional Experience" data-testid="curriculum-vitae">
+      ${hasFutureRole ? (0, _litHtml.html)`
+        <section class="cvSection" aria-labelledby="cv-future-heading">
+          <h3 id="cv-future-heading">Future Roles</h3>
+          <ul role="list" aria-label="Upcoming professional roles">
+            ${renderRoles(futureRolesArr, true)}
+          </ul>
+        </section>
+      ` : ''}
+      
+      ${hasCurrentRole ? (0, _litHtml.html)`
+        <section class="cvSection" aria-labelledby="cv-current-heading">
+          <h3 id="cv-current-heading">Current Roles</h3>
+          <ul role="list" aria-label="Current professional positions">
+            ${renderRoles(currentRolesArr, true)}
+          </ul>
+        </section>
+      ` : ''}
+      
+      ${hasPastRole ? (0, _litHtml.html)`
+        <section class="cvSection" aria-labelledby="cv-past-heading">
+          <h3 id="cv-past-heading">Past Roles</h3>
+          <ul role="list" aria-label="Previous work experience">
+            ${renderRoles(pastRolesArr, true)}
+          </ul>
+        </section>
+      ` : ''}
+      
+      ${hasSkills ? (0, _litHtml.html)`
+        <section class="cvSection" aria-labelledby="cv-skills-heading">
+          <h3 id="cv-skills-heading">Skills</h3>
+          <ul role="list" aria-label="Professional skills and competencies">
+            ${renderSkills(skillsArr, true)}
+          </ul>
+        </section>
+      ` : ''}
+      
+      ${hasLanguages ? (0, _litHtml.html)`
+        <section class="cvSection" aria-labelledby="cv-languages-heading">
+          <h3 id="cv-languages-heading">Languages</h3>
+          <ul role="list" aria-label="Known languages">
+            ${renderLanguages(languagesArr, true)}
+          </ul>
+        </section>
+      ` : ''}
+    </article>
   `;
-  }
-  return (0, _litHtml.html)``;
 };
 exports.CVCard = CVCard;
-function renderRole(role) {
-  return role ? (0, _litHtml.html)`<div style="margin-top: 0.3em; margin-bottom: 0.3em;">
-        <b>${role.orgName}</b>
-        <span>${strToUpperCase(role.roleText)}</span>
-        <span>${role.dates}</span>   
-      </div> ` : (0, _litHtml.html)``;
+function renderRole(role, asList = false) {
+  if (!role) return (0, _litHtml.html)``;
+  return asList ? (0, _litHtml.html)`
+      <li class="cvRole" role="listitem">
+        <strong class="cvOrg" aria-label="Organization">${role.orgName}</strong>
+        <span aria-label="Role title">${strToUpperCase(role.roleText)}</span>
+        <time aria-label="Employment period">${role.dates}</time>
+      </li>` : (0, _litHtml.html)``;
 }
-function renderRoles(roles) {
-  if (roles[0] > '') return (0, _litHtml.html)`${renderRole(roles[0])}${roles.length > 1 ? renderRoles(roles.slice(1)) : (0, _litHtml.html)``}`;
+function renderRoles(roles, asList = false) {
+  if (!roles || !roles.length || !roles[0]) return (0, _litHtml.html)``;
+  return (0, _litHtml.html)`${renderRole(roles[0], asList)}${roles.length > 1 ? renderRoles(roles.slice(1), asList) : (0, _litHtml.html)``}`;
 }
-function renderSkill(skill) {
-  return skill ? (0, _litHtml.html)`<div style="margin: 0.5em;">
-        <p style="text-align: center;">${skill}</p>
-      </div> ` : (0, _litHtml.html)``;
+function renderSkill(skill, asList = false) {
+  if (!skill) return (0, _litHtml.html)``;
+  return asList ? (0, _litHtml.html)`<li class="cvSkill">${strToUpperCase(skill)}</li>` : (0, _litHtml.html)``;
 }
-function renderSkills(skills) {
-  if (skills[0] > '') return (0, _litHtml.html)`${renderSkill(strToUpperCase(skills[0]))} ${skills.length > 1 ? renderSkills(skills.slice(1)) : (0, _litHtml.html)``}`;
+function renderSkills(skills, asList = false) {
+  if (!skills || !skills.length || !skills[0]) return (0, _litHtml.html)``;
+  return (0, _litHtml.html)`${renderSkill(skills[0], asList)}${skills.length > 1 ? renderSkills(skills.slice(1), asList) : (0, _litHtml.html)``}`;
 }
-function renderLan(language) {
-  return language ? (0, _litHtml.html)`<div style="margin: 0.5em;">
-        <p style="text-align: center;">${language}</p>
-      </div> ` : (0, _litHtml.html)``;
+function renderLan(language, asList = false) {
+  if (!language) return (0, _litHtml.html)``;
+  return asList ? (0, _litHtml.html)`<li class="cvLanguage">${language}</li>` : (0, _litHtml.html)``;
 }
-function renderLanguages(languages) {
-  if (languages[0] > '') return (0, _litHtml.html)`${renderLan(languages[0])}${languages.length > 1 ? renderLanguages(languages.slice(1)) : (0, _litHtml.html)``}`;
+function renderLanguages(languages, asList = false) {
+  if (!languages || !languages.length || !languages[0]) return (0, _litHtml.html)``;
+  return (0, _litHtml.html)`${renderLan(languages[0], asList)}${languages.length > 1 ? renderLanguages(languages.slice(1), asList) : (0, _litHtml.html)``}`;
 }
 function strToUpperCase(str) {
   if (str && str[0] > '') {
@@ -94,6 +111,4 @@ function strToUpperCase(str) {
     return strCase.join(' ');
   }
   return '';
-}
-
-// ends
+}

package/lib/ChatWithMe.d.ts

@@ -1,5 +1,6 @@
 import { TemplateResult } from 'lit-html';
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
+import './styles/ChatWithMe.css';
 export declare const ChatWithMe: (subject: NamedNode, context: DataBrowserContext) => TemplateResult;
 //# sourceMappingURL=ChatWithMe.d.ts.map

package/lib/ChatWithMe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWithMe.d.ts","sourceRoot":"","sources":["../src/ChatWithMe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAKlC,eAAO,MAAM,UAAU,GACrB,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,cAwCF,CAAA"}
+{"version":3,"file":"ChatWithMe.d.ts","sourceRoot":"","sources":["../src/ChatWithMe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAMlC,OAAO,yBAAyB,CAAA;AAEhC,eAAO,MAAM,UAAU,GACrB,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,cA0FF,CAAA"}

package/lib/ChatWithMe.js

@@ -6,35 +6,82 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChatWithMe = void 0;
 var _litHtml = require("lit-html");
 var _solidUi = require("solid-ui");
+var _solidLogic = require("solid-logic");
 var _asyncReplace = require("lit-html/directives/async-replace.js");
 var _texts = require("./texts");
+var _buttonsHelper = require("./buttonsHelper");
+require("./styles/ChatWithMe.css");
 const ChatWithMe = (subject, context) => {
   const logic = context.session.logic;
   const longChatPane = context.session.paneRegistry.byName('long chat');
   async function* chatContainer() {
-    const chatContainer = context.dom.createElement('div');
+    const chatContainer = context.dom.createElement('section');
+    chatContainer.setAttribute('class', 'chatSection section-centered');
+    chatContainer.setAttribute('aria-labelledby', 'chat-section-title');
+    chatContainer.setAttribute('role', 'region');
+    chatContainer.setAttribute('data-testid', 'chat');
+
+    // Add hidden title for screen readers
+    const title = context.dom.createElement('h3');
+    title.id = 'chat-section-title';
+    title.className = 'sr-only';
+    title.textContent = 'Communication';
+    chatContainer.appendChild(title);
     let exists;
     try {
-      yield _texts.loadingMessage, exists = await logic.chat.getChat(subject, false);
+      yield (0, _litHtml.html)`
+      <div class="buttonSubSection">
+        <div class="actionButton loading-text center" role="status" aria-live="polite">
+          ${_texts.loadingMessage.toUpperCase()}
+        </div>
+      </div>
+      `;
+      exists = await logic.chat.getChat(subject, false);
     } catch (e) {
       exists = false;
     }
     if (exists) {
-      chatContainer.appendChild(longChatPane.render(exists, context, {}));
+      const chatArea = context.dom.createElement('div');
+      chatArea.setAttribute('role', 'log');
+      chatArea.setAttribute('aria-label', 'Chat conversation');
+      chatArea.appendChild(longChatPane.render(exists, context, {}));
+      chatContainer.appendChild(chatArea);
       yield chatContainer;
     } else {
-      const button = _solidUi.widgets.button(context.dom, undefined, _texts.chatWithMeButtonText, async () => {
+      const me = _solidLogic.authn.currentUser();
+      let label = (0, _buttonsHelper.checkIfAnyUserLoggedIn)(me) ? _texts.chatWithMeButtonText.toUpperCase() : _texts.logInToChatWithMeButtonText.toUpperCase();
+      const button = _solidUi.widgets.button(context.dom, undefined, label, setButtonHandler, {
+        needsBorder: true
+      });
+      async function setButtonHandler(event) {
+        event.preventDefault();
         try {
           const chat = await logic.chat.getChat(subject, true);
           chatContainer.innerHTML = '';
           chatContainer.appendChild(longChatPane.render(chat, context, {}));
-        } catch (e) {
-          chatContainer.appendChild(_solidUi.widgets.errorMessageBlock(context.dom, e.message));
+        } catch (error) {
+          (0, _buttonsHelper.complain)(chatContainer, context, error);
         }
-      }, {
-        needsBorder: true
-      });
+      }
+      button.refresh = refreshButton();
+      function refreshButton() {
+        const me = _solidLogic.authn.currentUser();
+        if ((0, _buttonsHelper.checkIfAnyUserLoggedIn)(me)) {
+          button.innerHTML = _texts.chatWithMeButtonText.toUpperCase();
+        } else {
+          //not logged in
+          button.innerHTML = _texts.logInToChatWithMeButtonText.toUpperCase();
+        }
+      }
+      button.setAttribute('type', 'button');
+      button.setAttribute('aria-describedby', 'chat-button-description');
+      const description = context.dom.createElement('span');
+      description.id = 'chat-button-description';
+      description.className = 'sr-only';
+      description.textContent = 'Start a new conversation or sign in to continue existing chat';
+      button.classList.add('actionButton', 'btn-primary', 'action-button-focus');
       chatContainer.appendChild(button);
+      chatContainer.appendChild(description);
       yield chatContainer;
     }
   }

package/lib/FriendList.d.ts

@@ -1,6 +1,7 @@
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
 import { TemplateResult } from 'lit-html';
-import { ProfilePresentation } from './presenter';
-export declare const FriendList: (profileBasics: ProfilePresentation, subject: NamedNode, context: DataBrowserContext) => TemplateResult;
+import './styles/FriendList.css';
+export declare const FriendList: (subject: NamedNode, context: DataBrowserContext) => TemplateResult | null;
+export declare const extractFriends: (subject: NamedNode, { dom }: DataBrowserContext) => HTMLDivElement;
 //# sourceMappingURL=FriendList.d.ts.map

package/lib/FriendList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FriendList.d.ts","sourceRoot":"","sources":["../src/FriendList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAG/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAYjD,eAAO,MAAM,UAAU,GAAK,eAAe,mBAAmB,EAC5D,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,cAkBF,CAAA"}
+{"version":3,"file":"FriendList.d.ts","sourceRoot":"","sources":["../src/FriendList.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,yBAAyB,CAAA;AAGhC,eAAO,MAAM,UAAU,GACrB,SAAS,SAAS,EAClB,SAAS,kBAAkB,KAC1B,cAAc,GAAG,IAkBnB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,SAAS,EAAE,SAAS,kBAAkB,mBAwB7E,CAAA"}

package/lib/FriendList.js

@@ -3,36 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FriendList = void 0;
+exports.extractFriends = exports.FriendList = void 0;
 var _solidUi = require("solid-ui");
 var _litHtml = require("lit-html");
-var _styleMap = require("lit-html/directives/style-map.js");
-var _baseStyles = require("./baseStyles");
-const styles = {
-  root: (0, _styleMap.styleMap)((0, _baseStyles.padding)()),
-  heading: (0, _styleMap.styleMap)((0, _baseStyles.headingLight)()),
-  card: (0, _styleMap.styleMap)((0, _baseStyles.card)())
-};
-const FriendList = (profileBasics, subject, context) => {
-  const nameStyle = (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.heading)(),
-    // "text-decoration": "underline",
-    color: profileBasics.highlightColor // was "text-decoration-color"
-  });
-  if (createList(subject, context)) {
-    return (0, _litHtml.html)`
-    <div data-testid="friend-list" style="${styles.card}">
-      <div style=${styles.root}>
-        <h3 style=${nameStyle}>Friends</h3>
-        ${createList(subject, context)}
-      </div>
-    </div>
-    `;
-  }
-  return (0, _litHtml.html)``;
+require("./styles/FriendList.css");
+const FriendList = (subject, context) => {
+  const friends = extractFriends(subject, context);
+  if (!friends || !friends.textContent?.trim()) return null;
+  return (0, _litHtml.html)`
+    <section
+      class="friendListSection"
+      role="region"
+      aria-labelledby="friends-section-title"
+      data-testid="friend-list"
+    >
+      <nav aria-label="Friend profiles">
+        <ul class="list-reset zebra-stripe" role="list">
+          ${friends}
+        </ul>
+      </nav>
+    </section>
+  `;
 };
 exports.FriendList = FriendList;
-const createList = (subject, {
+const extractFriends = (subject, {
   dom
 }) => {
   const target = dom.createElement('div');
@@ -42,5 +36,20 @@ const createList = (subject, {
     predicate: _solidUi.ns.foaf('knows'),
     noun: 'friend'
   });
-  if (target.textContent === '') return null;else return target;
-};
+  if (target.textContent === '') return null;
+  // Add 'friendItem' class and unique aria-label to each <li> for accessibility
+  target.querySelectorAll('li').forEach((li, idx) => {
+    li.classList.add('friendItem');
+    // Try to find a link or text to use as a label
+    const link = li.querySelector('a');
+    if (link && link.textContent) {
+      li.setAttribute('aria-label', `Friend: ${link.textContent.trim()}`);
+    } else if (li.textContent) {
+      li.setAttribute('aria-label', `Friend: ${li.textContent.trim()}`);
+    } else {
+      li.setAttribute('aria-label', `Friend ${idx + 1}`);
+    }
+  });
+  return target;
+};
+exports.extractFriends = extractFriends;

package/lib/ProfileCard.d.ts

@@ -1,4 +1,6 @@
-import { TemplateResult } from 'lit-html';
+import './styles/ProfileCard.css';
 import { ProfilePresentation } from './presenter';
-export declare const ProfileCard: ({ name, imageSrc, introduction, location, pronouns, highlightColor, }: ProfilePresentation) => TemplateResult;
+import { DataBrowserContext } from 'pane-registry';
+import { NamedNode } from 'rdflib';
+export declare const ProfileCard: ({ name, imageSrc, introduction, location, pronouns, highlightColor, backgroundColor }: ProfilePresentation, context: DataBrowserContext, subject: NamedNode) => import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=ProfileCard.d.ts.map

package/lib/ProfileCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../src/ProfileCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,UAAU,CAAA;AASxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAQjD,eAAO,MAAM,WAAW,GAAI,uEAOzB,mBAAmB,KAAG,cAexB,CAAA"}
+{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../src/ProfileCard.ts"],"names":[],"mappings":"AACA,OAAO,0BAA0B,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAEjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIlC,eAAO,MAAM,WAAW,GAAI,uFAEzB,mBAAmB,EAAE,SAAS,kBAAkB,EAAE,SAAS,SAAS,yCAwBtE,CAAA"}

package/lib/ProfileCard.js

@@ -5,39 +5,58 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProfileCard = void 0;
 var _litHtml = require("lit-html");
-var _styleMap = require("lit-html/directives/style-map.js");
-var _baseStyles = require("./baseStyles");
-const styles = {
-  image: (0, _styleMap.styleMap)((0, _baseStyles.fullWidth)()),
-  intro: (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.textGray)(),
-    ...(0, _baseStyles.textCenter)()
-  }),
-  info: (0, _styleMap.styleMap)((0, _baseStyles.padding)())
-};
+require("./styles/ProfileCard.css");
+var _addMeToYourFriends = require("./addMeToYourFriends");
+var _QRCodeCard = require("./QRCodeCard");
 const ProfileCard = ({
   name,
   imageSrc,
   introduction,
   location,
   pronouns,
-  highlightColor
-}) => {
-  const nameStyle = (0, _styleMap.styleMap)({
-    ...(0, _baseStyles.heading)(),
-    'text-decoration': 'underline',
-    'text-decoration-color': highlightColor
-  });
+  highlightColor,
+  backgroundColor
+}, context, subject) => {
   return (0, _litHtml.html)`
-    ${Image(imageSrc, name)}
-    <div style=${styles.info}>
-      <h3 style=${nameStyle}>${name}</h3>
-      <div style=${styles.intro}>
-        ${Line(introduction)} ${Line(location, '🌐')} ${Line(pronouns)}
+    <article class="profileCard" aria-labelledby="profile-name">
+      <h2 id="profile-name" class="sr-only">${name}</h2>
+      <header class="header flex-column-center mb-md" aria-label="Profile information">
+        ${Image(imageSrc, name)}
+      </header>
+      
+      <section class="intro text-center" aria-label="About">
+        ${Line(introduction, '', 'About')}
+        ${Line(location, '🌐', 'Location')}
+        ${Line(pronouns, '', 'Pronouns')}
+      </section>
+      
+      <section class="buttonSection text-center" aria-label="Actions">
+        ${(0, _addMeToYourFriends.addMeToYourFriendsDiv)(subject, context)}
+      </section>
+      
+      <div class="qrCodeSection section-centered">
+        ${(0, _QRCodeCard.QRCodeCard)(highlightColor, backgroundColor, subject)}
       </div>
-    </div>
+    </article>
   `;
 };
 exports.ProfileCard = ProfileCard;
-const Line = (value, prefix = _litHtml.nothing) => value ? (0, _litHtml.html)`<p>${prefix} ${value}</p>` : _litHtml.nothing;
-const Image = (src, alt) => src ? (0, _litHtml.html)`<img style=${styles.image} src=${src} alt=${alt} />` : _litHtml.nothing;
+const Line = (value, prefix = _litHtml.nothing, label = '') => value ? (0, _litHtml.html)`
+    <div class="details" role="text" ${label ? `aria-label="${label}: ${value}"` : ''}>
+      ${prefix} ${value}
+    </div>
+  ` : _litHtml.nothing;
+const Image = (src, alt) => src ? (0, _litHtml.html)`
+        <img
+          class="image"
+          src=${src}
+          alt="Profile photo of ${alt}"
+          width="160"
+          height="160"
+          loading="eager"
+        />
+      ` : (0, _litHtml.html)`
+        <div class="image-alt" role="img" aria-label="${alt}" tabindex="0">
+          ${alt}
+        </div>
+      `;

package/lib/ProfileView.d.ts

@@ -1,5 +1,6 @@
 import { TemplateResult } from 'lit-html';
 import { DataBrowserContext } from 'pane-registry';
 import { NamedNode } from 'rdflib';
+import './styles/ProfileView.css';
 export declare function ProfileView(subject: NamedNode, context: DataBrowserContext): Promise<TemplateResult>;
 //# sourceMappingURL=ProfileView.d.ts.map

package/lib/ProfileView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileView.d.ts","sourceRoot":"","sources":["../src/ProfileView.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAE/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AA2B7C,wBAAsB,WAAW,CAC/B,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,kBAAkB,GAC1B,OAAO,CAAE,cAAc,CAAC,CAuC1B"}
+{"version":3,"file":"ProfileView.d.ts","sourceRoot":"","sources":["../src/ProfileView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,UAAU,CAAA;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AAC7C,OAAO,0BAA0B,CAAA;AAwBjC,wBAAsB,WAAW,CAC/B,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,kBAAkB,GAC1B,OAAO,CAAE,cAAc,CAAC,CAiI1B"}