MODIFY: Changes css to scss

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/_constants/content.constants.ts

@@ -0,0 +1,56 @@
+import { ICountryCodeEnum } from './../_interfaces/geography.enums';
+
+import { IOption } from './../_interfaces/common-viewmodel.interfaces';
+
+import { ICountryEnum } from '../_interfaces/geography.enums';
+
+export const COUNTRY_OPTIONS: IOption[] = [
+    {
+        id: ICountryCodeEnum.Australia,
+        value: ICountryEnum.AU,
+        displayValue: ICountryEnum.AU,
+    },
+    {
+        id: ICountryCodeEnum.UnitedKingdom,
+        value: ICountryEnum.GB,
+        displayValue: ICountryEnum.GB,
+    },
+    {
+        id: ICountryCodeEnum.UnitedStates,
+        value: ICountryEnum.US,
+        displayValue: ICountryEnum.US,
+    },
+    {
+        id: ICountryCodeEnum.Canada,
+        value: ICountryEnum.CA,
+        displayValue: ICountryEnum.CA,
+    },
+    {
+        id: ICountryCodeEnum.Singapore,
+        value: ICountryEnum.SG,
+        displayValue: ICountryEnum.SG,
+    },
+];
+
+export const COUNTRY_COORDINATES = {
+    Australia: {
+        lat: -29.0076186,
+        lng: 134.681129,
+    },
+    'United Kingdom': {
+        lat: 51.5285582,
+        lng: -0.2416799,
+    },
+    'United States': {
+        lat: 38.8937336,
+        lng: -77.0846156,
+    },
+    Singapore: {
+        lat: 1.3139961,
+        lng: 103.7041651,
+    },
+    Canada: {
+        lat: 45.5579564,
+        lng: -73.8703845,
+    },
+};

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/_interfaces/common-viewmodel.interfaces.ts

@@ -1,93 +1,9 @@
-import { IMenuList } from './../../../../../../../POC/cmhaa/src/app/components/templates/menu/_interfaces/menu.interfaces';
-import { ICard } from '../organisms/card/_interfaces/card.interfaces';
-
-import {
-    IOrganisationEnum,
-    IOrganisationStatusEnum,
-    IMainAudienceEnum,
-    IFundingModelEnum,
-    IYesNoEnum,
-    IPolicyAndAdvocacyActivityNameEnum,
-    ITrainingEnum,
-    ITrainingModuleEnum,
-    IResourceActivityEnum,
-} from './common.enums';
-import { ICountryEnum } from './geography.enums';
-
-export interface IOrganisation {
-    id: IOrganisationEnum;
-    card: ICard;
-    name?: IOrganisationEnum;
-    description?: string;
-    websiteURL?: string;
-    status?: IOrganisationStatusEnum;
-    country?: ICountryEnum;
-    address?: string;
-    lat: number;
-    lon: number;
-
-    primaryFocusAreas: string;
-    mainAudience: IMainAudienceEnum[];
-    doTheyConductTrainings: string;
-    typesOfTraining: string[];
-
-    resourcesByTopic: string[];
-
-    trainings: ITrainingEnum[];
-    stakeholdersFundingModel: string;
-    stakeholdersMembers?: string[];
-    stakeholdersOverlapWithOurMembers?: string;
-    doTheyUndertakePolicyAdvocacyActivities?: IYesNoEnum;
-    policyAndAdvocacyActivities?: IYesNoEnum;
-    policyAndAdvocacyActivityTypes?: IPolicyAndAdvocacyActivityNameEnum[];
-    menuLists?: IMenuList[];
-    activities?: any;
-    verified?: boolean;
-    thumbnail?: string;
-}
-
-export interface IActivity {
-    name: IResourceActivityEnum;
-    isConducted: IYesNoEnum;
-}
-
-// export interface ILocation {
-//     address?: string;
-//     lat: string;
-//     lon: string;
-// }
-
-// export interface IResourcesAndInformation {}
-
-export interface IStakeholder {
-    fundingModel: IFundingModelEnum;
-    members?: string[];
-    overlapWithOurMembers?: string;
-}
-
-// export interface IPolicyAndAdvocacy {
-//     doTheyUndertakePolicyAdvocacyActivities?: IYesNoEnum;
-//     activities?: IPolicyAndAdvocacyActivity[];
-// }
-
-// export interface IPolicyAndAdvocacyActivity {
-//     name: IPolicyAndAdvocacyActivityNameEnum;
-//     description: string;
-// }
-
-// export interface ITraining {
-//     name: ITrainingEnum;
-//     modules: ITrainingModuleEnum[];
-//     description: string;
-// }
-
 export enum IUIModeEnum {
     copy = 'copy',
     read = 'read',
     update = 'update',
     delete = 'delete',
 }
