chore:🌻 add docs for button

NsdHSO · Nov 3, 2023 · 7b86993 · 7b86993
1 parent 54c8f00
commit 7b86993
Show file tree

Hide file tree

Showing 12 changed files with 24,310 additions and 37,406 deletions.
diff --git a/documentation.json b/documentation.json
@@ -3502,7 +3502,7 @@
       "inputs": [],
       "outputs": [],
       "providers": [],
-      "selector": "ngx-button-component",
+      "selector": "sivan-button-component",
       "styleUrls": ["./button.component.scss"],
       "styles": [],
       "templateUrl": ["./button.component.html"],

diff --git a/ftx-demo/src/lib/components/contentSteps/spendMoney/spend-money.component.html b/ftx-demo/src/lib/components/contentSteps/spendMoney/spend-money.component.html
@@ -73,7 +73,7 @@
     />
   </div>
 
-  <ngx-button-component [roundedFull]="'rounded'" (marian)="logFrom()"
+  <sivan-button-component [roundedFull]="'rounded'" (marian)="logFrom()"
     >TEST
-  </ngx-button-component>
+  </sivan-button-component>
 </div>
diff --git a/ftx-demo/src/lib/components/stepper-steps/stepper-steps.component.html b/ftx-demo/src/lib/components/stepper-steps/stepper-steps.component.html
@@ -25,11 +25,11 @@
     ></div>
   </div>
   <div>
-    <ngx-button-component
+    <sivan-button-component
       [disable]="buttonDisabled$ | async"
       roundedFull="rounded-md"
       (marian)="nextTab()"
       >Continue
-    </ngx-button-component>
+    </sivan-button-component>
   </div>
 </div>
diff --git a/ftx-forms/src/lib/ftx-forms/ftx-forms.component.html b/ftx-forms/src/lib/ftx-forms/ftx-forms.component.html
@@ -14,12 +14,12 @@
     "
   />
 
-  <ngx-button-component
+  <sivan-button-component
     class="bg-white p-2"
     [disable]="dynamicForm.pristine || dynamicForm.invalid"
     roundedFull="rounded-md"
     >Submit
-  </ngx-button-component>
+  </sivan-button-component>
 </form>
 
 <ng-template

diff --git a/ftx-ftm/src/lib/ftx-ftm/ftx-ftm.component.html b/ftx-ftm/src/lib/ftx-ftm/ftx-ftm.component.html
@@ -171,10 +171,10 @@
       </div>
     </ng-container>
   </ng-container>
-  <ngx-button-component
+  <sivan-button-component
     class="p-2 bg-white"
     [disable]="formData.pristine || formData.invalid"
     roundedFull="rounded-md"
     >Submit
-  </ngx-button-component>
+  </sivan-button-component>
 </form>
diff --git a/ftx-sivan-shared/src/lib/components/button/button.component.html b/ftx-sivan-shared/src/lib/components/button/button.component.html
@@ -1,13 +1,15 @@
 <button
   [type]="typeButton"
-  [disabled]="disable"
-  [ngClass]="{ '!bg-blue-700': disable }"
+  [disabled]="!disable"
+  [ngClass]="{
+    'bg-blue-500 cursor-pointer': disable,
+    'bg-blue-700 cursor-not-allowed': !disable
+  }"
+  class="p-2 bg-blue-500 text-white"
+  [class]="roundedFull"
   [attr.aria-label]="roundedFull"
-  mat-button
   (click)="marian.emit()"
-  class="mat-primary mat-raised-button !bg-blue-500 !text-white p-2"
-  [className]="roundedFull"
+  mat-ripple
 >
   <ng-content></ng-content>
 </button>
-<ng-template #element>tete</ng-template>
diff --git a/ftx-sivan-shared/src/lib/components/button/button.component.stories.ts b/ftx-sivan-shared/src/lib/components/button/button.component.stories.ts
@@ -1,36 +1,37 @@
-import { Meta } from '@storybook/angular';
+import { Meta, Story, StoryFn } from '@storybook/angular';
 import { ButtonComponent } from './button.component';
+import { action } from '@storybook/addon-actions';
 
 export default {
   title: 'ButtonComponent',
   component: ButtonComponent,
+  tags: ['autodocs'],
 } as Meta<ButtonComponent>;
 
