From 15b6273505d839e2dc0ea4bc05257db25d367591 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Fri, 24 May 2024 13:49:07 +0300 Subject: [PATCH 01/10] DS-300: arrange typing locations --- .../lib/components/form/fieldset/fieldset.component.ts | 3 ++- .../src/lib/components/section/section.component.ts | 3 ++- .../typography/body-text/body-text.component.ts | 3 +-- .../components/typography/heading/heading.component.scss | 4 ++++ .../components/typography/heading/heading.component.ts | 4 +++- .../lib/components/typography/heading/heading.stories.ts | 8 +++++--- .../lib/directives/grid/grid-api/grid-api.directive.ts | 2 +- .../spacing/spacing-api/spacing-api.directive.ts | 2 +- ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts | 2 +- ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts | 2 +- .../projects/ngx-fudis/src/lib/types/miscellaneous.ts | 8 -------- ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts | 5 ++++- ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts | 6 +++++- .../src/lib/utilities/breakpoint/breakpoint-utils.ts | 2 +- 14 files changed, 31 insertions(+), 23 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts index b72dbc89f..d43ae7e44 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts +++ b/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'; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts index 92f5b12ba..4cb15b404 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts @@ -16,7 +16,8 @@ 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 { FudisComponentChanges } from '../../types/miscellaneous'; +import { FudisSpacing } from '../../types/spacing'; 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'; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts index 2fcb1cbd9..f56873cfe 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts @@ -5,8 +5,7 @@ import { ViewEncapsulation, ChangeDetectionStrategy, } from '@angular/core'; -import { FudisBodyText } from '../../../types/typography'; -import { FudisTextAlign } from '../../../types/miscellaneous'; +import { FudisBodyText, FudisTextAlign } from '../../../types/typography'; @Component({ selector: 'fudis-body-text', diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss index d68ce90c5..e7cfcda3e 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.scss @@ -35,6 +35,10 @@ &__xxl { @include typography.heading-xxl; } + + &__label { + @include typography.select-group-label; + } } &__align { diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts index 78a4d094f..39a67fcd6 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts @@ -8,7 +8,9 @@ import { } from '@angular/core'; import { FudisHeadingLevel, FudisHeadingSize } from '../../../types/typography'; import { FudisIdService } from '../../../services/id/id.service'; -import { FudisComponentChanges, FudisSpacing, FudisTextAlign } from '../../../types/miscellaneous'; +import { FudisComponentChanges } from '../../../types/miscellaneous'; +import { FudisTextAlign } from '../../../types/typography'; +import { FudisSpacing } from '../../../types/spacing'; @Component({ selector: 'fudis-heading', diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts index a52dd8566..5c2cfe87a 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts @@ -2,6 +2,8 @@ import { StoryFn, Meta } from '@storybook/angular'; import { HeadingComponent } from './heading.component'; import readme from './readme.mdx'; import { headingControlsExclude } from '../../../utilities/storybook'; +import { fudisHeadingLevelArray, fudisHeadingSizeArray } from '../../../types/typography'; +import { fudisSpacingArray } from '../../../types/spacing'; const html = String.raw; @@ -15,12 +17,12 @@ export default { }, argTypes: { level: { - options: [1, 2, 3, 4, 5, 6], + options: fudisHeadingLevelArray, control: { type: 'select' }, }, - size: { options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] }, + size: { options: fudisHeadingSizeArray }, align: { options: ['left', 'right', 'center'] }, - marginBottom: { options: ['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] }, + marginBottom: { options: fudisSpacingArray }, }, } as Meta; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts index f134ee62d..125031f66 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-api/grid-api.directive.ts @@ -6,7 +6,7 @@ import { FudisGridAlignItems, FudisGridColumns, } from '../../../types/grid'; -import { FudisSpacing } from '../../../types/miscellaneous'; +import { FudisSpacing } from '../../../types/spacing'; @Directive({ selector: '[fudisGridApi]', diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts index 67af2c8d6..9f8fd5848 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/spacing/spacing-api/spacing-api.directive.ts @@ -1,6 +1,6 @@ import { Directive, Input } from '@angular/core'; import { FudisSpacingResponsive } from '../../../types/spacing'; -import { FudisSpacing } from '../../../types/miscellaneous'; +import { FudisSpacing } from '../../../types/spacing'; @Directive({ selector: '[fudisApiSpacing]', diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts index 8a86442eb..1689a4878 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/breakpoints.ts @@ -1,4 +1,4 @@ -import { FudisSpacing } from './miscellaneous'; +import { FudisSpacing } from './spacing'; type FudisBreakpointsMinWidths = { [key in FudisBreakpointKey]: FudisBreakpointBoundary; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts index 0f8011846..6ae0a1636 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/grid.ts @@ -1,5 +1,5 @@ import { FudisBreakpointKey, FudisBreakpointValueResponsive } from './breakpoints'; -import { FudisSpacing } from './miscellaneous'; +import { FudisSpacing } from './spacing'; /** * ------------------------------------------- diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts index b641021d7..beb5b8463 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/miscellaneous.ts @@ -42,18 +42,10 @@ export type FudisDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'initial'; export type FudisExpandableType = 'regular' | 'lite'; -export const fudisSpacingArray = ['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; - -export type FudisSpacing = (typeof fudisSpacingArray)[number]; - export type FudisNotification = 'warning' | 'danger' | 'success' | 'info'; export type FudisTooltipPosition = 'left' | 'right' | 'above' | 'below'; -export const fudisTextAlignArray = ['left', 'right', 'center'] as const; - -export type FudisTextAlign = (typeof fudisTextAlignArray)[number]; - export type FudisLanguageAbbr = 'fi' | 'sv' | 'en'; export type FudisLinkColor = 'primary-dark' | 'gray-dark' | 'white'; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts index 87cc1f0c5..b0684d254 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/spacing.ts @@ -1,7 +1,10 @@ import { FudisBreakpointKey, FudisBreakpointValueResponsive } from './breakpoints'; -import { FudisSpacing } from './miscellaneous'; import { convertToRemValue } from '../utilities/rem-converter'; +export const fudisSpacingArray = ['none', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; + +export type FudisSpacing = (typeof fudisSpacingArray)[number]; + /** * Responsive settings for different breakpoints for spacing */ diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts index a29cc2014..ef2cb0395 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts @@ -2,7 +2,7 @@ export const fudisHeadingLevelArray = [1, 2, 3, 4, 5, 6] as const; export type FudisHeadingLevel = (typeof fudisHeadingLevelArray)[number]; -export const fudisHeadingSizeArray = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; +export const fudisHeadingSizeArray = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'label'] as const; export type FudisHeadingSize = (typeof fudisHeadingSizeArray)[number]; @@ -15,3 +15,7 @@ export const fudisBodyTextArray = [ ] as const; export type FudisBodyText = (typeof fudisBodyTextArray)[number]; + +export const fudisTextAlignArray = ['left', 'right', 'center'] as const; + +export type FudisTextAlign = (typeof fudisTextAlignArray)[number]; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts b/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts index ff9a48006..3e17ff11a 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/utilities/breakpoint/breakpoint-utils.ts @@ -6,7 +6,7 @@ import { fudisBreakpointsMinWidth, } from '../../types/breakpoints'; import { FudisGridColumnsResponsive } from '../../types/grid'; -import { FudisSpacing } from '../../types/miscellaneous'; +import { FudisSpacing } from '../../types/spacing'; import { FudisSpacingResponsive, fudisSpacingValues } from '../../types/spacing'; // TODO: Write tests and possible missing/extra internal documentation about these functions From 68467d40fd78d40138d1052a0dd088e8100e5e23 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Fri, 24 May 2024 13:50:46 +0300 Subject: [PATCH 02/10] DS-300: rename FudisHeadingSize to FudisHeadingVariant --- .../src/lib/components/form/form/form.component.ts | 4 ++-- .../src/lib/components/form/form/form.stories.ts | 4 ++-- .../components/section/section.component.spec.ts | 10 +++++----- .../src/lib/components/section/section.component.ts | 4 ++-- .../src/lib/components/section/section.stories.ts | 4 ++-- .../typography/heading/heading.component.spec.ts | 8 ++++---- .../typography/heading/heading.component.ts | 8 ++++---- .../typography/heading/heading.stories.ts | 4 ++-- .../projects/ngx-fudis/src/lib/types/typography.ts | 13 +++++++++++-- 9 files changed, 34 insertions(+), 25 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts index ae91e997b..f9b47ef9c 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts +++ b/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() titleSize: FudisHeadingVariant = 'xl'; /** * Help text positioned under form title diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts index 1b4e0bfc3..388beb4a9 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.stories.ts @@ -18,7 +18,7 @@ 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 } 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'; @@ -392,7 +392,7 @@ class FormContentExampleComponent implements OnInit { @Input() title: string; @Input() titleLevel: FudisHeadingLevel; - @Input() titleSize: FudisHeadingSize; + @Input() titleSize: FudisHeadingVariant; @Input() helpText: string; @Input() badge: FudisBadgeVariant; @Input() badgeText: string; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts index e4d762ef7..9c790437a 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.spec.ts @@ -20,9 +20,9 @@ import { TooltipDirective } from '../../directives/tooltip/tooltip.directive'; import { FudisTooltipPosition } from '../../types/miscellaneous'; import { FudisHeadingLevel, - FudisHeadingSize, + FudisHeadingVariant, fudisHeadingLevelArray, - fudisHeadingSizeArray, + fudisHeadingVariantArray, } from '../../types/typography'; import { getElement, sortClasses } from '../../utilities/tests/utilities'; @@ -50,7 +50,7 @@ import { getElement, sortClasses } from '../../utilities/tests/utilities'; }) class MockFudisSectionComponent { title: string = 'This is section title'; - titleSize: FudisHeadingSize = 'lg'; + titleSize: FudisHeadingVariant = 'lg'; titleLevel: FudisHeadingLevel = 2; classes: string[]; tooltip: string = 'This is tooltip in section'; @@ -97,7 +97,7 @@ describe('SectionComponent', () => { return sectionEl; } - function sectionTitleSizeCheck(size: FudisHeadingSize): void { + function sectionTitleSizeCheck(size: FudisHeadingVariant): void { mockComponent.titleSize = size; mockFixture.detectChanges(); @@ -159,7 +159,7 @@ describe('SectionComponent', () => { }); it('should return correct title size', () => { - fudisHeadingSizeArray.forEach((size) => { + fudisHeadingVariantArray.forEach((size) => { sectionTitleSizeCheck(size); }); }); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts index 4cb15b404..e9d8ef841 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts @@ -10,7 +10,7 @@ import { ViewEncapsulation, } from '@angular/core'; import { FudisIdService } from '../../services/id/id.service'; -import { FudisHeadingSize, FudisHeadingLevel } from '../../types/typography'; +import { FudisHeadingVariant, FudisHeadingLevel } from '../../types/typography'; import { NotificationsDirective } from '../../directives/content-projection/notifications/notifications.directive'; import { ContentDirective } from '../../directives/content-projection/content/content.directive'; import { FudisGridWidth, FudisGridAlign } from '../../types/grid'; @@ -71,7 +71,7 @@ export class SectionComponent extends TooltipApiDirective implements OnInit, OnC /** * Heading size for the section title */ - @Input() titleSize: FudisHeadingSize = 'lg'; + @Input() titleSize: FudisHeadingVariant = 'lg'; /** * Maximum width of Grid. When viewport gets narrower, grid automatically adjusts to lower sizes. diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts index 062208f96..2f7b5bf9a 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.stories.ts @@ -4,7 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { SectionComponent } from './section.component'; import docs from './section-docs.mdx'; import { excludeAllRegex, sectionExclude } from '../../utilities/storybook'; -import { fudisHeadingLevelArray, fudisHeadingSizeArray } from '../../types/typography'; +import { fudisHeadingLevelArray, fudisHeadingVariantArray } from '../../types/typography'; export default { title: 'Components/Section', @@ -28,7 +28,7 @@ export default { control: { type: 'select' }, }, titleSize: { - options: fudisHeadingSizeArray, + options: fudisHeadingVariantArray, control: { type: 'select' }, }, }, diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts index 8296a2b69..c8d928cc0 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.spec.ts @@ -2,10 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ChangeDetectionStrategy } from '@angular/core'; import { HeadingComponent } from './heading.component'; import { - FudisHeadingSize, + FudisHeadingVariant, FudisHeadingLevel, fudisHeadingLevelArray, - fudisHeadingSizeArray, + fudisHeadingVariantArray, } from '../../../types/typography'; import { FudisTextAlign, @@ -46,7 +46,7 @@ describe('HeadingComponent', () => { } function headingCheck( - size: FudisHeadingSize, + size: FudisHeadingVariant, align: FudisTextAlign, marginBottom: FudisSpacing, level: FudisHeadingLevel, @@ -99,7 +99,7 @@ describe('HeadingComponent', () => { describe('CSS classes', () => { it('should have respective size, margin bottom and level values according to given Inputs', () => { fudisHeadingLevelArray.forEach((level) => { - fudisHeadingSizeArray.forEach((size) => { + fudisHeadingVariantArray.forEach((size) => { fudisTextAlignArray.forEach((alignment) => { fudisSpacingArray.forEach((spacing) => { headingCheck(size, alignment, spacing, level); diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts index 39a67fcd6..ddf84066f 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts @@ -6,7 +6,7 @@ import { OnChanges, ElementRef, } from '@angular/core'; -import { FudisHeadingLevel, FudisHeadingSize } from '../../../types/typography'; +import { FudisHeadingLevel, FudisHeadingVariant } from '../../../types/typography'; import { FudisIdService } from '../../../services/id/id.service'; import { FudisComponentChanges } from '../../../types/miscellaneous'; import { FudisTextAlign } from '../../../types/typography'; @@ -37,7 +37,7 @@ export class HeadingComponent implements OnInit, OnChanges { /** * Heading size */ - @Input() size: FudisHeadingSize; + @Input() size: FudisHeadingVariant; /** * Margin bottom for heading @@ -67,7 +67,7 @@ export class HeadingComponent implements OnInit, OnChanges { /** * Get default marginBottom size */ - private _getMarginBottom(size: FudisHeadingSize): FudisSpacing { + private _getMarginBottom(size: FudisHeadingVariant): FudisSpacing { if (size === 'xxl' || size === 'xl') { return 'sm'; } @@ -77,7 +77,7 @@ export class HeadingComponent implements OnInit, OnChanges { /** * Get corresponding default size for a heading level */ - private _getSize(): FudisHeadingSize { + private _getSize(): FudisHeadingVariant { switch (this.level) { case 1: return 'xxl'; diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts index 5c2cfe87a..52a45acd2 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.stories.ts @@ -2,7 +2,7 @@ import { StoryFn, Meta } from '@storybook/angular'; import { HeadingComponent } from './heading.component'; import readme from './readme.mdx'; import { headingControlsExclude } from '../../../utilities/storybook'; -import { fudisHeadingLevelArray, fudisHeadingSizeArray } from '../../../types/typography'; +import { fudisHeadingLevelArray, fudisHeadingVariantArray } from '../../../types/typography'; import { fudisSpacingArray } from '../../../types/spacing'; const html = String.raw; @@ -20,7 +20,7 @@ export default { options: fudisHeadingLevelArray, control: { type: 'select' }, }, - size: { options: fudisHeadingSizeArray }, + size: { options: fudisHeadingVariantArray }, align: { options: ['left', 'right', 'center'] }, marginBottom: { options: fudisSpacingArray }, }, diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts b/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts index ef2cb0395..77dcf8da9 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/types/typography.ts @@ -2,9 +2,18 @@ export const fudisHeadingLevelArray = [1, 2, 3, 4, 5, 6] as const; export type FudisHeadingLevel = (typeof fudisHeadingLevelArray)[number]; -export const fudisHeadingSizeArray = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'label'] as const; +export const fudisHeadingVariantArray = [ + 'xxs', + 'xs', + 'sm', + 'md', + 'lg', + 'xl', + 'xxl', + 'label', +] as const; -export type FudisHeadingSize = (typeof fudisHeadingSizeArray)[number]; +export type FudisHeadingVariant = (typeof fudisHeadingVariantArray)[number]; export const fudisBodyTextArray = [ 'lg-regular', From e49fe4b23c064bc829257ba0b5d98897607fdd79 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Fri, 24 May 2024 13:53:02 +0300 Subject: [PATCH 03/10] DS-300: rename size to variant in heading --- .../typography/heading/heading.component.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts index ddf84066f..f93a62a03 100644 --- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts +++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts @@ -35,9 +35,9 @@ export class HeadingComponent implements OnInit, OnChanges { @Input({ required: true }) level: FudisHeadingLevel; /** - * Heading size + * Heading variant */ - @Input() size: FudisHeadingVariant; + @Input() variant: FudisHeadingVariant; /** * Margin bottom for heading @@ -75,9 +75,9 @@ export class HeadingComponent implements OnInit, OnChanges { } /** - * Get corresponding default size for a heading level + * Get corresponding default variant for a heading level */ - private _getSize(): FudisHeadingVariant { + private _getVariant(): FudisHeadingVariant { switch (this.level) { case 1: return 'xxl'; @@ -100,13 +100,13 @@ export class HeadingComponent implements OnInit, OnChanges { * Set CSS classes for heading */ private _setClasses(): void { - const calcSize = this.size || this._getSize(); + const calcVariant = this.variant || this._getVariant(); - const calcMarginBottom = this.marginBottom || this._getMarginBottom(calcSize); + const calcMarginBottom = this.marginBottom || this._getMarginBottom(calcVariant); this._classList = [ `fudis-heading`, - `fudis-heading__size__${calcSize}`, + `fudis-heading__variant__${calcVariant}`, `fudis-mb-${calcMarginBottom}`, `fudis-heading__align__${this.align}`, ]; @@ -121,7 +121,7 @@ export class HeadingComponent implements OnInit, OnChanges { ngOnChanges(changes: FudisComponentChanges): void { if ( changes.align?.currentValue !== changes.align?.previousValue || - changes.size?.currentValue !== changes.size?.previousValue || + changes.variant?.currentValue !== changes.variant?.previousValue || changes.marginBottom?.currentValue !== changes.marginBottom?.previousValue || changes.level?.currentValue !== changes.level?.previousValue ) { From e11841c2dc7b4dbe54fd610b111527819a67ff24 Mon Sep 17 00:00:00 2001 From: Eero Suvanto Date: Fri, 24 May 2024 14:08:46 +0300 Subject: [PATCH 04/10] DS-300: renaming size to variant in Heading usage --- .../components/formExamples.component.html | 8 ++-- .../dialog-test-content.component.ts | 2 +- .../lib/components/button/button.stories.ts | 14 +++--- .../description-list.stories.ts | 12 ++--- .../lib/components/dialog/dialog.stories.ts | 2 +- .../components/form/form/form.component.html | 4 +- .../form/form/form.component.spec.ts | 4 +- .../components/form/form/form.component.ts | 2 +- .../lib/components/form/form/form.docs.mdx | 2 +- .../lib/components/form/form/form.stories.ts | 21 ++++---- .../lib/components/grid/grid/grid.stories.ts | 6 +-- .../lib/components/section/section-docs.mdx | 6 +-- .../components/section/section.component.html | 2 +- .../section/section.component.spec.ts | 16 +++---- .../components/section/section.component.ts | 2 +- .../lib/components/section/section.stories.ts | 10 ++-- .../heading/heading.component.spec.ts | 48 +++++++++---------- .../typography/heading/heading.stories.ts | 3 +- .../services/dialog/dialog.service.spec.ts | 2 +- .../ngx-fudis/src/lib/utilities/storybook.ts | 4 +- 20 files changed, 87 insertions(+), 83 deletions(-) diff --git a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html index e695c2b41..765c257f5 100644 --- a/ngx-fudis/projects/dev/src/app/components/formExamples.component.html +++ b/ngx-fudis/projects/dev/src/app/components/formExamples.component.html @@ -91,7 +91,7 @@ - Single-select dropdown + Single-select dropdown - Single-select search + Single-select search - Autocomplete multi-select dropdown + Autocomplete multi-select dropdown