[Heading, Section, Form]: Input property name changes: size --> variant, titleSize --> titleVariant

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

@@ -78,7 +78,7 @@
  <ng-template fudisContent type="expandable">
  <fudis-grid [columns]="1" [rowGap]="'xxl'">
  <fudis-grid [columns]="2">
- <fudis-heading [level]="3" [size]="'xl'">Grid stuff!</fudis-heading>
+ <fudis-heading [level]="3" [variant]="'xl'">Grid stuff!</fudis-heading>
  <fudis-button
  [label]="'Update Grid Service defaults'"
  (handleClick)="updateGridServiceDefaults()"

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

@@ -91,21 +91,23 @@
  <fudis-expandable [title]="'Autocomplete examples'">
  <ng-template fudisContent type="expandable">
  <fudis-grid [columns]="'inputLg'">
- <fudis-heading [level]="3" [size]="'md'">Single-select dropdown</fudis-heading>
+ <fudis-heading [level]="3" [variant]="'md'">Single-select dropdown</fudis-heading>
  <!-- <fudis-autocomplete
  [label]="'Choose item'"
  [variant]="'dropdown'"
  [id]="'dropdown-1234'"
  [options]="multipleOptions"
  [control]="testFormGroup.controls['autocompleteDropdown']"
  /> -->
- <fudis-heading [level]="3" [size]="'md'">Single-select search</fudis-heading>
+ <fudis-heading [level]="3" [variant]="'md'">Single-select search</fudis-heading>
  <!-- <fudis-autocomplete
  [label]="'Search item'"
  [options]="multipleOptions"
  [control]="testFormGroup.controls['autocompleteSearch']"
  /> -->
- <fudis-heading [level]="3" [size]="'md'">Autocomplete multi-select dropdown</fudis-heading>
+ <fudis-heading [level]="3" [variant]="'md'"
+ >Autocomplete multi-select dropdown</fudis-heading
+ >
  <!-- <fudis-autocomplete-multi-select
  [label]="'Search and choose items'"
  [options]="multipleOptions"

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

@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
  >
  <fudis-dialog-content>
  <fudis-grid [marginTop]="'md'" [marginBottom]="'md'">
- <fudis-heading [level]="3" [size]="'sm'">
+ <fudis-heading [level]="3" [variant]="'sm'">
  I am fudis-heading inside the grid taking the whole width
  </fudis-heading>
  <fudis-body-text>

ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.stories.ts

@@ -103,37 +103,37 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
  [rowGap]="'xs'"
  [marginBottom]="'md'"
  >
- <fudis-heading [level]="4" [size]="'sm'">Medium size buttons</fudis-heading>
+ <fudis-heading [level]="4" [variant]="'sm'">Medium size buttons</fudis-heading>
  <fudis-button variant="primary" label="Primary"></fudis-button>
  <fudis-button variant="secondary" label="Secondary"></fudis-button>
  <fudis-button variant="tertiary" label="Tertiary"></fudis-button>
  <fudis-button label="Disabled" [disabled]="true"></fudis-button>
 
- <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+ <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
  >Medium size buttons with icon</fudis-heading
  >
  <fudis-button variant="primary" icon="search" label="Primary"></fudis-button>
  <fudis-button variant="secondary" icon="search" label="Secondary"></fudis-button>
  <fudis-button variant="tertiary" icon="search" label="Tertiary"></fudis-button>
  <fudis-button label="Disabled" icon="search" [disabled]="true"></fudis-button>
 
- <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+ <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
  >Small size buttons</fudis-heading
  >
  <fudis-button variant="primary" label="Primary" size="small"></fudis-button>
  <fudis-button variant="secondary" label="Secondary" size="small"></fudis-button>
  <fudis-button variant="tertiary" label="Tertiary" size="small"></fudis-button>
  <fudis-button label="Disabled" [disabled]="true" size="small"></fudis-button>
 
