Addition of optional metaText details for Feat/select-options

packages/crayons-core/src/components/select-option/select-option.e2e.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-debugger */
 import { newE2EPage } from '@stencil/core/testing';
 
 describe('fw-select-option', () => {
@@ -126,4 +127,29 @@ describe('fw-select-option', () => {
  expect(metaText.email).toBe('author@example.com');
  expect(metaText.mobile).toBe('123-456-7890');
  });
+
+ it('should render fw-select-option with no variant and verify attributes', async () => {
+ const page = await newE2EPage();
+
+ await page.setContent(
+ `<fw-select-option 
+ text="This is a select option description" 
+ subText="This is selected option subtext" 
+ data-meta-text='{"name": "Author Name", "email": "author@example.com", "mobile": "123-456-7890"}'>
+ </fw-select-option>`
+ );
+
+ await page.waitForChanges();
+
+ const text = await page.find('fw-select-option >>> .description');
+ expect(text).toBeTruthy();
+ expect(text.innerText).toBe('This is a select option description');
+
+ const metaText = await page.$eval('fw-select-option', (elm: any) =>
+ JSON.parse(elm.getAttribute('data-meta-text'))
+ );
+ expect(metaText.name).toBe('Author Name');
+ expect(metaText.email).toBe('author@example.com');
+ expect(metaText.mobile).toBe('123-456-7890');
+ });
 });

packages/crayons-core/src/components/select-option/select-option.scss

@@ -133,3 +133,9 @@ $bg-color-disabled: $color-smoke-25;
  width: 1.25rem;
  height: 1.25rem;
 }
+
+.conversation-icon {
+ display: flex;
+ align-self: flex-start;
+ min-height: 30px;
+}

packages/crayons-core/src/components/select-option/select-option.tsx

@@ -188,8 +188,8 @@ export class SelectOption {
  return (
  <Fragment>
  {checkbox}
- {this.createIcon()}
- {this.createConversationDescription()}
+ {this.createConversationIcon()}
+ {description}
  {selectedIconContainer}
  </Fragment>
  );
@@ -205,6 +205,24 @@ export class SelectOption {
  }
 
  createDescription() {
+ if (this.metaText) {
+ const metaTextDetails = [];
+ if (this.metaText?.name) metaTextDetails.push(this.metaText.name);
+ if (this.metaText?.email) metaTextDetails.push(this.metaText.email);
+ if (this.metaText?.mobile) metaTextDetails.push(this.metaText.mobile);
+
+ return (
+ <div class={'description ' + 'icon-margin '}>
+ <span class='description-text'>{this.text}</span>
+ {this.subText && (
+ <span class='description-subText-conversation'>{this.subText}</span>
+ )}
+ <span class='description-metaText-details'>
+ {metaTextDetails?.join(' | ')}
+ </span>
+ </div>
+ );
+ }
  return this.subText ? (
  <div
  class={
@@ -227,23 +245,8 @@ export class SelectOption {
  );
  }
 
- createConversationDescription() {
- const metaTextDetails = [];
- if (this.metaText.name) metaTextDetails.push(this.metaText.name);
- if (this.metaText.email) metaTextDetails.push(this.metaText.email);
- if (this.metaText.mobile) metaTextDetails.push(this.metaText.mobile);
-
- return this.subText ? (
- <div class={'description ' + 'icon-margin '}>
- <span class='description-text'>{this.text}</span>
- <span class='description-subText-conversation'>{this.subText}</span>
- <span class='description-metaText-details'>
- {metaTextDetails?.join(' | ')}
- </span>
- </div>
- ) : (
- <span class={'description ' + 'icon-margin'}>{this.text}</span>
- );
+ createConversationIcon() {
+ return <div class='conversation-icon'>{this.createIcon()}</div>;
  }
 
  createIcon() {