[DescriptionList]:Remove selector and remove margin top and bottom inputs

ngx-fudis/projects/dev/src/app/app.component.html

@@ -70,7 +70,7 @@
 
  <fudis-expandable [title]="'Description list'">
  <ng-template fudisContent type="expandable">
- <!-- <fudis-description-list [data]="testData"></fudis-description-list> -->
+ <!-- <fudis-dl [data]="testData"></fudis-dl> -->
  </ng-template>
  </fudis-expandable>
 

ngx-fudis/projects/dev/src/app/dialog-test/dialog-test-content/dialog-test-content.component.ts

@@ -33,7 +33,7 @@ import { Component } from '@angular/core';
  hendrerit ante nisl sed quam. Vestibulum euismod leo ac magna pretium.
  </fudis-body-text>
  </fudis-grid>
- <!-- <fudis-description-list
+ <!-- <fudis-dl
  [columns]="'1fr 1fr 1fr'"
  [data]="[
  { key: 'Name', value: 'Mary Rhubarb', subHeading: 'The lady boss' },
@@ -44,7 +44,7 @@ import { Component } from '@angular/core';
  value: 'Pie maker 2023, Mix it up master 2008, Place setting champion 1987'
  }
  ]"
- ></fudis-description-list> -->
+ ></fudis-dl> -->
  <hr />
  <fudis-grid [columns]="3" [marginTop]="'sm'" [marginBottom]="'sm'">
  <div style="border: 2px solid lightblue">

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-details/description-list-item-details.component.ts

@@ -16,7 +16,7 @@ import { FudisIdService } from '../../../../services/id/id.service';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
- selector: 'fudis-dd, fudis-description-list-details',
+ selector: 'fudis-dd',
  styleUrls: ['./description-list-item-details.component.scss'],
  templateUrl: './description-list-item-details.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts

