profile-pane 3.2.1 → 3.2.2-test.0

package/lib/sections/education/EducationEditDialog.js

@@ -6,16 +6,99 @@ Object.defineProperty(exports, "__esModule", {
 exports.createEducationEditDialog = createEducationEditDialog;
 var _dialog = require("../../ui/dialog");
 var _litHtml = require("lit-html");
+require("solid-ui/components/actions/button");
+require("solid-ui/components/forms/select");
 require("../../styles/EditDialogs.css");
-require("../../styles/ContactInfoEditDialog.css");
+require("../contactInfo/ContactInfoEditDialog.css");
 var _mutations = require("./mutations");
 var _profileIcons = require("../../icons-svg/profileIcons");
 var _rowState = require("../shared/rowState");
 var _textUtils = require("../../textUtils");
 var _texts = require("../../texts");
+const EDUCATION_MONTH_OPTIONS = [{
+  value: '01',
+  label: 'January'
+}, {
+  value: '02',
+  label: 'February'
+}, {
+  value: '03',
+  label: 'March'
+}, {
+  value: '04',
+  label: 'April'
+}, {
+  value: '05',
+  label: 'May'
+}, {
+  value: '06',
+  label: 'June'
+}, {
+  value: '07',
+  label: 'July'
+}, {
+  value: '08',
+  label: 'August'
+}, {
+  value: '09',
+  label: 'September'
+}, {
+  value: '10',
+  label: 'October'
+}, {
+  value: '11',
+  label: 'November'
+}, {
+  value: '12',
+  label: 'December'
+}];
 function sanitizeEducationFieldValue(value) {
   return (0, _textUtils.sanitizeTextValue)(value);
 }
+function readEducationSelectChange(event) {
+  const customEvent = event;
+  if (typeof customEvent.detail?.value === 'string') {
+    return customEvent.detail.value;
+  }
+  const target = event.target;
+  return typeof target?.value === 'string' ? target.value : '';
+}
+function getEducationYearOptions(selectedYears) {
+  const currentYear = new Date().getFullYear();
+  const baseYearOptions = Array.from({
+    length: 120
+  }, (_, i) => String(currentYear - i));
+  const yearOptions = Array.from(new Set([...baseYearOptions, ...selectedYears].filter(Boolean))).sort((a, b) => Number(b) - Number(a));
+  return yearOptions.map(year => ({
+    label: year,
+    value: year
+  }));
+}
+function getEducationDateSelectOptions(kind, selectedYears) {
+  if (kind === 'start-month' || kind === 'end-month') {
+    return EDUCATION_MONTH_OPTIONS;
+  }
+  return getEducationYearOptions(selectedYears);
+}
+function getEducationDateSelectValue(kind, row) {
+  const startDateParts = parseYearMonthFromDateText((0, _textUtils.toText)(row?.startDate));
+  const endDateParts = parseYearMonthFromDateText((0, _textUtils.toText)(row?.endDate));
+  switch (kind) {
+    case 'start-month':
+      return startDateParts.month;
+    case 'start-year':
+      return startDateParts.year;
+    case 'end-month':
+      return endDateParts.month;
+    case 'end-year':
+      return endDateParts.year;
+    default:
+      return '';
+  }
+}
+function getEducationDateSelectLabel(kind) {
+  return kind === 'start-month' || kind === 'end-month' ? 'Select Month' : 'Select Year';
+}
 function parseYearMonthFromDateText(dateText) {
   const normalized = (dateText || '').trim();
   if (!normalized) return {
@@ -72,6 +155,22 @@ function validateEducationBeforeSave(rows) {
     ok: true
   };
 }
+function initializeEducationDateSelects(form, educationData) {
+  const selectElements = form.querySelectorAll('solid-ui-select[data-education-date-kind]');
+  selectElements.forEach(selectElement => {
+    const kind = selectElement.dataset.educationDateKind;
+    const rowIndex = Number(selectElement.dataset.educationRowIndex);
+    if (!kind || Number.isNaN(rowIndex)) return;
+    const educationRow = educationData[rowIndex];
+    if (!educationRow) return;
+    const startDateParts = parseYearMonthFromDateText((0, _textUtils.toText)(educationRow.startDate));
+    const endDateParts = parseYearMonthFromDateText((0, _textUtils.toText)(educationRow.endDate));
+    const selectedYears = [startDateParts.year, endDateParts.year];
+    selectElement.options = getEducationDateSelectOptions(kind, selectedYears);
+    selectElement.value = getEducationDateSelectValue(kind, educationRow);
+    selectElement.label = getEducationDateSelectLabel(kind);
+  });
+}
 function renderEducationInputRow({
   educationData,
   index,
@@ -109,59 +208,7 @@ function renderEducationInputRow({
   const endMonthValue = endDateParts.month;
   const endYearParsedText = endDateParts.year;
   const currentYear = new Date().getFullYear();
-  const baseYearOptions = Array.from({
-    length: 120
-  }, (_, i) => String(currentYear - i));
-  const yearOptions = Array.from(new Set([...baseYearOptions, startYearText, endYearParsedText].filter(Boolean))).sort((a, b) => Number(b) - Number(a));
-  const monthOptions = [{
-    value: '01',
-    label: 'January'
-  }, {
-    value: '02',
-    label: 'February'
-  }, {
-    value: '03',
-    label: 'March'
-  }, {
-    value: '04',
-    label: 'April'
-  }, {
-    value: '05',
-    label: 'May'
-  }, {
-    value: '06',
-    label: 'June'
-  }, {
-    value: '07',
-    label: 'July'
-  }, {
-    value: '08',
-    label: 'August'
-  }, {
-    value: '09',
-    label: 'September'
-  }, {
-    value: '10',
-    label: 'October'
-  }, {
-    value: '11',
-    label: 'November'
-  }, {
-    value: '12',
-    label: 'December'
-  }];
-  const renderMonthOptions = selectedMonth => (0, _litHtml.html)`
-    <option value="" ?selected=${!selectedMonth}>Select month</option>
-    ${monthOptions.map(month => (0, _litHtml.html)`
-      <option value=${month.value} ?selected=${month.value === selectedMonth}>${month.label}</option>
-    `)}
-  `;
-  const renderYearOptions = selectedYear => (0, _litHtml.html)`
-    <option value="" ?selected=${!selectedYear}>Select year</option>
-    ${yearOptions.map(year => (0, _litHtml.html)`
-      <option value=${year} ?selected=${year === selectedYear}>${year}</option>
-    `)}
-  `;
+  const selectedYears = [startYearText, endYearParsedText];
   const handleEducationInput = field => e => {
     const target = e.target;
     const nextValue = sanitizeEducationFieldValue(target.value);
@@ -179,8 +226,7 @@ function renderEducationInputRow({
     return `${year}-${month}-01`;
   };
   const handleStartMonthChange = event => {
-    const target = event.target;
-    const month = target.value;
+    const month = readEducationSelectChange(event);
     const year = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.startDate)).year || String(currentYear);
     const nextStartDate = buildDateLiteral(month, year);
     if (educationData[index]) {
@@ -189,8 +235,7 @@ function renderEducationInputRow({
     }
   };
   const handleStartYearChange = event => {
-    const target = event.target;
-    const year = target.value;
+    const year = readEducationSelectChange(event);
     const month = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.startDate)).month || '01';
     const nextStartDate = buildDateLiteral(month, year);
     if (educationData[index]) {
@@ -199,8 +244,7 @@ function renderEducationInputRow({
     }
   };
   const handleEndMonthChange = event => {
-    const target = event.target;
-    const month = target.value;
+    const month = readEducationSelectChange(event);
     const year = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.endDate)).year || String(currentYear);
     const nextEndDate = buildDateLiteral(month, year);
     if (educationData[index]) {
@@ -209,8 +253,7 @@ function renderEducationInputRow({
     }
   };
   const handleEndYearChange = event => {
-    const target = event.target;
-    const year = target.value;
+    const year = readEducationSelectChange(event);
     const month = parseYearMonthFromDateText((0, _textUtils.toText)(educationData[index]?.endDate)).month || '01';
     const nextEndDate = buildDateLiteral(month, year);
     if (educationData[index]) {
@@ -230,15 +273,17 @@ function renderEducationInputRow({
     <div class="profile-edit-dialog__row" role="group" aria-labelledby=${educationHeadingId}>
       <h4 id=${educationHeadingId} class="profile-edit-dialog__entry-heading">${label}</h4>
       <div class="profile-edit-dialog__actions profile-edit-dialog__actions--edge">
-        <button
+        <solid-ui-button
           type="button"
+          variant="icon"
+          size="md"
           class="profile-edit-dialog__delete-button"
           aria-label=${`Delete education ${displayIndex + 1}`}
           title=${_texts.deleteEntryButtonTitleText}
           @click=${handleDelete}
         >
-          <span class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
-        </button>
+          <span slot="icon" class="profile-edit-dialog__delete-icon" aria-hidden="true">${_profileIcons.trashIcon}</span>
+        </solid-ui-button>
       </div>
     </div>
     <label aria-label=${`${label} School/College`} class="label profile-edit-dialog__field">
@@ -279,27 +324,59 @@ function renderEducationInputRow({
     <div class="profile-edit-dialog__row">
       <label aria-label=${startMonthLabel} class="label profile-edit-dialog__field-type">
         Start Month
-        <select name=${startMonthInputName} id=${startMonthSelectId} @change=${handleStartMonthChange}>
-          ${renderMonthOptions(startMonthValue)}
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__education-date-select"
+          name=${startMonthInputName}
+          id=${startMonthSelectId}
+          data-education-date-kind="start-month"
+          data-education-row-index=${String(index)}
+          .options=${getEducationDateSelectOptions('start-month', selectedYears)}
+          .value=${startMonthValue}
+          .label=${getEducationDateSelectLabel('start-month')}
+          @change=${handleStartMonthChange}
+        ></solid-ui-select>
       </label>
       <label aria-label=${startYearLabel} class="label profile-edit-dialog__field-type">
         Start Year
-        <select name=${startYearInputName} id=${startYearSelectId} @change=${handleStartYearChange}>
-          ${renderYearOptions(startYearText)}
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__education-date-select"
+          name=${startYearInputName}
+          id=${startYearSelectId}
+          data-education-date-kind="start-year"
+          data-education-row-index=${String(index)}
+          .options=${getEducationDateSelectOptions('start-year', selectedYears)}
+          .value=${startYearText}
+          .label=${getEducationDateSelectLabel('start-year')}
+          @change=${handleStartYearChange}
+        ></solid-ui-select>
       </label>
       <label aria-label=${endMonthLabel} class="label profile-edit-dialog__field-type">
         End Month
-        <select name=${endMonthInputName} id=${endMonthSelectId} @change=${handleEndMonthChange}>
-          ${renderMonthOptions(endMonthValue)}
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__education-date-select"
+          name=${endMonthInputName}
+          id=${endMonthSelectId}
+          data-education-date-kind="end-month"
+          data-education-row-index=${String(index)}
+          .options=${getEducationDateSelectOptions('end-month', selectedYears)}
+          .value=${endMonthValue}
+          .label=${getEducationDateSelectLabel('end-month')}
+          @change=${handleEndMonthChange}
+        ></solid-ui-select>
       </label>
       <label aria-label=${endYearLabel} class="label profile-edit-dialog__field-type">
         End Year
-        <select name=${endYearInputName} id=${endYearSelectId} @change=${handleEndYearChange}>
-          ${renderYearOptions(endYearParsedText)}
-        </select>
+        <solid-ui-select
+          class="profile-edit-dialog__education-date-select"
+          name=${endYearInputName}
+          id=${endYearSelectId}
+          data-education-date-kind="end-year"
+          data-education-row-index=${String(index)}
+          .options=${getEducationDateSelectOptions('end-year', selectedYears)}
+          .value=${endYearParsedText}
+          .label=${getEducationDateSelectLabel('end-year')}
+          @change=${handleEndYearChange}
+        ></solid-ui-select>
       </label>
     </div>
     <label aria-label=${`${label} Description`} class="label profile-edit-dialog__field profile-edit-dialog__field--full profile-edit-dialog__field--stack">
@@ -347,24 +424,26 @@ function renderEducationSection(educationData, onAddRow) {
   return (0, _litHtml.html)`
     <section 
       aria-labelledby="education-heading" 
-      class="educationEditSection section-bg">
+      class="profile-edit-dialog__section--education section-bg">
       <header class="profile__section-header">
         <h3 id="education-heading" class="profile-edit-dialog__section-heading">
-          <span class="sectionTitleIcon" aria-hidden="true">&#9993;</span>
+          <span class="profile-edit-dialog__section-title-icon" aria-hidden="true">&#9993;</span>
           Education
         </h3>
-        <button
+        <solid-ui-button
           type="button"
-          class="profile__action-button profile-action-text flex-center"
+          variant="secondary"
+          size="sm"
+          class="profile__action-button profile-action-text profile-edit-dialog__add-button"
           data-dialog-add-more="true"
           aria-label="Add another education entry"
           @click=${createNewRow}
         >
-          <span class="profile__add-more-content inline-flex-row">
-            <span class="profile__add-more-icon inline-flex-row" aria-hidden="true">${_profileIcons.addIcon}</span>
-            Add More
+          <span class="profile__add-more-content">
+            <span class="profile__add-more-icon" aria-hidden="true">${_profileIcons.addIcon}</span>
+            <span>Add More</span>
           </span>
-        </button>
+        </solid-ui-button>
       </header>
       <fieldset>
         <legend class="sr-only">Education entries</legend>
@@ -389,6 +468,7 @@ function renderEducationEditTemplate(form, formState, rerender, viewerMode) {
     ${renderEducationSection(formState.educationData, rerender)}
     ${viewerMode !== 'owner' ? (0, _litHtml.html)`<p class="profile-edit-dialog__login-message">${_texts.ownerLoginRequiredDialogMessageText}</p>` : null}
   `, form);
+  initializeEducationDateSelects(form, formState.educationData);
 }
 function createEducationEditForm(educationData, viewerMode) {
   const form = document.createElement('form');
@@ -417,6 +497,10 @@ async function createEducationEditDialog(event, store, subject, educationData, v
     title: _texts.editEducationDialogTitleText,
     dom,
     form,
+    shouldCloseWithoutSave: () => {
+      const plan = (0, _rowState.summarizeRowOps)(formState.educationData, rowHasContent);
+      return plan.create.length === 0 && plan.update.length === 0 && plan.remove.length === 0;
+    },
     headerAction: {
       type: 'button',
       label: 'Add More',
@@ -429,11 +513,6 @@ async function createEducationEditDialog(event, store, subject, educationData, v
       if (viewerMode !== 'owner') {
         return _texts.ownerLoginRequiredDialogMessageText;
       }
-      const plan = (0, _rowState.summarizeRowOps)(formState.educationData, rowHasContent);
-      const hasChanges = plan.create.length > 0 || plan.update.length > 0 || plan.remove.length > 0;
-      if (!hasChanges) {
-        return 'No education changes detected.';
-      }
       const validation = validateEducationBeforeSave(formState.educationData);
       if (!validation.ok) {
         return validation.message || 'Please complete the required education fields.';
@@ -446,8 +525,7 @@ async function createEducationEditDialog(event, store, subject, educationData, v
       rerender();
     },
     formatSaveError: error => {
-      const message = error instanceof Error ? error.message : String(error);
-      return `${_texts.saveEducationUpdatesFailedPrefixText} ${message}`;
+      return error instanceof Error ? error.message : _texts.saveEducationUpdatesFailedMessageText;
     }
   });
   if (!result) return;

package/lib/sections/education/EducationSection.css

@@ -0,0 +1,133 @@
+/* Education section styles. */
+
+.education-card {
+  width: 100%;
+}
+
+.education-card__item {
+  margin: var(--spacing-xs) 0;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.education-card__item + .education-card__item {
+  margin-top: var(--spacing-sm);
+}
+
+.education-card__header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--spacing-sm);
+}
+
+.education-card__header h4,
+.education-card__header time,
+.education-card__header p {
+  margin: 0;
+}
+
+.education-card__period {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+}
+
+.education-card__organization {
+  font-weight: 600;
+  color: var(--color-primary);
+  margin: 0;
+}
+
+.education-card__description-wrap {
+  margin: 0;
+  position: relative;
+}
+
+.education-card__description-text {
+  margin: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: var(--line-height-base);
+  overflow: hidden;
+}
+
+.education-card__description-text--overflowing {
+  padding-right: 4.5em;
+}
+
+.education-card__description-text--expanded {
+  display: block;
+  -webkit-line-clamp: unset;
+  line-clamp: unset;
+  padding-right: 0;
+  overflow: visible;
+}
+
+.education-card__description-toggle {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-primary);
+  cursor: var(--profile-interactive-cursor, pointer);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-card-bg);
+  padding-left: 0.25em;
+}
+
+solid-ui-button.education-card__description-toggle {
+  --button-height-sm: 0;
+  --button-padding-sm: 0 0 0 0.25em;
+  --button-font-size-sm: var(--font-size-sm);
+  --button-line-height: var(--line-height-tight);
+  --button-background: none;
+  --button-border-width: 0;
+  --button-border: transparent;
+  --button-text: var(--color-primary);
+  --button-hover-background: none;
+  --button-hover-border: transparent;
+  --button-hover-text: var(--color-primary);
+}
+
+solid-ui-button.education-card__description-toggle::part(button) {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-card-bg);
+}
+
+.education-card__description-text--expanded + .education-card__description-toggle {
+  position: static;
+  display: inline;
+  padding-left: 0;
+}
+
+.education-card__description-text--expanded + solid-ui-button.education-card__description-toggle::part(button) {
+  position: static;
+  display: inline;
+  padding-left: 0;
+}
+
+:is(.profile-pane-host, .profile-pane-root)[data-layout='mobile'] .education-card__header {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+@media (max-width: 576px) {
+  .education-card__header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/lib/sections/education/EducationSection.d.ts

@@ -1,7 +1,8 @@
+import 'solid-ui/components/actions/button';
 import { EducationDetails } from './types';
 import { ViewerMode } from '../../types';
-import '../../styles/EducationCard.css';
+import './EducationSection.css';
 import { LiveStore, NamedNode } from 'rdflib';
-export declare const EducationCard: (educationData: EducationDetails[], viewerMode: ViewerMode) => import("lit-html").TemplateResult<1>;
+export declare const EducationCard: (educationData: EducationDetails[]) => import("lit-html").TemplateResult<1>;
 export declare function renderEducationSection(store: LiveStore, subject: NamedNode, educationData: EducationDetails[], viewerMode: ViewerMode, onSaved?: () => Promise<void> | void): import("lit-html").TemplateResult<1> | "";
 //# sourceMappingURL=EducationSection.d.ts.map

package/lib/sections/education/EducationSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EducationSection.d.ts","sourceRoot":"","sources":["../../../src/sections/education/EducationSection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAyE7C,eAAO,MAAM,aAAa,GACxB,eAAe,gBAAgB,EAAE,EACjC,YAAY,UAAU,yCAevB,CAAA;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,gBAAgB,EAAE,EACjC,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAiDrC"}
+{"version":3,"file":"EducationSection.d.ts","sourceRoot":"","sources":["../../../src/sections/education/EducationSection.ts"],"names":[],"mappings":"AACA,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AA4E7C,eAAO,MAAM,aAAa,GACxB,eAAe,gBAAgB,EAAE,yCAclC,CAAA;AAED,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,gBAAgB,EAAE,EACjC,UAAU,EAAE,UAAU,EACtB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,6CAqDrC"}

package/lib/sections/education/EducationSection.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.EducationCard = void 0;
 exports.renderEducationSection = renderEducationSection;
 var _litHtml = require("lit-html");
-require("../../styles/EducationCard.css");
+require("solid-ui/components/actions/button");
+require("./EducationSection.css");
 var _texts = require("../../texts");
 var _EducationEditDialog = require("./EducationEditDialog");
 var _sectionCardHelpers = require("../shared/sectionCardHelpers");
@@ -30,29 +31,32 @@ function renderEducationEntry(educationEntry, index) {
   const educationDescriptionId = `education-description-${index}`;
   const ariaDescribedBy = educationEntry.description ? `${educationPeriodId} ${educationOrgId} ${educationDescriptionId}` : `${educationPeriodId} ${educationOrgId}`;
   return (0, _litHtml.html)`
-    <li class="education" role="listitem" aria-labelledby=${schoolId} aria-describedby=${ariaDescribedBy}>
-      <div class="educationHeader">
+    <li class="education-card__item" role="listitem" aria-labelledby=${schoolId} aria-describedby=${ariaDescribedBy}>
+      <div class="education-card__header">
         <h4 id=${schoolId}>${educationEntry.school}</h4>
-        <p id=${educationPeriodId} class="educationPeriod">
+        <p id=${educationPeriodId} class="education-card__period">
           ${educationEntry.endDate ? (0, _litHtml.html)`<time datetime=${(0, _sectionCardHelpers.toMonthDateTime)(educationEntry.endDate)}>${formatEducationMonthYearFull(educationEntry.endDate)}</time>` : (0, _litHtml.html)`<span>End date unknown</span>`}
         </p>
       </div>
-      <p class="educationOrg" id=${educationOrgId}>
+      <p class="education-card__organization" id=${educationOrgId}>
         <strong>${educationEntry.degree}</strong>${educationEntry.location ? (0, _litHtml.html)` | ${educationEntry.location}` : ''}
       </p>
       ${educationEntry.description ? (0, _litHtml.html)`
-        <div class="cvDescriptionWrap">
-          <p class="cvDescriptionText" id=${educationDescriptionId}>${educationEntry.description}</p>
-          <button
+        <div class="education-card__description-wrap">
+          <p class="education-card__description-text" id=${educationDescriptionId}>${educationEntry.description}</p>
+          <solid-ui-button
             type="button"
-            class="cvDescriptionToggle"
+            variant="secondary"
+            size="sm"
+            label="...more"
+            class="education-card__description-toggle"
             aria-controls=${educationDescriptionId}
             aria-expanded="false"
             hidden
             @click=${_sectionCardHelpers.toggleDescription}
           >
             ...more
-          </button>
+          </solid-ui-button>
         </div>
       ` : ''}
     </li>
@@ -62,13 +66,12 @@ function renderEducation(educationData) {
   if (!educationData || !educationData.length) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`${educationData.map((educationEntry, index) => renderEducationEntry(educationEntry, index))}`;
 }
-const EducationCard = (educationData, viewerMode) => {
-  void viewerMode;
+const EducationCard = educationData => {
   const hasEducation = Array.isArray(educationData) && educationData.length > 0;
   if (!hasEducation) return (0, _litHtml.html)``;
   return (0, _litHtml.html)`
-    <article class="educationCard" aria-label="Education" data-testid="education">
-      <section class="educationSection">
+    <article class="education-card" aria-label="Education" data-testid="education">
+      <section class="education-card__section">
         <ul role="list" aria-label="Education in chronological order">
           ${renderEducation(educationData)}
         </ul>
@@ -79,7 +82,7 @@ const EducationCard = (educationData, viewerMode) => {
 exports.EducationCard = EducationCard;
 function renderEducationSection(store, subject, educationData, viewerMode, onSaved) {
   (0, _sectionCardHelpers.scheduleDescriptionOverflowCheck)();
-  const educationCard = EducationCard(educationData, viewerMode);
+  const educationCard = EducationCard(educationData);
   const educationDetails = educationData || [];
   const hasEducation = educationDetails && educationDetails.length > 0;
   const showSection = true;
@@ -87,38 +90,42 @@ function renderEducationSection(store, subject, educationData, viewerMode, onSav
   return showSection ? (0, _litHtml.html)`
     <section 
       aria-labelledby="education-heading" 
-      class="profile-section-collapsible section-bg" 
+      class="profile__section profile-section-collapsible profile-section-collapsible--inline-mobile-actions"
       role="region"
       tabindex="-1"
       data-expanded="false"
     >
       <header class="profile__section-header profile-section-collapsible__header">
         <h2 id="education-heading" tabindex="-1">${_texts.educationHeadingText}</h2>
-        <div class="profile-section-collapsible__actions flex-column">
+        <div class="profile-section-collapsible__actions">
           ${isOwner ? (0, _litHtml.html)`
-            <button
+            <solid-ui-button
               type="button"
-              class="profile__action-button profile-action-text flex-center profile-section-collapsible__edit-button"
+              variant="secondary"
+              size="sm"
+              class="profile__action-button profile-action-text profile-section-collapsible__edit-button"
               aria-label="Edit education details"
               @click=${event => (0, _EducationEditDialog.createEducationEditDialog)(event, store, subject, educationDetails, viewerMode, onSaved)}
             >
               <span class="profile-section-collapsible__edit-label">${_profileIcons.editIcon} Edit</span>
               <span class="profile-section-collapsible__edit-icon" aria-hidden="true">${_profileIcons.editIcon}</span>
-            </button>
+            </solid-ui-button>
           ` : (0, _litHtml.html)``}
-          <button
+          <solid-ui-button
             type="button"
-            class="inline-flex-row"
+            variant="icon"
+            size="sm"
+            class="profile-section-collapsible__toggle-button"
             aria-label="Toggle education section"
             aria-controls="education-panel"
             aria-expanded="false"
             @click=${_collapsibleSection.toggleCollapsibleSection}
           >
-            <span class="profile-section-collapsible__chevron" aria-hidden="true">⌄</span>
-          </button>
+            <span slot="icon" class="profile-section-collapsible__chevron" aria-hidden="true">${_profileIcons.chevronDownIcon}</span>
+          </solid-ui-button>
         </div>
       </header>
-      <div id="education-panel" class="profile-section-collapsible__content" aria-hidden="true">
+      <div id="education-panel" class="profile-section-collapsible__content">
         ${hasEducation ? educationCard : (0, _litHtml.html)`<p>No education details added yet.</p>`}
       </div>
     </section>

package/lib/sections/education/mutations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/education/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAqB,MAAM,QAAQ,CAAA;AAEhE,OAAO,EAAE,qBAAqB,EAAgB,MAAM,SAAS,CAAA;AAgE7D,wBAAsB,yBAAyB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,qBAAqB,iBAOxH"}
+{"version":3,"file":"mutations.d.ts","sourceRoot":"","sources":["../../../src/sections/education/mutations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAqB,MAAM,QAAQ,CAAA;AAEhE,OAAO,EAAE,qBAAqB,EAAgB,MAAM,SAAS,CAAA;AAyE7D,wBAAsB,yBAAyB,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,qBAAqB,iBAQxH"}