Skip to content

Commit

Permalink
feat: addition of variation in select options which will let users to…
Browse files Browse the repository at this point in the history 
… add information related to author details (#930)
  • Loading branch information
@harshith-venkatesh-freshworks
harshith-venkatesh-freshworks authored Aug 12, 2024
1 parent d2c879d commit 1fe6f88
Show file tree
Hide file tree
Showing 8 changed files with 190 additions and 22 deletions.
10 changes: 9 additions & 1 deletion packages/crayons-core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 { 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";
Expand Down Expand Up @@ -1995,6 +1995,10 @@ export namespace Components {
* HTML content that is displayed as the option.
*/
"htmlContent"?: string;
/**
* Third line text in conversation can be metaText additional details etc.
*/
"metaText": MetaText;
/**
* Alternate text displayed on the interface, in place of the actual HTML content.
*/
Expand Down Expand Up @@ -5099,6 +5103,10 @@ declare namespace LocalJSX {
* HTML content that is displayed as the option.
*/
"htmlContent"?: string;
/**
* Third line text in conversation can be metaText additional details etc.
*/
"metaText"?: MetaText;
/**
* Triggered when an option loses focus.
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/crayons-core/src/components/options-list/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
35 changes: 18 additions & 17 deletions packages/crayons-core/src/components/select-option/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
| `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
Expand Down
28 changes: 28 additions & 0 deletions packages/crayons-core/src/components/select-option/select-option.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,4 +98,32 @@ describe('fw-select-option', () => {
expect(text).toBeTruthy();
expect(text.innerText).toBe('This is a select option');
});

it('should render fw-select-option with conversation 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.$eval('fw-select-option', (elm: any) => {
elm.variant = 'conversation';
});
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');
});
});
17 changes: 17 additions & 0 deletions packages/crayons-core/src/components/select-option/select-option.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

&-metaText-details {
font-weight: $font-weight-400;
font-size: $font-size-12;
color: $color-smoke-700;
}

&.icon-margin {
margin-inline-start: 18px;
}
Expand Down Expand Up @@ -116,3 +128,8 @@ $bg-color-disabled: $color-smoke-25;
display: flex;
}
}

.image-icon-dimension-standard {
width: 1.25rem;
height: 1.25rem;
}
41 changes: 40 additions & 1 deletion packages/crayons-core/src/components/select-option/select-option.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
Method,
Listen,
} from '@stencil/core';
import { DropdownVariant } from '../../utils/types';
import { DropdownVariant, MetaText } from '../../utils/types';

/**
* @parent select
Expand Down Expand Up @@ -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 metaText additional details etc.
*/
@Prop({ reflect: true }) metaText: MetaText;
/**
* Used in grouped list, provides the group in which the option belongs
*/
Expand Down Expand Up @@ -180,6 +184,15 @@ export class SelectOption {
{selectedIconContainer}
</Fragment>
);
case 'conversation':
return (
<Fragment>
{checkbox}
{this.createIcon()}
{this.createConversationDescription()}
{selectedIconContainer}
</Fragment>
);
default:
return (
<Fragment>
Expand Down Expand Up @@ -214,7 +227,33 @@ 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>
);
}

createIcon() {
const { imageSrc } = this.graphicsProps;

if (imageSrc) {
return (
<img src={imageSrc} class='image-icon-dimension-standard' alt='icon' />
);
}
return <fw-icon {...this.graphicsProps}></fw-icon>;
}

Expand Down
Loading

0 comments on commit 1fe6f88

Please sign in to comment.