- <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+ <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
  >Small size buttons with icons</fudis-heading
  >
  <fudis-button variant="primary" icon="search" label="Primary" size="small"></fudis-button>
  <fudis-button variant="secondary" icon="search" label="Secondary" size="small"></fudis-button>
  <fudis-button variant="tertiary" icon="search" label="Tertiary" size="small"></fudis-button>
  <fudis-button label="Disabled" icon="search" [disabled]="true" size="small"></fudis-button>
 
- <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+ <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
  >Medium sized buttons with label hidden</fudis-heading
  >
  <fudis-button
@@ -161,7 +161,7 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
  [disabled]="true"
  ></fudis-button>
 
- <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+ <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
  >Small sized buttons with label hidden</fudis-heading
  >
  <fudis-button
@@ -193,7 +193,7 @@ export const AllVariants: StoryFn<ButtonComponent> = (args: ButtonComponent) =>
  size="small"
  ></fudis-button>
 
- <fudis-heading style="margin-top: 2rem;" [level]="4" [size]="'sm'"
+ <fudis-heading style="margin-top: 2rem;" [level]="4" [variant]="'sm'"
  >Icon only sized buttons with label hidden</fudis-heading
  >
  <fudis-button

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

@@ -65,7 +65,7 @@ const DescriptionListTemplate: StoryFn<DescriptionListComponent> = (
  args: DescriptionListComponent,
 ) => ({
  props: args,
- template: html` <fudis-heading [level]="2" [size]="'md'"
+ 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">
@@ -113,7 +113,7 @@ const NestedDescriptionListsTemplate: StoryFn<DescriptionListComponent> = (
  quoteTwo: "Archimedes didn't know about continental drift!",
  },
  template: html`
- <fudis-heading [level]="2" [size]="'md'"
+ <fudis-heading [level]="2" [variant]="'md'"
  >Nested Description Lists with Indiana Jones Movies</fudis-heading
  >
  <fudis-dl [marginTop]="'sm'" [disableGrid]="disableGrid">
@@ -229,7 +229,7 @@ const DescriptionListInsideGridTemplate: StoryFn<DescriptionListComponent> = (
 ) => ({
  props: args,
  template: html`<fudis-grid [columns]="{sm: 1, md: 2}" [rowGap]="'xs'">
- <fudis-heading [level]="2" [size]="'md'"
+ <fudis-heading [level]="2" [variant]="'md'"
  >Description List as Grid's Child Component</fudis-heading
  >
  <fudis-dl [disableGrid]="disableGrid" [variant]="variant">
@@ -260,7 +260,7 @@ const NestedSubComponentsTemplate: StoryFn<DescriptionListComponent> = (
  args: DescriptionListComponent,
 ) => ({
  props: args,
- template: html`<fudis-heading [level]="2" [size]="'md'"
+ template: html`<fudis-heading [level]="2" [variant]="'md'"
  >Description List With Sub Components</fudis-heading
  >
  <fudis-description-list
@@ -303,8 +303,9 @@ const WithLanguageBadgesTemplate: StoryFn<DescriptionListComponent> = (
  args: DescriptionListComponent,
 ) => ({
  props: args,
- template: html`
- <fudis-heading [level]="2" [size]="'md'">Description List With Language Badges</fudis-heading>
+ template: html`<fudis-heading [level]="2" [variant]="'md'"
+ >Description List With Language Badges</fudis-heading
+ >
  <fudis-description-list
  [marginTop]="'sm'"
  [disableGrid]="disableGrid"
@@ -338,8 +339,7 @@ const WithLanguageBadgesTemplate: StoryFn<DescriptionListComponent> = (
  <fudis-dd [lang]="'en'" [textContent]="'Return of the Jedi'"></fudis-dd>
  </fudis-description-list-item>
  </fudis-description-list>
- <example-language-service-change-component />
- `,
+ <example-language-service-change-component /> `,
 });
 
 export const WithLanguageBadges = WithLanguageBadgesTemplate.bind({});
@@ -373,7 +373,7 @@ const ItemWithMultipleDdElementsTemplate: StoryFn<DescriptionListComponent> = (
 ) => ({
  props: { ...args, data: multipleDDData },
  template: html`
- <fudis-heading [level]="2" [size]="'md'"
+ <fudis-heading [level]="2" [variant]="'md'"
  >Description List Item With Multiple Details</fudis-heading
  >
  <fudis-description-list
@@ -411,7 +411,7 @@ const SingleListItemTemplate: StoryFn<DescriptionListComponent> = (
 ) => ({
  props: args,
  template: html`
- <fudis-heading [level]="2" [size]="'md'">Description List with Single Item</fudis-heading>
+ <fudis-heading [level]="2" [variant]="'md'">Description List with Single Item</fudis-heading>
  <fudis-description-list
  [marginTop]="'sm'"
  [variant]="'regular'"

ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts

@@ -143,7 +143,7 @@ class DialogWithFormComponent {
  >
  <fudis-dialog-content>
  <fudis-grid [marginTop]="'md'" [marginBottom]="'md'">
- <fudis-heading [level]="3" [size]="'sm'">
+ <fudis-heading [level]="3" [variant]="'sm'">
  I am fudis-heading inside the grid taking the whole width
  </fudis-heading>
  <fudis-body-text>

ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts

@@ -18,7 +18,8 @@ import { FieldSetBaseDirective } from '../../../directives/form/fieldset-base/fi
 import { ActionsDirective } from '../../../directives/content-projection/actions/actions.directive';
 import { NotificationsDirective } from '../../../directives/content-projection/notifications/notifications.directive';
 import { FudisGridWidth, FudisGridAlign } from '../../../types/grid';
-import { FudisComponentChanges, FudisSpacing } from '../../../types/miscellaneous';
+import { FudisComponentChanges } from '../../../types/miscellaneous';
+import { FudisSpacing } from '../../../types/spacing';
 import { ContentDirective } from '../../../directives/content-projection/content/content.directive';
 import { FudisIdService } from '../../../services/id/id.service';
 import { FudisInternalErrorSummaryService } from '../../../services/form/error-summary/internal-error-summary.service';

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.html

@@ -22,7 +22,7 @@
  class="fudis-form__header__title__dialog"
  fudisDialogTitle
  [marginBottom]="'xs'"
- [size]="titleSize"
+ [variant]="titleVariant"
  [level]="level"
  >{{ title
  }}<ng-container *ngIf="badge && badgeText">
@@ -35,7 +35,7 @@
  </fudis-heading>
  </ng-container>
  <ng-container *ngIf="!_dialogParent">
- <fudis-heading [marginBottom]="'xs'" [size]="titleSize" [level]="level"
+ <fudis-heading [marginBottom]="'xs'" [variant]="titleVariant" [level]="level"
  >{{ title
  }}<ng-container *ngIf="badge && badgeText">
  <fudis-badge

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.spec.ts

@@ -32,8 +32,8 @@ import { LinkComponent } from '../../link/link.component';
  selector: 'fudis-mock-form-component',
  template: `<fudis-form
  [id]="'my-own-id'"
+ [titleVariant]="'md'"
  [level]="1"
- [titleSize]="'md'"
  [title]="'Example Form'"
  [helpText]="'Some help for the form'"
  [badge]="badge"
@@ -162,7 +162,7 @@ describe('FormComponent', () => {
  expect(headingElement).toBeTruthy();
  expect(headingContent).toBeTruthy();
  expect(headingContent?.textContent).toEqual('Example Form');
- expect(headingContent?.className).toContain('fudis-heading__size__md');
+ expect(headingContent?.className).toContain('fudis-heading__variant__md');
  });
 
  it('should have badge and badgeText if given', () => {

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts

@@ -10,7 +10,7 @@ import {
  Optional,
  ViewEncapsulation,
 } from '@angular/core';
-import { FudisHeadingSize, FudisHeadingLevel } from '../../../types/typography';
+import { FudisHeadingVariant, FudisHeadingLevel } from '../../../types/typography';
 import { FudisIdService } from '../../../services/id/id.service';
 import { HeaderDirective } from '../../../directives/content-projection/header/header.directive';
 import { ActionsDirective } from '../../../directives/content-projection/actions/actions.directive';
@@ -75,7 +75,7 @@ export class FormComponent extends GridApiDirective implements OnInit, AfterCont
  /**
  * Heading size for the form title
  */
- @Input() titleSize: FudisHeadingSize = 'xl';
+ @Input() titleVariant: FudisHeadingVariant = 'xl';
 
  /**
  * Help text positioned under form title

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.docs.mdx

@@ -60,7 +60,9 @@ The complete list of allowed properties can be found from Properties table at th
 ### Heading
 
 Fudis Form is not valid without a heading.
-**Mandatory properties** are `title` (title text content) and `level` (the semantic heading level), additionally it is possible to change the visual size of the heading with `titleSize`, which otherwise defaults to `xl`.
+
+**Mandatory properties** are `title` (title text content) and `level` (the semantic heading level), additionally it is possible to change the visual size of the heading with `titleVariant`, which otherwise defaults to `xl`.
+
 See possible heading levels and sizes from [Heading Documentation](/docs/components-typography-heading--documentation).
 
 ### Badge

ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts

@@ -18,10 +18,15 @@ import { FudisTranslationService } from '../../../services/translation/translati
 import { FudisFocusService } from '../../../services/focus/focus.service';
 import docs from './form.docs.mdx';
 import { FudisBadgeVariant } from '../../../types/miscellaneous';
-import { FudisHeadingLevel, FudisHeadingSize } from '../../../types/typography';
+import {
+ FudisHeadingLevel,
+ FudisHeadingVariant,
+ fudisHeadingLevelArray,
+} from '../../../types/typography';
 import { formExclude } from '../../../utilities/storybook';
 import { defaultOptions } from '../select/common/mock_data';
 import { FudisErrorSummaryService } from '../../../services/form/error-summary/error-summary.service';
+import { fudisSpacingArray } from '../../../types/spacing';
 
 @Component({
  selector: 'example-with-multiple-forms',
@@ -231,7 +236,7 @@ class ExampleWithMultipleFormsComponent {
  [badgeText]="badgeText"
  [level]="level"
  [title]="title"
- [titleSize]="titleSize"
+ [titleVariant]="titleVariant"
  [helpText]="helpText"
  [errorSummaryLinkType]="errorSummaryLinkType"
  [errorSummaryHelpText]="errorSummaryHelpText"
@@ -395,8 +400,8 @@ class FormContentExampleComponent implements OnInit {
  ) {}
 
  @Input() title: string;
+ @Input() titleVariant: FudisHeadingVariant;
  @Input() level: FudisHeadingLevel;
- @Input() titleSize: FudisHeadingSize;
  @Input() helpText: string;
  @Input() badge: FudisBadgeVariant;
  @Input() badgeText: string;
@@ -536,14 +541,14 @@ export default {
  type: 'text',
  },
  },
- titleSize: {
- options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
+ titleVariant: {
+ options: fudisSpacingArray,
  control: {
  type: 'select',
  },
  },
  level: {
- options: [1, 2, 3, 4, 5, 6],
+ options: fudisHeadingLevelArray,
  control: {
  type: 'select',
  },
@@ -563,8 +568,8 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
  props: args,
  template: html` <example-form-content
  [title]="title"
+ [titleVariant]="titleVariant"
  [level]="level"
- [titleSize]="titleSize"
  [helpText]="helpText"
  [badge]="badge"
  [badgeText]="badgeText"
@@ -576,8 +581,8 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
 
 Example.args = {
  title: 'Example Form Heading',
+ titleVariant: 'xl',
  level: 1,
- titleSize: 'xl',
  helpText: 'This is an additional help text to give user more information about the form',
  badge: 'primary',
  badgeText: 'Example',