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

Chore - adding examples, testing react angular #1911

Merged
merged 12 commits into from
Dec 2, 2024
Merged

Chore - adding examples, testing react angular #1911

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ffd8ca7
Text field examples
patrickoneill-genesis Nov 19, 2024
4279849
Button examples
patrickoneill-genesis Nov 19, 2024
9c97b5d
Slider examples
patrickoneill-genesis Nov 19, 2024
fafa861
Checkbox examples
patrickoneill-genesis Nov 19, 2024
d2d8b7e
Removing forms modules, fixing examples
patrickoneill-genesis Nov 19, 2024
613fe8d
Removing forms modules, fixing examples
patrickoneill-genesis Nov 19, 2024
a716fd1
Pr comment fixes
patrickoneill-genesis Nov 21, 2024
611e23c
Merge branch 'new-doc-structure' into pon/chore-adding-examples
patrickoneill-genesis Dec 2, 2024
502528c
Fixing path after merge
patrickoneill-genesis Dec 2, 2024
630ba97
Merge branch 'new-doc-structure' into pon/chore-adding-examples
patrickoneill-genesis Dec 2, 2024
2325c49
Removing fdc3 todos
patrickoneill-genesis Dec 2, 2024
80fe594
Removing extra lines
patrickoneill-genesis Dec 2, 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
2 changes: 0 additions & 2 deletions docs/001_develop/03_client-capabilities/007_forms/002_smart-forms/09_filters.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,6 @@ Declaration
Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';

const uiSchemaExample = {
type: "VerticalLayout",
Expand Down Expand Up @@ -177,7 +176,6 @@ const uiSchemaExample = {
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class AppComponent {
uiSchema = uiSchemaExample
Expand Down
2 changes: 0 additions & 2 deletions docs/001_develop/03_client-capabilities/008_interaction/010_modal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,6 @@ Use cases:
Usage
```typescript
import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'modal-example',
Expand All @@ -134,7 +133,6 @@ Use cases:
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class ModalExampleComponent implements AfterViewInit {
@ViewChild('modal') modalRef!: ElementRef;
Expand Down
2 changes: 0 additions & 2 deletions docs/001_develop/03_client-capabilities/008_interaction/accordian.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ Use cases:
Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-root',
template: `
Expand All @@ -133,7 +132,6 @@ Use cases:
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class AppComponent { }
```
Expand Down
106 changes: 93 additions & 13 deletions docs/001_develop/03_client-capabilities/008_interaction/button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,44 @@ Use cases:
@customElement({
name: 'my-element',
template: html`
<rapid-button @click=${x => x.buttonClicked()}>
Button
</rapid-button>
`,
<rapid-button
@click="${x => x.handleButtonClicked()}">
Default Button
</rapid-button>
<rapid-button
appearance="primary"
@click="${x => x.handleButtonClicked()}">
Primary Color Button
</rapid-button>
<rapid-button
appearance="secondary"
@click="${x => x.handleButtonClicked()}">
Secondary Color Button
</rapid-button>
<rapid-button
@click="${x => x.handleButtonClicked()}">
<rapid-icon
name="plus"
slot="start">
</rapid-icon>
Button with start slot
</rapid-button>
<rapid-button
@click="${x => x.handleButtonClicked()}">
Button with end slot
<rapid-icon
name="warning"
slot="end">
</rapid-icon>
</rapid-button>
<rapid-button disabled>
Disabled Button
</rapid-button>
`,
})
export class MyElement extends GenesisElement {
buttonClicked() {
console.log('Button Clicked')
handleButtonClicked() {
alert('button clicked')
}
}
```
Expand All @@ -69,7 +99,38 @@ Use cases:
};

return (
<rapid-button onClick={handleButtonClicked}></rapid-button>
<rapid-button
onClick={handleButtonClicked}>
Default Button
</rapid-button>
<rapid-button
onClick={handleButtonClicked}
appearance="primary">
Primary Color Button
</rapid-button>
<rapid-button
onClick={handleButtonClicked}
appearance="secondary">
Secondary Color Button
</rapid-button>
<rapid-button>
<rapid-icon
onClick={handleButtonClicked}
name="plus"
slot="start">
</rapid-icon>
Button with start slot
</rapid-button>
<rapid-button>
Button with end slot
<rapid-icon
name="warning"
slot="end">
</rapid-icon>
</rapid-button>
<rapid-button disabled>
Disabled Button
</rapid-button>
);
}
```
Expand All @@ -84,21 +145,40 @@ Use cases:
Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-root',
template: `
<rapid-button (click)="handleButtonClicked()">
Default Button
</rapid-button>
<rapid-button
appearance="primary"
(click)="handleButtonClicked()">
Primary Color Button
</rapid-button>
<rapid-button
(click)="onButtonClicked($event)"
></rapid-button>
appearance="secondary"
(click)="handleButtonClicked()">
Secondary Color Button
</rapid-button>
<rapid-button (click)="handleButtonClicked()">
<rapid-icon name="plus" slot="start"></rapid-icon>
Button with start slot
</rapid-button>
<rapid-button (click)="handleButtonClicked()">
Button with end slot
<rapid-icon name="warning" slot="end"></rapid-icon>
</rapid-button>
<rapid-button disabled>
Disabled Button
</rapid-button>
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class AppComponent {
onButtonClicked(event: Event) {
console.log('Button clicked');
handleButtonClicked() {
alert('button clicked')
}
}
```
Expand Down
17 changes: 9 additions & 8 deletions docs/001_develop/03_client-capabilities/008_interaction/checkbox.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,16 +50,16 @@ Usage
template: html`
<rapid-checkbox
?disabled="${(x) => x.disabled}"
?checked="${sync((x) => x.isSelected, 'boolean')}"
@change="${(x) => x.checkChanged()}"
@change="${(x, ctx) => x.checkChanged(ctx.event)}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we leave sync in this example please. If you want to show off the event version you can leave that too and comment on the funciton saying it's a choice

>Checkbox
</rapid-checkbox>
`,
})
export class MyElement extends GenesisElement {
@observable disabled = false;
@observable isSelected = false;
checkChanged() {
checkChanged(e: Event) {
this.isSelected = e.event.checked;
console.log(this.isSelected);
}
}
Expand All @@ -81,8 +81,10 @@ export function MyComponent() {
console.log({ checkboxValue })
};

const [disabled, setDisabled] = useState(false);

return (
<rapid-checkbox onChange={handleCheckboxChange}></rapid-checkbox>
<rapid-checkbox disabled={disabled} onChange={handleCheckboxChange}>Checkbox</rapid-checkbox>
);
}
```
Expand All @@ -97,27 +99,26 @@ Declaration
Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-root',
template: `
<rapid-checkbox
name="isSelected"
[disabled]="isDisabled"
[checked]="isSelected"
(change)="onCheckboxChange($event)"
></rapid-checkbox>
>Checkbox</rapid-checkbox>
`,
styleUrls: ['./my.component.css'],
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class AppComponent {
isDisabled: boolean = false;
isSelected: boolean = false;
onCheckboxChange(event: Event) {
const target = event.target as HTMLInputElement;
this.isSelected = target.checked;
console.log(this.isSelected);
}
}
```
Expand Down
11 changes: 3 additions & 8 deletions ...1_develop/03_client-capabilities/008_interaction/criteria-segmented-control.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ Use cases:

Usage
```typescript
import { CriteriaSegmentedControlOption, Serialisers } from '@genesislcap/foundation-criteria';

@customElement({
name: 'my-element',
template: html`
Expand All @@ -51,12 +53,8 @@ Use cases:
</criteria-segmented-control>
`,
})

import { CriteriaSegmentedControlOption, Serialisers } from '@genesislcap/foundation-criteria';

export class MyElement extends GenesisElement {
const criteriaFilter: string;
const toolbarOptions: CriteriaSegmentedControlOption[] = [
toolbarOptions: CriteriaSegmentedControlOption[] = [
{ label: 'A', field: 'CHOSEN_OPTION', value: 'option-A', serialiser: Serialisers.EQ },
{ label: 'B', field: 'CHOSEN_OPTION', value: 'option-B', serialiser: Serialisers.EQ },
{ label: 'C', field: 'CHOSEN_OPTION', value: 'option-C', serialiser: Serialisers.EQ },
Expand Down Expand Up @@ -96,7 +94,6 @@ Use cases:
<criteria-segmented-control criteriaOptions={{criteriaOptions}} onClick={handleCriteriaChange}>
<label slot="label">Select option</label>
</criteria-segmented-control>

);
}
```
Expand All @@ -111,7 +108,6 @@ Use cases:
Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CriteriaSegmentedControlOption, Serialisers } from '@genesislcap/foundation-criteria';
@Component({
selector: 'my-root',
Expand All @@ -124,7 +120,6 @@ Use cases:
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class AppComponent {

Expand Down
16 changes: 7 additions & 9 deletions docs/001_develop/03_client-capabilities/008_interaction/radio-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ Declaration
Usage
```typescript
export function MyComponent() {
const selectionChanged = (event) => {
const handleRadioGroupChanged = (event) => {
const target = event.target as HTMLInputElement;
console.log(target.value);
};

return (
<rapid-radio-group onChange={handleCheckboxChange}>
<rapid-radio-group onChange={handleRadioGroupChanged}>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
<rapid-radio value="three">Three</rapid-radio>
Expand All @@ -107,12 +107,11 @@ Declaration
Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-root',
template: `
<rapid-radio-group
(change)="selectionChanged($event)"
(change)="radioGroupChanged($event)"
>
<rapid-radio value="one">One</rapid-radio>
<rapid-radio value="two">Two</rapid-radio>
Expand All @@ -121,13 +120,12 @@ import { FormsModule } from '@angular/forms';
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class AppComponent {
selectionChanged(event: Event) {
const target = event.target as HTMLInputElement;
console.log(target.value);
}
radioGroupChanged(event: Event) {
const target = event.target as HTMLInputElement;
console.log(target.value);
}
}
```
</TabItem>
Expand Down
2 changes: 0 additions & 2 deletions docs/001_develop/03_client-capabilities/008_interaction/radio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ Use cases:
Usage
```typescript
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-root',
template: `
Expand All @@ -97,7 +96,6 @@ Use cases:
`,
standalone: true,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [FormsModule],
})
export class AppComponent {
onRadioFieldChange(event: Event) {
Expand Down
Loading