création component steps + modifs

projects/ngx-cream-lib/src/lib/ngx-cream-lib.module.ts

@@ -26,6 +26,7 @@ import { IconButtonComponent } from './icon-button/icon-button.component';
 import { TooltipDirective } from './directives/tooltip.directive';
 import { CheckAllDirective } from './directives/check-all.directive';
 import { AutocompleteComponent } from './autocomplete/autocomplete.component';
+import { StepsComponent } from './steps/steps.component';
 
 const components = [
   AccordionComponent,
@@ -50,10 +51,11 @@ const components = [
   TooltipDirective,
   CheckAllDirective,
   AutocompleteComponent,
+  StepsComponent,
 ];
 
 @NgModule({
-  declarations: [...components],
+  declarations: [...components, StepsComponent],
   imports: [CommonModule, RouterModule, DragDropModule, BrowserModule, BrowserAnimationsModule],
   exports: [...components],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

projects/ngx-cream-lib/src/lib/steps/steps.component.css

@@ -0,0 +1,29 @@
+.steps {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.steps div{
+  padding: 0.5rem;
+}
+
+.steps div p{
+  padding: 0.5rem;
+}
+
+.steps div p a {
+  padding: 0.6rem 1rem;
+  border-radius: 100%;
+  background-color: var(--main-color);
+  color: var(--text-inv);
+}
+
+@media (min-width: 550px) {
+  .steps {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+}

projects/ngx-cream-lib/src/lib/steps/steps.component.html

@@ -0,0 +1,34 @@
+<div class="steps">
+  <div class="firstStep">
+    <p>
+      <a href="#">1</a>
+    </p>
+    <p>
+      <span>{{ titles[0] }}</span>
+    </p>
+  </div>
+  <div class="secondStep">
+    <p>
+      <a href="#">2</a>
+    </p>
+    <p>
+      <span>{{ titles[1] }}</span>
+    </p>
+  </div>
+  <div class="thirdStep">
+    <p>
+      <a href="#">3</a>
+    </p>
+    <p>
+      <span>{{ titles[2] }}</span>
+    </p>
+  </div>
+  <div class="fourthStep">
+    <p>
+      <a href="#">4</a>
+    </p>
+    <p>
+      <span>{{ titles[3] }}</span>
+    </p>
+  </div>
+</div>

projects/ngx-cream-lib/src/lib/steps/steps.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepsComponent } from './steps.component';
+
+describe('StepsComponent', () => {
+  let component: StepsComponent;
+  let fixture: ComponentFixture<StepsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StepsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StepsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-cream-lib/src/lib/steps/steps.component.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'c3m-steps',
+  templateUrl: './steps.component.html',
+  styleUrls: ['./steps.component.css'],
+})
+export class StepsComponent {
+  @Input() titles: Array<string> = [];
+}

src/app/app-routing.module.ts

@@ -23,6 +23,7 @@ import { FormDesignPageComponent } from './pages/form-design-page/form-design-pa
 import { IconographyPageComponent } from './pages/iconography-page/iconography-page.component';
 import { FocusOnChangePageComponent } from './pages/focus-on-change-page/focus-on-change-page.component';
 import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplete-page.component';
+import { StepsPageComponent } from './pages/steps-page/steps-page.component';
 
 const routes: Routes = [
   //Portal (doc) routes goes here
@@ -75,6 +76,11 @@ const routes: Routes = [
         component: SnackbarPageComponent,
         data: { title: 'Snackbar' },
       },
+      {
+        path: 'steps',
+        component: StepsPageComponent,
+        data: { title: 'Steps' },
+      },
       {
         path: 'toast',
         component: ToastPageComponent,

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { AutofocusPageComponent } from './pages/autofocus-page/autofocus-page.co
 import { FocusOnChangePageComponent } from './pages/focus-on-change-page/focus-on-change-page.component';
 import { CheckAllPageComponent } from './pages/check-all-page/check-all-page.component';
 import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplete-page.component';
+import { StepsPageComponent } from './pages/steps-page/steps-page.component';
 
 @NgModule({
   declarations: [
@@ -63,6 +64,7 @@ import { AutocompletePageComponent } from './pages/autocomplete-page/autocomplet
     FocusOnChangePageComponent,
     CheckAllPageComponent,
     AutocompletePageComponent,
+    StepsPageComponent,
   ],
   imports: [BrowserModule, AppRoutingModule, NgxCreamLibModule],
   providers: [],

src/app/pages/steps-page/steps-page.component.html

@@ -0,0 +1,42 @@
+<section id="steps">
+  <h3>General component</h3>
+
+  <c3m-tabs class="block-style" label="Demo and Code">
+    <c3m-tab-panel class="block-style" tabTitle="Demo" [isActive]="true">
+      <c3m-steps [titles]="titles"></c3m-steps>
+    </c3m-tab-panel>
+    <c3m-tab-panel class="block-style" tabTitle="Application">
+      <pre></pre>
+    </c3m-tab-panel>
+  </c3m-tabs>
+</section>
+
+<section id="props-n-events">
+  <h3>Properties and Events</h3>
+
+  <table class="adaptable">
+    <caption>
+      Properties applicable to the component
+      <code>c3m-steps</code>
+    </caption>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">Type</th>
+      <th scope="col">Default</th>
+      <th scope="col">Description</th>
+    </tr>
+    <tr>
+      <td data-head="Name"></td>
+      <td data-head="Type"></td>
+      <td data-head="Default"></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td data-head="Name"></td>
+      <td data-head="Type"></td>
+      <td data-head="Default"></td>
+      <td></td>
+    </tr>
+  </table>
+  <p><em>* mandatory properties</em></p>
+</section>

src/app/pages/steps-page/steps-page.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { CreamPage } from '../cream-page';
+
+@Component({
+  selector: 'app-steps-page',
+  templateUrl: './steps-page.component.html',
+  styleUrls: ['./steps-page.component.css'],
+})
+export class StepsPageComponent implements CreamPage {
+  pageTitle = 'Steps';
+  componentName = 'c3m-steps';
+  resourceType = 'Component';
+
+  titles = ['Personal', 'Seat', 'Payment', 'Confirmation'];
+}