[Form & Section]: Change titleLevel property and badge added to section

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

@@ -13,7 +13,7 @@
  [errorSummaryVisible]="errorSummaryVisible"
  [title]="'Form title here hello'"
  [errorSummaryHelpText]="'There were some errors'"
- [titleLevel]="2"
+ [level]="2"
  >
  <ng-template fudisContent type="form">
  <fudis-fieldset [label]="t('fieldsetTitle')">

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

@@ -23,7 +23,7 @@ type MyForm = {
  [errorSummaryLinkType]="'onClick'"
  [title]="'Dialog with fudis-form'"
  [errorSummaryHelpText]="'You did not fill all the required information'"
- [titleLevel]="2"
+ [level]="2"
  >
  <ng-template fudisContent [type]="'form'">
  <fudis-fieldset [label]="'We need some information'" [helpText]="_greetingFromOpener">

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

@@ -165,7 +165,7 @@ class SimpleDialogComponent {
 
 ## Fudis Form inside Dialog
 
-When using Form inside Dialog, wrap the Form inside `fudis-dialog-content` and use it normally. Meaning, add all the necessary Error Summary properties, such as `errorSummaryLinkType` and `errorSummaryHelpText`. Also add `title` and `titleLevel`, this title will be the title of the dialog and have initial focus when dialog is opened with keyboard.
+When using Form inside Dialog, wrap the Form inside `fudis-dialog-content` and use it normally. Meaning, add all the necessary Error Summary properties, such as `errorSummaryLinkType` and `errorSummaryHelpText`. Also add `title` and `level`, this title will be the title of the dialog and have initial focus when dialog is opened with keyboard.
 
 In `fudisContent` template add form components and in `fudisActions` template add action button(s). Unlike normal form, where buttons are positioned on top of the form, **these action buttons will be positioned at the bottom** after the form content, in order to follow dialog look and feel.
 
@@ -181,7 +181,7 @@ In `fudisContent` template add form components and in `fudisActions` template ad
  <fudis-dialog-content>
  <fudis-form>
  [title]="'Dialog with fudis-form'"
- [titleLevel]="2"
+ [level]="2"
  [errorSummaryLinkType]="'href'"
  [errorSummaryHelpText]="'You need to fill up the information.'">
  <ng-template fudisContent [type]="'form'">

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

@@ -65,7 +65,7 @@ class DialogLaucherComponent {
  <fudis-dialog-content>
  <fudis-form
  [title]="'Dialog with fudis-form'"
- [titleLevel]="2"
+ [level]="2"
  [errorSummaryLinkType]="'onClick'"
  [errorSummaryHelpText]="'You need to fill up the information.'"
  >

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

@@ -37,7 +37,7 @@ import { LinkDirective } from '../../../directives/link/link.directive';
  selector: 'fudis-mock-form-component',
  template: ` <fudis-form
  #formRef
- [titleLevel]="1"
+ [level]="1"
  [title]="'Example Form with Error Summary'"
  [id]="'unique-form-example-1'"
  [errorSummaryLinkType]="errorSummaryLinkType"

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

@@ -20,7 +20,7 @@ import { excludeAllRegex } from '../../../utilities/storybook';
  template: ` <fudis-form
  [align]="'center'"
  [marginTop]="'xl'"
- [titleLevel]="1"
+ [level]="1"
  [title]="'Example Form with Error Summary'"
  [id]="id"
  [errorSummaryLinkType]="'onClick'"

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

@@ -15,15 +15,15 @@
 >
  <div [id]="id + '_header'" class="fudis-form__header">
  <div class="fudis-form__header__main">
- <ng-container *ngIf="title && titleLevel">
+ <ng-container *ngIf="title && level">
  <div class="fudis-form__header__title">
  <ng-container *ngIf="_dialogParent">
  <fudis-heading
  class="fudis-form__header__title__dialog"
  fudisDialogTitle
  [marginBottom]="'xs'"
  [size]="titleSize"
- [level]="titleLevel"
+ [level]="level"
  >{{ title
  }}<ng-container *ngIf="badge && badgeText">
  <fudis-badge
@@ -35,7 +35,7 @@
  </fudis-heading>
  </ng-container>
  <ng-container *ngIf="!_dialogParent">
- <fudis-heading [marginBottom]="'xs'" [size]="titleSize" [level]="titleLevel"
+ <fudis-heading [marginBottom]="'xs'" [size]="titleSize" [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,7 +32,7 @@ import { LinkComponent } from '../../link/link.component';
  selector: 'fudis-mock-form-component',
  template: `<fudis-form
  [id]="'my-own-id'"
- [titleLevel]="1"
+ [level]="1"
  [titleSize]="'md'"
  [title]="'Example Form'"
  [helpText]="'Some help for the form'"

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

@@ -70,7 +70,7 @@ export class FormComponent extends GridApiDirective implements OnInit, AfterCont
  /**
  * Heading level for the form title
  */
- @Input() titleLevel: FudisHeadingLevel;
+ @Input() level: FudisHeadingLevel;
 
  /**
  * Heading size for the form title

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

@@ -60,7 +60,7 @@ 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 `titleLevel` (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 `titleSize`, which otherwise defaults to `xl`.
 See possible heading levels and sizes from [Heading Documentation](/docs/components-typography-heading--documentation).
 
 ### Badge
@@ -88,7 +88,7 @@ This is a simple example on how to use Form Component.
 
 <fudis-form
  [title]="'Example form heading'"
- [titleLevel]="2"
+ [level]="2"
  [helpText]="'Here is some more information about this form'"
  [errorSummaryHelpText]="'There are errors in this form.'"
 >

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

@@ -35,7 +35,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
  />
 
  <fudis-form
- [titleLevel]="2"
+ [level]="2"
  [title]="'Form with Text Input'"
  [errorSummaryLinkType]="'onClick'"
  [errorSummaryVisible]="errorSummaryVisible"
@@ -60,7 +60,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
  </ng-template>
  </fudis-form>
  <fudis-form
- [titleLevel]="2"
+ [level]="2"
  [title]="'Form with Text Area'"
  [errorSummaryLinkType]="'onClick'"
  [errorSummaryVisible]="errorSummaryVisible"
@@ -85,7 +85,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
  </ng-template>
  </fudis-form>
  <fudis-form
- [titleLevel]="2"
+ [level]="2"
  [title]="'Form with Checkbox Group'"
  [errorSummaryLinkType]="'onClick'"
  [errorSummaryVisible]="errorSummaryVisible"
@@ -119,7 +119,7 @@ import { FudisErrorSummaryService } from '../../../services/form/error-summary/e
  </ng-template>
  </fudis-form>
  <!-- <fudis-form
- [titleLevel]="2"
+ [level]="2"
  [title]="'Form with Select and Multiselect'"
  [errorSummaryLinkType]="'onClick'"
  [errorSummaryVisible]="errorSummaryVisible"
@@ -229,7 +229,7 @@ class ExampleWithMultipleFormsComponent {
  [marginTop]="'xl'"
  [badge]="badge"
  [badgeText]="badgeText"
- [titleLevel]="titleLevel"
+ [level]="level"
  [title]="title"
  [titleSize]="titleSize"
  [helpText]="helpText"
@@ -395,7 +395,7 @@ class FormContentExampleComponent implements OnInit {
  ) {}
 
  @Input() title: string;
- @Input() titleLevel: FudisHeadingLevel;
+ @Input() level: FudisHeadingLevel;
  @Input() titleSize: FudisHeadingSize;
  @Input() helpText: string;
  @Input() badge: FudisBadgeVariant;
@@ -542,7 +542,7 @@ export default {
  type: 'select',
  },
  },
- titleLevel: {
+ level: {
  options: [1, 2, 3, 4, 5, 6],
  control: {
  type: 'select',
@@ -563,7 +563,7 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
  props: args,
  template: html` <example-form-content
  [title]="title"
- [titleLevel]="titleLevel"
+ [level]="level"
  [titleSize]="titleSize"
  [helpText]="helpText"
  [badge]="badge"
@@ -576,7 +576,7 @@ export const Example: StoryFn<FormComponent> = (args: FormComponent) => ({
 
 Example.args = {
  title: 'Example Form Heading',
- titleLevel: 1,
+ level: 1,
  titleSize: 'xl',
  helpText: 'This is an additional help text to give user more information about the form',
  badge: 'primary',

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

@@ -136,7 +136,7 @@ const PreSelectedTemplate: StoryFn<MultiselectComponent> = (args: MultiselectCom
  </fudis-body-text>
 
  <ng-container *ngIf="control.value && control.value.length > 0">
- <fudis-section [title]="'Selected options'" [titleLevel]="2">
+ <fudis-section [title]="'Selected options'" [level]="2">
  <ng-template fudisContent type="section">
  <ng-container *ngFor="let option of control.value; let i = index">
  <fudis-heading [level]="3" [size]="'md'">Option {{i + 1}} </fudis-heading>

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

@@ -38,7 +38,7 @@ const SelectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectComponent)
  groupedMockData,
  },
  template: html`
- <fudis-section [title]="'Select showcase'" [titleLevel]="1" [width]="'md'">
+ <fudis-section [title]="'Select showcase'" [level]="1" [width]="'md'">
  <ng-template fudisNotifications type="section">
  <fudis-body-text
  >Following Select components share all same Form Control. When you change value in one,
@@ -231,7 +231,7 @@ const MultiselectShowcaseTemplate: StoryFn<SelectComponent> = (args: SelectCompo
  groupedMockData,
  },
  template: html`
- <fudis-section [title]="'Multiselect showcase'" [titleLevel]="1" [width]="'md'">
+ <fudis-section [title]="'Multiselect showcase'" [level]="1" [width]="'md'">
  <ng-template fudisNotifications type="section">
  <fudis-body-text
  >Following Multiselect components share all same Form Control</fudis-body-text

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

@@ -15,7 +15,7 @@ Section has two main areas: header and content. Inside header, addition to headi
 
 ### Header
 
-Each Section should be identified, therefore `title` is mandatory property which can be modified with `titleSize` and `titleLevel` properties. As in [Heading Component](/docs/components-typography-heading--documentation), size is visual and level is semantic adjustment.
+Each Section should be identified, therefore `title` is mandatory property which can be modified with `titleSize` and `level` properties. As in [Heading Component](/docs/components-typography-heading--documentation), size is visual and level is semantic adjustment.
 Heading can also include `tooltip` with all the [Tooltip](/docs/directives-tooltip--documentation) Inputs available.
 
 #### Notifications and Actions
@@ -48,7 +48,7 @@ Avoiding too complex page structure is recommended, but if you have a need to ne
 
 #### Heading Levels
 
-Just as with any HTML content, proper heading level order is important for the accessibility. If you are nesting Sections, make sure that `titleLevel` of nested Section is lower than its parent's.
+Just as with any HTML content, proper heading level order is important for the accessibility. If you are nesting Sections, make sure that `level` of nested Section is lower than its parent's.
 
 #### Actions
 
@@ -59,15 +59,15 @@ If you have Section inside Section, and the nested one has Actions-content but p
 <fudis-section
  [title]="'Parent Section'"
  [titleSize]="'lg'"
- [titleLevel]="2"
+ [level]="2"
  >
  // Empty Actions template, so that nested Actions will not be rendered to the parent!
  <ng-template fudisActions [type]="'section'"></ng-template>
  <ng-template fudisContent [type]="'section'">
  <fudis-section
  [title]="'Nested Section'"
  [titleSize]="'md'"
- [titleLevel]="3" >
+ [level]="3" >
  <ng-template fudisActions [type]="'section'">
  <fudis-button [label]="'Nested Action button'"/>
  </ng-template>
@@ -100,7 +100,7 @@ When using Section inside [Form](/docs/components-form-form--documentation) with
 
 - Section Component uses native `<section>` element
 - Section and its title is linked to its content by aria-describedby
-- Section title must be provided `titleLevel` property
+- Section title must be provided `level` property
 
 ## Related components
 

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

@@ -15,9 +15,17 @@
  <div class="fudis-section__header" [id]="_headingId">
  <div class="fudis-section__header__container">
  <div class="fudis-section__header__heading">
- <fudis-heading [marginBottom]="'none'" [level]="titleLevel" [size]="titleSize">{{
- title
- }}</fudis-heading>
+ <fudis-heading [marginBottom]="'none'" [level]="level" [size]="titleSize"
+ >{{ title
+ }}<ng-container *ngIf="badge && badgeText">
+ <fudis-badge
+ class="fudis-section__header__heading__badge"
+ [variant]="badge"
+ [content]="badgeText"
+ >
+ </fudis-badge>
+ </ng-container>
+ </fudis-heading>
  <ng-container *ngIf="tooltip">
  <fudis-button
  class="fudis-section__header__heading__tooltip"

ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.scss

@@ -9,6 +9,10 @@
  display: flex;
  align-items: center;
 
+ &__badge {
+ margin-left: spacing.$spacing-xs;
+ }
+
  &__tooltip {
  margin-left: spacing.$spacing-xs;
  }

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

@@ -31,7 +31,7 @@ import { getElement, sortClasses } from '../../utilities/tests/utilities';
  template: `<fudis-section
  [title]="title"
  [titleSize]="titleSize"
- [titleLevel]="titleLevel"
+ [level]="level"
  [classes]="classes"
  [tooltip]="tooltip"
  [tooltipToggle]="tooltipToggle"
@@ -53,7 +53,7 @@ import { getElement, sortClasses } from '../../utilities/tests/utilities';
 class MockFudisSectionComponent {
  title: string = 'This is section title';
  titleSize: FudisHeadingSize = 'lg';
- titleLevel: FudisHeadingLevel = 2;
+ level: FudisHeadingLevel = 2;
  classes: string[];
  tooltip: string = 'This is tooltip in section';
  tooltipToggle: boolean = false;
@@ -109,7 +109,7 @@ describe('SectionComponent', () => {
  }
 
  function sectionTitleLevelCheck(level: FudisHeadingLevel): void {
- mockComponent.titleLevel = level;
+ mockComponent.level = level;
  mockFixture.detectChanges();
 
  const headingElement = mockFixture.nativeElement.querySelector('fudis-heading');

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

@@ -16,7 +16,7 @@ import { ContentDirective } from '../../directives/content-projection/content/co
 import { FudisGridWidth, FudisGridAlign } from '../../types/grid';
 
 import { TooltipApiDirective } from '../../directives/tooltip/tooltip-api.directive';
-import { FudisComponentChanges, FudisSpacing } from '../../types/miscellaneous';
+import { FudisBadgeVariant, FudisComponentChanges, FudisSpacing } from '../../types/miscellaneous';
 import { FudisInternalErrorSummaryService } from '../../services/form/error-summary/internal-error-summary.service';
 import { FudisFormErrorSummarySection } from '../../types/forms';
 import { ActionsDirective } from '../../directives/content-projection/actions/actions.directive';
@@ -66,13 +66,23 @@ export class SectionComponent extends TooltipApiDirective implements OnInit, OnC
  /**
  * Heading level for the section title
  */
- @Input() titleLevel: FudisHeadingLevel = 2;
+ @Input() level: FudisHeadingLevel = 2;
 
  /**
  * Heading size for the section title
  */
  @Input() titleSize: FudisHeadingSize = 'lg';
 
+ /**
+ * Add badge to the section title
+ */
+ @Input() badge: FudisBadgeVariant | null;
+
+ /**
+ * Badge text
+ */
+ @Input() badgeText: string | null;
+
  /**
  * Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes.
  * xxl = Default value. Viewports of 1600px and larger