Addition of optional metaText details for Feat/select-options

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

@@ -126,4 +126,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() {