From 8f3ff040ca36faf589ac22393d02f32a305eb4d9 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 5 Aug 2024 16:45:37 +0530 Subject: [PATCH 01/26] feat: introduction of new variations - conversation to create new select option with author details --- .../select-option/select-option.scss | 12 +++++++ .../select-option/select-option.tsx | 34 ++++++++++++++++++- 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.scss b/packages/crayons-core/src/components/select-option/select-option.scss index 5642ef724..3009d970e 100644 --- a/packages/crayons-core/src/components/select-option/select-option.scss +++ b/packages/crayons-core/src/components/select-option/select-option.scss @@ -87,6 +87,18 @@ $bg-color-disabled: $color-smoke-25; color: $color-smoke-700; } + &-subText-conversation { + font-weight: $font-weight-400; + font-size: $font-size-14; + color: $color-smoke-700; + } + + &-author-details { + font-weight: $font-weight-400; + font-size: $font-size-12; + color: $color-smoke-700; + } + &.icon-margin { margin-inline-start: 18px; } diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index e360fc7e5..e670ed8d3 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -10,7 +10,7 @@ import { Method, Listen, } from '@stencil/core'; -import { DropdownVariant } from '../../utils/types'; +import { Author, DropdownVariant } from '../../utils/types'; /** * @parent select @@ -61,6 +61,10 @@ export class SelectOption { * Second line text can be description etc. */ @Prop({ reflect: true }) subText: string; + /** + * Third line text in conversation can be author details etc. + */ + @Prop({ reflect: true }) author: Author; /** * Used in grouped list, provides the group in which the option belongs */ @@ -180,6 +184,15 @@ export class SelectOption { {selectedIconContainer} ); + case 'conversation': + return ( + + {checkbox} + {this.createIcon()} + {this.createConversationDescription()} + {selectedIconContainer} + + ); default: return ( @@ -214,6 +227,25 @@ export class SelectOption { ); } + createConversationDescription() { + const authorDetails = []; + if (this.author.name) authorDetails.push(this.author.name); + if (this.author.email) authorDetails.push(this.author.email); + if (this.author.phone) authorDetails.push(this.author.phone); + + return this.subText ? ( +
+ {this.text} + {this.subText} + + {authorDetails?.join(' | ')} + +
+ ) : ( + {this.text} + ); + } + createIcon() { return ; } From 54e5a0dc4e60bfbace233345b6f9513902030664 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 5 Aug 2024 16:46:40 +0530 Subject: [PATCH 02/26] feat: addition of dropdownvariant conversations with interface defined --- packages/crayons-core/src/components.d.ts | 10 +++++++++- packages/crayons-core/src/utils/types.ts | 8 +++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts index fa9090f03..3d82dd1cc 100644 --- a/packages/crayons-core/src/components.d.ts +++ b/packages/crayons-core/src/components.d.ts @@ -7,7 +7,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { AccordionToggleEvent } from "./components/accordion/accordion"; import { CountryCode } from "libphonenumber-js/types"; -import { DataTableAction, DataTableActionWithGraphics, DataTableColumn, DataTableRow, DropdownVariant, PopoverPlacementType, PopoverTriggerType, TagState, TagVariant, WidthStyles } from "./utils/types"; +import { Author, DataTableAction, DataTableActionWithGraphics, DataTableColumn, DataTableRow, DropdownVariant, PopoverPlacementType, PopoverTriggerType, TagState, TagVariant, WidthStyles } from "./utils/types"; import { InitialUploaderFile, UploaderFile } from "./components/file-uploader-2/file-uploader2-util"; import { FormErrors, FormRequired, FormSubmit, FormValues } from "./components/form/form-declaration"; import { ToastOptions } from "./components/toast/toast-util"; @@ -1967,6 +1967,10 @@ export namespace Components { * Whether clicking on option selects it. */ "allowSelect": boolean; + /** + * Third line text in conversation can be author details etc. + */ + "author": Author; /** * Place a checkbox. */ @@ -5071,6 +5075,10 @@ declare namespace LocalJSX { * Whether clicking on option selects it. */ "allowSelect"?: boolean; + /** + * Third line text in conversation can be author details etc. + */ + "author"?: Author; /** * Place a checkbox. */ diff --git a/packages/crayons-core/src/utils/types.ts b/packages/crayons-core/src/utils/types.ts index 53d89632c..d9c84b8d1 100644 --- a/packages/crayons-core/src/utils/types.ts +++ b/packages/crayons-core/src/utils/types.ts @@ -4,7 +4,7 @@ export type TagVariant = 'standard' | 'avatar'; export type TagState = 'normal' | 'error' | 'transparent'; -export type DropdownVariant = 'standard' | 'icon' | 'avatar'; +export type DropdownVariant = 'standard' | 'icon' | 'avatar' | 'conversation'; export type PopoverPlacementType = | 'top-start' @@ -104,3 +104,9 @@ export type DataTableActionWithGraphics = { handler: (row: DataTableRow) => any; graphicsProps?: GraphicsProps; }; + +export type Author = { + name?: string; + email?: string; + phone?: string; +}; From 17db7a4957bb41243ff9bfa4423c9271f073bae4 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 5 Aug 2024 16:47:10 +0530 Subject: [PATCH 03/26] test: addition of select options test cases --- .../select-option/select-option.e2e.ts | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 0016ef1ba..3eca103dc 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -98,4 +98,36 @@ describe('fw-select-option', () => { expect(text).toBeTruthy(); expect(text.innerText).toBe('This is a select option'); }); + + it('should render text when variant is conversaton', async () => { + const page = await newE2EPage(); + + await page.setContent( + '' + ); + + await page.$eval('fw-select-option', (elm: any) => { + elm.variant = 'icon'; + }); + await page.waitForChanges(); + + await page.$eval('fw-select-option', (elm: any) => { + elm.variant = undefined; + }); + 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 authorName = await page.$eval('fw-select-option', (elm: any) => + elm.getAttribute('author.name') + ); + expect(authorName).toBe('Author Name'); + + const authorPhone = await page.$eval('fw-select-option', (elm: any) => + elm.getAttribute('author.phone') + ); + expect(authorPhone).toBe('123-456-7890'); + }); }); From f9ed45d2e96e997c629ea0748338ba8c0cae1bdd Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 5 Aug 2024 16:47:30 +0530 Subject: [PATCH 04/26] docs: addition of documentation related to select-options --- .../src/components/options-list/readme.md | 2 +- .../src/components/select-option/readme.md | 35 ++++++++++--------- .../src/components/select/readme.md | 2 +- 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/crayons-core/src/components/options-list/readme.md b/packages/crayons-core/src/components/options-list/readme.md index 5986719db..3f99f7e27 100644 --- a/packages/crayons-core/src/components/options-list/readme.md +++ b/packages/crayons-core/src/components/options-list/readme.md @@ -442,7 +442,7 @@ export default ListOptions; | `selectedOptions` | -- | The option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any[]` | `[]` | | `validateNewOption` | -- | Works only when 'isCreatable' is selected. Function to validate the newly created value. Should return true if new option is valid or false if invalid. | `(value: string) => boolean` | `undefined` | | `value` | `value` | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any` | `''` | -| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` | +| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "conversation" \| "icon" \| "standard"` | `'standard'` | ## Events diff --git a/packages/crayons-core/src/components/select-option/readme.md b/packages/crayons-core/src/components/select-option/readme.md index dceeed962..588b1dfb5 100644 --- a/packages/crayons-core/src/components/select-option/readme.md +++ b/packages/crayons-core/src/components/select-option/readme.md @@ -104,23 +104,24 @@ function App() { ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------ | -| `allowDeselect` | `allow-deselect` | Whether clicking on the already selected option disables it. | `boolean` | `true` | -| `allowSelect` | `allow-select` | Whether clicking on option selects it. | `boolean` | `true` | -| `checkbox` | `checkbox` | Place a checkbox. | `boolean` | `false` | -| `disabled` | `disabled` | Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | -| `graphicsProps` | `graphics-props` | The props for the graphics variant. ex., icon props in case of graphicsType = 'icon' | `any` | `undefined` | -| `groupName` | `group-name` | Used in grouped list, provides the group in which the option belongs | `string` | `undefined` | -| `hideTick` | `hide-tick` | Hide tick mark icon | `boolean` | `false` | -| `html` | `html` | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true. | `boolean` | `false` | -| `htmlContent` | `html-content` | HTML content that is displayed as the option. | `string` | `undefined` | -| `optionText` | `option-text` | Alternate text displayed on the interface, in place of the actual HTML content. | `string` | `undefined` | -| `selected` | `selected` | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | -| `subText` | `sub-text` | Second line text can be description etc. | `string` | `undefined` | -| `text` | `text` | The text to be displayed in the option. | `string` | `undefined` | -| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `number \| string` | `undefined` | -| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------ | +| `allowDeselect` | `allow-deselect` | Whether clicking on the already selected option disables it. | `boolean` | `true` | +| `allowSelect` | `allow-select` | Whether clicking on option selects it. | `boolean` | `true` | +| `author` | -- | Third line text in conversation can be author details etc. | `{ name?: string; email?: string; phone?: string; }` | `undefined` | +| `checkbox` | `checkbox` | Place a checkbox. | `boolean` | `false` | +| `disabled` | `disabled` | Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | +| `graphicsProps` | `graphics-props` | The props for the graphics variant. ex., icon props in case of graphicsType = 'icon' | `any` | `undefined` | +| `groupName` | `group-name` | Used in grouped list, provides the group in which the option belongs | `string` | `undefined` | +| `hideTick` | `hide-tick` | Hide tick mark icon | `boolean` | `false` | +| `html` | `html` | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true. | `boolean` | `false` | +| `htmlContent` | `html-content` | HTML content that is displayed as the option. | `string` | `undefined` | +| `optionText` | `option-text` | Alternate text displayed on the interface, in place of the actual HTML content. | `string` | `undefined` | +| `selected` | `selected` | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | +| `subText` | `sub-text` | Second line text can be description etc. | `string` | `undefined` | +| `text` | `text` | The text to be displayed in the option. | `string` | `undefined` | +| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `number \| string` | `undefined` | +| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "conversation" \| "icon" \| "standard"` | `'standard'` | ## Events diff --git a/packages/crayons-core/src/components/select/readme.md b/packages/crayons-core/src/components/select/readme.md index 7eb4583de..9f9dd5421 100644 --- a/packages/crayons-core/src/components/select/readme.md +++ b/packages/crayons-core/src/components/select/readme.md @@ -1973,7 +1973,7 @@ Refer the [css variables](#css-custom-properties) for modifying the appearance o | `optionValuePath` | `option-value-path` | Key for determining the value for a given option | `string` | `'value'` | | `options` | `options` | The data for the select component, the options will be of type array of fw-select-options. | `any` | `undefined` | | `optionsPlacement` | `options-placement` | Placement of the options list with respect to select. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` | -| `optionsVariant` | `options-variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` | +| `optionsVariant` | `options-variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "conversation" \| "icon" \| "standard"` | `'standard'` | | `placeholder` | `placeholder` | Text displayed in the list box before an option is selected. | `string` | `undefined` | | `readonly` | `readonly` | If true, the user cannot modify the default value selected. If the attribute's value is undefined, the value is set to true. | `boolean` | `false` | | `required` | `required` | Specifies the select field as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | From b455ffb9192ff586c6a22053fe41b11891898c01 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Tue, 6 Aug 2024 11:37:47 +0530 Subject: [PATCH 05/26] feat: handle the scenario when imageSrc is present --- .../src/components/select-option/select-option.scss | 5 +++++ .../src/components/select-option/select-option.tsx | 7 +++++++ 2 files changed, 12 insertions(+) diff --git a/packages/crayons-core/src/components/select-option/select-option.scss b/packages/crayons-core/src/components/select-option/select-option.scss index 3009d970e..8466e985a 100644 --- a/packages/crayons-core/src/components/select-option/select-option.scss +++ b/packages/crayons-core/src/components/select-option/select-option.scss @@ -128,3 +128,8 @@ $bg-color-disabled: $color-smoke-25; display: flex; } } + +.image-icon-dimension-standard { + width: 1.25rem; + height: 1.25rem; +} diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index e670ed8d3..bc1ae0972 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -247,6 +247,13 @@ export class SelectOption { } createIcon() { + const { imageSrc } = this.graphicsProps; + + if (imageSrc) { + return ( + icon + ); + } return ; } From bce20c0e881beaf6998401a12c0f811360770568 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Fri, 9 Aug 2024 11:27:21 +0530 Subject: [PATCH 06/26] fix: changes to metaText from author for generic text in select option --- packages/crayons-core/src/components.d.ts | 18 +++++----- .../src/components/select-option/readme.md | 36 +++++++++---------- .../select-option/select-option.e2e.ts | 6 ++-- .../select-option/select-option.tsx | 14 ++++---- packages/crayons-core/src/utils/types.ts | 4 +-- 5 files changed, 39 insertions(+), 39 deletions(-) diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts index 3d82dd1cc..da7b0efc0 100644 --- a/packages/crayons-core/src/components.d.ts +++ b/packages/crayons-core/src/components.d.ts @@ -7,7 +7,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { AccordionToggleEvent } from "./components/accordion/accordion"; import { CountryCode } from "libphonenumber-js/types"; -import { Author, DataTableAction, DataTableActionWithGraphics, DataTableColumn, DataTableRow, DropdownVariant, PopoverPlacementType, PopoverTriggerType, TagState, TagVariant, WidthStyles } from "./utils/types"; +import { DataTableAction, DataTableActionWithGraphics, DataTableColumn, DataTableRow, DropdownVariant, MetaText, PopoverPlacementType, PopoverTriggerType, TagState, TagVariant, WidthStyles } from "./utils/types"; import { InitialUploaderFile, UploaderFile } from "./components/file-uploader-2/file-uploader2-util"; import { FormErrors, FormRequired, FormSubmit, FormValues } from "./components/form/form-declaration"; import { ToastOptions } from "./components/toast/toast-util"; @@ -1967,10 +1967,6 @@ export namespace Components { * Whether clicking on option selects it. */ "allowSelect": boolean; - /** - * Third line text in conversation can be author details etc. - */ - "author": Author; /** * Place a checkbox. */ @@ -1999,6 +1995,10 @@ export namespace Components { * HTML content that is displayed as the option. */ "htmlContent"?: string; + /** + * Third line text in conversation can be author details etc. + */ + "metaText": MetaText; /** * Alternate text displayed on the interface, in place of the actual HTML content. */ @@ -5075,10 +5075,6 @@ declare namespace LocalJSX { * Whether clicking on option selects it. */ "allowSelect"?: boolean; - /** - * Third line text in conversation can be author details etc. - */ - "author"?: Author; /** * Place a checkbox. */ @@ -5107,6 +5103,10 @@ declare namespace LocalJSX { * HTML content that is displayed as the option. */ "htmlContent"?: string; + /** + * Third line text in conversation can be author details etc. + */ + "metaText"?: MetaText; /** * Triggered when an option loses focus. */ diff --git a/packages/crayons-core/src/components/select-option/readme.md b/packages/crayons-core/src/components/select-option/readme.md index 588b1dfb5..6ed788b75 100644 --- a/packages/crayons-core/src/components/select-option/readme.md +++ b/packages/crayons-core/src/components/select-option/readme.md @@ -104,24 +104,24 @@ function App() { ## Properties -| Property | Attribute | Description | Type | Default | -| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------ | -| `allowDeselect` | `allow-deselect` | Whether clicking on the already selected option disables it. | `boolean` | `true` | -| `allowSelect` | `allow-select` | Whether clicking on option selects it. | `boolean` | `true` | -| `author` | -- | Third line text in conversation can be author details etc. | `{ name?: string; email?: string; phone?: string; }` | `undefined` | -| `checkbox` | `checkbox` | Place a checkbox. | `boolean` | `false` | -| `disabled` | `disabled` | Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | -| `graphicsProps` | `graphics-props` | The props for the graphics variant. ex., icon props in case of graphicsType = 'icon' | `any` | `undefined` | -| `groupName` | `group-name` | Used in grouped list, provides the group in which the option belongs | `string` | `undefined` | -| `hideTick` | `hide-tick` | Hide tick mark icon | `boolean` | `false` | -| `html` | `html` | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true. | `boolean` | `false` | -| `htmlContent` | `html-content` | HTML content that is displayed as the option. | `string` | `undefined` | -| `optionText` | `option-text` | Alternate text displayed on the interface, in place of the actual HTML content. | `string` | `undefined` | -| `selected` | `selected` | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | -| `subText` | `sub-text` | Second line text can be description etc. | `string` | `undefined` | -| `text` | `text` | The text to be displayed in the option. | `string` | `undefined` | -| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `number \| string` | `undefined` | -| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "conversation" \| "icon" \| "standard"` | `'standard'` | +| Property | Attribute | Description | Type | Default | +| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------------ | +| `allowDeselect` | `allow-deselect` | Whether clicking on the already selected option disables it. | `boolean` | `true` | +| `allowSelect` | `allow-select` | Whether clicking on option selects it. | `boolean` | `true` | +| `checkbox` | `checkbox` | Place a checkbox. | `boolean` | `false` | +| `disabled` | `disabled` | Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | +| `graphicsProps` | `graphics-props` | The props for the graphics variant. ex., icon props in case of graphicsType = 'icon' | `any` | `undefined` | +| `groupName` | `group-name` | Used in grouped list, provides the group in which the option belongs | `string` | `undefined` | +| `hideTick` | `hide-tick` | Hide tick mark icon | `boolean` | `false` | +| `html` | `html` | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true. | `boolean` | `false` | +| `htmlContent` | `html-content` | HTML content that is displayed as the option. | `string` | `undefined` | +| `metaText` | -- | Third line text in conversation can be author details etc. | `{ name?: string; email?: string; mobile?: string; }` | `undefined` | +| `optionText` | `option-text` | Alternate text displayed on the interface, in place of the actual HTML content. | `string` | `undefined` | +| `selected` | `selected` | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` | +| `subText` | `sub-text` | Second line text can be description etc. | `string` | `undefined` | +| `text` | `text` | The text to be displayed in the option. | `string` | `undefined` | +| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `number \| string` | `undefined` | +| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "conversation" \| "icon" \| "standard"` | `'standard'` | ## Events diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 3eca103dc..b00a16b7b 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -125,9 +125,9 @@ describe('fw-select-option', () => { ); expect(authorName).toBe('Author Name'); - const authorPhone = await page.$eval('fw-select-option', (elm: any) => - elm.getAttribute('author.phone') + const authorMobile = await page.$eval('fw-select-option', (elm: any) => + elm.getAttribute('author.mobile') ); - expect(authorPhone).toBe('123-456-7890'); + expect(authorMobile).toBe('123-456-7890'); }); }); diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index bc1ae0972..fe9859c3b 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -10,7 +10,7 @@ import { Method, Listen, } from '@stencil/core'; -import { Author, DropdownVariant } from '../../utils/types'; +import { DropdownVariant, MetaText } from '../../utils/types'; /** * @parent select @@ -64,7 +64,7 @@ export class SelectOption { /** * Third line text in conversation can be author details etc. */ - @Prop({ reflect: true }) author: Author; + @Prop({ reflect: true }) metaText: MetaText; /** * Used in grouped list, provides the group in which the option belongs */ @@ -228,17 +228,17 @@ export class SelectOption { } createConversationDescription() { - const authorDetails = []; - if (this.author.name) authorDetails.push(this.author.name); - if (this.author.email) authorDetails.push(this.author.email); - if (this.author.phone) authorDetails.push(this.author.phone); + 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 ? (
{this.text} {this.subText} - {authorDetails?.join(' | ')} + {metaTextDetails?.join(' | ')}
) : ( diff --git a/packages/crayons-core/src/utils/types.ts b/packages/crayons-core/src/utils/types.ts index d9c84b8d1..529be9df5 100644 --- a/packages/crayons-core/src/utils/types.ts +++ b/packages/crayons-core/src/utils/types.ts @@ -105,8 +105,8 @@ export type DataTableActionWithGraphics = { graphicsProps?: GraphicsProps; }; -export type Author = { +export type MetaText = { name?: string; email?: string; - phone?: string; + mobile?: string; }; From ef046bde665872275cd56abb8b5a47d3dcd4a255 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Fri, 9 Aug 2024 11:32:58 +0530 Subject: [PATCH 07/26] fix: text cases changes --- .../src/components/select-option/select-option.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index b00a16b7b..d0abd0665 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -103,7 +103,7 @@ describe('fw-select-option', () => { const page = await newE2EPage(); await page.setContent( - '' + '' ); await page.$eval('fw-select-option', (elm: any) => { From d03e4db0cffa3871927e1b1e59a630887a150d0a Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Fri, 9 Aug 2024 16:21:14 +0530 Subject: [PATCH 08/26] updated readme and minor changes --- .../crayons-core/src/components/select-option/readme.md | 6 ++++++ .../src/components/select-option/select-option.e2e.ts | 6 +++--- .../src/components/select-option/select-option.scss | 2 +- .../src/components/select-option/select-option.tsx | 4 ++-- 4 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/readme.md b/packages/crayons-core/src/components/select-option/readme.md index 6ed788b75..ae06fb34c 100644 --- a/packages/crayons-core/src/components/select-option/readme.md +++ b/packages/crayons-core/src/components/select-option/readme.md @@ -56,6 +56,12 @@ function App() { text="Checkbox Variant Without Tick Mark" sub-text="This is multiline checkbox element" > + ``` #### Usage - Variants diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index d0abd0665..139336641 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -103,7 +103,7 @@ describe('fw-select-option', () => { const page = await newE2EPage(); await page.setContent( - '' + '' ); await page.$eval('fw-select-option', (elm: any) => { @@ -121,12 +121,12 @@ describe('fw-select-option', () => { expect(text.innerText).toBe('This is a select option description'); const authorName = await page.$eval('fw-select-option', (elm: any) => - elm.getAttribute('author.name') + elm.getAttribute('metaText.name') ); expect(authorName).toBe('Author Name'); const authorMobile = await page.$eval('fw-select-option', (elm: any) => - elm.getAttribute('author.mobile') + elm.getAttribute('metaText.mobile') ); expect(authorMobile).toBe('123-456-7890'); }); diff --git a/packages/crayons-core/src/components/select-option/select-option.scss b/packages/crayons-core/src/components/select-option/select-option.scss index 8466e985a..48f27fbda 100644 --- a/packages/crayons-core/src/components/select-option/select-option.scss +++ b/packages/crayons-core/src/components/select-option/select-option.scss @@ -93,7 +93,7 @@ $bg-color-disabled: $color-smoke-25; color: $color-smoke-700; } - &-author-details { + &-metaText-details { font-weight: $font-weight-400; font-size: $font-size-12; color: $color-smoke-700; diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index fe9859c3b..fd45bb87b 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -62,7 +62,7 @@ export class SelectOption { */ @Prop({ reflect: true }) subText: string; /** - * Third line text in conversation can be author details etc. + * Third line text in conversation can be metaText additional details etc. */ @Prop({ reflect: true }) metaText: MetaText; /** @@ -237,7 +237,7 @@ export class SelectOption {
{this.text} {this.subText} - + {metaTextDetails?.join(' | ')}
From 79d866d658cbd74fdb465e732d17feef4389b917 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Fri, 9 Aug 2024 16:59:49 +0530 Subject: [PATCH 09/26] readme documentation changes --- packages/crayons-core/src/components.d.ts | 4 +- .../src/components/select-option/readme.md | 6 -- .../select-option/select-option.e2e.ts | 30 ++++---- .../src/components/select/readme.md | 69 +++++++++++++++++++ 4 files changed, 86 insertions(+), 23 deletions(-) diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts index da7b0efc0..cf77e40c0 100644 --- a/packages/crayons-core/src/components.d.ts +++ b/packages/crayons-core/src/components.d.ts @@ -1996,7 +1996,7 @@ export namespace Components { */ "htmlContent"?: string; /** - * Third line text in conversation can be author details etc. + * Third line text in conversation can be metaText additional details etc. */ "metaText": MetaText; /** @@ -5104,7 +5104,7 @@ declare namespace LocalJSX { */ "htmlContent"?: string; /** - * Third line text in conversation can be author details etc. + * Third line text in conversation can be metaText additional details etc. */ "metaText"?: MetaText; /** diff --git a/packages/crayons-core/src/components/select-option/readme.md b/packages/crayons-core/src/components/select-option/readme.md index ae06fb34c..6ed788b75 100644 --- a/packages/crayons-core/src/components/select-option/readme.md +++ b/packages/crayons-core/src/components/select-option/readme.md @@ -56,12 +56,6 @@ function App() { text="Checkbox Variant Without Tick Mark" sub-text="This is multiline checkbox element" > - ``` #### Usage - Variants diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 139336641..e73d91975 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -99,20 +99,19 @@ describe('fw-select-option', () => { expect(text.innerText).toBe('This is a select option'); }); - it('should render text when variant is conversaton', async () => { + it('should render fw-select-option with conversation variant and verify attributes', async () => { const page = await newE2EPage(); await page.setContent( - '' + ` + ` ); await page.$eval('fw-select-option', (elm: any) => { - elm.variant = 'icon'; - }); - await page.waitForChanges(); - - await page.$eval('fw-select-option', (elm: any) => { - elm.variant = undefined; + elm.variant = 'conversation'; }); await page.waitForChanges(); @@ -120,14 +119,15 @@ describe('fw-select-option', () => { expect(text).toBeTruthy(); expect(text.innerText).toBe('This is a select option description'); - const authorName = await page.$eval('fw-select-option', (elm: any) => - elm.getAttribute('metaText.name') - ); - expect(authorName).toBe('Author Name'); + const subText = await page.find('fw-select-option >>> .subtext'); + expect(subText).toBeTruthy(); + expect(subText.innerText).toBe('This is selected option subtext'); - const authorMobile = await page.$eval('fw-select-option', (elm: any) => - elm.getAttribute('metaText.mobile') + const metaText = await page.$eval('fw-select-option', (elm: any) => + JSON.parse(elm.getAttribute('data-meta-text')) ); - expect(authorMobile).toBe('123-456-7890'); + expect(metaText.name).toBe('Author Name'); + expect(metaText.email).toBe('author@example.com'); + expect(metaText.mobile).toBe('123-456-7890'); }); }); diff --git a/packages/crayons-core/src/components/select/readme.md b/packages/crayons-core/src/components/select/readme.md index 9f9dd5421..86df1d8d5 100644 --- a/packages/crayons-core/src/components/select/readme.md +++ b/packages/crayons-core/src/components/select/readme.md @@ -1801,6 +1801,75 @@ function App() { ``` +### Demo with conversation variant + +```html live + + + + +``` + From 506163cb31b25cb182c9036a8a783384af42cf2f Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Fri, 9 Aug 2024 17:09:22 +0530 Subject: [PATCH 10/26] select option test cases added --- .../src/components/select-option/select-option.e2e.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index e73d91975..947810d35 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -119,10 +119,6 @@ describe('fw-select-option', () => { expect(text).toBeTruthy(); expect(text.innerText).toBe('This is a select option description'); - const subText = await page.find('fw-select-option >>> .subtext'); - expect(subText).toBeTruthy(); - expect(subText.innerText).toBe('This is selected option subtext'); - const metaText = await page.$eval('fw-select-option', (elm: any) => JSON.parse(elm.getAttribute('data-meta-text')) ); From 14514e63b03dc8c2454bcd1738fe2b3493eaae4e Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Fri, 20 Sep 2024 14:11:59 +0530 Subject: [PATCH 11/26] addition of metaText to be conditionally rendered in select-option --- .../components/select-option/select-option.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index fd45bb87b..a5d8cbb32 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -205,6 +205,24 @@ export class SelectOption { } createDescription() { + if ((this.subText && this.metaText) || 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 ( +
+ {this.text} + {this.subText && ( + {this.subText} + )} + + {metaTextDetails?.join(' | ')} + +
+ ); + } return this.subText ? (
Date: Fri, 20 Sep 2024 14:37:25 +0530 Subject: [PATCH 12/26] conditionally checking of the metaText details before adding to the metaTextDetails --- .../src/components/select-option/select-option.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index a5d8cbb32..86c76b7a0 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -207,9 +207,9 @@ export class SelectOption { createDescription() { if ((this.subText && this.metaText) || 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); + 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 (
From 83996301dc07c47b61ea3d6104c181d720db7e00 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 23 Sep 2024 17:57:44 +0530 Subject: [PATCH 13/26] addition of conversation icon for conversation section --- .../src/components/select-option/select-option.scss | 6 ++++++ .../src/components/select-option/select-option.tsx | 10 +++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.scss b/packages/crayons-core/src/components/select-option/select-option.scss index 48f27fbda..e1a86ef95 100644 --- a/packages/crayons-core/src/components/select-option/select-option.scss +++ b/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; +} diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index 86c76b7a0..0d918d697 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -188,7 +188,7 @@ export class SelectOption { return ( {checkbox} - {this.createIcon()} + {this.createConversationIcon()} {this.createConversationDescription()} {selectedIconContainer} @@ -264,6 +264,14 @@ export class SelectOption { ); } + createConversationIcon() { + return ( +
+ +
+ ); + } + createIcon() { const { imageSrc } = this.graphicsProps; From 7fc89bd47a879388ef00cccdaa564a4a5668e6b7 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 30 Sep 2024 10:57:17 +0530 Subject: [PATCH 14/26] Update on the removal of createConversation Description --- .../select-option/select-option.tsx | 21 +------------------ 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index 0d918d697..6a1bd2ecb 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -189,7 +189,7 @@ export class SelectOption { {checkbox} {this.createConversationIcon()} - {this.createConversationDescription()} + {this.createDescription()} {selectedIconContainer} ); @@ -245,25 +245,6 @@ 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 ? ( -
- {this.text} - {this.subText} - - {metaTextDetails?.join(' | ')} - -
- ) : ( - {this.text} - ); - } - createConversationIcon() { return (
From e28012769f712ca8fa27e0a5dbf2d78958065138 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 30 Sep 2024 11:04:24 +0530 Subject: [PATCH 15/26] fix: minor update on createDescription changes --- .../crayons-core/src/components/select-option/select-option.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index 6a1bd2ecb..228028937 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -189,7 +189,7 @@ export class SelectOption { {checkbox} {this.createConversationIcon()} - {this.createDescription()} + {description} {selectedIconContainer} ); From d8d0fa936d5fc157103550f028fabea46424910f Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 30 Sep 2024 11:15:24 +0530 Subject: [PATCH 16/26] changes on review comments --- .../src/components/select-option/select-option.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index 228028937..848214d08 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -246,11 +246,7 @@ export class SelectOption { } createConversationIcon() { - return ( -
- -
- ); + return
{this.createIcon()}
; } createIcon() { From e784c9b3c4f2a13f6dee16cce807d9328ac5f7d6 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 30 Sep 2024 11:42:45 +0530 Subject: [PATCH 17/26] Update packages/crayons-core/src/components/select-option/select-option.tsx Co-authored-by: rihansiddhi --- .../crayons-core/src/components/select-option/select-option.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index 848214d08..6216e8996 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -205,7 +205,7 @@ export class SelectOption { } createDescription() { - if ((this.subText && this.metaText) || this.metaText) { + if (this.metaText) { const metaTextDetails = []; if (this.metaText?.name) metaTextDetails.push(this.metaText.name); if (this.metaText?.email) metaTextDetails.push(this.metaText.email); From 15333843f3288e41a216b552a12a90fe3225873e Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 30 Sep 2024 14:28:34 +0530 Subject: [PATCH 18/26] test: addition of test cases for icon variation --- .../select-option/select-option.e2e.ts | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 947810d35..2f9cec075 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -126,4 +126,32 @@ 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 conversation variant and verify attributes', async () => { + const page = await newE2EPage(); + + await page.setContent( + ` + ` + ); + + await page.$eval('fw-select-option', (elm: any) => { + elm.variant = 'icon'; + }); + 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'); + }); }); From 232a6ece0c6f3802dd276dd716f7273a104a6ccb Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 30 Sep 2024 16:14:24 +0530 Subject: [PATCH 19/26] fix: test case changes for fw-select --- .../src/components/select-option/select-option.e2e.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 2f9cec075..7a78a6d83 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -134,12 +134,16 @@ describe('fw-select-option', () => { ` ` ); await page.$eval('fw-select-option', (elm: any) => { elm.variant = 'icon'; + elm.metaText = { + name: 'Author Name', + email: 'author@example.com', + mobile: '123-456-7890', + }; }); await page.waitForChanges(); From cea58962b075e72c691f208d9a0650c3be855bfe Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Mon, 30 Sep 2024 16:24:36 +0530 Subject: [PATCH 20/26] changes on test case for fw-select --- .../components/select-option/select-option.e2e.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 7a78a6d83..cc3d9f703 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -149,13 +149,13 @@ describe('fw-select-option', () => { 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')) + const metaText = await page.find( + 'fw-select-option >>> .description-metaText-details' ); - expect(metaText.name).toBe('Author Name'); - expect(metaText.email).toBe('author@example.com'); - expect(metaText.mobile).toBe('123-456-7890'); + expect(metaText).toBeTruthy(); + expect(metaText.innerText).toBe( + 'Author Name | author@example.com | 123-456-7890' + ); + expect(text.innerText).toBe('This is a select option description'); }); }); From a2a04d3d120de06b38df3923997770f601549a92 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Tue, 1 Oct 2024 12:19:33 +0530 Subject: [PATCH 21/26] test: select option test case --- .../select-option/select-option.e2e.ts | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index cc3d9f703..6adb9b095 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/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', () => { @@ -130,32 +131,33 @@ describe('fw-select-option', () => { it('should render fw-select-option with conversation variant and verify attributes', async () => { const page = await newE2EPage(); - await page.setContent( - `` - ); + await page.setContent(``); await page.$eval('fw-select-option', (elm: any) => { - elm.variant = 'icon'; - elm.metaText = { + elm.variant = 'conversation'; + elm.text = 'This is a select option description'; + elm.subText = 'This is selected option subtext'; + elm.metaText = JSON.stringify({ name: 'Author Name', email: 'author@example.com', mobile: '123-456-7890', - }; + }); }); await page.waitForChanges(); const text = await page.find('fw-select-option >>> .description'); expect(text).toBeTruthy(); - const metaText = await page.find( - 'fw-select-option >>> .description-metaText-details' - ); - expect(metaText).toBeTruthy(); - expect(metaText.innerText).toBe( - 'Author Name | author@example.com | 123-456-7890' + expect(text.innerHTML).toBe('This is a select option description'); + + const subText = await page.find('fw-select-option >>> .subtext'); + expect(subText).toBeTruthy(); + expect(subText.innerHTML).toBe('This is selected option subtext'); + + const metaText = await page.$eval('fw-select-option', (elm: any) => + JSON.parse(elm.metaText) ); - expect(text.innerText).toBe('This is a select option description'); + expect(metaText.name).toBe('Author Name'); + expect(metaText.email).toBe('author@example.com'); + expect(metaText.mobile).toBe('123-456-7890'); }); }); From 674b06ff3ea14527caec3a040d2bad219778348c Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Tue, 1 Oct 2024 14:11:37 +0530 Subject: [PATCH 22/26] select e2e test case changes --- .../select-option/select-option.e2e.ts | 53 ++++++++++++------- 1 file changed, 34 insertions(+), 19 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 6adb9b095..fb4714817 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -133,31 +133,46 @@ describe('fw-select-option', () => { await page.setContent(``); - await page.$eval('fw-select-option', (elm: any) => { - elm.variant = 'conversation'; - elm.text = 'This is a select option description'; - elm.subText = 'This is selected option subtext'; - elm.metaText = JSON.stringify({ - name: 'Author Name', - email: 'author@example.com', - mobile: '123-456-7890', - }); + const selectOption = await page.find('fw-select-option'); + await selectOption.setProperty('variant', 'conversation'); + await selectOption.setProperty( + 'text', + 'This is a select option description' + ); + await selectOption.setProperty( + 'subText', + 'This is selected option subtext' + ); + await selectOption.setProperty('metaText', { + name: 'Author Name', + email: 'author@example.com', + mobile: '123-456-7890', }); await page.waitForChanges(); - const text = await page.find('fw-select-option >>> .description'); - expect(text).toBeTruthy(); - expect(text.innerHTML).toBe('This is a select option description'); + const description = await page.find('fw-select-option >>> .description'); + expect(description).toBeTruthy(); - const subText = await page.find('fw-select-option >>> .subtext'); + const descriptionText = await page.find( + 'fw-select-option >>> .description-text' + ); + expect(descriptionText).toBeTruthy(); + expect(descriptionText.textContent).toBe( + 'This is a select option description' + ); + + const subText = await page.find( + 'fw-select-option >>> .description-subText-conversation' + ); expect(subText).toBeTruthy(); - expect(subText.innerHTML).toBe('This is selected option subtext'); + expect(subText.textContent).toBe('This is selected option subtext'); - const metaText = await page.$eval('fw-select-option', (elm: any) => - JSON.parse(elm.metaText) + const metaTextDetails = await page.find( + 'fw-select-option >>> .description-metaText-details' + ); + expect(metaTextDetails).toBeTruthy(); + expect(metaTextDetails.textContent).toBe( + 'Author Name | author@example.com | 123-456-7890' ); - expect(metaText.name).toBe('Author Name'); - expect(metaText.email).toBe('author@example.com'); - expect(metaText.mobile).toBe('123-456-7890'); }); }); From 4f73f7029e6a04a54068edcdb5ac138720fbda10 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Tue, 1 Oct 2024 15:23:13 +0530 Subject: [PATCH 23/26] addition of test case with no variation changes --- .../select-option/select-option.e2e.ts | 53 ++++++------------- 1 file changed, 15 insertions(+), 38 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index fb4714817..7e54b0ed4 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -131,48 +131,25 @@ describe('fw-select-option', () => { it('should render fw-select-option with conversation variant and verify attributes', async () => { const page = await newE2EPage(); - await page.setContent(``); - - const selectOption = await page.find('fw-select-option'); - await selectOption.setProperty('variant', 'conversation'); - await selectOption.setProperty( - 'text', - 'This is a select option description' - ); - await selectOption.setProperty( - 'subText', - 'This is selected option subtext' + await page.setContent( + ` + ` ); - await selectOption.setProperty('metaText', { - name: 'Author Name', - email: 'author@example.com', - mobile: '123-456-7890', - }); - await page.waitForChanges(); - - const description = await page.find('fw-select-option >>> .description'); - expect(description).toBeTruthy(); - const descriptionText = await page.find( - 'fw-select-option >>> .description-text' - ); - expect(descriptionText).toBeTruthy(); - expect(descriptionText.textContent).toBe( - 'This is a select option description' - ); + await page.waitForChanges(); - const subText = await page.find( - 'fw-select-option >>> .description-subText-conversation' - ); - expect(subText).toBeTruthy(); - expect(subText.textContent).toBe('This is selected option subtext'); + const text = await page.find('fw-select-option >>> .description'); + expect(text).toBeTruthy(); + expect(text.innerText).toBe('This is a select option description'); - const metaTextDetails = await page.find( - 'fw-select-option >>> .description-metaText-details' - ); - expect(metaTextDetails).toBeTruthy(); - expect(metaTextDetails.textContent).toBe( - 'Author Name | author@example.com | 123-456-7890' + 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'); }); }); From 8dc94241f0d89c5962d69cd542b14e48f1650bb1 Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Tue, 1 Oct 2024 15:30:29 +0530 Subject: [PATCH 24/26] test: minor fix --- .../src/components/select-option/select-option.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 7e54b0ed4..92fb30a48 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -128,7 +128,7 @@ describe('fw-select-option', () => { expect(metaText.mobile).toBe('123-456-7890'); }); - it('should render fw-select-option with conversation variant and verify attributes', async () => { + it('should render fw-select-option with no variant and verify attributes', async () => { const page = await newE2EPage(); await page.setContent( From efba7d11c3773562218250554eb327b7eafa39ef Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Tue, 1 Oct 2024 16:05:35 +0530 Subject: [PATCH 25/26] chore: remove commented line --- .../select-option/select-option.e2e.ts | 44 ++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index 92fb30a48..b54953c53 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-debugger */ import { newE2EPage } from '@stencil/core/testing'; describe('fw-select-option', () => { @@ -152,4 +151,47 @@ describe('fw-select-option', () => { expect(metaText.email).toBe('author@example.com'); expect(metaText.mobile).toBe('123-456-7890'); }); + + it.only('should render fw-select-option with conversation variant and verify attributes', async () => { + const page = await newE2EPage(); + + await page.setContent(``); + + await page.$eval('fw-select-option', (elm: any) => { + elm.variant = 'conversation'; + elm.text = 'This is a select option description'; + elm.subText = 'This is selected option subtext'; + elm.metaText = JSON.stringify({ + name: 'Author Name', + email: 'author@example.com', + mobile: '123-456-7890', + }); + }); + await page.waitForChanges(); + + const description = await page.find('fw-select-option >>> .description'); + expect(description).toBeTruthy(); + + const descriptionText = await page.find( + 'fw-select-option >>> .description-text' + ); + expect(descriptionText).toBeTruthy(); + expect(descriptionText.textContent).toBe( + 'This is a select option description' + ); + + const subText = await page.find( + 'fw-select-option >>> .description-subText-conversation' + ); + expect(subText).toBeTruthy(); + expect(subText.textContent).toBe('This is selected option subtext'); + + const metaTextDetails = await page.find( + 'fw-select-option >>> .description-metaText-details' + ); + expect(metaTextDetails).toBeTruthy(); + expect(metaTextDetails.textContent).toBe( + 'Author Name | author@example.com | 123-456-7890' + ); + }); }); From af29b2926058e35c3f32a77b6e08fbe7f01e0c0b Mon Sep 17 00:00:00 2001 From: Harshith Venkatesh Date: Thu, 3 Oct 2024 15:20:40 +0530 Subject: [PATCH 26/26] chore: update on select test case --- .../select-option/select-option.e2e.ts | 43 ------------------- 1 file changed, 43 deletions(-) diff --git a/packages/crayons-core/src/components/select-option/select-option.e2e.ts b/packages/crayons-core/src/components/select-option/select-option.e2e.ts index b54953c53..65721fbd1 100644 --- a/packages/crayons-core/src/components/select-option/select-option.e2e.ts +++ b/packages/crayons-core/src/components/select-option/select-option.e2e.ts @@ -151,47 +151,4 @@ describe('fw-select-option', () => { expect(metaText.email).toBe('author@example.com'); expect(metaText.mobile).toBe('123-456-7890'); }); - - it.only('should render fw-select-option with conversation variant and verify attributes', async () => { - const page = await newE2EPage(); - - await page.setContent(``); - - await page.$eval('fw-select-option', (elm: any) => { - elm.variant = 'conversation'; - elm.text = 'This is a select option description'; - elm.subText = 'This is selected option subtext'; - elm.metaText = JSON.stringify({ - name: 'Author Name', - email: 'author@example.com', - mobile: '123-456-7890', - }); - }); - await page.waitForChanges(); - - const description = await page.find('fw-select-option >>> .description'); - expect(description).toBeTruthy(); - - const descriptionText = await page.find( - 'fw-select-option >>> .description-text' - ); - expect(descriptionText).toBeTruthy(); - expect(descriptionText.textContent).toBe( - 'This is a select option description' - ); - - const subText = await page.find( - 'fw-select-option >>> .description-subText-conversation' - ); - expect(subText).toBeTruthy(); - expect(subText.textContent).toBe('This is selected option subtext'); - - const metaTextDetails = await page.find( - 'fw-select-option >>> .description-metaText-details' - ); - expect(metaTextDetails).toBeTruthy(); - expect(metaTextDetails.textContent).toBe( - 'Author Name | author@example.com | 123-456-7890' - ); - }); });