-
 export interface IOption {
     id: string;
     value: any;

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/atoms/button/button.component.scss

@@ -0,0 +1,16 @@
+:host-context {
+    display: inline-block;
+
+    /* override for some odd bulma behaviour when we customize components */
+    .button {
+        padding-left: 5px;
+        padding-right: 5px;
+        .icon {
+            &:first-child {
+                &:not(:last-child) {
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
+}

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/atoms/button/button.component.ts

@@ -9,7 +9,7 @@ import {
 @Component({
     selector: 'gee-button',
     templateUrl: './button.component.html',
-    styleUrls: ['./button.component.css'],
+    styleUrls: ['./button.component.scss'],
 })
 export class ButtonComponent implements OnInit {
     @Input()

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/atoms/icon/icon.component.scss

@@ -0,0 +1,3 @@
+:host-context {
+    display: inline-block;
+}

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/atoms/icon/icon.component.ts

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'gee-icon',
-  templateUrl: './icon.component.html',
-  styleUrls: ['./icon.component.css']
+    selector: 'gee-icon',
+    templateUrl: './icon.component.html',
+    styleUrls: ['./icon.component.scss'],
 })
 export class IconComponent implements OnInit {
+    constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+    ngOnInit(): void {}
 }

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/atoms/menu-item/menu-item.component.ts

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'gee-menu-item',
-  templateUrl: './menu-item.component.html',
-  styleUrls: ['./menu-item.component.css']
+    selector: 'gee-menu-item',
+    templateUrl: './menu-item.component.html',
+    styleUrls: ['./menu-item.component.scss'],
 })
 export class MenuItemComponent implements OnInit {
+    constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+    ngOnInit(): void {}
 }

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/atoms/menu-link/menu-link.component.ts

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'gee-menu-link',
-  templateUrl: './menu-link.component.html',
-  styleUrls: ['./menu-link.component.css']
+    selector: 'gee-menu-link',
+    templateUrl: './menu-link.component.html',
+    styleUrls: ['./menu-link.component.scss'],
 })
 export class MenuLinkComponent implements OnInit {
+    constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+    ngOnInit(): void {}
 }

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/molecules/dropdown/dropdown.component.ts

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'gee-dropdown',
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.css']
+    selector: 'gee-dropdown',
+    templateUrl: './dropdown.component.html',
+    styleUrls: ['./dropdown.component.scss'],
 })
 export class DropdownComponent implements OnInit {
+    constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+    ngOnInit(): void {}
 }

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/molecules/form-field/form-field.component.scss

@@ -0,0 +1,5 @@
+:host-context {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 30px;
+}

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/molecules/form-field/form-field.component.ts

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'gee-form-field',
-  templateUrl: './form-field.component.html',
-  styleUrls: ['./form-field.component.css']
+    selector: 'gee-form-field',
+    templateUrl: './form-field.component.html',
+    styleUrls: ['./form-field.component.scss'],
 })
 export class FormFieldComponent implements OnInit {
+    constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+    ngOnInit(): void {}
 }

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/molecules/toggle-panel/toggle-panel.component.scss

@@ -0,0 +1,49 @@
+:host-context {
+    display: inline-block;
+    width: 100%;
+
+    .toggle-panel {
+        &__toggle-button {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        &__header {
+            display: inline-block;
+            width: 100%;
+            position: relative;
+            padding-left: 55px;
+            border-bottom: 2px solid #dfdfdf;
+            padding-bottom: 10px;
+            margin-bottom: 10px;
+
+            &--always-expanded {
+                border: none;
+                padding-left: 0;
+
+                .toggle-panel__toggle-button {
+                    display: none;
+                }
+            }
+        }
+
+        &__title {
+            display: inline-block;
+            margin: 0;
+        }
+
+        &__body {
+            display: inline-block;
+            width: 100%;
+            &--collapsed {
+                display: none;
+            }
+
+            &--expanded {
+                display: inline-block;
+                margin: 20px 0 30px 0;
+            }
+        }
+    }
+}

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/molecules/toggle-panel/toggle-panel.component.ts

@@ -1,15 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'gee-toggle-panel',
-  templateUrl: './toggle-panel.component.html',
-  styleUrls: ['./toggle-panel.component.css']
+    selector: 'gee-toggle-panel',
+    templateUrl: './toggle-panel.component.html',
+    styleUrls: ['./toggle-panel.component.scss'],
 })
 export class TogglePanelComponent implements OnInit {
+    constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+    ngOnInit(): void {}
 }

ngx-giselle-ui-workspace/projects/ngx-giselle-ui/src/lib/organisms/card/card.component.scss

@@ -0,0 +1,21 @@
+:host-context {
+    height: 100%;
+    width: 100%;
+    display: inline-block;
+    p {
+        &.title {
+            overflow: hidden;
+        }
+    }
+
+    .card {
+        height: 100%;
+        width: 100%;
+        position: relative;
+        cursor: pointer;
+    }
+
+    :hover {
+        background-color: #00d1b2;
+    }
+}