@@ -7,7 +7,7 @@ import { FudisIdService } from '../../../../services/id/id.service';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
- selector: 'fudis-dt, fudis-description-list-term',
+ selector: 'fudis-dt',
  templateUrl: './description-list-item-term.component.html',
  styleUrls: ['./description-list-item-term.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item.component.ts

@@ -17,7 +17,7 @@ import { DescriptionListComponent } from '../description-list.component';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
- selector: 'fudis-dl-item, fudis-description-list-item',
+ selector: 'fudis-dl-item',
  styleUrls: ['./description-list-item.component.scss'],
  templateUrl: './description-list-item.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.component.html

@@ -36,8 +36,6 @@
  [columnGap]="columnGap"
  [rowGap]="variant === 'compact' ? 'none' : rowGap"
  [columns]="columns ? columns : 2"
- [marginBottom]="marginBottom"
- [marginTop]="marginTop"
  role="list"
  >
  <ng-container *ngTemplateOutlet="dlContent"></ng-container>

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.component.ts

@@ -14,7 +14,7 @@ import { FudisGridGap } from '../../types/grid';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
- selector: 'fudis-dl, fudis-description-list',
+ selector: 'fudis-dl',
  templateUrl: './description-list.component.html',
  styleUrls: ['./description-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.stories.ts

@@ -69,7 +69,7 @@ const DescriptionListTemplate: StoryFn<DescriptionListComponent> = (
  template: html` <fudis-heading [level]="2" [variant]="'md'"
  >{{variant==='regular' ? 'Regular' : 'Compact'}} Description List</fudis-heading
  >
- <fudis-dl [marginTop]="'sm'" [variant]="variant" [columns]="2" [disableGrid]="disableGrid">
+ <fudis-dl class="fudis-mt-sm" [variant]="variant" [columns]="2" [disableGrid]="disableGrid">
  <fudis-dl-item>
  <fudis-dt [contentText]="'First name'"></fudis-dt>
  <fudis-dd [contentText]="'Rex'"></fudis-dd>
@@ -117,7 +117,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
  <fudis-heading [level]="2" [variant]="'md'"
  >Nested Description Lists with Indiana Jones Movies</fudis-heading
  >
- <fudis-dl [marginTop]="'sm'" [disableGrid]="disableGrid">
+ <fudis-dl class="fudis-mt-sm" [disableGrid]="disableGrid">
  <fudis-dl-item>
  <fudis-dt [contentText]="'Raiders of the Lost Ark'"></fudis-dt>
  <fudis-dd>
@@ -269,8 +269,8 @@ const NestedSubComponentsTemplate: StoryFn<DescriptionListComponent> = (
  template: html`<fudis-heading [level]="2" [variant]="'md'"
  >Description List With Sub Components</fudis-heading
  >
- <fudis-description-list
- [marginTop]="'sm'"
+ <fudis-dl
+ class="fudis-mt-sm"
  [disableGrid]="disableGrid"
  [variant]="variant"
  [columns]="columns"
@@ -306,7 +306,7 @@ const NestedSubComponentsTemplate: StoryFn<DescriptionListComponent> = (
  <fudis-button [label]="'Read more'" [variant]="'secondary'" [size]="'small'" />
  </fudis-dd>
  </fudis-dl-item>
- </fudis-description-list> `,
+ </fudis-dl> `,
 });
 
 export const NestedSubComponents = NestedSubComponentsTemplate.bind({});
@@ -323,27 +323,26 @@ const WithLanguageBadgesTemplate: StoryFn<DescriptionListComponent> = (
  template: html`<fudis-heading [level]="2" [variant]="'md'"
  >Description List With Language Badges</fudis-heading
  >
- <fudis-description-list
- [marginTop]="'sm'"
+ <fudis-dl
+ class="fudis-mt-sm fudis-mb-sm"
  [disableGrid]="disableGrid"
  [variant]="variant"
  [serviceDefaults]="serviceDefaults"
  [columns]="columns"
- [marginBottom]="'sm'"
  >
- <fudis-description-list-item>
+ <fudis-dl-item>
  <fudis-dt [contentText]="'Example paragraph'"></fudis-dt>
  <fudis-dd [lang]="'sv'" [contentText]="'Och den här är på Svenska'"></fudis-dd>
  <fudis-dd [lang]="'en'" [contentText]="'This is in English'"></fudis-dd>
  <fudis-dd [lang]="'fi'" [contentText]="'Tämä on suomeksi'"></fudis-dd>
- </fudis-description-list-item>
- <fudis-description-list-item>
+ </fudis-dl-item>
+ <fudis-dl-item>
  <fudis-dt [contentText]="'Example without one language'"></fudis-dt>
  <fudis-dd [lang]="'fi'" [contentText]="'Tähtien sota'"></fudis-dd>
  <fudis-dd [lang]="'en'" [contentText]="''"></fudis-dd>
  <fudis-dd [lang]="'sv'" [contentText]="'Stjärnornas krig'"></fudis-dd>
- </fudis-description-list-item>
- <fudis-description-list-item>
+ </fudis-dl-item>
+ <fudis-dl-item>
  <fudis-dt
  [contentText]="'Example which has multiple Details in different languages'"
  ></fudis-dt>
@@ -354,8 +353,8 @@ const WithLanguageBadgesTemplate: StoryFn<DescriptionListComponent> = (
  <fudis-dd [lang]="'en'" [contentText]="'New Hope'"></fudis-dd>
  <fudis-dd [lang]="'en'" [contentText]="'Empire Strikes Back'"></fudis-dd>
  <fudis-dd [lang]="'en'" [contentText]="'Return of the Jedi'"></fudis-dd>
- </fudis-description-list-item>
- </fudis-description-list>
+ </fudis-dl-item>
+ </fudis-dl>
  <example-language-service-change-component /> `,
 });
 
@@ -393,26 +392,26 @@ const ItemWithMultipleDdElementsTemplate: StoryFn<DescriptionListComponent> = (
  <fudis-heading [level]="2" [variant]="'md'"
  >Description List Item With Multiple Details</fudis-heading
  >
- <fudis-description-list
- [marginTop]="'sm'"
+ <fudis-dl
+ class="fudis-mt-sm"
  [variant]="'regular'"
  [columns]="'1fr 1fr'"
  [disableGrid]="disableGrid"
  [variant]="variant"
  >
- <fudis-description-list-item>
+ <fudis-dl-item>
  <fudis-dt [contentText]="'Members of Jedi High Council'"></fudis-dt>
  <fudis-dd
  [contentText]="item.value"
  [subHeading]="item.subHeading"
  *ngFor="let item of data"
  ></fudis-dd>
- </fudis-description-list-item>
- <fudis-description-list-item>
+ </fudis-dl-item>
+ <fudis-dl-item>
  <fudis-dt [contentText]="'Non-Jedi Master Members'"></fudis-dt>
  <fudis-dd [contentText]="'Anakin Skywalker'"></fudis-dd>
- </fudis-description-list-item>
- </fudis-description-list>
+ </fudis-dl-item>
+ </fudis-dl>
  `,
 });
 
@@ -429,19 +428,19 @@ const SingleListItemTemplate: StoryFn<DescriptionListComponent> = (
  props: args,
  template: html`
  <fudis-heading [level]="2" [variant]="'md'">Description List with Single Item</fudis-heading>
- <fudis-description-list
- [marginTop]="'sm'"
+ <fudis-dl
+ class="fudis-mt-sm"
  [variant]="'regular'"
  [columns]="'1fr 1fr'"
  [disableGrid]="disableGrid"
  [variant]="variant"
  [tag]="'p'"
  >
- <fudis-description-list-item>
+ <fudis-dl-item>
  <fudis-dt [contentText]="'Address'"></fudis-dt>
  <fudis-dd [contentText]="'Under the stairs'" [subHeading]="'4 Privet Drive'"></fudis-dd>
- </fudis-description-list-item>
- </fudis-description-list>
+ </fudis-dl-item>
+ </fudis-dl>
  `,
 });
 

ngx-fudis/projects/ngx-fudis/src/lib/utilities/storybook.ts

@@ -120,8 +120,6 @@ const descriptionListCommonExclude: string[] = [
  'columns',
  'id',
  'serviceDefaults',
- 'marginBottom',
- 'marginTop',
  'rowGap',
  'tag',
  'width',