[Documentation]: generate code examples with Claude

[mfaarni]

DS-655

Used Claude to generate code examples for Fudis components and directives. Some were already created before, and this PR expands this documentation to all the other components. The code is mainly AI-generated, with some minor fixes applied where necessary. In the future, these code examples should help GenAI-assistants in using Fudis components.

Developer's checklist

• I wrote necessary unit tests
• I updated Storybook stories and documentation to reflect the latest changes
• I included visual regression tests for new UI design
• I tested my implementation with different browsers
• I checked accessibility according to Web Content Accessibility Guidelines 2.1
• Together with the reviewer I can confirm that the implementation supports the following screenreader and browser combinations (NVDA + Firefox, VoiceOver + Chrome)

[github-actions]

Lines	Statements	Branches	Functions
	94.97% (14137/14885)	89.28% (1425/1596)	91.08% (531/583)

Coverage Report • (94%)

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	94.97	89.28	91.08	94.97
components/alert/alert-group	100	100	100	100
alert-group.component.ts	100	100	100	100
components/badge	100	100	100	100
badge.component.ts	100	100	100	100
components/breadcrumbs	100	100	100	100
breadcrumbs.component.ts	100	100	100	100
components/breadcrumbs/breadcrumbs-item	100	100	100	100
breadcrumbs-item.component.ts	100	100	100	100
components/button	100	100	100	100
button.component.ts	100	100	100	100
components/description-list	100	92.85	100	100
description-list.component.ts	100	92.85	100	100	131
components/description-list/description-list-item	98.64	87.5	100	98.64
description-list-item.component.ts	98.64	87.5	100	98.64	116–118
components/description-list/description-list-item/description-list-item-details	98.91	92.3	100	98.91
description-list-item-details.component.ts	98.91	92.3	100	98.91	170–171
components/description-list/description-list-item/description-list-item-term	100	100	100	100
description-list-item-term.component.ts	100	100	100	100
components/dialog	97.8	83.33	100	97.8
dialog-directives.ts	100	100	100	100
dialog.component.ts	96.25	75	100	96.25	70–72, 79–81, 170
components/dropdown-menu/dropdown-menu-group	100	100	100	100
dropdown-menu-group.component.ts	100	100	100	100
components/dropdown-menu/dropdown-menu-item	87.2	80	40	87.2
dropdown-menu-item.component.ts	87.2	80	40	87.2	88–99, 105–106, 112–113
components/expandable	99.27	90	100	99.27
expandable-content.directive.ts	100	100	100	100
expandable.component.ts	99.14	89.28	100	99.14	170–171
components/footer	100	100	100	100
footer.component.ts	100	100	100	100
components/form/checkbox	99.46	80	100	99.46
checkbox.component.ts	99.46	80	100	99.46	164
components/form/checkbox-group/checkbox-group-option	95.51	66.66	100	95.51
checkbox-group-option.component.ts	95.51	66.66	100	95.51	77, 131–134, 153–154
components/form/date/datepicker	90.98	70.21	91.66	90.98
datepicker.component.ts	90.98	70.21	91.66	90.98	109–120, 123–128, 258–259, 284–285, 291–292, 302–303, 309–314, 336
components/form/error-message/error-message	86.69	66.66	100	86.69
error-message.directive.ts	86.69	66.66	100	86.69	76–89, 174–180, 210–214, 227–231
components/form/fieldset	95.62	92.1	87.5	95.62
fieldset-content.directive.ts	100	100	100	100
fieldset.component.ts	94.79	91.42	84.61	94.79	173–174, 200–201, 204–214
components/form/form	100	100	100	100
form-content.directive.ts	100	100	100	100
form.component.ts	100	100	100	100
components/form/localized-text-group	100	93.93	100	100
localized-text-group.component.ts	100	93.93	100	100	231
components/form/radio-button-group/radio-button	98.85	75	100	98.85
radio-button.component.ts	98.85	75	100	98.85	82
components/form/text-area	95.06	57.14	100	95.06
text-area.component.ts	95.06	57.14	100	95.06	64–65, 78–79
components/form/text-input	98.44	78.94	100	98.44
text-input.component.ts	98.44	78.94	100	98.44	126–127
components/grid/grid	100	100	100	100
grid.component.ts	100	100	100	100
components/grid/grid-item	100	100	100	100
grid-item.component.ts	100	100	100	100
components/horizontal-rule	100	100	100	100
horizontal-rule.component.ts	100	100	100	100
components/icon	100	100	100	100
icon.component.ts	100	100	100	100
components/icon-button	98.69	87.5	100	98.69
icon-button.component.ts	98.69	87.5	100	98.69	148–149
components/language-badge-group	91.97	81.25	100	91.97
language-badge-group.component.ts	91.97	81.25	100	91.97	133–142, 157, 159–160
components/loading-spinner	100	100	100	100
loading-spinner.component.ts	100	100	100	100
components/notification	100	100	100	100
notification.component.ts	100	100	100	100
components/pagination	92.85	79.06	84.61	92.85
pagination.component.ts	92.85	79.06	84.61	92.85	146–147, 283–294, 339–350, 402–403, 405–406
components/section	98.84	92.59	100	98.84
section-content.directive.ts	100	100	100	100
section.component.ts	98.61	92	100	98.61	164–165, 212
components/tab-navigation	71.22	90	54.54	71.22
tab-navigation-bar.component.ts	71.97	81.81	53.84	71.97	56–57, 91, 107, 111–122, 125–135, 138–153, 156–163
tab-navigation-panel.component.ts	100	100	100	100
tab-navigation-tab.component.ts	62.4	100	42.85	62.4	57–58, 78–84, 88–124, 128–131
components/typography/body-text	98.76	83.33	100	98.76
body-text.component.ts	98.76	83.33	100	98.76	75
components/typography/heading	100	100	100	100
heading.component.ts	100	100	100	100
directives/form/datepicker	100	100	100	100
datepicker.directive.ts	100	100	100	100
directives/grid/grid	95.08	68.96	100	95.08
grid.directive.ts	95.08	68.96	100	95.08	60, 62–63, 127–128, 197–199, 202–203, 206–207
directives/grid/grid-item	88.75	64.7	100	88.75
grid-item.directive.ts	88.75	64.7	100	88.75	43–44, 46–47, 49–50, 82–89, 99–100, 110–111
directives/link	99.62	97.61	100	99.62
link.directive.ts	99.62	97.61	100	99.62	109
directives/popover	96.78	88.88	83.33	96.78
popover.directive.ts	96.41	88.23	81.81	96.41	111–112, 153, 155–156, 160–161