Merge pull request #1911 from genesiscommunitysuccess/pon/chore-addin…

…g-examples Chore - adding examples, testing react angular
genesiscommunitysuccess · Dec 2, 2024 · 546d261 · 546d261
2 parents 05db4e0 + 80fe594
commit 546d261
Show file tree

Hide file tree

Showing 21 changed files with 406 additions and 173 deletions.
diff --git a/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/button.mdx b/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/button.mdx
@@ -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')
       }
     }
     ```
@@ -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>
       );
     }
     ```
@@ -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')
       }
     }
     ```

diff --git a/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/checkbox.mdx b/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/checkbox.mdx
@@ -51,16 +51,18 @@ Usage
     <rapid-checkbox
       ?disabled="${(x) => x.disabled}"
       ?checked="${sync((x) => x.isSelected, 'boolean')}"
-      @change="${(x) => x.checkChanged()}"
+      @change="${(x, ctx) => x.checkChanged(ctx.event)}"
     >Checkbox
     </rapid-checkbox>
   `,
 })
 export class MyElement extends GenesisElement {
   @observable disabled = false;
   @observable isSelected = false;
-  checkChanged() {
-    console.log(this.isSelected);
+  checkChanged(e: Event) {
+    this.isSelected = e.event.checked;
+    console.log(this.isSelected); // sync value updated
+    console.log(e.event.checked); // equivalent to sync value
   }
 }
 ```
@@ -81,8 +83,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>
   );
 }
 ```
@@ -97,27 +101,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);
   }
 }
 ```

diff --git a/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/radio-group.mdx b/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/radio-group.mdx
@@ -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>
@@ -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>
@@ -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>

diff --git a/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/radio.mdx b/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/radio.mdx
@@ -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: `
@@ -97,7 +96,6 @@ Use cases:
     `,
     standalone: true,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    imports: [FormsModule],
   })
   export class AppComponent {
     onRadioFieldChange(event: Event) {

diff --git a/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/select.mdx b/docs/001_develop/03_client-capabilities/007_forms/003_form-inputs/select.mdx
@@ -47,15 +47,15 @@ Use cases:
     @customElement({
       name: 'my-element',
       template: html`
-        <rapid-select @change=${x => x.selectChanged()}>
+        <rapid-select @change=${(x, ctx) => x.selectChanged(ctx.event)}>
           <rapid-option value="s">Small</rapid-option>
           <rapid-option value="l">Large</rapid-option>
         </rapid-select>
       `,
     })
     export class MyElement extends GenesisElement {
-      selectChanged() {
-        alert('Select Changed')
+      selectChanged(e: Event) {
+        alert('Select Changed', e.target.value)
       }
     }
     ```
@@ -74,7 +74,7 @@ Use cases:
   ```typescript
   export function MyComponent() {
     const handleSelectChanged = (event) => {
-      console.log('Select changed')
+      console.log('Select changed', event.target.value)
     };
 
     return (
@@ -99,22 +99,20 @@ Use cases:
   Usage
   ```typescript
   import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-  import { FormsModule } from '@angular/forms';
   @Component({
     selector: 'my-root',
     template: `
-          <rapid-select (change)="onSelectChanged($event)">
-            <rapid-option value="s">Small</rapid-option>
-            <rapid-option value="l">Large</rapid-option>
-          </rapid-select>
-        `,
+      <rapid-select (change)="onSelectChanged($event)">
+        <rapid-option value="s">Small</rapid-option>
+        <rapid-option value="l">Large</rapid-option>
+      </rapid-select>
+    `,
     standalone: true,
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    imports: [FormsModule],
   })
   export class AppComponent {
     onSelectChanged(event: Event) {
-      console.log('Select changed');
+      console.log('Select changed', event.target.value);
     }
   }
   ```