fix: hero story and added attribute it-class to it-card component (#369)

* chore: changeset

* fix: format

Author: giuliaghisini

.changeset/deep-spies-find.md

@@ -0,0 +1,6 @@
+---
+'@italia/card': patch
+'@italia/hero': patch
+---
+
+Added attribute it-class to it-card component to set additional custom classes on card. Updated hero docs"

packages/card/src/card.scss

@@ -26,6 +26,9 @@ $utilities: (
     ),
   'shadow': map-get($utilities, 'shadow'),
   'border': map-get($utilities, 'border'),
+  'padding': map-get($utilities, 'padding'),
+  'padding-x': map-get($utilities, 'padding-x'),
+  'padding-y': map-get($utilities, 'padding-y'),
 );
 
 /**
@@ -59,6 +62,7 @@ dl {
   margin-top: 0;
   margin-bottom: var(--#{$prefix}spacing-s);
 }
+
 /* END copied from bsi reboot */
 
 ::slotted(figure),

packages/card/src/it-card.ts

@@ -41,6 +41,9 @@ export class ItCard extends BaseComponent {
   @property({ type: String, attribute: 'heading-level' })
   headingLevel: CardHeadingLevel = 'h3';
 
+  @property({ type: String, attribute: 'it-class' })
+  itClass: string | undefined;
+
   @queryAssignedElements({ slot: 'title' })
   _titleElements!: HTMLElement[];
 
@@ -157,7 +160,7 @@ export class ItCard extends BaseComponent {
     const hasTitleIcon = this._titleElements.some((el) => el.querySelector('.it-card-title-icon-wrapper') !== null);
     const isInline = this.variant.startsWith('inline');
 
-    const classes = this.composeClass('it-card', 'rounded', shadowClass, borderClass, {
+    const classes = this.composeClass('it-card', 'rounded', shadowClass, borderClass, this.itClass, {
       'it-card-inline': isInline,
       'it-card-inline-reverse': this.variant.endsWith('reverse'),
       'it-card-inline-mini': this.variant.includes('mini'),

packages/card/stories/it-card.stories.ts

@@ -19,6 +19,7 @@ interface CardProps {
   headingLevel?: CardHeadingLevel;
   shadow?: CardShadow;
   border?: '0';
+  'it-class'?: string;
 }
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -74,6 +75,11 @@ const meta = {
       options: [undefined, '0'],
       description: 'Imposta il valore 0 per rimuovere il bordo della card.',
     },
+    'it-class': {
+      type: 'string',
+      description:
+        "Aggiunge classi custom alla card generata. Utile per impostare padding custom all'interno della Card.",
+    },
     // scrollLimit: {
     //   name: 'scroll-limit',
     //   control: 'number',
@@ -131,6 +137,7 @@ export const EsempioInterattivo: Story = {
       heading-level=${ifDefined(args.headingLevel)}
       shadow=${ifDefined(args.shadow)}
       border=${ifDefined(args.border)}
+      it-class=${ifDefined(args['it-class'])}
     >
       <a slot="title" href="#">Titolo del contenuto</a>
       <figure slot="image" class="figure img-full">

packages/hero/stories/it-hero.stories.ts

@@ -132,7 +132,6 @@ export const ConTestoEImmaginePrimaryFilter: Story = {
   render: (args) => renderComponent({ ...args, children: html`${exampleSlotImage}` }),
 };
 
-// TODO: Sostituire in questo esempio, lhtml della card con il componente <it-card>
 export const OverlapContent: Story = {
   name: 'Con immagine e margine negativo per contenuti sovrapposti',
   args: { ...meta.args, overlap: true },
@@ -141,28 +140,25 @@ export const OverlapContent: Story = {
     <div class="container">
       <div class="row">
         <div class="col-12">
-          <!-- <div class="col-12 col-lg-10 offset-lg-1"> e card-space nel wrapper>-->
           <div class="col-12 mb-3 mb-md-4">
-            <!--start it-card-->
-            <article class="it-card rounded shadow border px-5 py-4">
+            <it-card shadow="md" it-class="px-5 py-4">
               <!--card first child is the title (link)-->
-              <h3 class="it-card-title no_toc h4">Titolo del contenuto</h3>
+              <h3 slot="title" class="h4">Titolo del contenuto</h3>
               <!--card body content-->
-              <div class="it-card-body">
-                <p class="it-card-text">
+              <div slot="text">
+                <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                   dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                   incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                 </p>
               </div>
-              <div class="it-card-footer border-0" aria-label="Link correlati:">
+              <div slot="footer">
                 <a href="#" class="it-card-link"
                   >Scopri di più <span class="visually-hidden">su Titolo del contenuto</span></a
                 >
               </div>
-            </article>
-            <!--end it-card-->
+            </it-card>
           </div>
         </div>
       </div>