Merge pull request #350 from PermanentOrg/PER-9444-comp-library-toggle

PER-9444 toggle component

src/app/component-library/components.module.ts

@@ -0,0 +1,11 @@
+/* @format */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ToggleComponent } from './components/components/toggle/toggle.component';
+
+@NgModule({
+  declarations: [ToggleComponent],
+  imports: [CommonModule],
+  exports: [ToggleComponent],
+})
+export class ComponentsModule {}

src/app/component-library/components/components/toggle/toggle.component.html

@@ -0,0 +1,12 @@
+<!-- @format  -->
+<div
+  class="toggle-container"
+  [class.checked]="isChecked"
+  [class.disabled]="disabled"
+  (click)="toggleSwitch()"
+>
+  <div class="toggle-switch">
+    <div class="toggle-knob"></div>
+  </div>
+  <p>{{ text }}</p>
+</div>

src/app/component-library/components/components/toggle/toggle.component.scss

@@ -0,0 +1,48 @@
+/* @format */
+@import 'variables';
+
+.toggle-container {
+  padding: 5px;
+  display: flex;
+  width: fit-content;
+  align-items: center;
+
+  & > p {
+    margin-left: 10px;
+    margin-bottom: 0;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  & > .toggle-switch {
+    cursor: pointer;
+    width: 36px;
+    height: 20px;
+    border-radius: 25px;
+    position: relative;
+    background-color: $toggle;
+    transition: background-color 0.2s;
+
+    & > .toggle-knob {
+      width: 15px;
+      height: 15px;
+      background-color: $white;
+      border-radius: 50%;
+      position: absolute;
+      top: 2.5px;
+      left: 2.5px;
+      transition: left 0.2s;
+    }
+  }
+
+  &.checked {
+    & > .toggle-switch {
+      background-color: $toggle-checked;
+      & > .toggle-knob {
+        left: 18.5px;
+      }
+    }
+  }
+}

src/app/component-library/components/components/toggle/toggle.component.spec.ts

@@ -0,0 +1,60 @@
+/* @format */
+import { Shallow } from 'shallow-render';
+import { ToggleComponent } from './toggle.component';
+
+describe('ToggleComponent', () => {
+  let shallow: Shallow<ToggleComponent>;
+
+  beforeEach(async () => {
+    shallow = new Shallow(ToggleComponent, Shallow);
+  });
+
+  it('should create', async () => {
+    const { instance } = await shallow.render();
+
+    expect(instance).toBeTruthy();
+  });
+
+  it('should have the checked class when the toggle is checked', async () => {
+    const { instance, find, fixture } = await shallow.render();
+    instance.isChecked = true;
+    fixture.detectChanges();
+    const toggle = find('.toggle-container').nativeElement;
+
+    expect(toggle.classList).toContain('checked');
+  });
+
+  it('should have the disabled class when the toggle is disabled', async () => {
+    const { instance, find, fixture } = await shallow.render();
+    instance.disabled = true;
+    fixture.detectChanges();
+    const toggle = find('.toggle-container').nativeElement;
+
+    expect(toggle.classList).toContain('disabled');
+  });
+
+  it('should emit the correct value when the toggle is clicked', async () => {
+    const { instance, find, fixture } = await shallow.render();
+    fixture.detectChanges();
+    const toggle = find('.toggle-container').nativeElement;
+    toggle.click();
+
+    expect(instance.isCheckedChange.emit).toHaveBeenCalledWith(true);
+
+    instance.isChecked = true;
+    fixture.detectChanges();
+    toggle.click();
+
+    expect(instance.isCheckedChange.emit).toHaveBeenCalledWith(false);
+  });
+
+  it('should not emit when the toggle is disabled', async () => {
+    const { instance, find, fixture } = await shallow.render();
+    instance.disabled = true;
+    fixture.detectChanges();
+    const toggle = find('.toggle-container').nativeElement;
+    toggle.click();
+
+    expect(instance.isCheckedChange.emit).not.toHaveBeenCalled();
+  });
+});

src/app/component-library/components/components/toggle/toggle.component.ts

@@ -0,0 +1,27 @@
+/* @format */
+import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'pr-toggle',
+  templateUrl: './toggle.component.html',
+  styleUrls: ['./toggle.component.scss'],
+})
+export class ToggleComponent implements OnInit {
+  @Input() isChecked: boolean = false;
+  @Input() text: string = '';
+  @Input() disabled: boolean = false;
+  @Output() isCheckedChange = new EventEmitter<boolean>();
+
+  ngOnInit() {
+    if (this.disabled) {
+      this.isChecked = false;
+    }
+  }
+
+  toggleSwitch() {
+    if (!this.disabled) {
+      this.isChecked = !this.isChecked;
+      this.isCheckedChange.emit(this.isChecked);
+    }
+  }
+}

src/app/component-library/components/components/toggle/toggle.stories.ts

@@ -0,0 +1,45 @@
+/* @format */
+import {
+  componentWrapperDecorator,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { ComponentsModule } from '../../../components.module';
+import { ToggleComponent } from './toggle.component';
+
+const meta: Meta<ToggleComponent> = {
+  title: 'Toggle',
+  component: ToggleComponent,
+  tags: ['autodocs'],
+  render: (args: ToggleComponent) => ({
+    props: {
+      ...args,
+      isCheckedChange: action('isCheckedChange'),
+    },
+    argTypes: {
+      isChecked: 'checked',
+      text: 'text',
+      disabled: 'disabled',
+    },
+  }),
+};
+
+export default meta;
+type Story = StoryObj<ToggleComponent>;
+
+export const Enabled: Story = {
+  args: {
+    isChecked: true,
+    text: 'Toggle Example',
+    disabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    text: 'Disabled Toggle Example',
+  },
+};

src/app/pledge/pledge.module.ts

@@ -27,15 +27,13 @@ import { UpdateCardComponent } from './components/update-card/update-card.compon
     RouterModule,
     AngularFireModule.initializeApp({
       ...environment.firebase,
-      apiKey: SecretsService.getStatic('FIREBASE_API_KEY')
+      apiKey: SecretsService.getStatic('FIREBASE_API_KEY'),
     }),
     AngularFireDatabaseModule,
     PledgeRoutingModule,
     CountUpModule,
   ],
-  providers: [
-    PledgeService
-  ],
+  providers: [PledgeService],
   declarations: [
     PledgeComponent,
     PhaseProgressComponent,
@@ -45,10 +43,8 @@ import { UpdateCardComponent } from './components/update-card/update-card.compon
     ClaimDoneComponent,
     PledgeListComponent,
     MissingPledgeComponent,
-    UpdateCardComponent
-  ],
-  exports: [
-    NewPledgeComponent,
+    UpdateCardComponent,
   ],
+  exports: [NewPledgeComponent],
 })
-export class PledgeModule { }
+export class PledgeModule {}

src/styles/_colors.scss

@@ -35,8 +35,11 @@ $black:    #000 !default;
 $familysearch-brand: #87ba41;
 $facebook-brand: #1877f2;
 
+$toggle-checked:#12b76a;
+$toggle:#e7e8ed;
+
 
 $theme-colors: (
   "primary-light": $PR-blue-light,
   "white": $white
-)
+)