Skip to content

Commit

Permalink
Merge branch 'master' into feat/data-list-metadata
Browse files Browse the repository at this point in the history
  • Loading branch information
chrismclarke authored Nov 22, 2024
2 parents 0dda00e + 4eec129 commit 2ada398
Show file tree
Hide file tree
Showing 6 changed files with 219 additions and 4 deletions.
13 changes: 10 additions & 3 deletions packages/components/plh/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,23 @@ import { TemplatePipesModule } from "src/app/shared/components/template/pipes";
import { LottieModule } from "ngx-lottie";
import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-point-counter.component";
import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.component";
import { PlhModuleListItemComponent } from "./plh-kids-kw/components/module-list-item/module-list-item.component";
import { RouterModule } from "@angular/router";

@NgModule({
imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule],
exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent],
declarations: [PlhParentPointCounterComponent, PlhParentPointBoxComponent],
imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule, RouterModule],
exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent, PlhModuleListItemComponent],
declarations: [
PlhParentPointCounterComponent,
PlhParentPointBoxComponent,
PlhModuleListItemComponent,
],
providers: [],
})
export class PlhComponentsModule {}

export const PLH_COMPONENT_MAPPING: Record<string, Type<ITemplateRowProps>> = {
parent_point_counter: PlhParentPointCounterComponent,
parent_point_box: PlhParentPointBoxComponent,
plh_module_list_item: PlhModuleListItemComponent,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<div class="module-item" [attr.data-lock]="params.isLocked">
@if (!params.isLocked) {
<div
class="container"
[attr.data-language-direction]="templateTranslateService.languageDirection()"
(click)="triggerActions('click')"
>
@if (params.moduleImageAsset) {
<div class="module-image">
<img [src]="params.moduleImageAsset | plhAsset" />
</div>
}
@if (_row.value) {
<div class="module-title">
<p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
</div>
}
@if (params.navImageAsset !== null) {
<div class="nav-icon">
<img class="icon" [src]="params.navImageAsset | plhAsset" />
</div>
} @else {
<div class="no-nav"></div>
}
</div>
} @else {
<div
class="container"
[attr.data-language-direction]="templateTranslateService.languageDirection()"
>
@if (params.moduleImageAsset) {
<div class="module-image">
<img [src]="params.moduleImageAsset | plhAsset" />
</div>
}
@if (_row.value) {
<div class="module-title">
<p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
</div>
}
@if (params.lockedImageAsset !== null) {
<div class="locked">
<img class="icon" [src]="params.lockedImageAsset | plhAsset" />
</div>
} @else {
<div class="no-nav"></div>
}
</div>
}
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
import { IonicModule } from "@ionic/angular";

import { PlhModuleListItemComponent } from "./module-list-item.component";

describe("ModuleListItemComponent", () => {
let component: PlhModuleListItemComponent;
let fixture: ComponentFixture<PlhModuleListItemComponent>;

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [PlhModuleListItemComponent],
imports: [IonicModule.forRoot()],
}).compileComponents();

fixture = TestBed.createComponent(PlhModuleListItemComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));

it("should create", () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { Component, OnInit } from "@angular/core";
import { FlowTypes } from "packages/data-models";
import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service";
import {
getBooleanParamFromTemplateRow,
getStringParamFromTemplateRow,
} from "src/app/shared/utils";

interface IModuleListItemParams {
/* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
moduleImageAsset?: string;
/* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
textTransform?: "capitalise" | "uppercase";
/* TEMPLATE PARAMETER: "is_locked". The boolean that marks the module as locked or unlocked */
isLocked?: boolean;
/* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
navImageAsset?: string;
/* TEMPLATE PARAMETER: "locked_image_asset". The locked icon*/
lockedImageAsset?: string;
}

@Component({
selector: "plh-module-list-item",
templateUrl: "./module-list-item.component.html",
styleUrls: ["./module-list-item.component.scss"],
})
export class PlhModuleListItemComponent extends TemplateBaseComponent implements OnInit {
params: Partial<IModuleListItemParams> = {};

constructor(public templateTranslateService: TemplateTranslateService) {
super();
}

ngOnInit() {
this.getParams();
}

private getParams() {
this.params.moduleImageAsset = getStringParamFromTemplateRow(
this._row,
"module_image_asset",
""
);
this.params.textTransform = getStringParamFromTemplateRow(this._row, "text_transform", null) as
| "capitalise"
| "uppercase";
this.params.isLocked = getBooleanParamFromTemplateRow(this._row, "is_locked", false);
this.params.navImageAsset = getStringParamFromTemplateRow(this._row, "nav_image_asset", null);
this.params.lockedImageAsset = getStringParamFromTemplateRow(
this._row,
"locked_image_asset",
null
);
}
}
80 changes: 79 additions & 1 deletion src/theme/themes/plh_kids_kw/_overrides.scss
Original file line number Diff line number Diff line change
Expand Up @@ -248,4 +248,82 @@ body[data-theme="plh_kids_kw"] {
}
}
}
}

// module-list-item
plh-module-list-item {
.module-item {
width: 100%;
// TODO: switch to global secondary variable
border: 2px solid #2e98d8;
border-radius: var(--ion-border-radius-secondary);
padding: 16px;
box-shadow: 1px 1px 10px #92b7da;
background-color: #f6fafe;
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.module-image {
img {
width: 100px;
height: 100px;
max-width: unset;
}
}
.module-title {
margin: 0 12px;
margin-right: 18px;
p {
font-size: var(--font-size-text-medium);
color: var(--ion-color-primary-700);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-text-small);
text-align: left;
text-transform: none;
&[data-variant~="capitalise"] {
text-transform: capitalize;
}
&[data-variant~="uppercase"] {
text-transform: uppercase;
}
}
}
.icon {
width: 28px;
max-width: unset;
&[data-language-direction~="rtl"] {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
}
.container[data-language-direction~="rtl"] {
.module-title {
p {
text-align: right;
}
}
.module-image {
img {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
}
}
}
.module-item[data-lock~="true"] {
box-shadow: none;
opacity: 0.5;
border: 2px solid #dbe3f2;
background-color: #ffffff;
.module-image {
img {
width: 60px;
height: 60px;
max-width: unset;
}
}
}
}
}

0 comments on commit 2ada398

Please sign in to comment.