card component

CreamLib · Feb 27, 2024 · 6392395 · 6392395
1 parent 8657100
commit 6392395
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 8 deletions.
diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.css b/projects/ngx-cream-lib/src/lib/card/card.component.css
@@ -36,4 +36,4 @@ a.link-button {
   .picture img {
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
-  }
+  }
diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.html b/projects/ngx-cream-lib/src/lib/card/card.component.html
@@ -1,6 +1,6 @@
 <div class="card">
     <p class="picture">
-        <img [src]="'../../../../../assets/img/' + imageName" alt="">
+        <img [src]="'../../../../../assets/img/' + imageName" [alt]="altImg">
     </p>
     <div class="card-content">
     <c3m-h titleLevel="3">

diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.ts b/projects/ngx-cream-lib/src/lib/card/card.component.ts
@@ -9,6 +9,7 @@ export class CardComponent {
   @Input() title: string = '';
   // @Input() cardtitleLevel = '';
   @Input() imageName = '';
-  @Input() linkUrl = "";
-  @Input() labelButton = "";
+  @Input() linkUrl = '';
+  @Input() labelButton = '';
+  @Input() altImg = '';
 }
diff --git a/src/app/pages/card-page/card-page.component.html b/src/app/pages/card-page/card-page.component.html
@@ -3,22 +3,68 @@ <h3>Card component</h3>
 
     <c3m-tabs class="block-style" label="Demo and Code">
         <c3m-tab-panel class="block-style" tabTitle="Demo" [isActive]="true">
-            <c3m-card title="Card Title" titleLevel="2" imageName="illu.jpg" linkUrl="portal/card" labelButton="Découvrir" cardtitleLevel="5">
+            <c3m-card title="Card Title" imageName="illu.jpg" linkUrl="portal/card" labelButton="Découvrir" altImg="card image">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus quam maxime. 
               Repellat atque animi consequatur fugiat perferendis dicta cumque maiores minus rem facilis, 
               ex unde quo laborum sunt cupiditate.
             </c3m-card>
         </c3m-tab-panel>
         <c3m-tab-panel class="block-style" tabTitle="Application">
           <pre>
-    &lt;c3m-card title=&#34;Card Title&#34;&gt;
-      &lt;c3m-h titleLevel=&#34;titleLevel&#34;&gt; Title &lt;/c3m-h&gt;
+    &lt;c3m-card title=&#34;Card Title&#34; imageName=&#34;image name&#34;  altImg=&#34;altImg&#34;
+    linkUrl=&#34;url link&#34; labelButton=&#34;button label&#34;&gt;
       &lt;NG-CONTENT&gt;
-      &lt;a href=&#34;linkUrl&#34;&gt; labelButton &lt;/a&gt;
     &lt;/c3m-card&gt;
           </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-card</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">title</td>
+      <td data-head="Type">string</td>
+      <td data-head="Default">""</td>
+      <td>Title of the card</td>
+    </tr>
+    <tr>
+      <td data-head="Name">imageName</td>
+      <td data-head="Type">string</td>
+      <td data-head="Default">""</td>
+      <td>Name of the image in the img folder</td>
+    </tr>
+    <tr>
+      <td data-head="Name">linkUrl</td>
+      <td data-head="Type">string</td>
+      <td data-head="Default">""</td>
+      <td>The URL link of the button</td>
+    </tr>
+    <tr>
+      <td data-head="Name">labelButton</td>
+      <td data-head="Type">string</td>
+      <td data-head="Default">""</td>
+      <td>Name of the button</td>
+    </tr>
+    <tr>
+      <td data-head="Name">altImg</td>
+      <td data-head="Type">string</td>
+      <td data-head="Default">""</td>
+      <td>Textual alternative to card image</td>
+    </tr>
+  </table>
 </section>