Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: addition of variation in select options which will let users to add information related to author details #930

Merged
merged 10 commits into from
Aug 12, 2024
Merged

feat: addition of variation in select options which will let users to add information related to author details #930

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8f3ff04
feat: introduction of new variations - conversation to create new sel…
harshith-venkatesh-freshworks Aug 5, 2024
54e5a0d
feat: addition of dropdownvariant conversations with interface defined
harshith-venkatesh-freshworks Aug 5, 2024
17db7a4
test: addition of select options test cases
harshith-venkatesh-freshworks Aug 5, 2024
f9ed45d
docs: addition of documentation related to select-options
harshith-venkatesh-freshworks Aug 5, 2024
b455ffb
feat: handle the scenario when imageSrc is present
harshith-venkatesh-freshworks Aug 6, 2024
bce20c0
fix: changes to metaText from author for generic text in select option
harshith-venkatesh-freshworks Aug 9, 2024
ef046bd
fix: text cases changes
harshith-venkatesh-freshworks Aug 9, 2024
d03e4db
updated readme and minor changes
harshith-venkatesh-freshworks Aug 9, 2024
79d866d
readme documentation changes
harshith-venkatesh-freshworks Aug 9, 2024
506163c
select option test cases added
harshith-venkatesh-freshworks Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/crayons-core/src/components.d.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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' />
harshith-venkatesh-freshworks marked this conversation as resolved.
Show resolved Hide resolved
);
}
return <fw-icon {...this.graphicsProps}></fw-icon>;
}

Expand Down
Loading
Loading