-export const Primary = {
-  render: (args: ButtonComponent) => ({
-    props: args,
-    template: `
-      <ngx-button-component [disable]='disable' [roundedFull]='roundedFull' >
-        TEST
-</ngx-button-component>
+export const Primary: StoryFn<ButtonComponent> = (args: ButtonComponent) => ({
+  props: args,
+  template: `
+      <sivan-button-component [disable]='disable' [roundedFull]='roundedFull' (marian)="marian()" >
+            Click Me
+      </sivan-button-component>
     `,
-  }),
-  args: {
-    roundedFull: '!rounded-md',
-    disable: true,
+  methods: {
+    marian() {
+      console.log('test');
+    },
   },
-};
-export const PrimaryEnable = {
-  render: (args: ButtonComponent) => ({
-    props: args,
-    template: `
-      <ngx-button-component  [disable]='disable' [roundedFull]='roundedFull' >
-        TEST
-</ngx-button-component >
-    `,
-  }),
-  args: {
-    roundedFull: '!rounded-full',
-    disable: false,
+});
+
+export const ButtonWithDocs = Primary.bind({});
+
+ButtonWithDocs.argTypes = {
+  roundedFull: {
+    control: 'select', // Type 'select' is automatically inferred when 'options' is defined
+    options: ['rounded-s', 'rounded-md', 'rounded-xl', 'rounded-full'],
+    defaultValue: 'rounded-s',
+  },
+  disable: {
+    options: [true, false],
+    control: { type: 'radio' },
   },
 };
diff --git a/ftx-sivan-shared/src/lib/components/button/button.component.ts b/ftx-sivan-shared/src/lib/components/button/button.component.ts
@@ -7,18 +7,19 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
 
 @Component({
-  selector: 'ngx-button-component',
+  selector: 'sivan-button-component',
   standalone: true,
-  imports: [CommonModule, MatButtonModule],
+  imports: [CommonModule, MatButtonModule, MatRippleModule],
   templateUrl: './button.component.html',
   styleUrls: ['./button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent {
   @Output() marian = new EventEmitter();
-  @Input() public disable: boolean | undefined | null;
+  @Input() public disable: boolean | undefined | null = true;
   @Input() public roundedFull = '';
   @Input() public typeButton = '';
 }
diff --git a/ftx-sivan-shared/src/lib/components/progress/progress.component.html b/ftx-sivan-shared/src/lib/components/progress/progress.component.html
@@ -20,13 +20,14 @@
       <ng-container
         *ngFor="let action of actions; trackBy: generativeService.trackBy"
       >
-        <ngx-button-component
+        <sivan-button-component
           data-test="sivan-shared-progress-actions"
           roundedFull="rounded-md"
           [disable]="action.disabled | async"
+          (marian)="(action.event)"
         >
           {{ action.name }}
-        </ngx-button-component>
+        </sivan-button-component>
       </ng-container>
     </div>
   </div>

diff --git a/ftx-sivan-shared/src/lib/components/progress/progress.component.spec.ts b/ftx-sivan-shared/src/lib/components/progress/progress.component.spec.ts
@@ -77,7 +77,11 @@ describe('ProgressComponent', () => {
         snapshot: {
           data: {
             actions: [
-              { disable: disableSpy.asObservable(), name: 'Pause' },
+              {
+                disable: disableSpy.asObservable(),
+                name: 'Pause',
+                event: () => console.log('test'),
+              },
               { disable: notDisableSpy.asObservable(), name: 'Continue' },
             ],
           } as unknown,

diff --git a/ftx-sivan-shared/src/lib/components/progress/progress.component.stories.ts b/ftx-sivan-shared/src/lib/components/progress/progress.component.stories.ts
@@ -11,7 +11,7 @@ import { ProgressComponent } from './progress.component';
 import { of } from 'rxjs';
 
 export default {
-  title: 'SivanInputComponent',
+  title: 'ProgressComponent',
   component: ProgressComponent,
   decorators: [
     moduleMetadata({
@@ -28,15 +28,4 @@ const Template: Story<ProgressComponent> = (args: ProgressComponent) => ({
   props: args,
 });
 export const WorkBack = Template.bind({});
-WorkBack.args = {
-  placeholder: 'success', // Set the default value to 'success'
-  mainControl: {
-    valueChanges: of('tes'),
-    value: 'tes',
-    error: true,
-    _registerOnCollectionChange: () => true,
-    registerOnChange: () => true,
-    registerOnDisabledChange: () => true,
-    _unregisterOnChange: () => true,
-  },
-};
+WorkBack.args = {};