From 4669a4db6e2a5d090db787ba5a289a8175df7684 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 22 Feb 2023 11:00:56 +0100 Subject: [PATCH] feat: include all type definitions in repo (#1996) * chore: update generated (.js) style properties file * chore: remove unused Style entry in components * chore: rename all component entry points * chore: add Component type definitions * chore: fix failing types * chore: correct Object usage * chore: fix test that fails during type checking * feat: include all type definitions in repo * docs: add missing `label_sr_only` to properties table * chore: correct types in Examples, Switch and Checkbox * chore: rewrite prebuild tests to TS * chore: update snapshots * fix: use unknown on object value in definition files * chore: rename index and style component files to ts * fix: fix dialog/drawer typing in index * chore: update docs only when `yarn build:types` is called * fix: DrawerListPortal type definition file * chore: update outdated prop docs in definition files --- .../uilib/components/checkbox/properties.md | 7 +- .../docs/uilib/components/dialog/Examples.tsx | 2 +- .../docs/uilib/components/input/Examples.tsx | 5 +- .../docs/uilib/components/radio/properties.md | 17 +- .../uilib/components/switch/properties.md | 9 +- .../src/shared/tags/CodeBlock.tsx | 2 + packages/dnb-eufemia/package.json | 5 +- .../scripts/postbuild/babel-cjs.sh | 4 +- .../dnb-eufemia/scripts/postbuild/babel-es.sh | 4 +- .../scripts/postbuild/babel-esm.sh | 4 +- .../scripts/postbuild/postbuild.sh | 2 +- .../scripts/prebuild/generate-types-docs.sh | 9 + ...ibStyles.test.js => makeLibStyles.test.ts} | 4 +- ...ainStyle.test.js => makeMainStyle.test.ts} | 4 +- ...ile.test.js => makePropertiesFile.test.ts} | 0 ...ion.test.js => makeReleaseVersion.test.ts} | 4 +- ...ion.test.js => postTypeGeneration.test.ts} | 0 ...lates.test.js => prepareTemplates.test.ts} | 28 +- ...meFactory.test.js => themeFactory.test.ts} | 0 .../prebuild/tasks/prepareTemplates.js | 20 +- .../{index.test.js => index.test.ts} | 0 .../__tests__/{lib.test.js => lib.test.ts} | 0 .../components/{Accordion.js => Accordion.ts} | 0 .../{Autocomplete.js => Autocomplete.ts} | 0 .../src/components/{Avatar.js => Avatar.ts} | 0 .../src/components/{Badge.js => Badge.ts} | 0 .../{Breadcrumb.js => Breadcrumb.ts} | 0 .../src/components/{Button.js => Button.ts} | 0 .../components/{Checkbox.js => Checkbox.ts} | 0 .../{DatePicker.js => DatePicker.ts} | 0 .../src/components/{Dialog.js => Dialog.ts} | 0 .../src/components/{Drawer.js => Drawer.ts} | 0 .../components/{Dropdown.js => Dropdown.ts} | 0 .../components/{FormLabel.js => FormLabel.ts} | 0 .../src/components/{FormRow.js => FormRow.ts} | 0 .../src/components/{FormSet.js => FormSet.ts} | 0 .../{FormStatus.js => FormStatus.ts} | 0 .../{GlobalError.js => GlobalError.ts} | 0 .../{GlobalStatus.js => GlobalStatus.ts} | 0 .../src/components/{Heading.js => Heading.ts} | 0 ...{HeightAnimation.js => HeightAnimation.ts} | 0 .../{HelpButton.js => HelpButton.ts} | 0 .../src/components/{Icon.js => Icon.ts} | 0 .../{IconPrimary.js => IconPrimary.ts} | 0 .../components/{InfoCard.js => InfoCard.ts} | 0 .../src/components/{Input.js => Input.ts} | 0 .../{InputMasked.js => InputMasked.ts} | 0 .../src/components/{Logo.js => Logo.ts} | 0 .../src/components/{Modal.js => Modal.ts} | 0 .../{NumberFormat.js => NumberFormat.ts} | 0 .../{Pagination.js => Pagination.ts} | 0 ...gressIndicator.js => ProgressIndicator.ts} | 0 .../src/components/{Radio.js => Radio.ts} | 0 .../src/components/{Section.js => Section.ts} | 0 .../components/{Skeleton.js => Skeleton.ts} | 0 .../{SkipContent.js => SkipContent.ts} | 0 .../src/components/{Slider.js => Slider.ts} | 0 .../src/components/{Space.js => Space.ts} | 0 .../{StepIndicator.js => StepIndicator.ts} | 0 packages/dnb-eufemia/src/components/Style.js | 14 - .../src/components/{Switch.js => Switch.ts} | 0 .../src/components/{Table.js => Table.ts} | 0 .../src/components/{Tabs.js => Tabs.ts} | 0 .../src/components/{Tag.js => Tag.ts} | 0 .../components/{Textarea.js => Textarea.ts} | 0 .../components/{Timeline.js => Timeline.ts} | 0 .../{ToggleButton.js => ToggleButton.ts} | 0 .../src/components/{Tooltip.js => Tooltip.ts} | 0 .../src/components/{Upload.js => Upload.ts} | 0 .../{VisuallyHidden.js => VisuallyHidden.ts} | 0 .../src/components/accordion/Accordion.d.ts | 247 +++++ .../accordion/AccordionContent.d.ts | 35 + .../components/accordion/AccordionHeader.d.ts | 183 ++++ .../accordion/AccordionProvider.d.ts | 100 +++ .../accordion/{index.js => index.ts} | 0 .../accordion/{style.js => style.ts} | 0 .../components/autocomplete/Autocomplete.d.ts | 584 ++++++++++++ .../autocomplete/{index.js => index.ts} | 0 .../autocomplete/{style.js => style.ts} | 0 .../components/avatar/{index.js => index.ts} | 0 .../components/avatar/{style.js => style.ts} | 0 .../components/badge/{index.js => index.ts} | 0 .../components/badge/{style.js => style.ts} | 0 .../breadcrumb/{index.js => index.ts} | 0 .../breadcrumb/{style.js => style.ts} | 0 .../src/components/button/Button.d.ts | 10 +- .../components/button/{index.js => index.ts} | 0 .../components/button/{style.js => style.ts} | 0 .../src/components/checkbox/Checkbox.d.ts | 173 ++++ .../src/components/checkbox/Checkbox.js | 2 + .../__snapshots__/Checkbox.test.js.snap | 2 + .../checkbox/{index.js => index.ts} | 0 .../checkbox/{style.js => style.ts} | 0 .../components/date-picker/DatePicker.d.ts | 389 ++++++++ .../date-picker/DatePickerAddon.d.ts | 24 + .../date-picker/DatePickerCalendar.d.ts | 45 + .../date-picker/DatePickerFooter.d.ts | 20 + .../date-picker/DatePickerInput.d.ts | 78 ++ .../date-picker/DatePickerProvider.d.ts | 41 + .../date-picker/DatePickerRange.d.ts | 25 + .../date-picker/{index.js => index.ts} | 0 .../date-picker/{style.js => style.ts} | 0 .../src/components/dialog/index.ts | 8 + .../components/dialog/{style.js => style.ts} | 0 .../src/components/drawer/index.js | 8 - .../{dialog/index.js => drawer/index.ts} | 0 .../components/drawer/{style.js => style.ts} | 0 .../src/components/dropdown/Dropdown.d.ts | 448 ++++++++++ .../dropdown/{index.js => index.ts} | 0 .../dropdown/{style.js => style.ts} | 0 .../src/components/form-label/FormLabel.d.ts | 117 +++ .../form-label/{index.js => index.ts} | 0 .../form-label/{style.js => style.ts} | 0 .../src/components/form-row/FormRow.d.ts | 168 ++++ .../form-row/{index.js => index.ts} | 0 .../form-row/{style.js => style.ts} | 0 .../src/components/form-set/FormSet.d.ts | 189 ++++ .../form-set/{index.js => index.ts} | 0 .../form-set/{style.js => style.ts} | 0 .../components/form-status/FormStatus.d.ts | 217 +++++ ...FormStatus.test.js => FormStatus.test.tsx} | 2 +- ....test.js.snap => FormStatus.test.tsx.snap} | 0 .../form-status/{index.js => index.ts} | 0 .../form-status/{style.js => style.ts} | 0 .../components/global-error/GlobalError.d.ts | 82 ++ .../global-error/{index.js => index.ts} | 0 .../global-error/{style.js => style.ts} | 0 .../global-status/GlobalStatus.d.ts | 207 +++++ .../global-status/GlobalStatusController.d.ts | 40 + .../__snapshots__/GlobalStatus.test.js.snap | 1 + .../global-status/{index.js => index.ts} | 0 .../global-status/{style.js => style.ts} | 0 .../src/components/heading/Heading.d.ts | 154 ++++ .../components/heading/HeadingProvider.d.ts | 58 ++ .../components/heading/{index.js => index.ts} | 0 .../components/heading/{style.js => style.ts} | 0 .../__tests__/HeightAnimation.test.tsx | 2 +- .../__tests__/useHeightAnimation.test.tsx | 2 +- .../height-animation/{index.js => index.ts} | 0 .../stories/HeightAnimation.stories.tsx | 4 +- .../height-animation/{style.js => style.ts} | 0 .../help-button/{index.js => index.ts} | 0 .../help-button/{style.js => style.ts} | 0 .../components/icon-primary/IconPrimary.d.ts | 8 +- .../icon-primary/{index.js => index.ts} | 0 .../icon-primary/{style.js => style.ts} | 0 .../dnb-eufemia/src/components/icon/Icon.d.ts | 126 +++ .../components/icon/{index.js => index.ts} | 0 .../components/icon/{style.js => style.ts} | 0 .../src/components/{index.js => index.ts} | 0 .../info-card/{index.js => index.ts} | 0 .../info-card/{style.js => style.ts} | 0 .../components/input-masked/InputMasked.d.ts | 383 ++++++++ .../src/components/input-masked/TextMask.d.ts | 33 + .../input-masked/{index.js => index.ts} | 0 .../input-masked/{style.js => style.ts} | 0 .../src/components/input/Input.d.ts | 301 +++++++ .../src/components/input/InputPassword.d.ts | 21 + .../components/input/{index.js => index.ts} | 0 .../components/input/{style.js => style.ts} | 0 .../src/components/{lib.js => lib.ts} | 0 .../dnb-eufemia/src/components/logo/Logo.d.ts | 97 ++ .../components/logo/{index.js => index.ts} | 0 .../components/logo/{style.js => style.ts} | 0 .../components/modal/{index.js => index.ts} | 0 .../components/modal/{style.js => style.ts} | 0 .../number-format/NumberFormat.d.ts | 239 +++++ .../number-format/{index.js => index.ts} | 0 .../number-format/{style.js => style.ts} | 0 .../src/components/pagination/Pagination.d.ts | 845 ++++++++++++++++++ .../pagination/PaginationHelpers.d.ts | 22 + .../pagination/PaginationInfinity.d.ts | 46 + .../pagination/PaginationProvider.d.ts | 87 ++ .../pagination/{index.js => index.ts} | 0 .../pagination/{style.js => style.ts} | 0 .../progress-indicator/ProgressIndicator.d.ts | 146 +++ .../ProgressIndicatorCircular.d.ts | 39 + .../ProgressIndicatorLinear.d.ts | 38 + .../progress-indicator/{index.js => index.ts} | 0 .../progress-indicator/{style.js => style.ts} | 0 .../src/components/radio/Radio.d.ts | 126 +++ .../src/components/radio/RadioGroup.d.ts | 125 +++ .../components/radio/{index.js => index.ts} | 0 .../components/radio/{style.js => style.ts} | 0 .../components/section/{index.js => index.ts} | 0 .../components/section/{style.js => style.ts} | 0 .../src/components/skeleton/Skeleton.d.ts | 2 +- .../components/skeleton/SkeletonHelper.d.ts | 7 - .../components/skeleton/figures/Article.d.ts | 21 + .../components/skeleton/figures/Circle.d.ts | 20 + .../components/skeleton/figures/Product.d.ts | 21 + .../components/skeleton/figures/Table.d.ts | 20 + .../skeleton/{index.js => index.ts} | 0 .../skeleton/{style.js => style.ts} | 0 .../skip-content/{index.js => index.ts} | 0 .../skip-content/{style.js => style.ts} | 0 .../components/slider/{index.js => index.ts} | 0 .../slider/stories/Slider.stories.tsx | 2 +- .../components/slider/{style.js => style.ts} | 0 .../components/space/{index.js => index.ts} | 0 .../components/space/{style.js => style.ts} | 0 .../step-indicator/StepIndicator.d.ts | 156 ++++ .../step-indicator/StepIndicatorContext.d.ts | 19 + .../step-indicator/StepIndicatorItem.d.ts | 79 ++ .../step-indicator/StepIndicatorSidebar.d.ts | 55 ++ .../StepIndicatorTriggerButton.d.ts | 21 + .../step-indicator/{index.js => index.ts} | 0 .../step-indicator/{style.js => style.ts} | 0 .../components/style/{index.js => index.ts} | 0 .../src/components/switch/Switch.d.ts | 166 ++++ .../src/components/switch/Switch.js | 2 + .../__snapshots__/Switch.test.js.snap | 6 +- .../components/switch/{index.js => index.ts} | 0 .../components/switch/{style.js => style.ts} | 0 .../components/table/{index.js => index.ts} | 0 .../table/stories/Table.stories.tsx | 2 +- .../components/table/{style.js => style.ts} | 0 .../dnb-eufemia/src/components/tabs/Tabs.d.ts | 217 +++++ .../components/tabs/TabsContentWrapper.d.ts | 40 + .../components/tabs/TabsCustomContent.d.ts | 89 ++ .../__tests__/{Tabs.test.js => Tabs.test.tsx} | 2 +- .../{Tabs.test.js.snap => Tabs.test.tsx.snap} | 0 .../components/tabs/{index.js => index.ts} | 0 .../components/tabs/{style.js => style.ts} | 0 .../src/components/tag/{index.js => index.ts} | 0 .../src/components/tag/{style.js => style.ts} | 0 .../src/components/textarea/Textarea.d.ts | 223 +++++ .../textarea/{index.js => index.ts} | 0 .../textarea/{style.js => style.ts} | 0 .../timeline/{index.js => index.ts} | 0 .../timeline/{style.js => style.ts} | 0 .../toggle-button/ToggleButton.d.ts | 190 ++++ .../toggle-button/ToggleButtonGroup.d.ts | 173 ++++ .../__snapshots__/ToggleButton.test.js.snap | 3 + .../toggle-button/{index.js => index.ts} | 0 .../toggle-button/{style.js => style.ts} | 0 .../components/tooltip/{index.js => index.ts} | 0 .../components/tooltip/{style.js => style.ts} | 0 .../components/upload/{index.js => index.ts} | 0 .../components/upload/{style.js => style.ts} | 0 .../visually-hidden/{index.js => index.ts} | 0 .../visually-hidden/{style.js => style.ts} | 0 .../dnb-eufemia/src/elements/Blockquote.d.ts | 29 + packages/dnb-eufemia/src/elements/Code.d.ts | 29 + packages/dnb-eufemia/src/elements/Div.d.ts | 2 +- packages/dnb-eufemia/src/elements/H.d.ts | 43 + packages/dnb-eufemia/src/elements/H1.d.ts | 39 + packages/dnb-eufemia/src/elements/H2.d.ts | 39 + packages/dnb-eufemia/src/elements/H3.d.ts | 39 + packages/dnb-eufemia/src/elements/H4.d.ts | 39 + packages/dnb-eufemia/src/elements/H5.d.ts | 39 + packages/dnb-eufemia/src/elements/H6.d.ts | 39 + packages/dnb-eufemia/src/elements/Hr.d.ts | 32 + packages/dnb-eufemia/src/elements/Img.d.ts | 2 +- packages/dnb-eufemia/src/elements/P.d.ts | 2 +- packages/dnb-eufemia/src/elements/Span.d.ts | 29 + .../src/elements/{index.js => index.ts} | 0 .../src/elements/{lib.js => lib.ts} | 0 ...-ui-basis.test.js => dnb-ui-basis.test.ts} | 0 ...ents.test.js => dnb-ui-components.test.ts} | 0 ...ements.test.js => dnb-ui-elements.test.ts} | 0 ...ions.test.js => dnb-ui-extensions.test.ts} | 0 .../src/esm/__tests__/dnb-ui-icons.test.js | 17 - .../src/esm/__tests__/dnb-ui-icons.test.ts | 18 + ...{dnb-ui-lib.test.js => dnb-ui-lib.test.ts} | 0 .../src/extensions/{index.js => index.ts} | 0 .../src/extensions/{lib.js => lib.ts} | 0 .../extensions/payment-card/PaymentCard.d.ts | 131 +++ .../payment-card/icons/BankAxept.d.ts | 16 + .../extensions/payment-card/icons/Clock.d.ts | 13 + .../extensions/payment-card/icons/DNB.d.ts | 16 + .../payment-card/icons/DNBMetalic.d.ts | 17 + .../payment-card/icons/MastercardDefault.d.ts | 13 + .../payment-card/icons/MastercardMetalic.d.ts | 12 + .../icons/MastercardMetalicBlack.d.ts | 12 + .../src/extensions/payment-card/icons/PB.d.ts | 16 + .../payment-card/icons/PBPlatinum.d.ts | 12 + .../payment-card/icons/Padlock.d.ts | 13 + .../extensions/payment-card/icons/Pluss.d.ts | 16 + .../payment-card/icons/SagaGold.d.ts | 12 + .../payment-card/icons/SagaPlatinum.d.ts | 13 + .../payment-card/icons/SagaVisaPlatinum.d.ts | 13 + .../payment-card/icons/VisaDefault.d.ts | 16 + .../payment-card/icons/VisaMetalic.d.ts | 12 + .../{DrawerList.js => DrawerList.ts} | 0 .../{ScrollView.js => ScrollView.ts} | 0 .../src/fragments/drawer-list/DrawerList.d.ts | 148 +++ .../drawer-list/DrawerListPortal.d.ts | 42 + .../fragments/drawer-list/DrawerListPortal.js | 48 +- .../drawer-list/DrawerListProvider.d.ts | 145 +++ .../src/fragments/{index.js => index.ts} | 0 .../src/fragments/{lib.js => lib.ts} | 0 .../dnb-eufemia/src/{index.js => index.ts} | 0 packages/dnb-eufemia/src/{lib.js => lib.ts} | 0 .../src/shared/AlignmentHelper.d.ts | 12 + .../shared/stories/EventEmitter.stories.tsx | 4 +- packages/dnb-eufemia/src/style/properties.js | 4 +- 297 files changed, 9069 insertions(+), 151 deletions(-) create mode 100755 packages/dnb-eufemia/scripts/prebuild/generate-types-docs.sh rename packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/{makeLibStyles.test.js => makeLibStyles.test.ts} (96%) rename packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/{makeMainStyle.test.js => makeMainStyle.test.ts} (98%) rename packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/{makePropertiesFile.test.js => makePropertiesFile.test.ts} (100%) rename packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/{makeReleaseVersion.test.js => makeReleaseVersion.test.ts} (95%) rename packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/{postTypeGeneration.test.js => postTypeGeneration.test.ts} (100%) rename packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/{prepareTemplates.test.js => prepareTemplates.test.ts} (93%) rename packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/{themeFactory.test.js => themeFactory.test.ts} (100%) rename packages/dnb-eufemia/src/__tests__/{index.test.js => index.test.ts} (100%) rename packages/dnb-eufemia/src/__tests__/{lib.test.js => lib.test.ts} (100%) rename packages/dnb-eufemia/src/components/{Accordion.js => Accordion.ts} (100%) rename packages/dnb-eufemia/src/components/{Autocomplete.js => Autocomplete.ts} (100%) rename packages/dnb-eufemia/src/components/{Avatar.js => Avatar.ts} (100%) rename packages/dnb-eufemia/src/components/{Badge.js => Badge.ts} (100%) rename packages/dnb-eufemia/src/components/{Breadcrumb.js => Breadcrumb.ts} (100%) rename packages/dnb-eufemia/src/components/{Button.js => Button.ts} (100%) rename packages/dnb-eufemia/src/components/{Checkbox.js => Checkbox.ts} (100%) rename packages/dnb-eufemia/src/components/{DatePicker.js => DatePicker.ts} (100%) rename packages/dnb-eufemia/src/components/{Dialog.js => Dialog.ts} (100%) rename packages/dnb-eufemia/src/components/{Drawer.js => Drawer.ts} (100%) rename packages/dnb-eufemia/src/components/{Dropdown.js => Dropdown.ts} (100%) rename packages/dnb-eufemia/src/components/{FormLabel.js => FormLabel.ts} (100%) rename packages/dnb-eufemia/src/components/{FormRow.js => FormRow.ts} (100%) rename packages/dnb-eufemia/src/components/{FormSet.js => FormSet.ts} (100%) rename packages/dnb-eufemia/src/components/{FormStatus.js => FormStatus.ts} (100%) rename packages/dnb-eufemia/src/components/{GlobalError.js => GlobalError.ts} (100%) rename packages/dnb-eufemia/src/components/{GlobalStatus.js => GlobalStatus.ts} (100%) rename packages/dnb-eufemia/src/components/{Heading.js => Heading.ts} (100%) rename packages/dnb-eufemia/src/components/{HeightAnimation.js => HeightAnimation.ts} (100%) rename packages/dnb-eufemia/src/components/{HelpButton.js => HelpButton.ts} (100%) rename packages/dnb-eufemia/src/components/{Icon.js => Icon.ts} (100%) rename packages/dnb-eufemia/src/components/{IconPrimary.js => IconPrimary.ts} (100%) rename packages/dnb-eufemia/src/components/{InfoCard.js => InfoCard.ts} (100%) rename packages/dnb-eufemia/src/components/{Input.js => Input.ts} (100%) rename packages/dnb-eufemia/src/components/{InputMasked.js => InputMasked.ts} (100%) rename packages/dnb-eufemia/src/components/{Logo.js => Logo.ts} (100%) rename packages/dnb-eufemia/src/components/{Modal.js => Modal.ts} (100%) rename packages/dnb-eufemia/src/components/{NumberFormat.js => NumberFormat.ts} (100%) rename packages/dnb-eufemia/src/components/{Pagination.js => Pagination.ts} (100%) rename packages/dnb-eufemia/src/components/{ProgressIndicator.js => ProgressIndicator.ts} (100%) rename packages/dnb-eufemia/src/components/{Radio.js => Radio.ts} (100%) rename packages/dnb-eufemia/src/components/{Section.js => Section.ts} (100%) rename packages/dnb-eufemia/src/components/{Skeleton.js => Skeleton.ts} (100%) rename packages/dnb-eufemia/src/components/{SkipContent.js => SkipContent.ts} (100%) rename packages/dnb-eufemia/src/components/{Slider.js => Slider.ts} (100%) rename packages/dnb-eufemia/src/components/{Space.js => Space.ts} (100%) rename packages/dnb-eufemia/src/components/{StepIndicator.js => StepIndicator.ts} (100%) delete mode 100644 packages/dnb-eufemia/src/components/Style.js rename packages/dnb-eufemia/src/components/{Switch.js => Switch.ts} (100%) rename packages/dnb-eufemia/src/components/{Table.js => Table.ts} (100%) rename packages/dnb-eufemia/src/components/{Tabs.js => Tabs.ts} (100%) rename packages/dnb-eufemia/src/components/{Tag.js => Tag.ts} (100%) rename packages/dnb-eufemia/src/components/{Textarea.js => Textarea.ts} (100%) rename packages/dnb-eufemia/src/components/{Timeline.js => Timeline.ts} (100%) rename packages/dnb-eufemia/src/components/{ToggleButton.js => ToggleButton.ts} (100%) rename packages/dnb-eufemia/src/components/{Tooltip.js => Tooltip.ts} (100%) rename packages/dnb-eufemia/src/components/{Upload.js => Upload.ts} (100%) rename packages/dnb-eufemia/src/components/{VisuallyHidden.js => VisuallyHidden.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/accordion/Accordion.d.ts create mode 100644 packages/dnb-eufemia/src/components/accordion/AccordionContent.d.ts create mode 100644 packages/dnb-eufemia/src/components/accordion/AccordionHeader.d.ts create mode 100644 packages/dnb-eufemia/src/components/accordion/AccordionProvider.d.ts rename packages/dnb-eufemia/src/components/accordion/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/accordion/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts rename packages/dnb-eufemia/src/components/autocomplete/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/autocomplete/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/avatar/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/avatar/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/badge/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/badge/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/breadcrumb/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/breadcrumb/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/button/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/button/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts rename packages/dnb-eufemia/src/components/checkbox/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/checkbox/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts create mode 100644 packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.d.ts create mode 100644 packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts create mode 100644 packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.d.ts create mode 100644 packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts create mode 100644 packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.d.ts create mode 100644 packages/dnb-eufemia/src/components/date-picker/DatePickerRange.d.ts rename packages/dnb-eufemia/src/components/date-picker/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/date-picker/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/dialog/index.ts rename packages/dnb-eufemia/src/components/dialog/{style.js => style.ts} (100%) delete mode 100644 packages/dnb-eufemia/src/components/drawer/index.js rename packages/dnb-eufemia/src/components/{dialog/index.js => drawer/index.ts} (100%) rename packages/dnb-eufemia/src/components/drawer/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts rename packages/dnb-eufemia/src/components/dropdown/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/dropdown/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts rename packages/dnb-eufemia/src/components/form-label/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/form-label/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/form-row/FormRow.d.ts rename packages/dnb-eufemia/src/components/form-row/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/form-row/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/form-set/FormSet.d.ts rename packages/dnb-eufemia/src/components/form-set/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/form-set/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts rename packages/dnb-eufemia/src/components/form-status/__tests__/{FormStatus.test.js => FormStatus.test.tsx} (99%) rename packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/{FormStatus.test.js.snap => FormStatus.test.tsx.snap} (100%) rename packages/dnb-eufemia/src/components/form-status/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/form-status/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/global-error/GlobalError.d.ts rename packages/dnb-eufemia/src/components/global-error/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/global-error/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts create mode 100644 packages/dnb-eufemia/src/components/global-status/GlobalStatusController.d.ts rename packages/dnb-eufemia/src/components/global-status/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/global-status/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/heading/Heading.d.ts create mode 100644 packages/dnb-eufemia/src/components/heading/HeadingProvider.d.ts rename packages/dnb-eufemia/src/components/heading/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/heading/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/height-animation/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/height-animation/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/help-button/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/help-button/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/icon-primary/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/icon-primary/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/icon/Icon.d.ts rename packages/dnb-eufemia/src/components/icon/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/icon/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/info-card/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/info-card/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts create mode 100644 packages/dnb-eufemia/src/components/input-masked/TextMask.d.ts rename packages/dnb-eufemia/src/components/input-masked/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/input-masked/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/input/Input.d.ts create mode 100644 packages/dnb-eufemia/src/components/input/InputPassword.d.ts rename packages/dnb-eufemia/src/components/input/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/input/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/{lib.js => lib.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/logo/Logo.d.ts rename packages/dnb-eufemia/src/components/logo/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/logo/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/modal/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/modal/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts rename packages/dnb-eufemia/src/components/number-format/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/number-format/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/pagination/Pagination.d.ts create mode 100644 packages/dnb-eufemia/src/components/pagination/PaginationHelpers.d.ts create mode 100644 packages/dnb-eufemia/src/components/pagination/PaginationInfinity.d.ts create mode 100644 packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts rename packages/dnb-eufemia/src/components/pagination/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/pagination/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts create mode 100644 packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts create mode 100644 packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts rename packages/dnb-eufemia/src/components/progress-indicator/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/progress-indicator/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/radio/Radio.d.ts create mode 100644 packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts rename packages/dnb-eufemia/src/components/radio/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/radio/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/section/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/section/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/skeleton/figures/Article.d.ts create mode 100644 packages/dnb-eufemia/src/components/skeleton/figures/Circle.d.ts create mode 100644 packages/dnb-eufemia/src/components/skeleton/figures/Product.d.ts create mode 100644 packages/dnb-eufemia/src/components/skeleton/figures/Table.d.ts rename packages/dnb-eufemia/src/components/skeleton/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/skeleton/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/skip-content/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/skip-content/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/slider/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/slider/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/space/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/space/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts create mode 100644 packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.d.ts create mode 100644 packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts create mode 100644 packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts create mode 100644 packages/dnb-eufemia/src/components/step-indicator/StepIndicatorTriggerButton.d.ts rename packages/dnb-eufemia/src/components/step-indicator/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/step-indicator/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/style/{index.js => index.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/switch/Switch.d.ts rename packages/dnb-eufemia/src/components/switch/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/switch/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/table/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/table/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/tabs/Tabs.d.ts create mode 100644 packages/dnb-eufemia/src/components/tabs/TabsContentWrapper.d.ts create mode 100644 packages/dnb-eufemia/src/components/tabs/TabsCustomContent.d.ts rename packages/dnb-eufemia/src/components/tabs/__tests__/{Tabs.test.js => Tabs.test.tsx} (99%) rename packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/{Tabs.test.js.snap => Tabs.test.tsx.snap} (100%) rename packages/dnb-eufemia/src/components/tabs/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/tabs/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/tag/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/tag/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/textarea/Textarea.d.ts rename packages/dnb-eufemia/src/components/textarea/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/textarea/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/timeline/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/timeline/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/components/toggle-button/ToggleButton.d.ts create mode 100644 packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.d.ts rename packages/dnb-eufemia/src/components/toggle-button/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/toggle-button/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/tooltip/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/tooltip/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/upload/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/upload/{style.js => style.ts} (100%) rename packages/dnb-eufemia/src/components/visually-hidden/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/components/visually-hidden/{style.js => style.ts} (100%) create mode 100644 packages/dnb-eufemia/src/elements/Blockquote.d.ts create mode 100644 packages/dnb-eufemia/src/elements/Code.d.ts create mode 100644 packages/dnb-eufemia/src/elements/H.d.ts create mode 100644 packages/dnb-eufemia/src/elements/H1.d.ts create mode 100644 packages/dnb-eufemia/src/elements/H2.d.ts create mode 100644 packages/dnb-eufemia/src/elements/H3.d.ts create mode 100644 packages/dnb-eufemia/src/elements/H4.d.ts create mode 100644 packages/dnb-eufemia/src/elements/H5.d.ts create mode 100644 packages/dnb-eufemia/src/elements/H6.d.ts create mode 100644 packages/dnb-eufemia/src/elements/Hr.d.ts create mode 100644 packages/dnb-eufemia/src/elements/Span.d.ts rename packages/dnb-eufemia/src/elements/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/elements/{lib.js => lib.ts} (100%) rename packages/dnb-eufemia/src/esm/__tests__/{dnb-ui-basis.test.js => dnb-ui-basis.test.ts} (100%) rename packages/dnb-eufemia/src/esm/__tests__/{dnb-ui-components.test.js => dnb-ui-components.test.ts} (100%) rename packages/dnb-eufemia/src/esm/__tests__/{dnb-ui-elements.test.js => dnb-ui-elements.test.ts} (100%) rename packages/dnb-eufemia/src/esm/__tests__/{dnb-ui-extensions.test.js => dnb-ui-extensions.test.ts} (100%) delete mode 100644 packages/dnb-eufemia/src/esm/__tests__/dnb-ui-icons.test.js create mode 100644 packages/dnb-eufemia/src/esm/__tests__/dnb-ui-icons.test.ts rename packages/dnb-eufemia/src/esm/__tests__/{dnb-ui-lib.test.js => dnb-ui-lib.test.ts} (100%) rename packages/dnb-eufemia/src/extensions/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/extensions/{lib.js => lib.ts} (100%) create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/PaymentCard.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/BankAxept.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/Clock.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/DNB.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/DNBMetalic.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardDefault.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetalic.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/MastercardMetalicBlack.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/PB.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/PBPlatinum.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/Padlock.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/Pluss.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/SagaGold.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/SagaPlatinum.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/SagaVisaPlatinum.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/VisaDefault.d.ts create mode 100644 packages/dnb-eufemia/src/extensions/payment-card/icons/VisaMetalic.d.ts rename packages/dnb-eufemia/src/fragments/{DrawerList.js => DrawerList.ts} (100%) rename packages/dnb-eufemia/src/fragments/{ScrollView.js => ScrollView.ts} (100%) create mode 100644 packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.d.ts create mode 100644 packages/dnb-eufemia/src/fragments/drawer-list/DrawerListPortal.d.ts create mode 100644 packages/dnb-eufemia/src/fragments/drawer-list/DrawerListProvider.d.ts rename packages/dnb-eufemia/src/fragments/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/fragments/{lib.js => lib.ts} (100%) rename packages/dnb-eufemia/src/{index.js => index.ts} (100%) rename packages/dnb-eufemia/src/{lib.js => lib.ts} (100%) create mode 100644 packages/dnb-eufemia/src/shared/AlignmentHelper.d.ts diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.md index 8d0937141d2..6ee980787ed 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/properties.md @@ -6,13 +6,14 @@ showTabs: true | Properties | Description | | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `checked` | _(optional)_ determine whether the checkbox is checked or not. The default is `false`. | +| `checked` | _(optional)_ determine whether the checkbox is checked or not. The default is `false`. | | `title` | _(optional)_ the `title` of the input - describing it a bit further for accessibility reasons. | -| `label` | _(optional)_ use either the `label` property or provide a custom one. | +| `label` | _(optional)_ use either the `label` property or provide a custom one. | | `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. | +| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | | `size` | _(optional)_ the size of the checkbox. For now there is **medium** (default) and **large**. | | `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. | -| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | +| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | | `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | | `skeleton` | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/Examples.tsx index 4fc3bb3bb50..788582bae07 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dialog/Examples.tsx @@ -236,7 +236,7 @@ export const DialogConfirmLoggedOut = () => { setOpen(false) loginHandler() }} - labelled_by="custom-triggerer" + labelledBy="custom-triggerer" /> ) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx index 7c770e8ac76..20dcd55f2a2 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx @@ -129,7 +129,7 @@ export const InputExampleSuffix = () => ( autocomplete="on" placeholder="Placeholder text" suffix={ - + Some content } @@ -199,9 +199,6 @@ export const InputExampleSubmit = () => ( on_change={({ value }) => { console.log('on_change:', value) }} - onChange={({ value }) => { - console.log('onChange:', value) - }} right="small" bottom="x-small" /> diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.md index ec7a596f011..4702f42c0c6 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.md @@ -6,14 +6,15 @@ showTabs: true | Properties | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | _(required)_ defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **RadioGroup**. | +| `value` | _(required)_ defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the **RadioGroup**. | | `checked` | _(optional)_ determine whether the radio is checked or not. Default will be `false`. | -| `group` | _(optional)_ use a unique group identifier to define the Radio buttons that belongs together. | +| `group` | _(optional)_ use a unique group identifier to define the Radio buttons that belongs together. | | `size` | _(optional)_ the size of the Radio button. For now there is **medium** (default) and **large**. | -| `label` | _(optional)_ use either the `label` property or provide a custom one. | +| `label` | _(optional)_ use either the `label` property or provide a custom one. | | `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. | +| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | | `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. | -| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | +| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | | `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | @@ -21,15 +22,15 @@ showTabs: true | Properties | Description | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | _(optional)_ defines the pre-selected Radio button. The value has to match the one provided in the Radio button. Use a string value. | -| `name` | _(optional)_ custom grouping name. Defaults to a random name. | +| `value` | _(optional)_ defines the pre-selected Radio button. The value has to match the one provided in the Radio button. Use a string value. | +| `name` | _(optional)_ custom grouping name. Defaults to a random name. | | `layout_direction` | _(optional)_ Define the layout direction of the Radio buttons. Can be either `column` or `row`. Defaults to `column`. | | `size` | _(optional)_ the size of the Radio button. For now there is **medium** (default) and **large**. | | `status` | _(optional)_ uses the `form-status` component to show failure messages. | -| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | +| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | | `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | -| `label` | _(optional)_ use either the `label` property or provide a custom one. | +| `label` | _(optional)_ use either the `label` property or provide a custom one. | | `label_direction` | _(optional)_ to define the `label` layout direction on how the next element should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. | | `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | | `vertical` | _(optional)_ will force both `direction` and `label_direction` to be **vertical** if set to `true`. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.md index 4ae6aca25aa..3654c26b47f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/switch/properties.md @@ -6,13 +6,14 @@ showTabs: true | Properties | Description | | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `checked` | _(optional)_ determine whether the switch is checked or not. The default will be `false`. | -| `title` | _(required)_ the `title` of the input - describing it a bit further for accessibility reasons. | -| `label` | _(optional)_ use either the `label` property or provide a custom one. | +| `checked` | _(optional)_ determine whether the switch is checked or not. The default will be `false`. | +| `title` | _(required)_ the `title` of the input - describing it a bit further for accessibility reasons. | +| `label` | _(optional)_ use either the `label` property or provide a custom one. | | `label_position` | _(optional)_ defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. | +| `label_sr_only` | _(optional)_ use `true` to make the label only readable by screen readers. | | `size` | _(optional)_ the size of the switch. For now there is **medium** (default) and **large**. | | `status` | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. | -| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | +| `status_state` | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. | | `status_props` | _(optional)_ use an object to define additional FormStatus properties. | | `global_status_id` | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status). | | `suffix` | _(optional)_ text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component. | diff --git a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx index 6a456330579..0d3ba21d69d 100644 --- a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx +++ b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx @@ -59,6 +59,8 @@ const CodeBlock = ({ {...defaultProps} code={String(exampleCode).trim()} language={language} + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore theme={prismTheme} > {({ className, style, tokens, getLineProps, getTokenProps }) => ( diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json index ff26f35e4b4..bade8c44d47 100644 --- a/packages/dnb-eufemia/package.json +++ b/packages/dnb-eufemia/package.json @@ -34,7 +34,8 @@ "build:packages": "./scripts/postbuild/build-packages.sh", "build:prebuild": "babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/runPrepub.js", "build:resources": "babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/resources/makeResourcesPackage.js", - "build:types": "./scripts/prebuild/generate-types.sh", + "build:types": "./scripts/prebuild/generate-types-docs.sh", + "build:types:generate": "./scripts/prebuild/generate-types.sh", "build:types:definitions": "yarn tsc --project tsconfig.definitions.json", "build:types:dev": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/generateTypes.js' --ext js --watch './src/**/*' --watch './scripts/**/*'", "build:types:esm": "yarn tsc --project tsconfig.definitions.json --declarationDir ./build/esm --rootDir src", @@ -66,7 +67,7 @@ "skeleton:font": "nodemon --exec 'babel-node --extensions .js,.ts,.tsx ./scripts/tools/createSkeletonFont.js'", "start": "start-storybook -s / -p 8002 --ci --no-release-notes --no-version-updates", "test": "jest", - "test:auto-generated-types": "jest ./postTypeGeneration.test.js --ci --testPathIgnorePatterns=[]", + "test:auto-generated-types": "jest ./postTypeGeneration.test.ts --ci --testPathIgnorePatterns=[]", "test:ci": "jest --ci", "test:screenshots": "jest --config=./jest.config.screenshots.js --detectOpenHandles --testPathPattern ", "test:screenshots:ci": "jest --config=./jest.config.screenshots.js --ci --bail", diff --git a/packages/dnb-eufemia/scripts/postbuild/babel-cjs.sh b/packages/dnb-eufemia/scripts/postbuild/babel-cjs.sh index 9cd337b8713..62923621e50 100755 --- a/packages/dnb-eufemia/scripts/postbuild/babel-cjs.sh +++ b/packages/dnb-eufemia/scripts/postbuild/babel-cjs.sh @@ -15,8 +15,6 @@ babel ./src \ --no-copy-ignored \ --ignore 'src/esm,src/umd,src/core,**/*.test.*,**/__tests__/**/*,**/*.stories.*,**/stories,**/*.d.ts' -echo 'Building cjs bundle done!' - echo 'Copy additional files to cjs ...' OUT_DIR=./build/cjs babel-node --extensions .js,.ts,.tsx ./scripts/postbuild/copyTypeScriptFiles.js @@ -25,3 +23,5 @@ OUT_DIR=./build/cjs babel-node --extensions .js,.ts,.tsx ./scripts/postbuild/cop echo 'Copy extra cjs package.json ...' cp ./src/cjs/package.json ./build/cjs/package.json + +echo 'Building cjs bundle done!' \ No newline at end of file diff --git a/packages/dnb-eufemia/scripts/postbuild/babel-es.sh b/packages/dnb-eufemia/scripts/postbuild/babel-es.sh index 2ac5507a76f..78b690e6619 100755 --- a/packages/dnb-eufemia/scripts/postbuild/babel-es.sh +++ b/packages/dnb-eufemia/scripts/postbuild/babel-es.sh @@ -15,9 +15,9 @@ babel ./src \ --no-copy-ignored \ --ignore 'src/cjs,src/esm,src/umd,src/core,**/*.test.*,**/__tests__/**/*,**/*.stories.*,**/stories,**/*.d.ts' -echo 'Building es bundle done!' - echo 'Copy additional files to es ...' OUT_DIR=./build/es babel-node --extensions .js,.ts,.tsx ./scripts/postbuild/copyTypeScriptFiles.js OUT_DIR=./build/es babel-node --extensions .js,.ts,.tsx ./scripts/postbuild/copyStyles.js + +echo 'Building es bundle done!' \ No newline at end of file diff --git a/packages/dnb-eufemia/scripts/postbuild/babel-esm.sh b/packages/dnb-eufemia/scripts/postbuild/babel-esm.sh index bca9961f9ed..f38d7c38863 100755 --- a/packages/dnb-eufemia/scripts/postbuild/babel-esm.sh +++ b/packages/dnb-eufemia/scripts/postbuild/babel-esm.sh @@ -15,9 +15,9 @@ babel ./src \ --no-copy-ignored \ --ignore 'src/cjs,src/esm,src/umd,src/core,**/*.test.*,**/__tests__/**/*,**/*.stories.*,**/stories,**/*.d.ts' -echo 'Building esm bundle done!' - echo 'Copy additional files to esm ...' OUT_DIR=./build/esm babel-node --extensions .js,.ts,.tsx ./scripts/postbuild/copyTypeScriptFiles.js OUT_DIR=./build/esm babel-node --extensions .js,.ts,.tsx ./scripts/postbuild/copyStyles.js + +echo 'Building esm bundle done!' \ No newline at end of file diff --git a/packages/dnb-eufemia/scripts/postbuild/postbuild.sh b/packages/dnb-eufemia/scripts/postbuild/postbuild.sh index 50ac1896b73..8947511f338 100755 --- a/packages/dnb-eufemia/scripts/postbuild/postbuild.sh +++ b/packages/dnb-eufemia/scripts/postbuild/postbuild.sh @@ -4,7 +4,7 @@ set -e # Exit immediately if a command exits with a non-zero status. echo 'Postbuild started ...' -yarn build:types +yarn build:types:generate yarn prettier:other yarn build:cjs yarn build:es diff --git a/packages/dnb-eufemia/scripts/prebuild/generate-types-docs.sh b/packages/dnb-eufemia/scripts/prebuild/generate-types-docs.sh new file mode 100755 index 00000000000..a2e51d97b8b --- /dev/null +++ b/packages/dnb-eufemia/scripts/prebuild/generate-types-docs.sh @@ -0,0 +1,9 @@ +#!/bin/bash + +set -e # Exit immediately if a command exits with a non-zero status. + +echo 'Generating type definitions ...' + +babel-node --extensions .js,.ts,.tsx ./scripts/prebuild/generateTypes.js + +echo 'Generating type definitions done!' \ No newline at end of file diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.ts similarity index 96% rename from packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.js rename to packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.ts index 47912f52eff..3aa3bf7fd0d 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeLibStyles.test.ts @@ -63,5 +63,7 @@ if (isCI) { }) }) } else { - it('skipping local tests', () => {}) + it('skipping local tests', () => { + return null + }) } diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.ts similarity index 98% rename from packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.js rename to packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.ts index e35cf413584..11ae10bb26e 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeMainStyle.test.ts @@ -125,5 +125,7 @@ if (isCI) { }) }) } else { - it('skipping local tests', () => {}) + it('skipping local tests', () => { + return null + }) } diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makePropertiesFile.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makePropertiesFile.test.ts similarity index 100% rename from packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makePropertiesFile.test.js rename to packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makePropertiesFile.test.ts diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeReleaseVersion.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeReleaseVersion.test.ts similarity index 95% rename from packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeReleaseVersion.test.js rename to packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeReleaseVersion.test.ts index 93adff2c0c4..9cdf9131d45 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeReleaseVersion.test.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/makeReleaseVersion.test.ts @@ -11,14 +11,14 @@ import * as getNextReleaseVersion from '../../../postbuild/getNextReleaseVersion jest.mock('../../../postbuild/getNextReleaseVersion', () => { return { ...jest.requireActual('../../../postbuild/getNextReleaseVersion'), - getNextReleaseVersion: jest.fn().mockResolvedValue(), + getNextReleaseVersion: jest.fn().mockResolvedValue(false), } }) jest.mock('fs-extra', () => { return { ...jest.requireActual('fs-extra'), - writeFile: jest.fn().mockResolvedValue(), + writeFile: jest.fn().mockResolvedValue(false), } }) diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/postTypeGeneration.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/postTypeGeneration.test.ts similarity index 100% rename from packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/postTypeGeneration.test.js rename to packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/postTypeGeneration.test.ts diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/prepareTemplates.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/prepareTemplates.test.ts similarity index 93% rename from packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/prepareTemplates.test.js rename to packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/prepareTemplates.test.ts index 2740a52cabf..f5c87e2fd2a 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/prepareTemplates.test.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/prepareTemplates.test.ts @@ -16,7 +16,7 @@ import { jest.mock('fs-extra', () => { return { ...jest.requireActual('fs-extra'), - writeFile: jest.fn().mockResolvedValue(), + writeFile: jest.fn().mockResolvedValue(false), readdir: jest.fn((source) => { if (source.endsWith('/components')) { return ['component-a', 'component-b'] @@ -62,7 +62,7 @@ describe('prepareTemplates', () => { expect(writeFile).toHaveBeenCalledTimes(7) - const dest7 = expect.stringContaining('/src/index.js') + const dest7 = expect.stringContaining('/src/index.ts') expect(writeFile).toHaveBeenNthCalledWith( 7, dest7, @@ -113,7 +113,7 @@ describe('prepareTemplates', () => { expect(writeFile).toHaveBeenCalledTimes(4) - const dest1 = expect.stringContaining('/src/components/index.js') + const dest1 = expect.stringContaining('/src/components/index.ts') expect(writeFile).toHaveBeenNthCalledWith( 1, dest1, @@ -134,7 +134,7 @@ describe('prepareTemplates', () => { expect.stringContaining(`export { ComponentA, ComponentB }`) ) - const dest2 = expect.stringContaining('/src/components/lib.js') + const dest2 = expect.stringContaining('/src/components/lib.ts') expect(writeFile).toHaveBeenNthCalledWith( 2, dest2, @@ -160,7 +160,7 @@ describe('prepareTemplates', () => { expect.stringContaining(`return { ComponentA, ComponentB }`) ) - const dest3 = expect.stringContaining('/src/components/ComponentA.js') + const dest3 = expect.stringContaining('/src/components/ComponentA.ts') expect(writeFile).toHaveBeenNthCalledWith( 3, dest3, @@ -179,7 +179,7 @@ describe('prepareTemplates', () => { expect.stringContaining(`export default ComponentA`) ) - const dest4 = expect.stringContaining('/src/components/ComponentB.js') + const dest4 = expect.stringContaining('/src/components/ComponentB.ts') expect(writeFile).toHaveBeenNthCalledWith( 4, dest4, @@ -207,21 +207,21 @@ describe('prepareTemplates', () => { expect(writeFile).toHaveBeenCalledTimes(4) - const dest1 = expect.stringContaining('/src/fragments/index.js') + const dest1 = expect.stringContaining('/src/fragments/index.ts') expect(writeFile).toHaveBeenNthCalledWith( 1, dest1, expect.stringContaining(`export { FragmentA, FragmentB }`) ) - const dest2 = expect.stringContaining('/src/fragments/lib.js') + const dest2 = expect.stringContaining('/src/fragments/lib.ts') expect(writeFile).toHaveBeenNthCalledWith( 2, dest2, expect.stringContaining(`return { FragmentA, FragmentB }`) ) - const dest3 = expect.stringContaining('/fragments/FragmentA.js') + const dest3 = expect.stringContaining('/fragments/FragmentA.ts') expect(writeFile).toHaveBeenNthCalledWith( 3, dest3, @@ -230,7 +230,7 @@ describe('prepareTemplates', () => { ) ) - const dest4 = expect.stringContaining('/fragments/FragmentB.js') + const dest4 = expect.stringContaining('/fragments/FragmentB.ts') expect(writeFile).toHaveBeenNthCalledWith( 4, dest4, @@ -246,14 +246,14 @@ describe('prepareTemplates', () => { expect(writeFile).toHaveBeenCalledTimes(2) - const dest1 = expect.stringContaining('/src/elements/index.js') + const dest1 = expect.stringContaining('/src/elements/index.ts') expect(writeFile).toHaveBeenNthCalledWith( 1, dest1, expect.stringContaining(`export { ElementA, ElementB }`) ) - const dest2 = expect.stringContaining('/src/elements/lib.js') + const dest2 = expect.stringContaining('/src/elements/lib.ts') expect(writeFile).toHaveBeenNthCalledWith( 2, dest2, @@ -269,14 +269,14 @@ describe('prepareTemplates', () => { expect(writeFile).toHaveBeenCalledTimes(2) - const dest1 = expect.stringContaining('/src/extensions/index.js') + const dest1 = expect.stringContaining('/src/extensions/index.ts') expect(writeFile).toHaveBeenNthCalledWith( 1, dest1, expect.stringContaining(`export { ExtensionA, ExtensionB }`) ) - const dest2 = expect.stringContaining('/src/extensions/lib.js') + const dest2 = expect.stringContaining('/src/extensions/lib.ts') expect(writeFile).toHaveBeenNthCalledWith( 2, dest2, diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/themeFactory.test.js b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/themeFactory.test.ts similarity index 100% rename from packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/themeFactory.test.js rename to packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/themeFactory.test.ts diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/prepareTemplates.js b/packages/dnb-eufemia/scripts/prebuild/tasks/prepareTemplates.js index 846042ade44..0ec35650ac8 100644 --- a/packages/dnb-eufemia/scripts/prebuild/tasks/prepareTemplates.js +++ b/packages/dnb-eufemia/scripts/prebuild/tasks/prepareTemplates.js @@ -39,7 +39,7 @@ export const processComponents = async () => { __dirname, '../../../src/core/templates/components-index-template.js' ), - destFile: path.resolve(__dirname, '../../../src/components/index.js'), + destFile: path.resolve(__dirname, '../../../src/components/index.ts'), processToNamesList: path.resolve( __dirname, '../../../src/components/' @@ -63,7 +63,7 @@ export const processComponents = async () => { __dirname, '../../../src/core/templates/components-lib-template.js' ), - destFile: path.resolve(__dirname, '../../../src/components/lib.js'), + destFile: path.resolve(__dirname, '../../../src/components/lib.ts'), }).then((res) => { if (isCLI) { log.succeed( @@ -101,7 +101,7 @@ export const processFragments = async () => { __dirname, '../../../src/core/templates/components-index-template.js' ), - destFile: path.resolve(__dirname, '../../../src/fragments/index.js'), + destFile: path.resolve(__dirname, '../../../src/fragments/index.ts'), processToNamesList: path.resolve(__dirname, '../../../src/fragments/'), processToNamesIgnoreList: ['style'], processToNamesListByUsingFolders: true, @@ -120,7 +120,7 @@ export const processFragments = async () => { __dirname, '../../../src/core/templates/fragments-lib-template.js' ), - destFile: path.resolve(__dirname, '../../../src/fragments/lib.js'), + destFile: path.resolve(__dirname, '../../../src/fragments/lib.ts'), }).then((res) => { if (isCLI) { log.succeed( @@ -156,7 +156,7 @@ export const processElements = async () => { __dirname, '../../../src/core/templates/elements-index-template.js' ), - destFile: path.resolve(__dirname, '../../../src/elements/index.js'), + destFile: path.resolve(__dirname, '../../../src/elements/index.ts'), processToNamesList: path.resolve(__dirname, '../../../src/elements/'), processToNamesIgnoreList: ['index', 'lib', 'Element'], processToNamesListByUsingFolders: false, @@ -173,7 +173,7 @@ export const processElements = async () => { __dirname, '../../../src/core/templates/elements-lib-template.js' ), - destFile: path.resolve(__dirname, '../../../src/elements/lib.js'), + destFile: path.resolve(__dirname, '../../../src/elements/lib.ts'), processToNamesIgnoreList: ['index', 'lib', 'Element'], }).then((res) => { if (isCLI) { @@ -194,7 +194,7 @@ export const processExtensions = async () => { __dirname, '../../../src/core/templates/components-index-template.js' ), - destFile: path.resolve(__dirname, '../../../src/extensions/index.js'), + destFile: path.resolve(__dirname, '../../../src/extensions/index.ts'), processToNamesList: path.resolve( __dirname, '../../../src/extensions/' @@ -216,7 +216,7 @@ export const processExtensions = async () => { __dirname, '../../../src/core/templates/extensions-lib-template.js' ), - destFile: path.resolve(__dirname, '../../../src/extensions/lib.js'), + destFile: path.resolve(__dirname, '../../../src/extensions/lib.ts'), }, }).then((res) => { if (isCLI) { @@ -236,7 +236,7 @@ export const processMainIndex = async ({ components, elements }) => { __dirname, '../../../src/core/templates/main-index-template.js' ), - destFile: path.resolve(__dirname, '../../../src/index.js'), + destFile: path.resolve(__dirname, '../../../src/index.ts'), processToNamesList: [...components, ...elements], transformNamesList: ({ result }) => { // because elements don't have a folder, we remove the last part of the path @@ -309,7 +309,7 @@ export const runFactory = async ({ await asyncForEach(processToNamesList, async ({ file }) => { const destFile = path.resolve( destPath, - `${camelCase(file, { pascalCase: true })}.js` + `${camelCase(file, { pascalCase: true })}.ts` ) try { diff --git a/packages/dnb-eufemia/src/__tests__/index.test.js b/packages/dnb-eufemia/src/__tests__/index.test.ts similarity index 100% rename from packages/dnb-eufemia/src/__tests__/index.test.js rename to packages/dnb-eufemia/src/__tests__/index.test.ts diff --git a/packages/dnb-eufemia/src/__tests__/lib.test.js b/packages/dnb-eufemia/src/__tests__/lib.test.ts similarity index 100% rename from packages/dnb-eufemia/src/__tests__/lib.test.js rename to packages/dnb-eufemia/src/__tests__/lib.test.ts diff --git a/packages/dnb-eufemia/src/components/Accordion.js b/packages/dnb-eufemia/src/components/Accordion.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Accordion.js rename to packages/dnb-eufemia/src/components/Accordion.ts diff --git a/packages/dnb-eufemia/src/components/Autocomplete.js b/packages/dnb-eufemia/src/components/Autocomplete.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Autocomplete.js rename to packages/dnb-eufemia/src/components/Autocomplete.ts diff --git a/packages/dnb-eufemia/src/components/Avatar.js b/packages/dnb-eufemia/src/components/Avatar.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Avatar.js rename to packages/dnb-eufemia/src/components/Avatar.ts diff --git a/packages/dnb-eufemia/src/components/Badge.js b/packages/dnb-eufemia/src/components/Badge.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Badge.js rename to packages/dnb-eufemia/src/components/Badge.ts diff --git a/packages/dnb-eufemia/src/components/Breadcrumb.js b/packages/dnb-eufemia/src/components/Breadcrumb.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Breadcrumb.js rename to packages/dnb-eufemia/src/components/Breadcrumb.ts diff --git a/packages/dnb-eufemia/src/components/Button.js b/packages/dnb-eufemia/src/components/Button.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Button.js rename to packages/dnb-eufemia/src/components/Button.ts diff --git a/packages/dnb-eufemia/src/components/Checkbox.js b/packages/dnb-eufemia/src/components/Checkbox.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Checkbox.js rename to packages/dnb-eufemia/src/components/Checkbox.ts diff --git a/packages/dnb-eufemia/src/components/DatePicker.js b/packages/dnb-eufemia/src/components/DatePicker.ts similarity index 100% rename from packages/dnb-eufemia/src/components/DatePicker.js rename to packages/dnb-eufemia/src/components/DatePicker.ts diff --git a/packages/dnb-eufemia/src/components/Dialog.js b/packages/dnb-eufemia/src/components/Dialog.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Dialog.js rename to packages/dnb-eufemia/src/components/Dialog.ts diff --git a/packages/dnb-eufemia/src/components/Drawer.js b/packages/dnb-eufemia/src/components/Drawer.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Drawer.js rename to packages/dnb-eufemia/src/components/Drawer.ts diff --git a/packages/dnb-eufemia/src/components/Dropdown.js b/packages/dnb-eufemia/src/components/Dropdown.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Dropdown.js rename to packages/dnb-eufemia/src/components/Dropdown.ts diff --git a/packages/dnb-eufemia/src/components/FormLabel.js b/packages/dnb-eufemia/src/components/FormLabel.ts similarity index 100% rename from packages/dnb-eufemia/src/components/FormLabel.js rename to packages/dnb-eufemia/src/components/FormLabel.ts diff --git a/packages/dnb-eufemia/src/components/FormRow.js b/packages/dnb-eufemia/src/components/FormRow.ts similarity index 100% rename from packages/dnb-eufemia/src/components/FormRow.js rename to packages/dnb-eufemia/src/components/FormRow.ts diff --git a/packages/dnb-eufemia/src/components/FormSet.js b/packages/dnb-eufemia/src/components/FormSet.ts similarity index 100% rename from packages/dnb-eufemia/src/components/FormSet.js rename to packages/dnb-eufemia/src/components/FormSet.ts diff --git a/packages/dnb-eufemia/src/components/FormStatus.js b/packages/dnb-eufemia/src/components/FormStatus.ts similarity index 100% rename from packages/dnb-eufemia/src/components/FormStatus.js rename to packages/dnb-eufemia/src/components/FormStatus.ts diff --git a/packages/dnb-eufemia/src/components/GlobalError.js b/packages/dnb-eufemia/src/components/GlobalError.ts similarity index 100% rename from packages/dnb-eufemia/src/components/GlobalError.js rename to packages/dnb-eufemia/src/components/GlobalError.ts diff --git a/packages/dnb-eufemia/src/components/GlobalStatus.js b/packages/dnb-eufemia/src/components/GlobalStatus.ts similarity index 100% rename from packages/dnb-eufemia/src/components/GlobalStatus.js rename to packages/dnb-eufemia/src/components/GlobalStatus.ts diff --git a/packages/dnb-eufemia/src/components/Heading.js b/packages/dnb-eufemia/src/components/Heading.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Heading.js rename to packages/dnb-eufemia/src/components/Heading.ts diff --git a/packages/dnb-eufemia/src/components/HeightAnimation.js b/packages/dnb-eufemia/src/components/HeightAnimation.ts similarity index 100% rename from packages/dnb-eufemia/src/components/HeightAnimation.js rename to packages/dnb-eufemia/src/components/HeightAnimation.ts diff --git a/packages/dnb-eufemia/src/components/HelpButton.js b/packages/dnb-eufemia/src/components/HelpButton.ts similarity index 100% rename from packages/dnb-eufemia/src/components/HelpButton.js rename to packages/dnb-eufemia/src/components/HelpButton.ts diff --git a/packages/dnb-eufemia/src/components/Icon.js b/packages/dnb-eufemia/src/components/Icon.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Icon.js rename to packages/dnb-eufemia/src/components/Icon.ts diff --git a/packages/dnb-eufemia/src/components/IconPrimary.js b/packages/dnb-eufemia/src/components/IconPrimary.ts similarity index 100% rename from packages/dnb-eufemia/src/components/IconPrimary.js rename to packages/dnb-eufemia/src/components/IconPrimary.ts diff --git a/packages/dnb-eufemia/src/components/InfoCard.js b/packages/dnb-eufemia/src/components/InfoCard.ts similarity index 100% rename from packages/dnb-eufemia/src/components/InfoCard.js rename to packages/dnb-eufemia/src/components/InfoCard.ts diff --git a/packages/dnb-eufemia/src/components/Input.js b/packages/dnb-eufemia/src/components/Input.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Input.js rename to packages/dnb-eufemia/src/components/Input.ts diff --git a/packages/dnb-eufemia/src/components/InputMasked.js b/packages/dnb-eufemia/src/components/InputMasked.ts similarity index 100% rename from packages/dnb-eufemia/src/components/InputMasked.js rename to packages/dnb-eufemia/src/components/InputMasked.ts diff --git a/packages/dnb-eufemia/src/components/Logo.js b/packages/dnb-eufemia/src/components/Logo.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Logo.js rename to packages/dnb-eufemia/src/components/Logo.ts diff --git a/packages/dnb-eufemia/src/components/Modal.js b/packages/dnb-eufemia/src/components/Modal.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Modal.js rename to packages/dnb-eufemia/src/components/Modal.ts diff --git a/packages/dnb-eufemia/src/components/NumberFormat.js b/packages/dnb-eufemia/src/components/NumberFormat.ts similarity index 100% rename from packages/dnb-eufemia/src/components/NumberFormat.js rename to packages/dnb-eufemia/src/components/NumberFormat.ts diff --git a/packages/dnb-eufemia/src/components/Pagination.js b/packages/dnb-eufemia/src/components/Pagination.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Pagination.js rename to packages/dnb-eufemia/src/components/Pagination.ts diff --git a/packages/dnb-eufemia/src/components/ProgressIndicator.js b/packages/dnb-eufemia/src/components/ProgressIndicator.ts similarity index 100% rename from packages/dnb-eufemia/src/components/ProgressIndicator.js rename to packages/dnb-eufemia/src/components/ProgressIndicator.ts diff --git a/packages/dnb-eufemia/src/components/Radio.js b/packages/dnb-eufemia/src/components/Radio.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Radio.js rename to packages/dnb-eufemia/src/components/Radio.ts diff --git a/packages/dnb-eufemia/src/components/Section.js b/packages/dnb-eufemia/src/components/Section.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Section.js rename to packages/dnb-eufemia/src/components/Section.ts diff --git a/packages/dnb-eufemia/src/components/Skeleton.js b/packages/dnb-eufemia/src/components/Skeleton.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Skeleton.js rename to packages/dnb-eufemia/src/components/Skeleton.ts diff --git a/packages/dnb-eufemia/src/components/SkipContent.js b/packages/dnb-eufemia/src/components/SkipContent.ts similarity index 100% rename from packages/dnb-eufemia/src/components/SkipContent.js rename to packages/dnb-eufemia/src/components/SkipContent.ts diff --git a/packages/dnb-eufemia/src/components/Slider.js b/packages/dnb-eufemia/src/components/Slider.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Slider.js rename to packages/dnb-eufemia/src/components/Slider.ts diff --git a/packages/dnb-eufemia/src/components/Space.js b/packages/dnb-eufemia/src/components/Space.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Space.js rename to packages/dnb-eufemia/src/components/Space.ts diff --git a/packages/dnb-eufemia/src/components/StepIndicator.js b/packages/dnb-eufemia/src/components/StepIndicator.ts similarity index 100% rename from packages/dnb-eufemia/src/components/StepIndicator.js rename to packages/dnb-eufemia/src/components/StepIndicator.ts diff --git a/packages/dnb-eufemia/src/components/Style.js b/packages/dnb-eufemia/src/components/Style.js deleted file mode 100644 index 115f185da46..00000000000 --- a/packages/dnb-eufemia/src/components/Style.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * ATTENTION: This file is auto generated by using "prepareTemplates". - * Do not change the content! - * - */ - -/** - * Library Index style to autogenerate all the components and extensions - * Used by "prepareStyles" - */ - -import Style from './style/Style' -export * from './style/Style' -export default Style diff --git a/packages/dnb-eufemia/src/components/Switch.js b/packages/dnb-eufemia/src/components/Switch.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Switch.js rename to packages/dnb-eufemia/src/components/Switch.ts diff --git a/packages/dnb-eufemia/src/components/Table.js b/packages/dnb-eufemia/src/components/Table.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Table.js rename to packages/dnb-eufemia/src/components/Table.ts diff --git a/packages/dnb-eufemia/src/components/Tabs.js b/packages/dnb-eufemia/src/components/Tabs.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Tabs.js rename to packages/dnb-eufemia/src/components/Tabs.ts diff --git a/packages/dnb-eufemia/src/components/Tag.js b/packages/dnb-eufemia/src/components/Tag.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Tag.js rename to packages/dnb-eufemia/src/components/Tag.ts diff --git a/packages/dnb-eufemia/src/components/Textarea.js b/packages/dnb-eufemia/src/components/Textarea.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Textarea.js rename to packages/dnb-eufemia/src/components/Textarea.ts diff --git a/packages/dnb-eufemia/src/components/Timeline.js b/packages/dnb-eufemia/src/components/Timeline.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Timeline.js rename to packages/dnb-eufemia/src/components/Timeline.ts diff --git a/packages/dnb-eufemia/src/components/ToggleButton.js b/packages/dnb-eufemia/src/components/ToggleButton.ts similarity index 100% rename from packages/dnb-eufemia/src/components/ToggleButton.js rename to packages/dnb-eufemia/src/components/ToggleButton.ts diff --git a/packages/dnb-eufemia/src/components/Tooltip.js b/packages/dnb-eufemia/src/components/Tooltip.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Tooltip.js rename to packages/dnb-eufemia/src/components/Tooltip.ts diff --git a/packages/dnb-eufemia/src/components/Upload.js b/packages/dnb-eufemia/src/components/Upload.ts similarity index 100% rename from packages/dnb-eufemia/src/components/Upload.js rename to packages/dnb-eufemia/src/components/Upload.ts diff --git a/packages/dnb-eufemia/src/components/VisuallyHidden.js b/packages/dnb-eufemia/src/components/VisuallyHidden.ts similarity index 100% rename from packages/dnb-eufemia/src/components/VisuallyHidden.js rename to packages/dnb-eufemia/src/components/VisuallyHidden.ts diff --git a/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts b/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts new file mode 100644 index 00000000000..36467e34d34 --- /dev/null +++ b/packages/dnb-eufemia/src/components/accordion/Accordion.d.ts @@ -0,0 +1,247 @@ +import * as React from 'react'; +import AccordionContent from './AccordionContent'; +import AccordionHeader from './AccordionHeader'; +import AccordionProvider from './AccordionProvider'; +export type AccordionExpanded = string | boolean; +export type AccordionNoAnimation = string | boolean; +export type AccordionExpandedSsr = string | boolean; +export type AccordionPrerender = string | boolean; +export type AccordionPreventRerender = string | boolean; +export type AccordionPreventRerenderConditional = string | boolean; +export type AccordionRememberState = string | boolean; +export type AccordionFlushRememberedState = string | boolean; +export type AccordionSingleContainer = string | boolean; +export type AccordionVariant = 'plain' | 'default' | 'outlined' | 'filled'; +export type AccordionAllowCloseAll = string | boolean; +export type AccordionDisabled = string | boolean; +export type AccordionSkeleton = string | boolean; +export type AccordionHeading = boolean | React.ReactNode; +export type AccordionHeadingLevel = string | number; +export type AccordionIcon = + | React.ReactNode + | ((...args: any[]) => any) + | { + closed?: React.ReactNode | ((...args: any[]) => any); + + /** + * If set to `true` the accordion will be expanded as its initial state. + */ + expanded?: React.ReactNode | ((...args: any[]) => any); + }; +export type AccordionClosed = React.ReactNode | ((...args: any[]) => any); +export type AccordionIconPosition = 'left' | 'right'; +export type AccordionAttributes = string | Record; +export type AccordionSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type AccordionTop = string | number | boolean; +export type AccordionRight = string | number | boolean; +export type AccordionBottom = string | number | boolean; +export type AccordionLeft = string | number | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionProps extends React.HTMLProps { + /** + * A title as a string or React element. It will be used as the button text. + */ + title?: React.ReactNode; + + /** + * If set to `true` the accordion will be expanded as its initial state. + */ + expanded?: AccordionExpanded; + + /** + * If set to `true`, the open and close animation will be omitted. + */ + no_animation?: AccordionNoAnimation; + + /** + * If set to `true` the accordion will be expanded during SSR. Can be potentially useful for SEO, although it will disturb client hydration, where React expects the same state. But that's mainly a technical aspect to consider. + */ + expanded_ssr?: AccordionExpandedSsr; + + /** + * If set to `true` the content will be present, even the accordion is not expanded. Can be useful for assistive technology or SEO. + */ + prerender?: AccordionPrerender; + + /** + * If set to `true` the accordion component will not re-render its content – can be useful for widgets you don't have control of storing the temporary state during an interaction. + */ + prevent_rerender?: AccordionPreventRerender; + + /** + * Use this prop together with `prevent_rerender` – and if it is to `true`, the accordion component will re-render if the children are a new React element and does not match anymore the previews one. + */ + prevent_rerender_conditional?: AccordionPreventRerenderConditional; + + /** + * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage. + */ + remember_state?: AccordionRememberState; + + /** + * Send along a custom React Ref for `.dnb-accordion__content`. + */ + contentRef?: Record; + + /** + * If set to `true`, the saved (remembered) will be removed and the initial component state will be used and set. + */ + flush_remembered_state?: AccordionFlushRememberedState; + + /** + * If set to `true`, a group of accordions will be wrapped to sidebar looking menu for medium and larger screens. + */ + single_container?: AccordionSingleContainer; + + /** + * Defines the used styling. As of now, only `outlined` is available. Use `plain` for no styles. It defaults to `outlined`. + */ + variant?: AccordionVariant; + + /** + * Will add a React element on the left side of the `title`, inside `AccordionHeaderContainer`. + */ + left_component?: React.ReactNode; + allow_close_all?: AccordionAllowCloseAll; + + /** + * If set to `true`, the accordion button will be disabled (dimmed). + */ + disabled?: AccordionDisabled; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: AccordionSkeleton; + + /** + * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required. + */ + id?: string; + group?: string; + + /** + * Gives you the option to replace the used `button` element. Provide a React element, including a string (HTML element). Defaults to a `div` with all the needed accessibility features included. + */ + element?: React.ReactNode; + + /** + * If set to `true`, level 2 (h2) will be used. You can provide your own HTML heading (`h3`), or provide a `heading_level` property. + */ + heading?: AccordionHeading; + + /** + * If `heading` is set to `true`, you can provide a numeric value to define a different heading level. Defaults to `2`. + */ + heading_level?: AccordionHeadingLevel; + + /** + * Will replace the `chevron` icon. The icon will still rotate (by CSS). You can use an object to use two different icons, one for the closed state and one for the expanded state `{ closed, expanded }`. + */ + icon?: AccordionIcon; + closed?: AccordionClosed; + + /** + * Will set the placement of the icon. Defaults to `left`. + */ + icon_position?: AccordionIconPosition; + + /** + * Define a different icon size. Defaults to `medium` (1.5rem). + */ + icon_size?: string; + attributes?: AccordionAttributes; + class?: string; + className?: string; + children?: React.ReactNode; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: AccordionSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: AccordionTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: AccordionRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: AccordionBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: AccordionLeft; + + /** + * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`. + */ + on_change?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; +} +export default class Accordion extends React.Component< + AccordionProps, + any +> { + static defaultProps: object; + static Content = AccordionContent; + static Header = AccordionHeader; + static Provider = AccordionProvider; + render(): JSX.Element; +} +export type GroupRememberState = string | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface GroupProps { + /** + * A unique `id` that will be used on the button element. If you use `remember_state`, an id is required. + */ + id?: string; + group?: string; + + /** + * If set to `true`, it will remember a changed state initiated by the user. It requires a unique `id`. It will store the sate in the local storage. + */ + remember_state?: GroupRememberState; +} + +declare class Group extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionContent.d.ts b/packages/dnb-eufemia/src/components/accordion/AccordionContent.d.ts new file mode 100644 index 00000000000..4cc7c2562c4 --- /dev/null +++ b/packages/dnb-eufemia/src/components/accordion/AccordionContent.d.ts @@ -0,0 +1,35 @@ +import * as React from 'react'; +export type AccordionContentSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type AccordionContentTop = string | number | boolean; +export type AccordionContentRight = string | number | boolean; +export type AccordionContentBottom = string | number | boolean; +export type AccordionContentLeft = string | number | boolean; +export type AccordionContentChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionContentProps + extends React.HTMLProps { + instance?: Record; + space?: AccordionContentSpace; + top?: AccordionContentTop; + right?: AccordionContentRight; + bottom?: AccordionContentBottom; + left?: AccordionContentLeft; + className?: string; + children?: AccordionContentChildren; +} +declare const AccordionContent: React.FC; +export default AccordionContent; diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionHeader.d.ts b/packages/dnb-eufemia/src/components/accordion/AccordionHeader.d.ts new file mode 100644 index 00000000000..853c417c1c4 --- /dev/null +++ b/packages/dnb-eufemia/src/components/accordion/AccordionHeader.d.ts @@ -0,0 +1,183 @@ +import * as React from 'react'; +export type AccordionHeaderTitleSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type AccordionHeaderTitleTop = string | number | boolean; +export type AccordionHeaderTitleRight = string | number | boolean; +export type AccordionHeaderTitleBottom = string | number | boolean; +export type AccordionHeaderTitleLeft = string | number | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionHeaderTitleProps { + space?: AccordionHeaderTitleSpace; + top?: AccordionHeaderTitleTop; + right?: AccordionHeaderTitleRight; + bottom?: AccordionHeaderTitleBottom; + left?: AccordionHeaderTitleLeft; + children?: React.ReactNode; +} +declare const AccordionHeaderTitle: React.FC; +export type AccordionHeaderDescriptionSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type AccordionHeaderDescriptionTop = string | number | boolean; +export type AccordionHeaderDescriptionRight = string | number | boolean; +export type AccordionHeaderDescriptionBottom = string | number | boolean; +export type AccordionHeaderDescriptionLeft = string | number | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionHeaderDescriptionProps { + space?: AccordionHeaderDescriptionSpace; + top?: AccordionHeaderDescriptionTop; + right?: AccordionHeaderDescriptionRight; + bottom?: AccordionHeaderDescriptionBottom; + left?: AccordionHeaderDescriptionLeft; + children?: React.ReactNode; +} +declare const AccordionHeaderDescription: React.FC; +export type AccordionHeaderContainerSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type AccordionHeaderContainerTop = string | number | boolean; +export type AccordionHeaderContainerRight = string | number | boolean; +export type AccordionHeaderContainerBottom = string | number | boolean; +export type AccordionHeaderContainerLeft = string | number | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionHeaderContainerProps { + space?: AccordionHeaderContainerSpace; + top?: AccordionHeaderContainerTop; + right?: AccordionHeaderContainerRight; + bottom?: AccordionHeaderContainerBottom; + left?: AccordionHeaderContainerLeft; + children?: React.ReactNode; +} +declare const AccordionHeaderContainer: React.FC; +export type AccordionHeaderIconIcon = + | React.ReactNode + | ((...args: any[]) => any) + | { + closed?: React.ReactNode | ((...args: any[]) => any); + expanded?: React.ReactNode | ((...args: any[]) => any); + }; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionHeaderIconProps { + icon?: AccordionHeaderIconIcon; + size?: string; + expanded?: boolean; +} +declare const AccordionHeaderIcon: React.FC; +export type AccordionHeaderTitle = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type AccordionHeaderDescription = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type AccordionHeaderLeftComponent = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type AccordionHeaderElement = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type AccordionHeaderHeading = + | boolean + | string + | React.ReactNode + | ((...args: any[]) => any); +export type AccordionHeaderHeadingLevel = string | number; +export type AccordionHeaderIcon = + | React.ReactNode + | ((...args: any[]) => any) + | { + closed?: React.ReactNode | ((...args: any[]) => any); + expanded?: React.ReactNode | ((...args: any[]) => any); + }; +export type AccordionHeaderIconPosition = 'left' | 'right'; +export type AccordionHeaderDisabled = string | boolean; +export type AccordionHeaderSkeleton = string | boolean; +export type AccordionHeaderNoAnimation = string | boolean; +export type AccordionHeaderSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type AccordionHeaderTop = string | number | boolean; +export type AccordionHeaderRight = string | number | boolean; +export type AccordionHeaderBottom = string | number | boolean; +export type AccordionHeaderLeft = string | number | boolean; +export type AccordionHeaderChildren = + | string + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionHeaderProps + extends React.HTMLProps { + title?: AccordionHeaderTitle; + description?: AccordionHeaderDescription; + left_component?: AccordionHeaderLeftComponent; + element?: AccordionHeaderElement; + heading?: AccordionHeaderHeading; + heading_level?: AccordionHeaderHeadingLevel; + icon?: AccordionHeaderIcon; + icon_position?: AccordionHeaderIconPosition; + icon_size?: string; + disabled?: AccordionHeaderDisabled; + skeleton?: AccordionHeaderSkeleton; + no_animation?: AccordionHeaderNoAnimation; + space?: AccordionHeaderSpace; + top?: AccordionHeaderTop; + right?: AccordionHeaderRight; + bottom?: AccordionHeaderBottom; + left?: AccordionHeaderLeft; + className?: string; + children?: AccordionHeaderChildren; +} +export default class AccordionHeader extends React.Component< + AccordionHeaderProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/accordion/AccordionProvider.d.ts b/packages/dnb-eufemia/src/components/accordion/AccordionProvider.d.ts new file mode 100644 index 00000000000..28dbd883be6 --- /dev/null +++ b/packages/dnb-eufemia/src/components/accordion/AccordionProvider.d.ts @@ -0,0 +1,100 @@ +import * as React from 'react'; +export type AccordionGroupExpanded = string | boolean; +export type AccordionGroupNoAnimation = string | boolean; +export type AccordionGroupExpandedSsr = string | boolean; +export type AccordionGroupPrerender = string | boolean; +export type AccordionGroupPreventRerender = string | boolean; +export type AccordionGroupPreventRerenderConditional = string | boolean; +export type AccordionGroupRememberState = string | boolean; +export type AccordionGroupFlushRememberedState = string | boolean; +export type AccordionGroupSingleContainer = string | boolean; +export type AccordionGroupVariant = + | 'plain' + | 'default' + | 'outlined' + | 'filled'; +export type AccordionGroupAllowCloseAll = string | boolean; +export type AccordionGroupDisabled = string | boolean; +export type AccordionGroupSkeleton = string | boolean; +export type AccordionGroupHeading = boolean | React.ReactNode; +export type AccordionGroupHeadingLevel = string | number; +export type AccordionGroupIcon = + | React.ReactNode + | ((...args: any[]) => any) + | { + closed?: React.ReactNode | ((...args: any[]) => any); + expanded?: React.ReactNode | ((...args: any[]) => any); + }; +export type AccordionGroupClosed = + | React.ReactNode + | ((...args: any[]) => any); +export type AccordionGroupIconPosition = 'left' | 'right'; +export type AccordionGroupAttributes = string | Record; +export type AccordionGroupSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type AccordionGroupTop = string | number | boolean; +export type AccordionGroupRight = string | number | boolean; +export type AccordionGroupBottom = string | number | boolean; +export type AccordionGroupLeft = string | number | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AccordionGroupProps extends React.HTMLProps { + title?: React.ReactNode; + expanded?: AccordionGroupExpanded; + no_animation?: AccordionGroupNoAnimation; + expanded_ssr?: AccordionGroupExpandedSsr; + prerender?: AccordionGroupPrerender; + prevent_rerender?: AccordionGroupPreventRerender; + prevent_rerender_conditional?: AccordionGroupPreventRerenderConditional; + remember_state?: AccordionGroupRememberState; + contentRef?: Record; + flush_remembered_state?: AccordionGroupFlushRememberedState; + single_container?: AccordionGroupSingleContainer; + variant?: AccordionGroupVariant; + left_component?: React.ReactNode; + allow_close_all?: AccordionGroupAllowCloseAll; + disabled?: AccordionGroupDisabled; + skeleton?: AccordionGroupSkeleton; + id?: string; + group?: string; + element?: React.ReactNode; + heading?: AccordionGroupHeading; + heading_level?: AccordionGroupHeadingLevel; + icon?: AccordionGroupIcon; + closed?: AccordionGroupClosed; + icon_position?: AccordionGroupIconPosition; + icon_size?: string; + attributes?: AccordionGroupAttributes; + class?: string; + className?: string; + children?: React.ReactNode; + space?: AccordionGroupSpace; + top?: AccordionGroupTop; + right?: AccordionGroupRight; + bottom?: AccordionGroupBottom; + left?: AccordionGroupLeft; + + /** + * Will be called by user click interaction. Returns an object with a boolean state `expanded` inside `{ expanded, id, event, ...event }`. + */ + on_change?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; + expanded_id?: string; + onInit?: (...args: any[]) => any; +} +export default class AccordionGroup extends React.Component< + AccordionGroupProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/accordion/index.js b/packages/dnb-eufemia/src/components/accordion/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/accordion/index.js rename to packages/dnb-eufemia/src/components/accordion/index.ts diff --git a/packages/dnb-eufemia/src/components/accordion/style.js b/packages/dnb-eufemia/src/components/accordion/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/accordion/style.js rename to packages/dnb-eufemia/src/components/accordion/style.ts diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts new file mode 100644 index 00000000000..c77d205d1b3 --- /dev/null +++ b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.d.ts @@ -0,0 +1,584 @@ +import * as React from 'react'; +export type AutocompleteSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type AutocompleteTop = string | number | boolean; +export type AutocompleteRight = string | number | boolean; +export type AutocompleteBottom = string | number | boolean; +export type AutocompleteLeft = string | number | boolean; +export type AutocompleteActionMenu = string | boolean; +export type AutocompleteIsPopup = string | boolean; +export type AutocompleteAlignDrawer = 'left' | 'right'; +export type AutocompleteWrapperElement = + | Record + | ((...args: any[]) => any) + | React.ReactNode; +export type AutocompleteIndependentWidth = string | boolean; +export type AutocompleteFixedPosition = string | boolean; +export type AutocompletePreventFocus = string | boolean; +export type AutocompleteSkipKeysearch = string | boolean; +export type AutocompleteSelectedValue = string | React.ReactNode; +export type AutocompleteSuffixValue = string | React.ReactNode; +export type AutocompleteContent = string | React.ReactNode | string[]; +export type AutocompleteRawData = + | any[] + | Record + | ((...args: any[]) => any); +export type AutocompleteIgnoreEvents = string | boolean; +export type AutocompleteMode = 'sync' | 'async'; +export type AutocompleteTitle = string | React.ReactNode; +export type AutocompletePlaceholder = string | React.ReactNode; +export type AutocompleteNoOptions = string | React.ReactNode; +export type AutocompleteShowAll = string | React.ReactNode; +export type AutocompleteAriaLiveOptions = string | React.ReactNode; +export type AutocompleteIndicatorLabel = string | React.ReactNode; +export type AutocompleteSubmitButtonIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type AutocompleteInputRef = + | ((...args: any[]) => any) + | Record; +export type AutocompleteIcon = string | React.ReactNode; +export type AutocompleteIconPosition = 'left' | 'right'; +export type AutocompleteTrianglePosition = 'left' | 'right'; +export type AutocompleteInputIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type AutocompleteLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type AutocompleteLabelDirection = 'horizontal' | 'vertical'; +export type AutocompleteLabelSrOnly = string | boolean; +export type AutocompleteKeepValue = string | boolean; +export type AutocompleteKeepValueAndSelection = string | boolean; +export type AutocompleteShowClearButton = string | boolean; +export type AutocompleteStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type AutocompleteStatusNoAnimation = string | boolean; +export type AutocompleteSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type AutocompleteDisableFilter = string | boolean; +export type AutocompleteDisableReorder = string | boolean; +export type AutocompleteScrollable = string | boolean; +export type AutocompleteFocusable = string | boolean; +export type AutocompleteDisableHighlighting = string | boolean; +export type AutocompleteDirection = 'auto' | 'top' | 'bottom'; +export type AutocompleteSkipPortal = string | boolean; +export type AutocompleteNoAnimation = string | boolean; +export type AutocompleteNoScrollAnimation = string | boolean; +export type AutocompleteShowSubmitButton = string | boolean; +export type AutocompletePreventSelection = string | boolean; +export type AutocompleteSize = 'default' | 'small' | 'medium' | 'large'; +export type AutocompleteAlignAutocomplete = 'left' | 'right'; +export type AutocompleteOptionsRender = + | Record + | ((...args: any[]) => any) + | React.ReactNode; +export type AutocompleteInputElement = + | ((...args: any[]) => any) + | React.ReactNode; +export type AutocompleteData = + | string + | ((...args: any[]) => any) + | React.ReactNode + | Record + | ( + | string + | React.ReactNode + | { + selected_value?: string | React.ReactNode; + suffix_value?: string | React.ReactNode; + content?: string | React.ReactNode | string[]; + } + )[]; +export type AutocompleteSearchInWordIndex = string | number; +export type AutocompleteSearchNumbers = string | boolean; +export type AutocompleteDefaultValue = string | number; +export type AutocompleteValue = string | number; +export type AutocompleteOpenOnFocus = string | boolean; +export type AutocompletePreventClose = string | boolean; +export type AutocompleteKeepOpen = string | boolean; +export type AutocompleteOpened = string | boolean; +export type AutocompleteDisabled = string | boolean; +export type AutocompleteStretch = string | boolean; +export type AutocompleteSkeleton = string | boolean; +export type AutocompletePageOffset = string | number; +export type AutocompleteObserverElement = string | React.ReactNode; +export type AutocompleteChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode + | Record + | any[]; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface AutocompleteProps extends React.HTMLProps { + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: AutocompleteSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: AutocompleteTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: AutocompleteRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: AutocompleteBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: AutocompleteLeft; + role?: string; + + /** + * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to `null`. + */ + cache_hash?: string; + action_menu?: AutocompleteActionMenu; + is_popup?: AutocompleteIsPopup; + + /** + * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if a independent width is used. Defaults to `left`. + */ + align_drawer?: AutocompleteAlignDrawer; + + /** + * Has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the `wrapper_element` will not be anymore triggered as an outside click. + */ + wrapper_element?: AutocompleteWrapperElement; + + /** + * Define a HTML class that will be set on the list, beside `dnb-drawer-list__list`. + */ + list_class?: string; + + /** + * If set to true, the DrawerList will handle it's width and position handling independent to the parent/mother element. Defaults to `false`. + */ + independent_width?: AutocompleteIndependentWidth; + fixed_position?: AutocompleteFixedPosition; + prevent_focus?: AutocompletePreventFocus; + + /** + * If set to true, search items by the first key will be ignored. Defaults to `false`. + */ + skip_keysearch?: AutocompleteSkipKeysearch; + selected_value?: AutocompleteSelectedValue; + suffix_value?: AutocompleteSuffixValue; + content?: AutocompleteContent; + prepared_data?: any[]; + raw_data?: AutocompleteRawData; + + /** + * If set to true, all keyboard and mouse events will be ignored. Defaults to `false`. + */ + ignore_events?: AutocompleteIgnoreEvents; + handle_dismiss_focus?: (...args: any[]) => any; + on_pre_change?: (...args: any[]) => any; + on_resize?: (...args: any[]) => any; + id?: string; + + /** + * If set to `async`, it prevents showing the "no options" message during typing / filtering. Defaults to `sync`. + */ + mode?: AutocompleteMode; + + /** + * Give a title to let the user know what theyhaves to do. Defaults to `Skriv og få alternativer'` . + */ + title?: AutocompleteTitle; + + /** + * Use this to define the pre-filled placeholder text in the input. Defaults to `title="Skriv og velg"`. + */ + placeholder?: AutocompletePlaceholder; + + /** + * Text show in the "no options" item. Defaults to `Ingen alternativer`. + */ + no_options?: AutocompleteNoOptions; + + /** + * Text that lets a user unravel all the available options. Defaults to `Vis alt`. + */ + show_all?: AutocompleteShowAll; + + /** + * Text read out by screen readers. This way users with screen readers know how many options they got during typing. Defaults to `%s alternativer`. + */ + aria_live_options?: AutocompleteAriaLiveOptions; + + /** + * Text show on indicator "options" item. Defaults to `Henter data ...`. + */ + indicator_label?: AutocompleteIndicatorLabel; + + /** + * Only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`. + */ + show_options_sr?: string; + + /** + * Only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt:`. + */ + selected_sr?: string; + + /** + * Title on submit button. Defaults to `Vis alternativer`. + */ + submit_button_title?: string; + + /** + * The icon used in the submit button. Defaults to `chevron_down`. + */ + submit_button_icon?: AutocompleteSubmitButtonIcon; + + /** + * Use a React.Ref to get access to the `input` DOM element. + */ + input_ref?: AutocompleteInputRef; + + /** + * To be included in the autocomplete input. + */ + icon?: AutocompleteIcon; + + /** + * Change the size of the icon pragmatically. + */ + icon_size?: string; + + /** + * Position of the icon inside the autocomplete. Set to `left` or `right`. Defaults to `left`. + */ + icon_position?: AutocompleteIconPosition; + + /** + * Position of arrow icon/triangle inside the drawer-list. Set to `left` or `right`. Defaults to `left` if not set. + */ + triangle_position?: AutocompleteTrianglePosition; + + /** + * Same as `icon`. + */ + input_icon?: AutocompleteInputIcon; + + /** + * Prepends the Form Label component. If no ID is provided, a random ID is created. + */ + label?: AutocompleteLabel; + + /** + * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal` + */ + label_direction?: AutocompleteLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: AutocompleteLabelSrOnly; + + /** + * Use `true` to not remove the typed value on input blur, if it is invalid. By default, the typed value will disappear / replaced by a selected value from the data list during the input field blur. + */ + keep_value?: AutocompleteKeepValue; + + /** + * Like `keep_value` – but would not reset to the selected value during input field blur. Also, the selected value would still be kept. + */ + keep_value_and_selection?: AutocompleteKeepValueAndSelection; + + /** + * If set to `true`, a clear button is shown inside the input field. Defaults to `false`. + */ + show_clear_button?: AutocompleteShowClearButton; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: AutocompleteStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: AutocompleteStatusNoAnimation; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + + /** + * Text describing the content of the Autocomplete more than the label. You can also send in a React component, so it gets wrapped inside the Autocomplete component. + */ + suffix?: AutocompleteSuffix; + + /** + * If set to `true`, word highlighting will still be active, but no options will be filtered out. Defaults to `false`. + */ + disable_filter?: AutocompleteDisableFilter; + + /** + * If set to `true`, reordering of search results will be disabled. Defaults to `false`. + */ + disable_reorder?: AutocompleteDisableReorder; + + /** + * Defines if the options list should be scrollable (the `max-height` is set by default to `50vh`). Defaults to `true`. + */ + scrollable?: AutocompleteScrollable; + + /** + * If set to true, the element is then focusable by assertive technologies. + */ + focusable?: AutocompleteFocusable; + + /** + * If set to `true`, word highlighting will be disabled, but the options will still get filtered. Defaults to `false`. + */ + disable_highlighting?: AutocompleteDisableHighlighting; + + /** + * Defines the direction of how the drawer-list shows the options list. Can be `bottom` or `top`. Defaults to `auto`. + */ + direction?: AutocompleteDirection; + + /** + * Defines if the maximum height (in `rem`) of the options list. Defaults to null, as this is set automatically by default. + */ + max_height?: number; + + /** + * To disable the React Portal behavior. Defaults to `false`. + */ + skip_portal?: AutocompleteSkipPortal; + + /** + * To disable appear/disappear (show/hide) animation. Defaults to `false`. + */ + no_animation?: AutocompleteNoAnimation; + + /** + * To disable scrolling animation. Defaults to `false`. + */ + no_scroll_animation?: AutocompleteNoScrollAnimation; + + /** + * Use `true` to show a Autocomplete button to toggle the DrawerList. Defaults to `false`. + */ + show_submit_button?: AutocompleteShowSubmitButton; + + /** + * Replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`. + */ + submit_element?: React.ReactNode; + + /** + * If set to true, the DrawerList will then not make any permanent selection. Defaults to `false`. + */ + prevent_selection?: AutocompletePreventSelection; + + /** + * Define the height of the Autocomplete. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`. + */ + size?: AutocompleteSize; + + /** + * Use `right` to change the options alignment direction. Defaults to `left`. + */ + align_autocomplete?: AutocompleteAlignAutocomplete; + + /** + * Has to be a function, returning the items again. Se example. This can be used to add additional options above the actual rendered list. + */ + options_render?: AutocompleteOptionsRender; + + /** + * Lets you provide a custom React element as the input HTML element. + */ + input_element?: AutocompleteInputElement; + + /** + * (required) the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these data structure.
If you don't have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList. + */ + data?: AutocompleteData; + + /** + * This gives you the possibility to change the threshold number, which defines from what word on we search "inside words". Defaults to `3`. + */ + search_in_word_index?: AutocompleteSearchInWordIndex; + + /** + * If set to `true` and `search_in_word_index` is not set, the user will be able to more easily search and filter e.g. bank account numbers. Defaults to `false`. + */ + search_numbers?: AutocompleteSearchNumbers; + + /** + * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`. + */ + default_value?: AutocompleteDefaultValue; + + /** + * Should either be an index (integer) of the data array or a key ("NB:" should not start with a number) – defined by `selected_key` inside an array item. If `data` is an object, use the object key (string) as the `value` to define the selected item. Can be a string or integer. Defaults to `null` and the `title` property will be shown.
"NB:" In case the DrawerList will be re-rendered, this value will be used again. Use `default_value` instead. + */ + value?: AutocompleteValue; + + /** + * Lets you define a custom input value. + */ + input_value?: string; + + /** + * Use `true` to auto open the list once the user is entering the input field with the keyboard. + */ + open_on_focus?: AutocompleteOpenOnFocus; + + /** + * If set to true, the DrawerList will not close on any events. Defaults to `false`. + */ + prevent_close?: AutocompletePreventClose; + + /** + * If set to true, the DrawerList will close on outside clicks, but not on selection. Defaults to `false`. + */ + keep_open?: AutocompleteKeepOpen; + + /** + * If set to `true`, the Autocomplete will be rendered initially with a visible and accessible data list / options. + */ + opened?: AutocompleteOpened; + disabled?: AutocompleteDisabled; + + /** + * If set to `true`, then the autocomplete will be 100% in available `width`. + */ + stretch?: AutocompleteStretch; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: AutocompleteSkeleton; + + /** + * Define a HTML class that will be set on the DOM portal beside `dnb-drawer-list__portal__style`. Can be useful to handle e.g. a custom `z-index` in relation to a header. + */ + portal_class?: string; + + /** + * Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`. + */ + drawer_class?: string; + + /** + * Defines if the available scrollable height. If scrolling not should change the height of the drawer-list, then set it to `0` (useful if the DrawerList is used in fixed positions on contrast to a scrollable page content). Defaults to `window.pageYOffset`. + */ + page_offset?: AutocompletePageOffset; + + /** + * Set a HTML element, either as a selector or a DOM element. Can be used to send in an element which will be used to make the direction calculation on. + */ + observer_element?: AutocompleteObserverElement; + + /** + * If set to true, the HTML body will get locked from scrolling when the Dropdown is open. Defaults to `false`. + */ + enable_body_lock?: boolean; + class?: string; + className?: string; + + /** + * (required) the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these data structure.
If you don't have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList. + */ + children?: AutocompleteChildren; + ariaLiveDelay?: number; + + /** + * Will be called once the user presses the autocomplete. Returns the data item `{ data, attributes }`. + */ + on_show?: (...args: any[]) => any; + + /** + * Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods. + */ + on_type?: (...args: any[]) => any; + + /** + * Will be called on user generated focus action. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods. + */ + on_focus?: (...args: any[]) => any; + + /** + * Will be called on user generated blur action. Returns an object with the input `value` inside `{ value, event, attributes }` including these methods. + */ + on_blur?: (...args: any[]) => any; + + /** + * Will be called once the user presses the autocomplete again, or clicks somewhere else. Returns the data item `{ data, attributes }`. + */ + on_hide?: (...args: any[]) => any; + + /** + * Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, value }` including these methods. + */ + on_change?: (...args: any[]) => any; + + /** + * Will be called once the users selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, value, active_item }` including these methods. The "active_item" property is the currently selected item by keyboard navigation + */ + on_select?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; +} +export default class Autocomplete extends React.Component< + AutocompleteProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/autocomplete/index.js b/packages/dnb-eufemia/src/components/autocomplete/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/autocomplete/index.js rename to packages/dnb-eufemia/src/components/autocomplete/index.ts diff --git a/packages/dnb-eufemia/src/components/autocomplete/style.js b/packages/dnb-eufemia/src/components/autocomplete/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/autocomplete/style.js rename to packages/dnb-eufemia/src/components/autocomplete/style.ts diff --git a/packages/dnb-eufemia/src/components/avatar/index.js b/packages/dnb-eufemia/src/components/avatar/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/avatar/index.js rename to packages/dnb-eufemia/src/components/avatar/index.ts diff --git a/packages/dnb-eufemia/src/components/avatar/style.js b/packages/dnb-eufemia/src/components/avatar/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/avatar/style.js rename to packages/dnb-eufemia/src/components/avatar/style.ts diff --git a/packages/dnb-eufemia/src/components/badge/index.js b/packages/dnb-eufemia/src/components/badge/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/badge/index.js rename to packages/dnb-eufemia/src/components/badge/index.ts diff --git a/packages/dnb-eufemia/src/components/badge/style.js b/packages/dnb-eufemia/src/components/badge/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/badge/style.js rename to packages/dnb-eufemia/src/components/badge/style.ts diff --git a/packages/dnb-eufemia/src/components/breadcrumb/index.js b/packages/dnb-eufemia/src/components/breadcrumb/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/breadcrumb/index.js rename to packages/dnb-eufemia/src/components/breadcrumb/index.ts diff --git a/packages/dnb-eufemia/src/components/breadcrumb/style.js b/packages/dnb-eufemia/src/components/breadcrumb/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/breadcrumb/style.js rename to packages/dnb-eufemia/src/components/breadcrumb/style.ts diff --git a/packages/dnb-eufemia/src/components/button/Button.d.ts b/packages/dnb-eufemia/src/components/button/Button.d.ts index a993e35a311..99c781e82d9 100644 --- a/packages/dnb-eufemia/src/components/button/Button.d.ts +++ b/packages/dnb-eufemia/src/components/button/Button.d.ts @@ -2,7 +2,6 @@ import * as React from 'react'; import { SkeletonShow } from '../skeleton/Skeleton'; import { IconPrimaryIcon } from '../icon-primary/IconPrimary'; import { DataAttributeTypes } from '../../shared/types'; - export type ButtonText = string | React.ReactNode; export type ButtonVariant = | 'primary' @@ -68,10 +67,10 @@ export type ButtonRight = string | number | boolean; export type ButtonBottom = string | number | boolean; export type ButtonLeft = string | number | boolean; export type ButtonOnClick = string | ((...args: any[]) => any); - /** * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". */ + export type ButtonProps = { /** * The content of the button can be a string or a React Element. @@ -79,7 +78,7 @@ export type ButtonProps = { text?: ButtonText; /** - * `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) . + * `button`, `reset` or `submit` for the `type` HTML attribute. Defaults to `button` for legacy reasons. */ type?: string; @@ -89,7 +88,7 @@ export type ButtonProps = { title?: React.ReactNode; /** - * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. + * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`. */ variant?: ButtonVariant; @@ -205,7 +204,7 @@ export type ButtonProps = { element?: ButtonElement; /** - * Has to be an any with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. */ space?: ButtonSpace; @@ -237,7 +236,6 @@ export type ButtonProps = { DataAttributeTypes & Partial> >; - export default class Button extends React.Component { render(): JSX.Element; } diff --git a/packages/dnb-eufemia/src/components/button/index.js b/packages/dnb-eufemia/src/components/button/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/button/index.js rename to packages/dnb-eufemia/src/components/button/index.ts diff --git a/packages/dnb-eufemia/src/components/button/style.js b/packages/dnb-eufemia/src/components/button/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/button/style.js rename to packages/dnb-eufemia/src/components/button/style.ts diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts new file mode 100644 index 00000000000..65478940ea8 --- /dev/null +++ b/packages/dnb-eufemia/src/components/checkbox/Checkbox.d.ts @@ -0,0 +1,173 @@ +import * as React from 'react'; +export type CheckboxLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type CheckboxLabelPosition = 'left' | 'right'; +export type CheckboxChecked = string | boolean; +export type CheckboxDisabled = string | boolean; +export type CheckboxSize = 'default' | 'medium' | 'large'; +export type CheckboxStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type CheckboxStatusNoAnimation = string | boolean; +export type CheckboxSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type CheckboxAttributes = string | Record; +export type CheckboxReadOnly = string | boolean; +export type CheckboxSkeleton = string | boolean; +export type CheckboxSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type CheckboxTop = string | number | boolean; +export type CheckboxRight = string | number | boolean; +export type CheckboxBottom = string | number | boolean; +export type CheckboxLeft = string | number | boolean; +export type CheckboxChildren = string | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface CheckboxProps extends React.HTMLProps { + /** + * Use either the `label` property or provide a custom one. + */ + label?: CheckboxLabel; + + /** + * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. + */ + label_position?: CheckboxLabelPosition; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: boolean; + + /** + * The `title` of the input - describing it a bit further for accessibility reasons. + */ + title?: string; + element?: React.ReactNode; + + /** + * Determine whether the checkbox is checked or not. The default is `false`. + */ + checked?: CheckboxChecked; + disabled?: CheckboxDisabled; + id?: string; + + /** + * The size of the checkbox. For now there is "medium" (default) and "large". + */ + size?: CheckboxSize; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: CheckboxStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: CheckboxStatusNoAnimation; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + + /** + * Text describing the content of the Checkbox more than the label. You can also send in a React component, so it gets wrapped inside the Checkbox component. + */ + suffix?: CheckboxSuffix; + value?: string; + attributes?: CheckboxAttributes; + readOnly?: CheckboxReadOnly; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: CheckboxSkeleton; + class?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: CheckboxSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: CheckboxTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: CheckboxRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: CheckboxBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: CheckboxLeft; + className?: string; + children?: CheckboxChildren; + + /** + * Will be called on state changes made by the user. Returns an boolean `{ checked, event }`. + */ + on_change?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; +} +export default class Checkbox extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface CheckIconProps { + /** + * The size of the checkbox. For now there is "medium" (default) and "large". + */ + size?: string; +} +export const CheckIcon: React.FC; diff --git a/packages/dnb-eufemia/src/components/checkbox/Checkbox.js b/packages/dnb-eufemia/src/components/checkbox/Checkbox.js index 17c10230f5f..64a5cec7c2c 100644 --- a/packages/dnb-eufemia/src/components/checkbox/Checkbox.js +++ b/packages/dnb-eufemia/src/components/checkbox/Checkbox.js @@ -45,6 +45,7 @@ export default class Checkbox extends React.PureComponent { PropTypes.node, ]), label_position: PropTypes.oneOf(['left', 'right']), + label_sr_only: PropTypes.bool, title: PropTypes.string, element: PropTypes.node, checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -87,6 +88,7 @@ export default class Checkbox extends React.PureComponent { static defaultProps = { label: null, label_position: null, + label_sr_only: null, title: null, element: 'input', checked: null, diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap index 8354751eac7..734f1c591f0 100644 --- a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +++ b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -17,6 +17,7 @@ exports[`Checkbox component have to match snapshot 1`] = ` "id": "id", "label": "label", "label_position": "'left'", + "label_sr_only": true, "on_change": [Function], "on_state_update": [Function], "readOnly": "readOnly", @@ -50,6 +51,7 @@ exports[`Checkbox component have to match snapshot 1`] = ` id="checkbox" label="checkbox" label_position="left" + label_sr_only={null} on_change={null} on_state_update={null} readOnly={false} diff --git a/packages/dnb-eufemia/src/components/checkbox/index.js b/packages/dnb-eufemia/src/components/checkbox/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/checkbox/index.js rename to packages/dnb-eufemia/src/components/checkbox/index.ts diff --git a/packages/dnb-eufemia/src/components/checkbox/style.js b/packages/dnb-eufemia/src/components/checkbox/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/checkbox/style.js rename to packages/dnb-eufemia/src/components/checkbox/style.ts diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts new file mode 100644 index 00000000000..1c0eeee6024 --- /dev/null +++ b/packages/dnb-eufemia/src/components/date-picker/DatePicker.d.ts @@ -0,0 +1,389 @@ +import * as React from 'react'; +export type DatePickerDate = Date | string; +export type DatePickerStartDate = Date | string; +export type DatePickerEndDate = Date | string; +export type DatePickerMonth = Date | string; +export type DatePickerStartMonth = Date | string; +export type DatePickerEndMonth = Date | string; +export type DatePickerMinDate = Date | string; +export type DatePickerMaxDate = Date | string; +export type DatePickerCorrectInvalidDate = string | boolean; +export type DatePickerHideNavigation = string | boolean; +export type DatePickerHideNavigationButtons = string | boolean; +export type DatePickerHideDays = string | boolean; +export type DatePickerOnlyMonth = string | boolean; +export type DatePickerHideLastWeek = string | boolean; +export type DatePickerDisableAutofocus = string | boolean; +export type DatePickerEnableKeyboardNav = string | boolean; +export type DatePickerShowInput = string | boolean; +export type DatePickerShowSubmitButton = string | boolean; +export type DatePickerShowCancelButton = string | boolean; +export type DatePickerShowResetButton = string | boolean; +export type DatePickerResetDate = string | boolean; +export type DatePickerRange = string | boolean; +export type DatePickerLink = string | boolean; +export type DatePickerSync = string | boolean; +export type DatePickerLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type DatePickerLabelDirection = 'horizontal' | 'vertical'; +export type DatePickerLabelSrOnly = string | boolean; +export type DatePickerInputElement = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type DatePickerAddonElement = string | React.ReactNode; +export type DatePickerShortcuts = any[] | ((...args: any[]) => any); +export type DatePickerDisabled = string | boolean; +export type DatePickerStretch = string | boolean; +export type DatePickerSkeleton = string | boolean; +export type DatePickerSize = 'default' | 'small' | 'medium' | 'large'; +export type DatePickerStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type DatePickerStatusNoAnimation = string | boolean; +export type DatePickerSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type DatePickerOpened = string | boolean; +export type DatePickerPreventClose = string | boolean; +export type DatePickerNoAnimation = string | boolean; +export type DatePickerDirection = 'auto' | 'top' | 'bottom'; +export type DatePickerAlignPicker = 'auto' | 'left' | 'right'; +export type DatePickerSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type DatePickerTop = string | number | boolean; +export type DatePickerRight = string | number | boolean; +export type DatePickerBottom = string | number | boolean; +export type DatePickerLeft = string | number | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DatePickerProps extends React.HTMLProps { + id?: string; + title?: string; + + /** + * Defines the pre-filled date by either a JavaScript DateInstance or (ISO 8601) like `date="2019-05-05"`. + */ + date?: DatePickerDate; + + /** + * To set the pre-filled starting date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`. + */ + start_date?: DatePickerStartDate; + + /** + * To set the pre-filled ending date. Is used if `range={true}` is set to true. Defaults to null, showing the `mask_placeholder`. + */ + end_date?: DatePickerEndDate; + + /** + * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. + */ + month?: DatePickerMonth; + + /** + * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. + */ + start_month?: DatePickerStartMonth; + + /** + * To display what month should be shown in the second calendar by default. Defaults to the `date` respective `start_date`. + */ + end_month?: DatePickerEndMonth; + + /** + * To limit a date range to a minimum `start_date`. Defaults to null. + */ + min_date?: DatePickerMinDate; + + /** + * To limit a date range to a maximum `end_date`. Defaults to null. + */ + max_date?: DatePickerMaxDate; + correct_invalid_date?: DatePickerCorrectInvalidDate; + + /** + * To define the order of the masked placeholder input fields. Defaults to `dd/mm/yyyy` + */ + mask_order?: string; + + /** + * To display the placeholder on input. Defaults to `dd/mm/åååå`. + */ + mask_placeholder?: string; + + /** + * Defines how the prop dates (`date`, `start_date` and `end_date`) should be parsed, e.g. `yyyy/MM/dd`. Defaults to `yyyy-MM-dd`. + */ + date_format?: string; + + /** + * Defines how the returned date, as a string, should be formatted as. Defaults to `yyyy-MM-dd`. + */ + return_format?: string; + + /** + * If set to `true`, the navigation will be hidden. Defaults to `false`. + */ + hide_navigation?: DatePickerHideNavigation; + hide_navigation_buttons?: DatePickerHideNavigationButtons; + + /** + * If set to `true`, the week days will be hidden. Defaults to `false`. + */ + hide_days?: DatePickerHideDays; + + /** + * Use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`. + */ + only_month?: DatePickerOnlyMonth; + + /** + * Use `true` to only show the last week in the current month if it needs to be shown. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`. + */ + hide_last_week?: DatePickerHideLastWeek; + + /** + * Once the date picker gets opened, there is a focus handling to ensure good accessibility. This can be disabled with this property. Defaults to `false`. + */ + disable_autofocus?: DatePickerDisableAutofocus; + enable_keyboard_nav?: DatePickerEnableKeyboardNav; + + /** + * If the input fields with the mask should be visible. Defaults to `false`. + */ + show_input?: DatePickerShowInput; + + /** + * If set to `true`, a submit button will be shown. You can change the default text by using `submit_button_text="Ok"`. Defaults to `false`. If the `range` prop is `true`, then the submit button is shown. + */ + show_submit_button?: DatePickerShowSubmitButton; + + /** + * If set to `true`, a cancel button will be shown. You can change the default text by using `cancel_button_text="Avbryt"` Defaults to `false`. If the `range` prop is `true`, then the cancel button is shown. + */ + show_cancel_button?: DatePickerShowCancelButton; + + /** + * If set to `true`, a reset button will be shown. You can change the default text by using `reset_button_text="Tilbakestill"` Defaults to `false`. + */ + show_reset_button?: DatePickerShowResetButton; + submit_button_text?: string; + cancel_button_text?: string; + reset_button_text?: string; + reset_date?: DatePickerResetDate; + + /** + * To define the first day of the week. Defaults to `monday`. + */ + first_day?: string; + + /** + * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. + */ + locale?: Record; + + /** + * If the date picker should support a range of two dates (starting and ending date). Defaults to `false`. + */ + range?: DatePickerRange; + + /** + * Link both calendars, once to the user is navigating between months. Only meant to use if the range is set to true. Defaults to `false`. + */ + link?: DatePickerLink; + + /** + * Sync input values with the calendars views. Once the input values get changed, the calendar changes its views in sync. Defaults to `true`. + */ + sync?: DatePickerSync; + + /** + * A prepending label in sync with the date input field. + */ + label?: DatePickerLabel; + + /** + * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`. + */ + label_direction?: DatePickerLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: DatePickerLabelSrOnly; + + /** + * Gives you the possibility to use a plain/vanilla `` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => ()}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. + */ + input_element?: DatePickerInputElement; + + /** + * Gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`. + */ + addon_element?: DatePickerAddonElement; + + /** + * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below. + */ + shortcuts?: DatePickerShortcuts; + disabled?: DatePickerDisabled; + + /** + * If set to `true`, then the date-picker input field will be 100% in `width`. + */ + stretch?: DatePickerStretch; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: DatePickerSkeleton; + + /** + * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. + */ + size?: DatePickerSize; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: DatePickerStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: DatePickerStatusNoAnimation; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + + /** + * Text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component. + */ + suffix?: DatePickerSuffix; + + /** + * To open the date-picker by default. Defaults to `false`. + */ + opened?: DatePickerOpened; + prevent_close?: DatePickerPreventClose; + no_animation?: DatePickerNoAnimation; + direction?: DatePickerDirection; + + /** + * Use `right` to change the calendar alignment direction. Defaults to `left`. + */ + align_picker?: DatePickerAlignPicker; + class?: string; + className?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: DatePickerSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: DatePickerTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: DatePickerRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: DatePickerBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: DatePickerLeft; + + /** + * Will be called right before every new calendar view gets rendered. See the example above. + */ + on_days_render?: (...args: any[]) => any; + + /** + * Will be called on a date change event. Returns an `object`. See above. + */ + on_change?: (...args: any[]) => any; + + /** + * Will be called on every input and date picker interaction. Returns an `object`. See above. + */ + on_type?: (...args: any[]) => any; + + /** + * Will be called once date-picker is visible. + */ + on_show?: (...args: any[]) => any; + + /** + * Will be called once date-picker is hidden. + */ + on_hide?: (...args: any[]) => any; + + /** + * Will be called once a user presses the submit button. + */ + on_submit?: (...args: any[]) => any; + + /** + * Will be called once a user presses the cancel button. + */ + on_cancel?: (...args: any[]) => any; + + /** + * Will be called once a user presses the reset button. + */ + on_reset?: (...args: any[]) => any; +} +export default class DatePicker extends React.Component< + DatePickerProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.d.ts new file mode 100644 index 00000000000..79f2c3b9bc0 --- /dev/null +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.d.ts @@ -0,0 +1,24 @@ +import * as React from 'react'; +export type DatePickerAddonShortcuts = any[] | ((...args: any[]) => any); +export type DatePickerAddonRenderElement = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DatePickerAddonProps + extends React.HTMLProps { + /** + * Gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info is below. + */ + shortcuts?: DatePickerAddonShortcuts; + renderElement?: DatePickerAddonRenderElement; +} +export default class DatePickerAddon extends React.Component< + DatePickerAddonProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts new file mode 100644 index 00000000000..adcc73488c5 --- /dev/null +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.d.ts @@ -0,0 +1,45 @@ +import * as React from 'react'; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DatePickerCalendarProps + extends React.HTMLProps { + id?: string; + nr?: number; + + /** + * To display what month should be shown in the first calendar by default. Defaults to the `date` respective `start_date`. + */ + month?: Date; + prevBtn?: boolean; + nextBtn?: boolean; + titleFormat?: string; + dayOfWeekFormat?: string; + firstDayOfWeek?: string; + hideNav?: boolean; + hideDays?: boolean; + onlyMonth?: boolean; + hideNextMonthWeek?: boolean; + noAutofocus?: boolean; + onHover?: (...args: any[]) => any; + onSelect?: (...args: any[]) => any; + onPrev?: (...args: any[]) => any; + onNext?: (...args: any[]) => any; + + /** + * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. + */ + locale?: Record; + rtl?: boolean; + isRange?: boolean; + resetDate?: boolean; + onKeyDown?: (...args: any[]) => any; +} +export default class DatePickerCalendar extends React.Component< + DatePickerCalendarProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.d.ts new file mode 100644 index 00000000000..e651cd9e78a --- /dev/null +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.d.ts @@ -0,0 +1,20 @@ +import * as React from 'react'; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DatePickerFooterProps + extends React.HTMLProps { + isRange: boolean; + onSubmit?: (...args: any[]) => any; + onCancel?: (...args: any[]) => any; + onReset?: (...args: any[]) => any; + resetButtonText?: string; +} +export default class DatePickerFooter extends React.Component< + DatePickerFooterProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts new file mode 100644 index 00000000000..e4b352c2506 --- /dev/null +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerInput.d.ts @@ -0,0 +1,78 @@ +import * as React from 'react'; +export type DatePickerInputSize = 'default' | 'small' | 'medium' | 'large'; +export type DatePickerInputStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type DatePickerInputInputElement = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DatePickerInputProps + extends React.HTMLProps { + id?: string; + title?: string; + selectedDateTitle?: string; + maskOrder?: string; + maskPlaceholder?: string; + separatorRexExp?: RegExp; + submitAttributes?: Record; + isRange?: boolean; + + /** + * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. + */ + size?: DatePickerInputSize; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: DatePickerInputStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + + /** + * Gives you the possibility to use a plain/vanilla `` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => ()}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. + */ + input_element?: DatePickerInputInputElement; + + /** + * To define the locale used in the calendar. Needs to be an `date-fns` "v2" locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`. + */ + locale?: Record; + disabled?: boolean; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: boolean; + + /** + * To open the date-picker by default. Defaults to `false`. + */ + opened?: boolean; + showInput?: boolean; + onChange?: (...args: any[]) => any; + onSubmit?: (...args: any[]) => any; + onFocus?: (...args: any[]) => any; +} +export default class DatePickerInput extends React.Component< + DatePickerInputProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.d.ts new file mode 100644 index 00000000000..97511cb4c15 --- /dev/null +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.d.ts @@ -0,0 +1,41 @@ +import * as React from 'react'; +export type DatePickerProviderMinDate = Date | string; +export type DatePickerProviderMaxDate = Date | string; +export type DatePickerProviderRange = boolean | string; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DatePickerProviderProps + extends React.HTMLProps { + /** + * To limit a date range to a minimum `start_date`. Defaults to null. + */ + min_date?: DatePickerProviderMinDate; + + /** + * To limit a date range to a maximum `end_date`. Defaults to null. + */ + max_date?: DatePickerProviderMaxDate; + + /** + * Defines how the returned date, as a string, should be formatted as. Defaults to `yyyy-MM-dd`. + */ + return_format?: string; + + /** + * If the date picker should support a range of two dates (starting and ending date). Defaults to `false`. + */ + range: DatePickerProviderRange; + setReturnObject: (...args: any[]) => any; + enhanceWithMethods?: Record; + attributes?: Record; + children: React.ReactNode; +} +export default class DatePickerProvider extends React.Component< + DatePickerProviderProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerRange.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerRange.d.ts new file mode 100644 index 00000000000..e07c606bd59 --- /dev/null +++ b/packages/dnb-eufemia/src/components/date-picker/DatePickerRange.d.ts @@ -0,0 +1,25 @@ +import * as React from 'react'; +export type DatePickerRangeViews = number | Record[]; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DatePickerRangeProps + extends React.HTMLProps { + id?: string; + isRange?: boolean; + isLink?: boolean; + isSync?: boolean; + onlyMonth?: boolean; + hideNav?: boolean; + views?: DatePickerRangeViews; + onChange?: (...args: any[]) => any; + onNav?: (...args: any[]) => any; +} +export default class DatePickerRange extends React.Component< + DatePickerRangeProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/date-picker/index.js b/packages/dnb-eufemia/src/components/date-picker/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/date-picker/index.js rename to packages/dnb-eufemia/src/components/date-picker/index.ts diff --git a/packages/dnb-eufemia/src/components/date-picker/style.js b/packages/dnb-eufemia/src/components/date-picker/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/date-picker/style.js rename to packages/dnb-eufemia/src/components/date-picker/style.ts diff --git a/packages/dnb-eufemia/src/components/dialog/index.ts b/packages/dnb-eufemia/src/components/dialog/index.ts new file mode 100644 index 00000000000..5925be4c4bd --- /dev/null +++ b/packages/dnb-eufemia/src/components/dialog/index.ts @@ -0,0 +1,8 @@ +/** + * Component Entry + * + */ + +import Dialog from './Dialog' +export default Dialog +export * from './Dialog' diff --git a/packages/dnb-eufemia/src/components/dialog/style.js b/packages/dnb-eufemia/src/components/dialog/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/dialog/style.js rename to packages/dnb-eufemia/src/components/dialog/style.ts diff --git a/packages/dnb-eufemia/src/components/drawer/index.js b/packages/dnb-eufemia/src/components/drawer/index.js deleted file mode 100644 index c2ab99d7a16..00000000000 --- a/packages/dnb-eufemia/src/components/drawer/index.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Component Entry - * - */ - -import Drawer from './Drawer' -export default Drawer -export * from './Drawer' diff --git a/packages/dnb-eufemia/src/components/dialog/index.js b/packages/dnb-eufemia/src/components/drawer/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/dialog/index.js rename to packages/dnb-eufemia/src/components/drawer/index.ts diff --git a/packages/dnb-eufemia/src/components/drawer/style.js b/packages/dnb-eufemia/src/components/drawer/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/drawer/style.js rename to packages/dnb-eufemia/src/components/drawer/style.ts diff --git a/packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts b/packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts new file mode 100644 index 00000000000..eab72c8d736 --- /dev/null +++ b/packages/dnb-eufemia/src/components/dropdown/Dropdown.d.ts @@ -0,0 +1,448 @@ +import * as React from 'react'; +export type DropdownSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type DropdownTop = string | number | boolean; +export type DropdownRight = string | number | boolean; +export type DropdownBottom = string | number | boolean; +export type DropdownLeft = string | number | boolean; +export type DropdownIsPopup = string | boolean; +export type DropdownAlignDrawer = 'left' | 'right'; +export type DropdownOptionsRender = + | Record + | ((...args: any[]) => any) + | React.ReactNode; +export type DropdownWrapperElement = + | Record + | ((...args: any[]) => any) + | React.ReactNode; +export type DropdownFixedPosition = string | boolean; +export type DropdownPreventFocus = string | boolean; +export type DropdownSkipKeysearch = string | boolean; +export type DropdownSelectedValue = string | React.ReactNode; +export type DropdownSuffixValue = string | React.ReactNode; +export type DropdownContent = string | React.ReactNode | string[]; +export type DropdownRawData = + | any[] + | Record + | ((...args: any[]) => any); +export type DropdownIgnoreEvents = string | boolean; +export type DropdownPageOffset = string | number; +export type DropdownObserverElement = string | React.ReactNode; +export type DropdownMinHeight = string | number; +export type DropdownTitle = string | React.ReactNode; +export type DropdownVariant = + | 'primary' + | 'secondary' + | 'tertiary' + | 'signal' + | 'unstyled'; +export type DropdownIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type DropdownIconPosition = 'left' | 'right'; +export type DropdownTrianglePosition = 'left' | 'right'; +export type DropdownLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type DropdownLabelDirection = 'horizontal' | 'vertical'; +export type DropdownLabelSrOnly = string | boolean; +export type DropdownStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type DropdownStatusNoAnimation = string | boolean; +export type DropdownSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type DropdownScrollable = string | boolean; +export type DropdownFocusable = string | boolean; +export type DropdownDirection = 'auto' | 'top' | 'bottom'; +export type DropdownSkipPortal = string | boolean; +export type DropdownNoAnimation = string | boolean; +export type DropdownNoScrollAnimation = string | boolean; +export type DropdownPreventSelection = string | boolean; +export type DropdownMoreMenu = string | boolean; +export type DropdownActionMenu = string | boolean; +export type DropdownIndependentWidth = string | boolean; +export type DropdownSize = 'default' | 'small' | 'medium' | 'large'; +export type DropdownAlignDropdown = 'left' | 'right'; +export type DropdownTriggerElement = + | ((...args: any[]) => any) + | React.ReactNode; +export type DropdownData = + | string + | ((...args: any[]) => any) + | React.ReactNode + | Record + | ( + | string + | React.ReactNode + | { + selected_value?: string | React.ReactNode; + content?: string | React.ReactNode | string[]; + } + )[]; +export type DropdownDefaultValue = string | number; +export type DropdownValue = string | number; +export type DropdownOpenOnFocus = string | boolean; +export type DropdownPreventClose = string | boolean; +export type DropdownKeepOpen = string | boolean; +export type DropdownOpened = string | boolean; +export type DropdownDisabled = string | boolean; +export type DropdownStretch = string | boolean; +export type DropdownSkeleton = string | boolean; +export type DropdownChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode + | Record + | any[]; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface DropdownProps extends React.HTMLProps { + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: DropdownSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: DropdownTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: DropdownRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: DropdownBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: DropdownLeft; + role?: string; + + /** + * Set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to `null`. + */ + cache_hash?: string; + is_popup?: DropdownIsPopup; + + /** + * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu` - or if a independent width is used. Defaults to `left`. + */ + align_drawer?: DropdownAlignDrawer; + + /** + * Has to be a function, returning the items again. Se example. This can be used to add additional options above the actual rendered list. + */ + options_render?: DropdownOptionsRender; + + /** + * Has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the `wrapper_element` will not be anymore triggered as an outside click. + */ + wrapper_element?: DropdownWrapperElement; + + /** + * Define a HTML class that will be set on the list, beside `dnb-drawer-list__list`. + */ + list_class?: string; + fixed_position?: DropdownFixedPosition; + prevent_focus?: DropdownPreventFocus; + + /** + * If set to true, search items by the first key will be ignored. Defaults to `false`. + */ + skip_keysearch?: DropdownSkipKeysearch; + selected_value?: DropdownSelectedValue; + suffix_value?: DropdownSuffixValue; + content?: DropdownContent; + prepared_data?: any[]; + raw_data?: DropdownRawData; + + /** + * If set to true, all keyboard and mouse events will be ignored. Defaults to `false`. + */ + ignore_events?: DropdownIgnoreEvents; + handle_dismiss_focus?: (...args: any[]) => any; + on_pre_change?: (...args: any[]) => any; + on_resize?: (...args: any[]) => any; + + /** + * If set to true, the HTML body will get locked from scrolling when the Dropdown is open. Defaults to `false`. + */ + enable_body_lock?: boolean; + + /** + * Defines if the available scrollable height. If scrolling not should change the height of the drawer-list, then set it to `0` (useful if the DrawerList is used in fixed positions on contrast to a scrollable page content). Defaults to `window.pageYOffset`. + */ + page_offset?: DropdownPageOffset; + + /** + * Set a HTML element, either as a selector or a DOM element. Can be used to send in an element which will be used to make the direction calculation on. + */ + observer_element?: DropdownObserverElement; + + /** + * Defines if the minimum height (in `rem`) of the options list. Defaults to `10rem`. + */ + min_height?: DropdownMinHeight; + id?: string; + + /** + * Give a title to let the users know what they have to do. Defaults to `Valgmeny`. + */ + title?: DropdownTitle; + + /** + * Defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`. + */ + variant?: DropdownVariant; + + /** + * Icon to be included in the dropdown. + */ + icon?: DropdownIcon; + + /** + * Change the size of the icon pragmatically. + */ + icon_size?: string; + + /** + * Position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`. + */ + icon_position?: DropdownIconPosition; + + /** + * Position of arrow icon/triangle inside the drawer-list. Set to `left` or `right`. Defaults to `left` if not set. + */ + triangle_position?: DropdownTrianglePosition; + + /** + * Prepends the Form Label component. If no ID is provided, a random ID is created. + */ + label?: DropdownLabel; + + /** + * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal` + */ + label_direction?: DropdownLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: DropdownLabelSrOnly; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: DropdownStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: DropdownStatusNoAnimation; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + + /** + * Text describing the content of the Dropdown more than the label. You can also send in a React component, so it gets wrapped inside the Dropdown component. + */ + suffix?: DropdownSuffix; + + /** + * Defines if the options list should be scrollable (the `max-height` is set by default to `50vh`). Defaults to `true`. + */ + scrollable?: DropdownScrollable; + + /** + * If set to true, the element is then focusable by assertive technologies. + */ + focusable?: DropdownFocusable; + + /** + * Defines the direction of how the drawer-list shows the options list. Can be `bottom` or `top`. Defaults to `auto`. + */ + direction?: DropdownDirection; + + /** + * Defines if the maximum height (in `rem`) of the options list. Defaults to null, as this is set automatically by default. + */ + max_height?: number; + + /** + * To disable the React Portal behavior. Defaults to `false`. + */ + skip_portal?: DropdownSkipPortal; + + /** + * Define a HTML class that will be set on the DOM portal beside `dnb-drawer-list__portal__style`. Can be useful to handle e.g. a custom `z-index` in relation to a header. + */ + portal_class?: string; + + /** + * To disable appear/disappear (show/hide) animation. Defaults to `false`. + */ + no_animation?: DropdownNoAnimation; + + /** + * To disable scrolling animation. Defaults to `false`. + */ + no_scroll_animation?: DropdownNoScrollAnimation; + + /** + * If set to true, the DrawerList will then not make any permanent selection. Defaults to `false`. + */ + prevent_selection?: DropdownPreventSelection; + + /** + * Same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`. + */ + more_menu?: DropdownMoreMenu; + + /** + * Same as `prevent_selection`, but the DrawerList will be opened from the bottom of the page for mobile devices. Defaults to `false`. + */ + action_menu?: DropdownActionMenu; + + /** + * If set to true, the DrawerList will handle it's width and position handling independent to the parent/mother element. Defaults to `false`. + */ + independent_width?: DropdownIndependentWidth; + + /** + * Define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`. + */ + size?: DropdownSize; + + /** + * Use `right` to change the options alignment direction. Makes only sense to use in combination with `prevent_selection` or `more_menu`. Defaults to `left`. + */ + align_dropdown?: DropdownAlignDropdown; + + /** + * Lets you provide a custom React element as the trigger HTML element. + */ + trigger_element?: DropdownTriggerElement; + + /** + * (required) the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these data structure.
If you don't have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList. + */ + data?: DropdownData; + + /** + * If you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using `default_value` is a good choice. Defaults to `null`. + */ + default_value?: DropdownDefaultValue; + + /** + * Should either be an index (integer) of the data array or a key ("NB:" should not start with a number) – defined by `selected_key` inside an array item. If `data` is an object, use the object key (string) as the `value` to define the selected item. Can be a string or integer. Defaults to `null` and the `title` property will be shown.
"NB:" In case the DrawerList will be re-rendered, this value will be used again. Use `default_value` instead. + */ + value?: DropdownValue; + + /** + * If set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action. + */ + open_on_focus?: DropdownOpenOnFocus; + + /** + * If set to true, the DrawerList will not close on any events. Defaults to `false`. + */ + prevent_close?: DropdownPreventClose; + + /** + * If set to true, the DrawerList will close on outside clicks, but not on selection. Defaults to `false`. + */ + keep_open?: DropdownKeepOpen; + + /** + * If set to `true`, the Dropdown will be rendered initially with a visible and accessible data list / options. + */ + opened?: DropdownOpened; + disabled?: DropdownDisabled; + + /** + * If set to `true`, then the dropdown will be 100% in available `width`. + */ + stretch?: DropdownStretch; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: DropdownSkeleton; + class?: string; + className?: string; + + /** + * (required) the data we want to fill the list with. Provide the data as a `JSON string`, `array` or `object` in these data structure.
If you don't have to define a `value`, you can also send in a `function` which will be called once the user opens the DrawerList. + */ + children?: DropdownChildren; + + /** + * Will be called once the user presses the dropdown. Returns the data item `{ data, attributes }`. + */ + on_show?: (...args: any[]) => any; + + /** + * Will be called once the user presses the dropdown again, or clicks somewhere else. Returns the data item `{ data, attributes }`. + */ + on_hide?: (...args: any[]) => any; + + /** + * Will be called on state changes made by the user. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value }`. + */ + on_change?: (...args: any[]) => any; + + /** + * Will be called once the user selects an item by a click or keyboard navigation. Returns an object with the new selected `data` item `{ data, event, attributes, selected_key, value, active_item }`. The "active_item" property is the currently selected item by keyboard navigation + */ + on_select?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; +} +export default class Dropdown extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/dropdown/index.js b/packages/dnb-eufemia/src/components/dropdown/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/dropdown/index.js rename to packages/dnb-eufemia/src/components/dropdown/index.ts diff --git a/packages/dnb-eufemia/src/components/dropdown/style.js b/packages/dnb-eufemia/src/components/dropdown/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/dropdown/style.js rename to packages/dnb-eufemia/src/components/dropdown/style.ts diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts b/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts new file mode 100644 index 00000000000..5af4f4603d9 --- /dev/null +++ b/packages/dnb-eufemia/src/components/form-label/FormLabel.d.ts @@ -0,0 +1,117 @@ +import * as React from 'react'; +export type FormLabelText = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type FormLabelDisabled = string | boolean; +export type FormLabelSkeleton = string | boolean; +export type FormLabelLabelDirection = 'vertical' | 'horizontal'; +export type FormLabelVertical = string | boolean; +export type FormLabelSrOnly = string | boolean; +export type FormLabelSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type FormLabelTop = string | number | boolean; +export type FormLabelRight = string | number | boolean; +export type FormLabelBottom = string | number | boolean; +export type FormLabelLeft = string | number | boolean; +export type FormLabelChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface FormLabelProps extends React.HTMLProps { + /** + * (required) the `id` of the input. + */ + for_id?: string; + + /** + * Defines the HTML element used. Defaults to `label`. + */ + element?: string; + + /** + * The `title` attribute of the label. + */ + title?: string; + + /** + * The `text` of the label. + */ + text?: FormLabelText; + id?: string; + class?: string; + disabled?: FormLabelDisabled; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: FormLabelSkeleton; + label_direction?: FormLabelLabelDirection; + + /** + * Will force both `direction` and `label_direction` to be "vertical" if set to `true`. + */ + vertical?: FormLabelVertical; + sr_only?: FormLabelSrOnly; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: FormLabelSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: FormLabelTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: FormLabelRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: FormLabelBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: FormLabelLeft; + className?: string; + children?: FormLabelChildren; +} +export default class FormLabel extends React.Component< + FormLabelProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/form-label/index.js b/packages/dnb-eufemia/src/components/form-label/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-label/index.js rename to packages/dnb-eufemia/src/components/form-label/index.ts diff --git a/packages/dnb-eufemia/src/components/form-label/style.js b/packages/dnb-eufemia/src/components/form-label/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-label/style.js rename to packages/dnb-eufemia/src/components/form-label/style.ts diff --git a/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts b/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts new file mode 100644 index 00000000000..47c50e017f0 --- /dev/null +++ b/packages/dnb-eufemia/src/components/form-row/FormRow.d.ts @@ -0,0 +1,168 @@ +import * as React from 'react'; +export type FormRowLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type FormRowLabelDirection = 'vertical' | 'horizontal'; +export type FormRowLabelSrOnly = string | boolean; +export type FormRowNoLabel = string | boolean; +export type FormRowNoFieldset = string | boolean; +export type FormRowWrap = string | boolean; +export type FormRowDirection = 'vertical' | 'horizontal'; +export type FormRowVertical = string | boolean; +export type FormRowCentered = string | boolean; +export type FormRowSectionSpacing = string | boolean; +export type FormRowResponsive = string | boolean; +export type FormRowDisabled = string | boolean; +export type FormRowSkeleton = string | boolean; +export type FormRowSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type FormRowTop = string | number | boolean; +export type FormRowRight = string | number | boolean; +export type FormRowBottom = string | number | boolean; +export type FormRowLeft = string | number | boolean; +export type FormRowChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface FormRowProps extends React.HTMLProps { + id?: string; + + /** + * Use either the `label` property or provide a custom one. + */ + label?: FormRowLabel; + + /** + * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`. + */ + label_direction?: FormRowLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: FormRowLabelSrOnly; + label_id?: string; + + /** + * If you need to style the "legend", then you can either send in a custom Component, like `label={

}`, or define Your styling class with the `label_class` property. + */ + label_class?: string; + no_label?: FormRowNoLabel; + + /** + * If set to `true`, then the internal `legend` element will be a `label` instead, and no `
` is used. Keep in mind, that `` and `
` is only used if a `label` is provided. Defaults to `false`. + */ + no_fieldset?: FormRowNoFieldset; + + /** + * Send along a different locale to all nested components. + */ + locale?: string; + + /** + * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`. + */ + wrap?: FormRowWrap; + + /** + * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. + */ + direction?: FormRowDirection; + + /** + * Will force both `direction` and `label_direction` to be "vertical" if set to `true`. + */ + vertical?: FormRowVertical; + + /** + * Will center all children vertically as long as the screen does not hit a mobile width. + */ + centered?: FormRowCentered; + + /** + * To enable the visual helper `.dnb-section` class. Use a supported modifier from the Section component. Defaults to null. + */ + section_style?: string; + + /** + * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to null. + */ + section_spacing?: FormRowSectionSpacing; + global_status_id?: string; + + /** + * To force responsiveness on form components (like Input and their labels (FormLabel), set the prop to `true`. Defaults to `false`. + */ + responsive?: FormRowResponsive; + + /** + * If set to `true`, every component inside will be disabled. Defaults to `false`. + */ + disabled?: FormRowDisabled; + + /** + * If set to `true`, it enables skeleton for nested components. Defaults to `false`. + */ + skeleton?: FormRowSkeleton; + class?: string; + skipContentWrapperIfNested?: boolean; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: FormRowSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: FormRowTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: FormRowRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: FormRowBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: FormRowLeft; + className?: string; + children?: FormRowChildren; +} +export default class FormRow extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/form-row/index.js b/packages/dnb-eufemia/src/components/form-row/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-row/index.js rename to packages/dnb-eufemia/src/components/form-row/index.ts diff --git a/packages/dnb-eufemia/src/components/form-row/style.js b/packages/dnb-eufemia/src/components/form-row/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-row/style.js rename to packages/dnb-eufemia/src/components/form-row/style.ts diff --git a/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts b/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts new file mode 100644 index 00000000000..af57ba12fcc --- /dev/null +++ b/packages/dnb-eufemia/src/components/form-set/FormSet.d.ts @@ -0,0 +1,189 @@ +import * as React from 'react'; +export type FormSetNoForm = string | boolean; +export type FormSetDisabled = string | boolean; +export type FormSetSkeleton = string | boolean; +export type FormSetPreventSubmit = string | boolean; +export type FormSetLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type FormSetLabelDirection = 'vertical' | 'horizontal'; +export type FormSetLabelSrOnly = string | boolean; +export type FormSetNoLabel = string | boolean; +export type FormSetNoFieldset = string | boolean; +export type FormSetWrap = string | boolean; +export type FormSetDirection = 'vertical' | 'horizontal'; +export type FormSetVertical = string | boolean; +export type FormSetCentered = string | boolean; +export type FormSetSectionSpacing = string | boolean; +export type FormSetResponsive = string | boolean; +export type FormSetSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type FormSetTop = string | number | boolean; +export type FormSetRight = string | number | boolean; +export type FormSetBottom = string | number | boolean; +export type FormSetLeft = string | number | boolean; +export type FormSetChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface FormSetProps extends React.HTMLProps { + /** + * Define what HTML element should be used. Defaults to `
`. + */ + element?: string; + + /** + * If set to `true`, then a `div` HTML element will be used instead of `form`. Defaults to `false`. + */ + no_form?: FormSetNoForm; + + /** + * If set to `true`, every component inside will be disabled. Defaults to `false`. + */ + disabled?: FormSetDisabled; + + /** + * If set to `true`, it enables skeleton for nested components. Defaults to `false`. + */ + skeleton?: FormSetSkeleton; + + /** + * If set to `true`, components inside can't cause a page refresh. The event `on_submit` will still be triggered. Defaults to `false`. + */ + prevent_submit?: FormSetPreventSubmit; + id?: string; + + /** + * Use either the `label` property or provide a custom one. + */ + label?: FormSetLabel; + + /** + * Use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`. + */ + label_direction?: FormSetLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: FormSetLabelSrOnly; + label_id?: string; + + /** + * If you need to style the "legend", then you can either send in a custom Component, like `label={

}`, or define Your styling class with the `label_class` property. + */ + label_class?: string; + no_label?: FormSetNoLabel; + + /** + * If set to `true`, then the internal `legend` element will be a `label` instead, and no `
` is used. Keep in mind, that `` and `
` is only used if a `label` is provided. Defaults to `false`. + */ + no_fieldset?: FormSetNoFieldset; + + /** + * Send along a different locale to all nested components. + */ + locale?: string; + + /** + * Forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`. + */ + wrap?: FormSetWrap; + + /** + * To define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`. + */ + direction?: FormSetDirection; + + /** + * Will force both `direction` and `label_direction` to be "vertical" if set to `true`. + */ + vertical?: FormSetVertical; + + /** + * Will center all children vertically as long as the screen does not hit a mobile width. + */ + centered?: FormSetCentered; + + /** + * To enable the visual helper `.dnb-section` class. Use a supported modifier from the Section component. Defaults to null. + */ + section_style?: string; + + /** + * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to null. + */ + section_spacing?: FormSetSectionSpacing; + global_status_id?: string; + + /** + * To force responsiveness on form components (like Input and their labels (FormLabel), set the prop to `true`. Defaults to `false`. + */ + responsive?: FormSetResponsive; + class?: string; + skipContentWrapperIfNested?: boolean; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: FormSetSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: FormSetTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: FormSetRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: FormSetBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: FormSetLeft; + className?: string; + children?: FormSetChildren; + + /** + * Will be called on submit. Returns an object with a native event: `{ event }` + */ + on_submit?: (...args: any[]) => any; +} +export default class FormSet extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/form-set/index.js b/packages/dnb-eufemia/src/components/form-set/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-set/index.js rename to packages/dnb-eufemia/src/components/form-set/index.ts diff --git a/packages/dnb-eufemia/src/components/form-set/style.js b/packages/dnb-eufemia/src/components/form-set/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-set/style.js rename to packages/dnb-eufemia/src/components/form-set/style.ts diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts new file mode 100644 index 00000000000..c3bc4ed0b76 --- /dev/null +++ b/packages/dnb-eufemia/src/components/form-status/FormStatus.d.ts @@ -0,0 +1,217 @@ +import * as React from 'react'; +export type FormStatusShow = string | boolean; +export type FormStatusText = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type FormStatusIcon = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type FormStatusState = + | boolean + | string + | 'error' + | 'warn' + | 'info' + | 'marketing'; +export type FormStatusVariant = 'flat' | 'outlined'; +export type FormStatusSize = 'default' | 'large'; +export type FormStatusAttributes = string | Record; +export type FormStatusNoAnimation = string | boolean; +export type FormStatusSkeleton = string | boolean; +export type FormStatusStretch = string | boolean; +export type FormStatusSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type FormStatusTop = string | number | boolean; +export type FormStatusRight = string | number | boolean; +export type FormStatusBottom = string | number | boolean; +export type FormStatusLeft = string | number | boolean; +export type FormStatusChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface FormStatusProps extends React.HTMLProps { + id?: string; + + /** + * The `title` attribute in the status. + */ + title?: string; + + /** + * Provide `false` if you want to animate the visibility. Defaults to `true`. + */ + show?: FormStatusShow; + + /** + * The `text` appears as the status message. Beside plain text, You can send in a React component as well. + */ + text?: FormStatusText; + label?: React.ReactNode; + + /** + * The `icon` show before the status text. Defaults to `exclamation`. + */ + icon?: FormStatusIcon; + + /** + * The icon size of the icon shows. Defaults to `medium`. + */ + icon_size?: string; + + /** + * Defines the visual appearance of the status. These are the statuses `error`, `warn`, `info` and `marketing`. The default status is `error`. + */ + state?: FormStatusState; + + /** + * As of now, there is the `flat` and the `outlined` variant. Defaults to `flat`. + */ + variant?: FormStatusVariant; + + /** + * Defines the appearance size. There are these sizes `default`, `large`. The default status is `default`. + */ + size?: FormStatusSize; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + attributes?: FormStatusAttributes; + text_id?: string; + width_selector?: string; + width_element?: Record; + class?: string; + + /** + * NB: Animation is disabled as of now. use `true` to omit the animation on content visibility. Defaults to `false`. + */ + no_animation?: FormStatusNoAnimation; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: FormStatusSkeleton; + + /** + * If set to `true`, then the FormStatus will be 100% in available `width`. "NB:" Only use this on independent status messages. + */ + stretch?: FormStatusStretch; + + /** + * The `role` attribute for accessibility, defaults to `alert` + */ + role?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: FormStatusSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: FormStatusTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: FormStatusRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: FormStatusBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: FormStatusLeft; + className?: string; + + /** + * The `text` appears as the status message. Beside plain text, You can send in a React component as well. + */ + children?: FormStatusChildren; +} +export default class FormStatus extends React.Component< + FormStatusProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface ErrorIconProps { + /** + * The `title` attribute in the status. + */ + title?: string; +} +export const ErrorIcon: React.FC; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface WarnIconProps { + /** + * The `title` attribute in the status. + */ + title?: string; +} +export const WarnIcon: React.FC; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface InfoIconProps { + /** + * The `title` attribute in the status. + */ + title?: string; +} +export const InfoIcon: React.FC; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface MarketingIconProps { + /** + * The `title` attribute in the status. + */ + title?: string; +} +export const MarketingIcon: React.FC; diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.js b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx similarity index 99% rename from packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.js rename to packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx index 14d23721c01..40ea4914627 100644 --- a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.js +++ b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx @@ -13,7 +13,7 @@ import { attachToBody, } from '../../../core/jest/jestSetup' import Component from '../FormStatus' -import Input from '../../Input' +import Input from '../../input/Input' const props = fakeProps(require.resolve('../FormStatus'), { optional: true, diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap similarity index 100% rename from packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap rename to packages/dnb-eufemia/src/components/form-status/__tests__/__snapshots__/FormStatus.test.tsx.snap diff --git a/packages/dnb-eufemia/src/components/form-status/index.js b/packages/dnb-eufemia/src/components/form-status/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-status/index.js rename to packages/dnb-eufemia/src/components/form-status/index.ts diff --git a/packages/dnb-eufemia/src/components/form-status/style.js b/packages/dnb-eufemia/src/components/form-status/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/form-status/style.js rename to packages/dnb-eufemia/src/components/form-status/style.ts diff --git a/packages/dnb-eufemia/src/components/global-error/GlobalError.d.ts b/packages/dnb-eufemia/src/components/global-error/GlobalError.d.ts new file mode 100644 index 00000000000..1edf848d458 --- /dev/null +++ b/packages/dnb-eufemia/src/components/global-error/GlobalError.d.ts @@ -0,0 +1,82 @@ +import * as React from 'react'; +export type GlobalErrorStatusContent = string | Record; +export type GlobalErrorTitle = string | React.ReactNode; +export type GlobalErrorText = string | React.ReactNode; +export type GlobalErrorBack = string | React.ReactNode; +export type GlobalErrorSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type GlobalErrorTop = string | number | boolean; +export type GlobalErrorRight = string | number | boolean; +export type GlobalErrorBottom = string | number | boolean; +export type GlobalErrorLeft = string | number | boolean; +export type GlobalErrorChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface GlobalErrorProps extends React.HTMLProps { + /** + * Status code defines the view showing up. + */ + status?: string; + + /** + * A JSON object or a JS object providing the status texts. More details below. + */ + status_content?: GlobalErrorStatusContent; + + /** + * Defining a `title` will overwrite the default provided by `status_content`. + */ + title?: GlobalErrorTitle; + + /** + * Defining a `text` will overwrite the default provided by `status_content`. + */ + text?: GlobalErrorText; + + /** + * The text of the back button. Defaults to `Tilbake`. Can also be a React component. + */ + back?: GlobalErrorBack; + + /** + * Instead of using the default `window.history.back()` you can provide the back button and text link with a url. + */ + href?: string; + + /** + * Defining a `alt` text for the SVG graphic will overwrite the default provided by `status_content`. + */ + alt?: string; + space?: GlobalErrorSpace; + top?: GlobalErrorTop; + right?: GlobalErrorRight; + bottom?: GlobalErrorBottom; + left?: GlobalErrorLeft; + className?: string; + + /** + * If needed, add additional content under the main content. + */ + children?: GlobalErrorChildren; + class?: string; +} +export default class GlobalError extends React.Component< + GlobalErrorProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/global-error/index.js b/packages/dnb-eufemia/src/components/global-error/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/global-error/index.js rename to packages/dnb-eufemia/src/components/global-error/index.ts diff --git a/packages/dnb-eufemia/src/components/global-error/style.js b/packages/dnb-eufemia/src/components/global-error/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/global-error/style.js rename to packages/dnb-eufemia/src/components/global-error/style.ts diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts new file mode 100644 index 00000000000..94f0c4de6e7 --- /dev/null +++ b/packages/dnb-eufemia/src/components/global-status/GlobalStatus.d.ts @@ -0,0 +1,207 @@ +import * as React from 'react'; +export type GlobalStatusTitle = React.ReactNode | boolean; +export type GlobalStatusText = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type GlobalStatusItems = string | ((...args: any[]) => any) | any[]; +export type GlobalStatusIcon = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type GlobalStatusState = 'error' | 'info'; +export type GlobalStatusShow = 'auto' | any | any | 'true' | 'false'; +export type GlobalStatusAutoscroll = string | boolean; +export type GlobalStatusAutoclose = string | boolean; +export type GlobalStatusNoAnimation = string | boolean; +export type GlobalStatusDelay = string | number; +export type GlobalStatusHideCloseButton = string | boolean; +export type GlobalStatusOmitSetFocus = string | boolean; +export type GlobalStatusOmitSetFocusOnUpdate = string | boolean; +export type GlobalStatusSkeleton = string | boolean; +export type GlobalStatusSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type GlobalStatusTop = string | number | boolean; +export type GlobalStatusRight = string | number | boolean; +export type GlobalStatusBottom = string | number | boolean; +export type GlobalStatusLeft = string | number | boolean; +export type GlobalStatusChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface GlobalStatusProps extends React.HTMLProps { + /** + * The main ID. Defaults to the prop + */ + id?: string; + status_id?: string; + + /** + * The title appears as a part of the status content. Use `false` to hide / remove the title and icon. Defaults to `En feil har skjedd`. + */ + title?: GlobalStatusTitle; + default_title?: string; + + /** + * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. + */ + text?: GlobalStatusText; + + /** + * The items (list items) appear as a part of the status content. you can both use an JSON array, or a vanilla array with a string or an object content. Se "Item Object" example below. + */ + items?: GlobalStatusItems; + + /** + * The icon shown before the status title. Defaults to `exclamation`. + */ + icon?: GlobalStatusIcon; + + /** + * The icon size of the title icon shows. Defaults to `medium`. + */ + icon_size?: string; + + /** + * Defines the visual appearance of the status. There are two main statuses `error` and `info`. The default status is `error`. + */ + state?: GlobalStatusState; + + /** + * Set to `true` or `false` to manually make the global status visible. Defaults to `true`. + */ + show?: GlobalStatusShow; + + /** + * Set to `true` to automatically scroll the page to the appeared global status. Defaults to `true`. + */ + autoscroll?: GlobalStatusAutoscroll; + + /** + * Set to `true` to automatically close the global status if there are no more left items in the provider stack. Defaults to `true`. + */ + autoclose?: GlobalStatusAutoclose; + + /** + * Set to `true` to disable the show/hide/slide/fade/grow/shrink animation. Defaults to `false`. + */ + no_animation?: GlobalStatusNoAnimation; + + /** + * Defines the delay on how long the automated visibility should wait before it appears to the user. Defaults to `200ms`. + */ + delay?: GlobalStatusDelay; + + /** + * Text of the close button. Defaults to `Lukk`. + */ + close_text?: React.ReactNode; + + /** + * Set to `true` if the close button should be hidden for the user. Defaults to `false`. + */ + hide_close_button?: GlobalStatusHideCloseButton; + + /** + * Set to `true` to omit setting the focus during visibility. Defaults to `false`. Additionally, there is `omit_set_focus_on_update` which is set to `true` by default. + */ + omit_set_focus?: GlobalStatusOmitSetFocus; + omit_set_focus_on_update?: GlobalStatusOmitSetFocusOnUpdate; + + /** + * Defines the anchor text showing up after every item, in case there is a `status_id` defined. Defaults to `Gå til %s`. The `%s` represents the optional and internal handled label addition. + */ + status_anchor_text?: React.ReactNode; + skeleton?: GlobalStatusSkeleton; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: GlobalStatusSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: GlobalStatusTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: GlobalStatusRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: GlobalStatusBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: GlobalStatusLeft; + class?: string; + className?: string; + + /** + * The text appears as the status content. Besides plain text, you can send in a React component as well. Defaults to `null`. + */ + children?: GlobalStatusChildren; + + /** + * Gets triggered once the GlobalStatus is getting new content by the user. Returns `{ id, status_id, ...properties }`. + */ + on_adjust?: (...args: any[]) => any; + + /** + * Gets triggered the first time the GlobalStatus appears on the screen. In other words, it has to have been hidden before. Returns `{ id, status_id, ...properties }`. + */ + on_open?: (...args: any[]) => any; + + /** + * Gets triggered for the first time and for every new content update the GlobalStatus gets. Returns `{ id, status_id, ...properties }`. + */ + on_show?: (...args: any[]) => any; + + /** + * Gets triggered once the GlobalStatus disappears from the screen. Works only if `no_animation` is not `true`. Returns `{ id, status_id, ...properties }`. + */ + on_close?: (...args: any[]) => any; + + /** + * Gets triggered once the GlobalStatus is getting closed/hidden by the user. Returns `{ id, status_id, ...properties }`. + */ + on_hide?: (...args: any[]) => any; +} +export default class GlobalStatus extends React.Component< + GlobalStatusProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/global-status/GlobalStatusController.d.ts b/packages/dnb-eufemia/src/components/global-status/GlobalStatusController.d.ts new file mode 100644 index 00000000000..7948c4f584d --- /dev/null +++ b/packages/dnb-eufemia/src/components/global-status/GlobalStatusController.d.ts @@ -0,0 +1,40 @@ +import * as React from 'react'; +export type GlobalStatusControllerRemoveOnUnmount = string | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface GlobalStatusControllerProps + extends React.HTMLProps { + /** + * The main ID. Defaults to the prop + */ + id?: string; + status_id?: string; + remove_on_unmount?: GlobalStatusControllerRemoveOnUnmount; +} +export default class GlobalStatusController extends React.Component< + GlobalStatusControllerProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface GlobalStatusRemoveProps { + /** + * The main ID. Defaults to the prop + */ + id?: string; + status_id: string; +} +export class GlobalStatusRemove extends React.Component< + GlobalStatusRemoveProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap index bbcb8b43ee5..71eae0d50c7 100644 --- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap +++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap @@ -1477,6 +1477,7 @@ exports[`GlobalStatus snapshot have to match linked components snapshot 1`] = ` } label_position={null} + label_sr_only={null} on_change={null} on_change_end={null} on_state_update={null} diff --git a/packages/dnb-eufemia/src/components/global-status/index.js b/packages/dnb-eufemia/src/components/global-status/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/global-status/index.js rename to packages/dnb-eufemia/src/components/global-status/index.ts diff --git a/packages/dnb-eufemia/src/components/global-status/style.js b/packages/dnb-eufemia/src/components/global-status/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/global-status/style.js rename to packages/dnb-eufemia/src/components/global-status/style.ts diff --git a/packages/dnb-eufemia/src/components/heading/Heading.d.ts b/packages/dnb-eufemia/src/components/heading/Heading.d.ts new file mode 100644 index 00000000000..3b54e27b1a0 --- /dev/null +++ b/packages/dnb-eufemia/src/components/heading/Heading.d.ts @@ -0,0 +1,154 @@ +import * as React from 'react'; +export type HeadingText = React.ReactNode | ((...args: any[]) => any); +export type HeadingSize = + | 'auto' + | 'xx-large' + | 'x-large' + | 'large' + | 'medium' + | 'basis' + | 'small' + | 'x-small'; +export type HeadingLevel = number | string; +export type HeadingIncrease = string | boolean; +export type HeadingDecrease = string | boolean; +export type HeadingUp = string | boolean; +export type HeadingDown = string | boolean; +export type HeadingDebug = boolean | ((...args: any[]) => any); +export type HeadingDebugCounter = boolean | ((...args: any[]) => any); +export type HeadingInherit = string | boolean; +export type HeadingReset = number | string | boolean; +export type HeadingSkeleton = string | boolean; +export type HeadingSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type HeadingTop = string | number | boolean; +export type HeadingRight = string | number | boolean; +export type HeadingBottom = string | number | boolean; +export type HeadingLeft = string | number | boolean; +export type HeadingChildren = React.ReactNode | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface HeadingProps extends React.HTMLProps { + id?: string; + group?: string; + + /** + * (required) a heading, can be text or React.Node. + */ + text?: HeadingText; + + /** + * Define the typography font-size by a size type, e.g. `x-large`. Defaults to the predefined heading sizes. + */ + size?: HeadingSize; + level?: HeadingLevel; + + /** + * If set to true, the heading level will be incremented by 1. + */ + increase?: HeadingIncrease; + + /** + * If set to true, the heading level will be decremented by 1. + */ + decrease?: HeadingDecrease; + up?: HeadingUp; + down?: HeadingDown; + + /** + * If set to true, the heading will not be corrected and warnings will not be shown. Warnings do not show up in "production builds" else either. + */ + skip_correction?: boolean; + + /** + * If set to true, the content will have a prefix, showing the heading level. + */ + debug?: HeadingDebug; + + /** + * If set to true, the content will have both a prefix and a JSON log attached to both headings and level contexts. + */ + debug_counter?: HeadingDebugCounter; + counter?: any; + + /** + * If set to true, the heading last used level will be inherited. Also from inside a level context. + */ + inherit?: HeadingInherit; + + /** + * If set to true, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`. + */ + reset?: HeadingReset; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: HeadingSkeleton; + + /** + * Define what HTML element should be used. If you use, e.g. a `span`, then `role="heading"` and `aria-level` gets set. Defaults to semantic heading element. + */ + element?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: HeadingSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: HeadingTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: HeadingRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: HeadingBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: HeadingLeft; + class?: string; + className?: string; + + /** + * (required) a heading, can be text or React.Node. + */ + children?: HeadingChildren; +} +export default class Heading extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/heading/HeadingProvider.d.ts b/packages/dnb-eufemia/src/components/heading/HeadingProvider.d.ts new file mode 100644 index 00000000000..1e2e71ee90e --- /dev/null +++ b/packages/dnb-eufemia/src/components/heading/HeadingProvider.d.ts @@ -0,0 +1,58 @@ +import * as React from 'react'; +export type HeadingProviderLevel = number | string; +export type HeadingProviderIncrease = string | boolean; +export type HeadingProviderDecrease = string | boolean; +export type HeadingProviderUp = string | boolean; +export type HeadingProviderDown = string | boolean; +export type HeadingProviderInherit = string | boolean; +export type HeadingProviderReset = number | string | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface HeadingProviderProps + extends React.HTMLProps { + id?: string; + group?: string; + level?: HeadingProviderLevel; + + /** + * If set to true, the heading level will be incremented by 1. + */ + increase?: HeadingProviderIncrease; + + /** + * If set to true, the heading level will be decremented by 1. + */ + decrease?: HeadingProviderDecrease; + up?: HeadingProviderUp; + down?: HeadingProviderDown; + + /** + * If set to true, the heading last used level will be inherited. Also from inside a level context. + */ + inherit?: HeadingProviderInherit; + counter?: any; + + /** + * If set to true, the heading level will be reset to 2. You can give it a custom level if you need to, e.g. `reset(1)`. + */ + reset?: HeadingProviderReset; + + /** + * (required) a heading, can be text or React.Node. + */ + text?: any; + + /** + * (required) a heading, can be text or React.Node. + */ + children?: any; +} +export default class HeadingProvider extends React.Component< + HeadingProviderProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/heading/index.js b/packages/dnb-eufemia/src/components/heading/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/heading/index.js rename to packages/dnb-eufemia/src/components/heading/index.ts diff --git a/packages/dnb-eufemia/src/components/heading/style.js b/packages/dnb-eufemia/src/components/heading/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/heading/style.js rename to packages/dnb-eufemia/src/components/heading/style.ts diff --git a/packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx b/packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx index ac0302fdaf7..a72e6ae69b5 100644 --- a/packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx +++ b/packages/dnb-eufemia/src/components/height-animation/__tests__/HeightAnimation.test.tsx @@ -48,7 +48,7 @@ describe('HeightAnimation', () => { return ( <> - + Toggle me diff --git a/packages/dnb-eufemia/src/components/height-animation/__tests__/useHeightAnimation.test.tsx b/packages/dnb-eufemia/src/components/height-animation/__tests__/useHeightAnimation.test.tsx index 54f2c69b640..c84ef5332c9 100644 --- a/packages/dnb-eufemia/src/components/height-animation/__tests__/useHeightAnimation.test.tsx +++ b/packages/dnb-eufemia/src/components/height-animation/__tests__/useHeightAnimation.test.tsx @@ -61,7 +61,7 @@ describe('useHeightAnimation', () => { return ( <> - + Toggle me diff --git a/packages/dnb-eufemia/src/components/height-animation/index.js b/packages/dnb-eufemia/src/components/height-animation/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/height-animation/index.js rename to packages/dnb-eufemia/src/components/height-animation/index.ts diff --git a/packages/dnb-eufemia/src/components/height-animation/stories/HeightAnimation.stories.tsx b/packages/dnb-eufemia/src/components/height-animation/stories/HeightAnimation.stories.tsx index ad8e60b54f5..d6443ec176f 100644 --- a/packages/dnb-eufemia/src/components/height-animation/stories/HeightAnimation.stories.tsx +++ b/packages/dnb-eufemia/src/components/height-animation/stories/HeightAnimation.stories.tsx @@ -24,7 +24,7 @@ export const HeightAnimationSandbox = () => { <> { + on_change={({ checked }) => { setOpenState(checked) }} right @@ -35,7 +35,7 @@ export const HeightAnimationSandbox = () => { { + on_change={({ checked }) => { setContentState(checked) }} right diff --git a/packages/dnb-eufemia/src/components/height-animation/style.js b/packages/dnb-eufemia/src/components/height-animation/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/height-animation/style.js rename to packages/dnb-eufemia/src/components/height-animation/style.ts diff --git a/packages/dnb-eufemia/src/components/help-button/index.js b/packages/dnb-eufemia/src/components/help-button/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/help-button/index.js rename to packages/dnb-eufemia/src/components/help-button/index.ts diff --git a/packages/dnb-eufemia/src/components/help-button/style.js b/packages/dnb-eufemia/src/components/help-button/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/help-button/style.js rename to packages/dnb-eufemia/src/components/help-button/style.ts diff --git a/packages/dnb-eufemia/src/components/icon-primary/IconPrimary.d.ts b/packages/dnb-eufemia/src/components/icon-primary/IconPrimary.d.ts index 649632d47a9..292f1af67b8 100644 --- a/packages/dnb-eufemia/src/components/icon-primary/IconPrimary.d.ts +++ b/packages/dnb-eufemia/src/components/icon-primary/IconPrimary.d.ts @@ -49,14 +49,14 @@ export type IconPrimaryAttributes = export type IconPrimaryChildren = | React.ReactNode | ((...args: any[]) => any); - /** * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". */ + export interface IconPrimaryProps extends Omit, 'size'> { /** - * A React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`). + * (required) a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`). */ icon?: IconPrimaryIcon; @@ -66,7 +66,7 @@ export interface IconPrimaryProps modifier?: string; /** - * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the mother HTML element, if it provides a `font-size`. + * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`. */ size?: IconPrimarySize; @@ -103,7 +103,7 @@ export interface IconPrimaryProps border?: IconPrimaryBorder; /** - * Sets a color property to the `svg` markup. Default is no color, which means black + * The color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the colors table, e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`. */ color?: string; diff --git a/packages/dnb-eufemia/src/components/icon-primary/index.js b/packages/dnb-eufemia/src/components/icon-primary/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/icon-primary/index.js rename to packages/dnb-eufemia/src/components/icon-primary/index.ts diff --git a/packages/dnb-eufemia/src/components/icon-primary/style.js b/packages/dnb-eufemia/src/components/icon-primary/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/icon-primary/style.js rename to packages/dnb-eufemia/src/components/icon-primary/style.ts diff --git a/packages/dnb-eufemia/src/components/icon/Icon.d.ts b/packages/dnb-eufemia/src/components/icon/Icon.d.ts new file mode 100644 index 00000000000..22c817b4c00 --- /dev/null +++ b/packages/dnb-eufemia/src/components/icon/Icon.d.ts @@ -0,0 +1,126 @@ +import * as React from 'react'; +export type IconIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type IconSize = number | string | 'default' | 'medium' | 'large'; +export type IconSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type IconTop = string | number | boolean; +export type IconRight = string | number | boolean; +export type IconBottom = string | number | boolean; +export type IconLeft = string | number | boolean; +export type IconWidth = string | number; +export type IconHeight = string | number; +export type IconBorder = string | boolean; +export type IconInheritColor = string | boolean; +export type IconSkeleton = string | boolean; +export type IconAttributes = string | Record; +export type IconChildren = React.ReactNode | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface IconProps extends React.HTMLProps { + /** + * (required) a React SVG Component or the icon name (in case we use `IconPrimary` or `dnb-icon-primary`). + */ + icon?: IconIcon; + + /** + * Modifier class to define. Will result in: `dnb-icon--${modifier}`. + */ + modifier?: string; + + /** + * The dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`. + */ + size?: IconSize; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: IconSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: IconTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: IconRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: IconBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: IconLeft; + width?: IconWidth; + height?: IconHeight; + + /** + * Use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`. + */ + border?: IconBorder; + + /** + * The color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the colors table, e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`. + */ + color?: string; + + /** + * Default to `true`. Set to `false` if you do not want to inherit the color by `currentColor`. + */ + inherit_color?: IconInheritColor; + + /** + * The alternative label (text version) of the icon. Defaults to the imported icon name. + */ + alt?: string; + + /** + * Use a title to provide extra information about the icon used. + */ + title?: string; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: IconSkeleton; + attributes?: IconAttributes; + className?: string; + children?: IconChildren; +} +export default class Icon extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/icon/index.js b/packages/dnb-eufemia/src/components/icon/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/icon/index.js rename to packages/dnb-eufemia/src/components/icon/index.ts diff --git a/packages/dnb-eufemia/src/components/icon/style.js b/packages/dnb-eufemia/src/components/icon/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/icon/style.js rename to packages/dnb-eufemia/src/components/icon/style.ts diff --git a/packages/dnb-eufemia/src/components/index.js b/packages/dnb-eufemia/src/components/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/index.js rename to packages/dnb-eufemia/src/components/index.ts diff --git a/packages/dnb-eufemia/src/components/info-card/index.js b/packages/dnb-eufemia/src/components/info-card/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/info-card/index.js rename to packages/dnb-eufemia/src/components/info-card/index.ts diff --git a/packages/dnb-eufemia/src/components/info-card/style.js b/packages/dnb-eufemia/src/components/info-card/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/info-card/style.js rename to packages/dnb-eufemia/src/components/info-card/style.ts diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts b/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts new file mode 100644 index 00000000000..a88219cec4f --- /dev/null +++ b/packages/dnb-eufemia/src/components/input-masked/InputMasked.d.ts @@ -0,0 +1,383 @@ +import * as React from 'react'; +export type InputMaskedMask = + | Record + | any[] + | ((...args: any[]) => any); +export type InputMaskedNumberMask = + | string + | boolean + | Record; +export type InputMaskedCurrencyMask = + | string + | boolean + | Record; +export type InputMaskedMaskOptions = string | Record; +export type InputMaskedNumberFormat = string | Record; +export type InputMaskedAsCurrency = string | boolean; +export type InputMaskedAsNumber = string | boolean; +export type InputMaskedAsPercent = string | boolean; +export type InputMaskedShowMask = string | boolean; +export type InputMaskedShowGuide = string | boolean; +export type InputMaskedKeepCharPositions = string | boolean; +export type InputMaskedSize = + | 'default' + | 'small' + | 'medium' + | 'large' + | number; +export type InputMaskedValue = string | number; +export type InputMaskedLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type InputMaskedLabelDirection = 'horizontal' | 'vertical'; +export type InputMaskedLabelSrOnly = string | boolean; +export type InputMaskedStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type InputMaskedStatusNoAnimation = string | boolean; +export type InputMaskedClear = string | boolean; +export type InputMaskedKeepPlaceholder = string | boolean; +export type InputMaskedSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type InputMaskedAlign = 'left' | 'center' | 'right'; +export type InputMaskedSelectall = string | boolean; +export type InputMaskedStretch = string | boolean; +export type InputMaskedDisabled = string | boolean; +export type InputMaskedSkeleton = string | boolean; +export type InputMaskedInputAttributes = string | Record; +export type InputMaskedInputElement = + | ((...args: any[]) => any) + | React.ReactNode; +export type InputMaskedIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type InputMaskedIconSize = string | number; +export type InputMaskedIconPosition = 'left' | 'right'; +export type InputMaskedReadOnly = string | boolean; +export type InputMaskedSubmitElement = + | ((...args: any[]) => any) + | React.ReactNode; +export type InputMaskedSubmitButtonIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type InputMaskedSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type InputMaskedTop = string | number | boolean; +export type InputMaskedRight = string | number | boolean; +export type InputMaskedBottom = string | number | boolean; +export type InputMaskedLeft = string | number | boolean; +export type InputMaskedChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface InputMaskedProps extends React.HTMLProps { + /** + * A mask can be defined both as a RegExp style of characters or a callback function. Example below. + */ + mask?: InputMaskedMask; + + /** + * Set to `true` to enable the default numbers formatting – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. + */ + number_mask?: InputMaskedNumberMask; + + /** + * Set to `true` or set the valuta (currency_mask="kr") to enable a custom currency mask – or give an `object` containing the number mask properties. More details below. Can be a JSON string as well, containing the number mask properties. Is disabled by default. Defaults to `kr`. + */ + currency_mask?: InputMaskedCurrencyMask; + + /** + * Use it to manipulate internal masks. You can use it instead of e.g. `number_mask` or `curreny_mask`. All options are listed below. + */ + mask_options?: InputMaskedMaskOptions; + + /** + * Use an object with NumberFormat e.g. `{ omit_rounding: false }`. + */ + number_format?: InputMaskedNumberFormat; + + /** + * Define the locale to be used in the `as_number` or `as_currency` masked. It will be inherited from the Eufemia Provider if not given. Defaults to `nb-NO`. + */ + locale?: string; + + /** + * Set to `true` to use `NOK` or give it a currency code e.g. `USD` to automatically set a currency mask based on the given or inherited locale. + */ + as_currency?: InputMaskedAsCurrency; + + /** + * Set to `true` to automatically set a number mask based on the given or inherited locale. + */ + as_number?: InputMaskedAsNumber; + + /** + * Set to `true` to automatically set a number mask with a percentage sign based on the given or inherited locale. + */ + as_percent?: InputMaskedAsPercent; + + /** + * Show mask when input is empty and has no focus. Defaults to `false`. + */ + show_mask?: InputMaskedShowMask; + + /** + * When `false` is given, it doesn't print out placeholder characters and only adds mask characters when the user reaches them as they're typing. Defaults to `true`. + */ + show_guide?: InputMaskedShowGuide; + pipe?: (...args: any[]) => any; + + /** + * When `true`, adding or deleting characters will not affect the positions of existing characters. Defaults to `false`. + */ + keep_char_positions?: InputMaskedKeepCharPositions; + + /** + * The placeholder character represents the fillable spot in the mask (e.g. `_`). Defaults to invisible space. + */ + placeholder_char?: string; + + /** + * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. + */ + inner_ref?: Record; + + /** + * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`. + */ + on_change?: (...args: any[]) => any; + + /** + * Will be called on submit button click. Returns `{ value, event }`. + */ + on_submit?: (...args: any[]) => any; + + /** + * Will be called on focus set by the user. Returns `{ value, event }`. + */ + on_focus?: (...args: any[]) => any; + + /** + * Will be called on blur set by the user. Returns `{ value, event }`. + */ + on_blur?: (...args: any[]) => any; + on_submit_focus?: (...args: any[]) => any; + on_submit_blur?: (...args: any[]) => any; + + /** + * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`. + */ + type?: string; + + /** + * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then it will be forwarded as the input element attribute. + */ + size?: InputMaskedSize; + + /** + * The content value of the input. + */ + value?: InputMaskedValue; + id?: string; + + /** + * Prepends the Form Label component. If no ID is provided, a random ID is created. + */ + label?: InputMaskedLabel; + + /** + * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal` + */ + label_direction?: InputMaskedLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: InputMaskedLabelSrOnly; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: InputMaskedStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: InputMaskedStatusNoAnimation; + + /** + * Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`. + */ + input_state?: string; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + + /** + * Defaults to `off`. Set to `on` or any of allowed `attributes`. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `` element, 3. and have a submit button inside the form. + */ + autocomplete?: string; + + /** + * Title attribute for the search icon. Only relevant if search input. + */ + submit_button_title?: string; + clear_button_title?: string; + + /** + * The placeholder which shows up once the input value is empty + */ + placeholder?: string; + + /** + * If set to `true`, then a clear button will be shown which lets the user clear any given input value. + */ + clear?: InputMaskedClear; + + /** + * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus. + */ + keep_placeholder?: InputMaskedKeepPlaceholder; + + /** + * Text describing the content of the input more than the label. You can also send in a React component, so it gets wrapped inside the Input component. + */ + suffix?: InputMaskedSuffix; + + /** + * Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`. + */ + align?: InputMaskedAlign; + + /** + * If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position. + */ + selectall?: InputMaskedSelectall; + + /** + * If set to `true`, then the input field will be 100% in `width`. + */ + stretch?: InputMaskedStretch; + disabled?: InputMaskedDisabled; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: InputMaskedSkeleton; + class?: string; + + /** + * In case we have to set a custom input class. + */ + input_class?: string; + + /** + * Provide the Input element with any attributes by using an Object `input_attributes={{size:'2'}}` or a JSON Object `input_attributes='{"size":"2"}'`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute. + */ + input_attributes?: InputMaskedInputAttributes; + + /** + * (internal) by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`. + */ + input_element?: InputMaskedInputElement; + + /** + * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px. + */ + icon?: InputMaskedIcon; + + /** + * The icon size of the icon shows. Defaults to `medium`. + */ + icon_size?: InputMaskedIconSize; + + /** + * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set. + */ + icon_position?: InputMaskedIconPosition; + readOnly?: InputMaskedReadOnly; + + /** + * (internal) by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component. + */ + inner_element?: React.ReactNode; + + /** + * Accepts a React element which will show up like the "submit button" would do on `type="search"`. + */ + submit_element?: InputMaskedSubmitElement; + submit_button_variant?: any; + submit_button_icon?: InputMaskedSubmitButtonIcon; + submit_button_status?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: InputMaskedSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: InputMaskedTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: InputMaskedRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: InputMaskedBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: InputMaskedLeft; + className?: string; + children?: InputMaskedChildren; + on_state_update?: (...args: any[]) => any; +} +declare const InputMasked: React.FC; +export default InputMasked; diff --git a/packages/dnb-eufemia/src/components/input-masked/TextMask.d.ts b/packages/dnb-eufemia/src/components/input-masked/TextMask.d.ts new file mode 100644 index 00000000000..817c8f9292a --- /dev/null +++ b/packages/dnb-eufemia/src/components/input-masked/TextMask.d.ts @@ -0,0 +1,33 @@ +import * as React from 'react'; +export type TextMaskMask = + | any[] + | ((...args: any[]) => any) + | boolean + | { + mask?: any[] | ((...args: any[]) => any); + pipe?: (...args: any[]) => any; + }; +export type TextMaskInputElement = + | React.ReactNode + | ((...args: any[]) => any); +export type TextMaskValue = string | number; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface TextMaskProps extends React.HTMLProps { + mask: TextMaskMask; + inputRef?: Record; + inputElement?: TextMaskInputElement; + onChange?: (...args: any[]) => any; + guide?: boolean; + value?: TextMaskValue; + pipe?: (...args: any[]) => any; + placeholderChar?: string; + keepCharPositions?: boolean; + showMask?: boolean; +} +export default class TextMask extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/input-masked/index.js b/packages/dnb-eufemia/src/components/input-masked/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/input-masked/index.js rename to packages/dnb-eufemia/src/components/input-masked/index.ts diff --git a/packages/dnb-eufemia/src/components/input-masked/style.js b/packages/dnb-eufemia/src/components/input-masked/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/input-masked/style.js rename to packages/dnb-eufemia/src/components/input-masked/style.ts diff --git a/packages/dnb-eufemia/src/components/input/Input.d.ts b/packages/dnb-eufemia/src/components/input/Input.d.ts new file mode 100644 index 00000000000..51e1ff81825 --- /dev/null +++ b/packages/dnb-eufemia/src/components/input/Input.d.ts @@ -0,0 +1,301 @@ +import * as React from 'react'; +export type InputSize = 'default' | 'small' | 'medium' | 'large' | number; +export type InputValue = string | number; +export type InputLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type InputLabelDirection = 'horizontal' | 'vertical'; +export type InputLabelSrOnly = string | boolean; +export type InputStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type InputStatusNoAnimation = string | boolean; +export type InputClear = string | boolean; +export type InputKeepPlaceholder = string | boolean; +export type InputSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type InputAlign = 'left' | 'center' | 'right'; +export type InputSelectall = string | boolean; +export type InputStretch = string | boolean; +export type InputDisabled = string | boolean; +export type InputSkeleton = string | boolean; +export type InputInputAttributes = string | Record; +export type InputInputElement = + | ((...args: any[]) => any) + | React.ReactNode; +export type InputIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type InputIconSize = string | number; +export type InputIconPosition = 'left' | 'right'; +export type InputInnerRef = + | ((...args: any[]) => any) + | Record; +export type InputReadOnly = string | boolean; +export type InputSubmitElement = + | ((...args: any[]) => any) + | React.ReactNode; +export type InputSubmitButtonVariant = + | 'primary' + | 'secondary' + | 'tertiary' + | 'signal' + | 'unstyled'; +export type InputSubmitButtonIcon = + | string + | React.ReactNode + | ((...args: any[]) => any); +export type InputSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type InputTop = string | number | boolean; +export type InputRight = string | number | boolean; +export type InputBottom = string | number | boolean; +export type InputLeft = string | number | boolean; +export type InputChildren = React.ReactNode | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface InputProps extends React.HTMLProps { + /** + * Choose between `text`, `number`, `email`, `password`, `url`, `tel` and `search`. + */ + type?: string; + + /** + * The sizes you can choose is `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem) are supported component sizes. Defaults to `default` / `null`. Also, if You define a number like `size="2"` then it will be forwarded as the input element attribute. + */ + size?: InputSize; + + /** + * The content value of the input. + */ + value?: InputValue; + id?: string; + + /** + * Prepends the Form Label component. If no ID is provided, a random ID is created. + */ + label?: InputLabel; + + /** + * Use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal` + */ + label_direction?: InputLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: InputLabelSrOnly; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: InputStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: InputStatusNoAnimation; + + /** + * Defines a custom visual state of the input. Use it only if you have to simulate a custom state. Currently are three statuses `virgin` , `focus` and `dirty`. Defaults to `null`. + */ + input_state?: string; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + + /** + * Defaults to `off`. Set to `on` or any of allowed `attributes`. Keep in mind, 1. you may have to define a `name`, 2. have the input as a descendant of a `` element, 3. and have a submit button inside the form. + */ + autocomplete?: string; + + /** + * Title attribute for the search icon. Only relevant if search input. + */ + submit_button_title?: string; + clear_button_title?: string; + + /** + * The placeholder which shows up once the input value is empty + */ + placeholder?: string; + + /** + * If set to `true`, then a clear button will be shown which lets the user clear any given input value. + */ + clear?: InputClear; + + /** + * Set to `true` in case the `placeholder` has to be kept during focus. By default, the placeholder disappears on focus. + */ + keep_placeholder?: InputKeepPlaceholder; + + /** + * Text describing the content of the input more than the label. You can also send in a React component, so it gets wrapped inside the Input component. + */ + suffix?: InputSuffix; + + /** + * Defines the text alignment of the input. Can be `left`, `right` or `center`. Defaults to `left`. + */ + align?: InputAlign; + + /** + * If set to `true`, then the whole input value gets selected on the entry focus. A second click will place the cursor on the wanted position. + */ + selectall?: InputSelectall; + + /** + * If set to `true`, then the input field will be 100% in `width`. + */ + stretch?: InputStretch; + disabled?: InputDisabled; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: InputSkeleton; + class?: string; + + /** + * In case we have to set a custom input class. + */ + input_class?: string; + + /** + * Provide the Input element with any attributes by using an Object `input_attributes={{size:'2'}}` or a JSON Object `input_attributes='{"size":"2"}'`. "NB:" Keep in mind, that also every not listed component property will be sent along and set as an Input element attribute. + */ + input_attributes?: InputInputAttributes; + + /** + * (internal) by providing a new component we can change the internally used element. Also supports a string only, like `input_element="input"`. + */ + input_element?: InputInputElement; + + /** + * Icon to show before or after the input / placeholder. Can be either a string defining a primary icon or a Component using an SVG icon of either 16px or 24px. + */ + icon?: InputIcon; + + /** + * The icon size of the icon shows. Defaults to `medium`. + */ + icon_size?: InputIconSize; + + /** + * Defines the position of icon inside the input. Set to `left` or `right`. Defaults to `left` if not set. + */ + icon_position?: InputIconPosition; + + /** + * By providing a React.ref we can get the internally used input element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. + */ + inner_ref?: InputInnerRef; + readOnly?: InputReadOnly; + + /** + * (internal) by providing a new component to be rendered inside the "shell" – we can add a freely customizable internal element. Used by the Autocomplete component. + */ + inner_element?: React.ReactNode; + + /** + * Accepts a React element which will show up like the "submit button" would do on `type="search"`. + */ + submit_element?: InputSubmitElement; + submit_button_variant?: InputSubmitButtonVariant; + submit_button_icon?: InputSubmitButtonIcon; + submit_button_status?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: InputSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: InputTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: InputRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: InputBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: InputLeft; + className?: string; + children?: InputChildren; + + /** + * Will be called on value changes made by the user. Returns an object with the value as a string and the native event: `{ value, event }`. + */ + on_change?: (...args: any[]) => any; + + /** + * Will be called on submit button click. Returns `{ value, event }`. + */ + on_submit?: (...args: any[]) => any; + + /** + * Will be called on focus set by the user. Returns `{ value, event }`. + */ + on_focus?: (...args: any[]) => any; + + /** + * Will be called on blur set by the user. Returns `{ value, event }`. + */ + on_blur?: (...args: any[]) => any; + on_submit_focus?: (...args: any[]) => any; + on_submit_blur?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; +} +export default class Input extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/input/InputPassword.d.ts b/packages/dnb-eufemia/src/components/input/InputPassword.d.ts new file mode 100644 index 00000000000..e6eb04ebf94 --- /dev/null +++ b/packages/dnb-eufemia/src/components/input/InputPassword.d.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; +import { InputProps } from './Input'; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface InputPasswordProps + extends React.HTMLProps, + InputProps { + show_password?: string; + hide_password?: string; + on_show_password?: (...args: any[]) => any; + on_hide_password?: (...args: any[]) => any; +} +export default class InputPassword extends React.Component< + InputPasswordProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/input/index.js b/packages/dnb-eufemia/src/components/input/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/input/index.js rename to packages/dnb-eufemia/src/components/input/index.ts diff --git a/packages/dnb-eufemia/src/components/input/style.js b/packages/dnb-eufemia/src/components/input/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/input/style.js rename to packages/dnb-eufemia/src/components/input/style.ts diff --git a/packages/dnb-eufemia/src/components/lib.js b/packages/dnb-eufemia/src/components/lib.ts similarity index 100% rename from packages/dnb-eufemia/src/components/lib.js rename to packages/dnb-eufemia/src/components/lib.ts diff --git a/packages/dnb-eufemia/src/components/logo/Logo.d.ts b/packages/dnb-eufemia/src/components/logo/Logo.d.ts new file mode 100644 index 00000000000..570b6bc7adb --- /dev/null +++ b/packages/dnb-eufemia/src/components/logo/Logo.d.ts @@ -0,0 +1,97 @@ +import * as React from 'react'; +export type LogoSize = number | string; +export type LogoRatio = number | string; +export type LogoWidth = number | string; +export type LogoHeight = number | string; +export type LogoSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type LogoTop = string | number | boolean; +export type LogoRight = string | number | boolean; +export type LogoBottom = string | number | boolean; +export type LogoLeft = string | number | boolean; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface LogoProps extends React.HTMLProps { + /** + * Define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto` + */ + size?: LogoSize; + ratio?: LogoRatio; + + /** + * Define either the width of the logo + */ + width?: LogoWidth; + + /** + * Or define the height of the logo + */ + height?: LogoHeight; + alt?: string; + + /** + * Define the color of the logo + */ + color?: string; + + /** + * Set to `true` if you do not want to inherit the color by `currentColor`. Default to `false`. + */ + inherit_color?: boolean; + class?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: LogoSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: LogoTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: LogoRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: LogoBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: LogoLeft; + className?: string; +} +export default class Logo extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/logo/index.js b/packages/dnb-eufemia/src/components/logo/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/logo/index.js rename to packages/dnb-eufemia/src/components/logo/index.ts diff --git a/packages/dnb-eufemia/src/components/logo/style.js b/packages/dnb-eufemia/src/components/logo/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/logo/style.js rename to packages/dnb-eufemia/src/components/logo/style.ts diff --git a/packages/dnb-eufemia/src/components/modal/index.js b/packages/dnb-eufemia/src/components/modal/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/modal/index.js rename to packages/dnb-eufemia/src/components/modal/index.ts diff --git a/packages/dnb-eufemia/src/components/modal/style.js b/packages/dnb-eufemia/src/components/modal/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/modal/style.js rename to packages/dnb-eufemia/src/components/modal/style.ts diff --git a/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts b/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts new file mode 100644 index 00000000000..2e9afd382b2 --- /dev/null +++ b/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts @@ -0,0 +1,239 @@ +import * as React from 'react'; +export type NumberFormatValue = number | string; +export type NumberFormatPrefix = + | React.ReactNode + | ((...args: any[]) => any); +export type NumberFormatSuffix = + | React.ReactNode + | ((...args: any[]) => any); +export type NumberFormatCurrency = string | boolean; +export type NumberFormatCurrencyPosition = 'auto' | 'before' | 'after'; +export type NumberFormatCompact = 'short' | 'long' | boolean; +export type NumberFormatBan = string | boolean; +export type NumberFormatNin = string | boolean; +export type NumberFormatPhone = string | boolean; +export type NumberFormatOrg = string | boolean; +export type NumberFormatPercent = string | boolean; +export type NumberFormatLink = string | boolean; +export type NumberFormatOptions = Record | string; +export type NumberFormatDecimals = number | string; +export type NumberFormatSelectall = string | boolean; +export type NumberFormatAlwaysSelectall = string | boolean; +export type NumberFormatCopySelection = string | boolean; +export type NumberFormatCleanCopyValue = string | boolean; +export type NumberFormatOmitRounding = string | boolean; +export type NumberFormatClean = string | boolean; +export type NumberFormatElement = string | boolean; +export type NumberFormatTooltip = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type NumberFormatSkeleton = string | boolean; +export type NumberFormatSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type NumberFormatTop = string | number | boolean; +export type NumberFormatRight = string | number | boolean; +export type NumberFormatBottom = string | number | boolean; +export type NumberFormatLeft = string | number | boolean; +export type NumberFormatChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface NumberFormatProps extends React.HTMLProps { + id?: string; + + /** + * (required) a number. + */ + value?: NumberFormatValue; + + /** + * Use a 2 Letter Language Codes or an extended code such as `nb-NO`. Use `auto` to detect the locale from the browser (`navigator.language`). Defaults to the Norwegian locale: `nb-NO`. + */ + locale?: string; + + /** + * Add a string or React component before the number, including white space. + */ + prefix?: NumberFormatPrefix; + + /** + * Appends a string or React component after the number, including white space. + */ + suffix?: NumberFormatSuffix; + + /** + * Currency code (ISO 4217) or `true` to use the default `NOK`. Uses two decimals by default. + */ + currency?: NumberFormatCurrency; + + /** + * Use either empty/false to hide the sign/name or use `code` (NOK), `name` (norske kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when the locale is `no` else we default to `code`. + */ + currency_display?: string; + + /** + * Use either `before` or `after` to change/define the position of the currency. Defaults to `auto` (Browser API defaults, but with an exception, if the locale is `nb-NO` or `no`, use after as the default position). + */ + currency_position?: NumberFormatCurrencyPosition; + + /** + * Shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given. + */ + compact?: NumberFormatCompact; + + /** + * "Bank Account Number": use `true` to use the default Norwegian style (2000 12 34567) formatting. + */ + ban?: NumberFormatBan; + + /** + * "National Identification Number": use `true` to use the default Norwegian style (180892 12345) formatting. + */ + nin?: NumberFormatNin; + + /** + * Use `true` to use the default Norwegian style (22 22 22 22) of phone number formatting, regulated by the Norwegian authority. More info by Sprakradet as well. + */ + phone?: NumberFormatPhone; + + /** + * "Organization Number": use `true` to use the default Norwegian style (123 456 789) formatting. Screen readers get digit by digit. + */ + org?: NumberFormatOrg; + + /** + * "Percentage": use `true` to enable percent formatting. + */ + percent?: NumberFormatPercent; + + /** + * Use `tel` or `sms` to enable a clickable / touchable anchor link. + */ + link?: NumberFormatLink; + + /** + * Accepts all number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. `options={{ 'minimumFractionDigits': 2 }}`. + */ + options?: NumberFormatOptions; + + /** + * Set a number to define the number of decimals. Like `decimals="0"` will ensure that decimals are simply not shown. The default decimals for currency usage are `2` (Browser API default). + */ + decimals?: NumberFormatDecimals; + + /** + * Use `false` to disable the auto select all on the first click. Defaults to `true`. + */ + selectall?: NumberFormatSelectall; + + /** + * Use `true` to always auto select all on the first click. Defaults to `false`. + */ + always_selectall?: NumberFormatAlwaysSelectall; + + /** + * Use `false` to disable the auto copy feature. Defaults to `true`. + */ + copy_selection?: NumberFormatCopySelection; + + /** + * If set to `true` the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to `false`. + */ + clean_copy_value?: NumberFormatCleanCopyValue; + + /** + * If set to `true`, the decimal will NOT be rounded. Normally, by using `toFixed` or by using `maximumFractionDigits`, decimals get rounded. + */ + omit_rounding?: NumberFormatOmitRounding; + + /** + * If set to `true` a dirty string will be parsed to to extract the number (`prefix -123.45 suffix` would result in e.g. `kr -123,45`). + */ + clean?: NumberFormatClean; + + /** + * Will add a visually hidden label to give screen reader users the missing context to understand easier what the number represents. + */ + srLabel?: React.ReactNode; + + /** + * Define what HTML element should be used. Defaults to ``. + */ + element?: NumberFormatElement; + + /** + * Provide a string or a React Element to be shown as the tooltip content. + */ + tooltip?: NumberFormatTooltip; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: NumberFormatSkeleton; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: NumberFormatSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: NumberFormatTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: NumberFormatRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: NumberFormatBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: NumberFormatLeft; + class?: string; + className?: string; + + /** + * (required) a number. + */ + children?: NumberFormatChildren; +} +export default class NumberFormat extends React.Component< + NumberFormatProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/number-format/index.js b/packages/dnb-eufemia/src/components/number-format/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/number-format/index.js rename to packages/dnb-eufemia/src/components/number-format/index.ts diff --git a/packages/dnb-eufemia/src/components/number-format/style.js b/packages/dnb-eufemia/src/components/number-format/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/number-format/style.js rename to packages/dnb-eufemia/src/components/number-format/style.ts diff --git a/packages/dnb-eufemia/src/components/pagination/Pagination.d.ts b/packages/dnb-eufemia/src/components/pagination/Pagination.d.ts new file mode 100644 index 00000000000..f7230613f5c --- /dev/null +++ b/packages/dnb-eufemia/src/components/pagination/Pagination.d.ts @@ -0,0 +1,845 @@ +import * as React from 'react'; +export type PaginationStartupPage = string | number; +export type PaginationCurrentPage = string | number; +export type PaginationPageCount = string | number; +export type PaginationStartupCount = string | number; +export type PaginationParallelLoadCount = string | number; +export type PaginationPlaceMakerBeforeContent = string | boolean; +export type PaginationMinWaitTime = string | number; +export type PaginationDisabled = string | boolean; +export type PaginationSkeleton = string | boolean; +export type PaginationMode = 'pagination' | 'infinity'; +export type PaginationUseLoadButton = string | boolean; +export type PaginationItems = string | any[]; +export type PaginationHideProgressIndicator = string | boolean; +export type PaginationSetContentHandler = + | string + | ((...args: any[]) => any); +export type PaginationResetContentHandler = + | string + | ((...args: any[]) => any); +export type PaginationResetPaginationHandler = + | string + | ((...args: any[]) => any); +export type PaginationEndInfinityHandler = + | string + | ((...args: any[]) => any); +export type PaginationPageElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationFallbackElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationMarkerElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationIndicatorElement = + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type PaginationTop = string | number | boolean; +export type PaginationRight = string | number | boolean; +export type PaginationBottom = string | number | boolean; +export type PaginationLeft = string | number | boolean; +export type PaginationChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface PaginationProps extends React.HTMLProps { + /** + * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well. + */ + startup_page?: PaginationStartupPage; + + /** + * The page shown at the moment the component renders. Defaults to `1`. + */ + current_page?: PaginationCurrentPage; + + /** + * The total pages count. Defaults to `1`. + */ + page_count?: PaginationPageCount; + + /** + * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`. + */ + startup_count?: PaginationStartupCount; + + /** + * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`. + */ + parallel_load_count?: PaginationParallelLoadCount; + + /** + * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`. + */ + place_maker_before_content?: PaginationPlaceMakerBeforeContent; + + /** + * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds. + */ + min_wait_time?: PaginationMinWaitTime; + + /** + * If set to `true`, all pagination bar buttons are disabled. + */ + disabled?: PaginationDisabled; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: PaginationSkeleton; + + /** + * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the Infinity Scroller. Defaults to `pagination`. + */ + mode?: PaginationMode; + + /** + * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead. + */ + use_load_button?: PaginationUseLoadButton; + items?: PaginationItems; + + /** + * If set to `true` no indicator will be shown. + */ + hide_progress_indicator?: PaginationHideProgressIndicator; + + /** + * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode. + */ + set_content_handler?: PaginationSetContentHandler; + + /** + * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content. + */ + reset_content_handler?: PaginationResetContentHandler; + + /** + * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states. + */ + reset_pagination_handler?: PaginationResetPaginationHandler; + + /** + * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown. + */ + end_infinity_handler?: PaginationEndInfinityHandler; + + /** + * By default a `
` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown. + */ + page_element?: PaginationPageElement; + + /** + * (infinity mode) is used by the indicator, load more bar as well as by the marker. Defaults to a `div`. + */ + fallback_element?: PaginationFallbackElement; + + /** + * (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined. + */ + marker_element?: PaginationMarkerElement; + + /** + * (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined. + */ + indicator_element?: PaginationIndicatorElement; + + /** + * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`. + */ + align?: string; + + /** + * The title used in every button shown in the bar. Defaults to `Side %s`. + */ + button_title?: string; + + /** + * The title used in the previous page button. Defaults to `Forrige side`. + */ + prev_title?: string; + + /** + * The title used in the next page button. Defaults to `Neste side`. + */ + next_title?: string; + + /** + * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`. + */ + more_pages?: string; + + /** + * Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`. + */ + is_loading_text?: string; + + /** + * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`. + */ + load_button_text?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: PaginationSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: PaginationTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: PaginationRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: PaginationBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: PaginationLeft; + class?: string; + className?: string; + + /** + * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. + */ + children?: PaginationChildren; + + /** + * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details. + */ + on_change?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`. + */ + on_startup?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details. + */ + on_load?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called once `page_count` is reached or `endInfinity` was called. + */ + on_end?: (...args: any[]) => any; +} +export default class Pagination extends React.Component< + PaginationProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} +export type PaginationInstanceStartupPage = string | number; +export type PaginationInstanceCurrentPage = string | number; +export type PaginationInstancePageCount = string | number; +export type PaginationInstanceStartupCount = string | number; +export type PaginationInstanceParallelLoadCount = string | number; +export type PaginationInstancePlaceMakerBeforeContent = string | boolean; +export type PaginationInstanceMinWaitTime = string | number; +export type PaginationInstanceDisabled = string | boolean; +export type PaginationInstanceSkeleton = string | boolean; +export type PaginationInstanceMode = 'pagination' | 'infinity'; +export type PaginationInstanceUseLoadButton = string | boolean; +export type PaginationInstanceItems = string | any[]; +export type PaginationInstanceHideProgressIndicator = string | boolean; +export type PaginationInstanceSetContentHandler = + | string + | ((...args: any[]) => any); +export type PaginationInstanceResetContentHandler = + | string + | ((...args: any[]) => any); +export type PaginationInstanceResetPaginationHandler = + | string + | ((...args: any[]) => any); +export type PaginationInstanceEndInfinityHandler = + | string + | ((...args: any[]) => any); +export type PaginationInstancePageElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationInstanceFallbackElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationInstanceMarkerElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationInstanceIndicatorElement = + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type PaginationInstanceSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type PaginationInstanceTop = string | number | boolean; +export type PaginationInstanceRight = string | number | boolean; +export type PaginationInstanceBottom = string | number | boolean; +export type PaginationInstanceLeft = string | number | boolean; +export type PaginationInstanceChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface PaginationInstanceProps { + /** + * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well. + */ + startup_page?: PaginationInstanceStartupPage; + + /** + * The page shown at the moment the component renders. Defaults to `1`. + */ + current_page?: PaginationInstanceCurrentPage; + + /** + * The total pages count. Defaults to `1`. + */ + page_count?: PaginationInstancePageCount; + + /** + * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`. + */ + startup_count?: PaginationInstanceStartupCount; + + /** + * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`. + */ + parallel_load_count?: PaginationInstanceParallelLoadCount; + + /** + * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`. + */ + place_maker_before_content?: PaginationInstancePlaceMakerBeforeContent; + + /** + * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds. + */ + min_wait_time?: PaginationInstanceMinWaitTime; + + /** + * If set to `true`, all pagination bar buttons are disabled. + */ + disabled?: PaginationInstanceDisabled; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: PaginationInstanceSkeleton; + + /** + * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the Infinity Scroller. Defaults to `pagination`. + */ + mode?: PaginationInstanceMode; + + /** + * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead. + */ + use_load_button?: PaginationInstanceUseLoadButton; + items?: PaginationInstanceItems; + + /** + * If set to `true` no indicator will be shown. + */ + hide_progress_indicator?: PaginationInstanceHideProgressIndicator; + + /** + * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode. + */ + set_content_handler?: PaginationInstanceSetContentHandler; + + /** + * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content. + */ + reset_content_handler?: PaginationInstanceResetContentHandler; + + /** + * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states. + */ + reset_pagination_handler?: PaginationInstanceResetPaginationHandler; + + /** + * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown. + */ + end_infinity_handler?: PaginationInstanceEndInfinityHandler; + + /** + * By default a `
` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown. + */ + page_element?: PaginationInstancePageElement; + + /** + * (infinity mode) is used by the indicator, load more bar as well as by the marker. Defaults to a `div`. + */ + fallback_element?: PaginationInstanceFallbackElement; + + /** + * (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined. + */ + marker_element?: PaginationInstanceMarkerElement; + + /** + * (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined. + */ + indicator_element?: PaginationInstanceIndicatorElement; + + /** + * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`. + */ + align?: string; + + /** + * The title used in every button shown in the bar. Defaults to `Side %s`. + */ + button_title?: string; + + /** + * The title used in the previous page button. Defaults to `Forrige side`. + */ + prev_title?: string; + + /** + * The title used in the next page button. Defaults to `Neste side`. + */ + next_title?: string; + + /** + * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`. + */ + more_pages?: string; + + /** + * Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`. + */ + is_loading_text?: string; + + /** + * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`. + */ + load_button_text?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: PaginationInstanceSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: PaginationInstanceTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: PaginationInstanceRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: PaginationInstanceBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: PaginationInstanceLeft; + class?: string; + className?: string; + + /** + * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. + */ + children?: PaginationInstanceChildren; + + /** + * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details. + */ + on_change?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`. + */ + on_startup?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details. + */ + on_load?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called once `page_count` is reached or `endInfinity` was called. + */ + on_end?: (...args: any[]) => any; +} + +declare class PaginationInstance extends React.Component< + PaginationInstanceProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} + +export type InfinityMarkerStartupPage = string | number; +export type InfinityMarkerCurrentPage = string | number; +export type InfinityMarkerPageCount = string | number; +export type InfinityMarkerStartupCount = string | number; +export type InfinityMarkerParallelLoadCount = string | number; +export type InfinityMarkerPlaceMakerBeforeContent = string | boolean; +export type InfinityMarkerMinWaitTime = string | number; +export type InfinityMarkerDisabled = string | boolean; +export type InfinityMarkerSkeleton = string | boolean; +export type InfinityMarkerMode = 'pagination' | 'infinity'; +export type InfinityMarkerUseLoadButton = string | boolean; +export type InfinityMarkerItems = string | any[]; +export type InfinityMarkerHideProgressIndicator = string | boolean; +export type InfinityMarkerSetContentHandler = + | string + | ((...args: any[]) => any); +export type InfinityMarkerResetContentHandler = + | string + | ((...args: any[]) => any); +export type InfinityMarkerResetPaginationHandler = + | string + | ((...args: any[]) => any); +export type InfinityMarkerEndInfinityHandler = + | string + | ((...args: any[]) => any); +export type InfinityMarkerPageElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type InfinityMarkerFallbackElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type InfinityMarkerMarkerElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type InfinityMarkerIndicatorElement = + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type InfinityMarkerSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type InfinityMarkerTop = string | number | boolean; +export type InfinityMarkerRight = string | number | boolean; +export type InfinityMarkerBottom = string | number | boolean; +export type InfinityMarkerLeft = string | number | boolean; +export type InfinityMarkerChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface InfinityMarkerProps { + /** + * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well. + */ + startup_page?: InfinityMarkerStartupPage; + + /** + * The page shown at the moment the component renders. Defaults to `1`. + */ + current_page?: InfinityMarkerCurrentPage; + + /** + * The total pages count. Defaults to `1`. + */ + page_count?: InfinityMarkerPageCount; + + /** + * Defines how many `infinity` pages should be loaded / shown on the first render. Defaults to `1`. + */ + startup_count?: InfinityMarkerStartupCount; + + /** + * Defines how many `infinity` pages should be loaded / shown once the user scrolls down. Defaults to `1`. + */ + parallel_load_count?: InfinityMarkerParallelLoadCount; + + /** + * If set to `true`, the infinity marker will be placed before the content (on top off). This could potentially have negative side effects. But it depends really on the content if this would make more sense to use instead. Defaults to `false`. + */ + place_maker_before_content?: InfinityMarkerPlaceMakerBeforeContent; + + /** + * The minimum time to wait, if the infinity scroll was invoked under that time threshold. This prevents not intentional infinity scroll loop calls. Defaults to `400` milliseconds. + */ + min_wait_time?: InfinityMarkerMinWaitTime; + + /** + * If set to `true`, all pagination bar buttons are disabled. + */ + disabled?: InfinityMarkerDisabled; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: InfinityMarkerSkeleton; + + /** + * If set to `infinity`, then the pagination bar will be now shown and but infinity scrolling will do the content presentation. For more information, check out the Infinity Scroller. Defaults to `pagination`. + */ + mode?: InfinityMarkerMode; + + /** + * If set to `true` it will disable the automated infinity scrolling, but shows a load more button at the of the content instead. + */ + use_load_button?: InfinityMarkerUseLoadButton; + items?: InfinityMarkerItems; + + /** + * If set to `true` no indicator will be shown. + */ + hide_progress_indicator?: InfinityMarkerHideProgressIndicator; + + /** + * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode. + */ + set_content_handler?: InfinityMarkerSetContentHandler; + + /** + * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content. + */ + reset_content_handler?: InfinityMarkerResetContentHandler; + + /** + * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states. + */ + reset_pagination_handler?: InfinityMarkerResetPaginationHandler; + + /** + * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown. + */ + end_infinity_handler?: InfinityMarkerEndInfinityHandler; + + /** + * By default a `
` is used. Set it to any element you have to use. Adds also a class: `dnb-pagination__page` shown. + */ + page_element?: InfinityMarkerPageElement; + + /** + * (infinity mode) is used by the indicator, load more bar as well as by the marker. Defaults to a `div`. + */ + fallback_element?: InfinityMarkerFallbackElement; + + /** + * (infinity mode) is used by the internal marker. Falls back to `fallback_element` if not defined. + */ + marker_element?: InfinityMarkerMarkerElement; + + /** + * (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined. + */ + indicator_element?: InfinityMarkerIndicatorElement; + + /** + * Define the alignment of the pagination button bar. Can be `center`, `left` or `right`. Defaults to `left`. + */ + align?: string; + + /** + * The title used in every button shown in the bar. Defaults to `Side %s`. + */ + button_title?: string; + + /** + * The title used in the previous page button. Defaults to `Forrige side`. + */ + prev_title?: string; + + /** + * The title used in the next page button. Defaults to `Neste side`. + */ + next_title?: string; + + /** + * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`. + */ + more_pages?: string; + + /** + * Shown until new content is inserted in to the page. Defaults to `Laster nytt innhold`. + */ + is_loading_text?: string; + + /** + * Used during infinity mode. If `use_load_button` is set to true, then a button is show on the bottom. If the `startup_page` is higher than 1. Defaults to `Vis mer innhold`. + */ + load_button_text?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: InfinityMarkerSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: InfinityMarkerTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: InfinityMarkerRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: InfinityMarkerBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: InfinityMarkerLeft; + class?: string; + className?: string; + + /** + * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. + */ + children?: InfinityMarkerChildren; + + /** + * Will be called for every page change, regardless if the mode is `mode="infinity"` or not. Returns an object with number of useful properties and methods. See below for more details. + */ + on_change?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called once the component is ready for interaction. Returns an object with number of useful properties and methods. See below for more details. "NB:" Will be called again as soon as we reset the content by calling `resetContent()`. + */ + on_startup?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called on every page interaction, also on the very first interaction. Returns an object with number of useful properties and methods. See below for more details. + */ + on_load?: (...args: any[]) => any; + + /** + * Only on "infinity" mode. Will be called once `page_count` is reached or `endInfinity` was called. + */ + on_end?: (...args: any[]) => any; +} +export class InfinityMarker extends React.Component< + InfinityMarkerProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} +export type PaginationContentChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface PaginationContentProps { + /** + * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. + */ + children: PaginationContentChildren; +} +declare const PaginationContent: React.FC; diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationHelpers.d.ts b/packages/dnb-eufemia/src/components/pagination/PaginationHelpers.d.ts new file mode 100644 index 00000000000..a353cd3c803 --- /dev/null +++ b/packages/dnb-eufemia/src/components/pagination/PaginationHelpers.d.ts @@ -0,0 +1,22 @@ +import * as React from 'react'; +export type PaginationIndicatorIndicatorElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface PaginationIndicatorProps { + /** + * (infinity mode) is used by the indicator. Falls back to `fallback_element` if not defined. + */ + indicator_element?: PaginationIndicatorIndicatorElement; +} +export class PaginationIndicator extends React.Component< + PaginationIndicatorProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.d.ts b/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.d.ts new file mode 100644 index 00000000000..6244cf3ce08 --- /dev/null +++ b/packages/dnb-eufemia/src/components/pagination/PaginationInfinity.d.ts @@ -0,0 +1,46 @@ +import * as React from 'react'; +export type InfinityScrollerChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface InfinityScrollerProps + extends React.HTMLProps { + /** + * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. + */ + children?: InfinityScrollerChildren; +} +export default class InfinityScroller extends React.Component< + InfinityScrollerProps, + any +> { + render(): JSX.Element; +} +export type InfinityLoadButtonElement = + | Record + | React.ReactNode + | ((...args: any[]) => any) + | string; +export type InfinityLoadButtonPressedElement = + | Record + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface InfinityLoadButtonProps { + element?: InfinityLoadButtonElement; + pressed_element?: InfinityLoadButtonPressedElement; + icon: string; + on_click: (...args: any[]) => any; +} +export class InfinityLoadButton extends React.Component< + InfinityLoadButtonProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts b/packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts new file mode 100644 index 00000000000..e88c6b5a529 --- /dev/null +++ b/packages/dnb-eufemia/src/components/pagination/PaginationProvider.d.ts @@ -0,0 +1,87 @@ +import * as React from 'react'; +export type PaginationProviderStartupPage = string | number; +export type PaginationProviderCurrentPage = string | number; +export type PaginationProviderPageCount = string | number; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface PaginationProviderRerender { + current?: (...args: any[]) => any; +} +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface PaginationProviderStore { + current?: Record | ((...args: any[]) => any); +} +export type PaginationProviderInternalContent = + | string + | ((...args: any[]) => any) + | React.ReactNode + | Record + | any[]; +export type PaginationProviderChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode + | Record + | any[]; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface PaginationProviderProps + extends React.HTMLProps { + /** + * The page shown in the very beginning. If `current_page` is set, then it may not make too much sense to set this as well. + */ + startup_page?: PaginationProviderStartupPage; + + /** + * The page shown at the moment the component renders. Defaults to `1`. + */ + current_page?: PaginationProviderCurrentPage; + + /** + * The total pages count. Defaults to `1`. + */ + page_count?: PaginationProviderPageCount; + + /** + * Callback function to get the `setContent` handler from the current pagination instance. e.g. `set_content_handler={fn => (...)}`. Use this handler to insert content during infinity mode. + */ + set_content_handler?: (...args: any[]) => any; + + /** + * Callback function to get the `resetContent` handler from the current pagination instance. e.g. `reset_content_handler={fn => (...)}`. Use this handler to reset all the content. You can set it to `true`, to programmatically reset the content. + */ + reset_content_handler?: (...args: any[]) => any; + + /** + * Callback function to get the `resetInfinity` handler from the current pagination instance. e.g. `reset_pagination_handler={fn => (...)}`. Use this handler to reset all the internal states. You can set it to `true`, to programmatically reset the states. + */ + reset_pagination_handler?: (...args: any[]) => any; + + /** + * Callback function to get the `endInfinity` handler from the current pagination instance. e.g. `end_infinity_handler={fn => (...)}`. Use this handler to end the infinity scrolling procedure, in case the `page_count` is unknown. + */ + end_infinity_handler?: (...args: any[]) => any; + rerender?: PaginationProviderRerender; + store?: PaginationProviderStore; + useMarkerOnly?: boolean; + internalContent?: PaginationProviderInternalContent; + + /** + * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section. + */ + children?: PaginationProviderChildren; +} +export default class PaginationProvider extends React.Component< + PaginationProviderProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/pagination/index.js b/packages/dnb-eufemia/src/components/pagination/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/pagination/index.js rename to packages/dnb-eufemia/src/components/pagination/index.ts diff --git a/packages/dnb-eufemia/src/components/pagination/style.js b/packages/dnb-eufemia/src/components/pagination/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/pagination/style.js rename to packages/dnb-eufemia/src/components/pagination/style.ts diff --git a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts new file mode 100644 index 00000000000..dc3bb21e758 --- /dev/null +++ b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicator.d.ts @@ -0,0 +1,146 @@ +import * as React from 'react'; +export type ProgressIndicatorVisible = string | boolean; +export type ProgressIndicatorType = 'circular' | 'linear'; +export type ProgressIndicatorNoAnimation = string | boolean; +export type ProgressIndicatorSize = + | 'default' + | 'small' + | 'medium' + | 'large' + | 'huge'; +export type ProgressIndicatorProgress = string | number; +export type ProgressIndicatorShowLabel = string | boolean; +export type ProgressIndicatorSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type ProgressIndicatorTop = string | number | boolean; +export type ProgressIndicatorRight = string | number | boolean; +export type ProgressIndicatorBottom = string | number | boolean; +export type ProgressIndicatorLeft = string | number | boolean; +export type ProgressIndicatorChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface ProgressIndicatorProps + extends React.HTMLProps { + /** + * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`. + */ + visible?: ProgressIndicatorVisible; + + /** + * Defines the "type" of progress, like `circular` or `linear`. Defaults to `circular`. + */ + type?: ProgressIndicatorType; + + /** + * Disables the fade-in and fade-out animation. Defaults to false. + */ + no_animation?: ProgressIndicatorNoAnimation; + + /** + * Defines the size, like `large` or `medium`. Defaults to `medium`. + */ + size?: ProgressIndicatorSize; + + /** + * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`. + */ + progress?: ProgressIndicatorProgress; + + /** + * Show a custom label to the right or under the indicator. + */ + label?: React.ReactNode; + + /** + * Set it to `vertical` if you want the label to be placed under the indicator. Defaults to `horizontal`. + */ + label_direction?: string; + + /** + * If set to `true` a default label will be shown. + */ + show_label?: ProgressIndicatorShowLabel; + indicator_label?: string; + + /** + * To enable the visual helper `.dnb-section` class. Use a supported modifier from the Section component. Defaults to null. + */ + section_style?: string; + + /** + * To modify the `spacing`. Use a supported modifier from the Section component. Defaults to null. + */ + section_spacing?: string; + + /** + * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. + */ + title?: string; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: ProgressIndicatorSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: ProgressIndicatorTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: ProgressIndicatorRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: ProgressIndicatorBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: ProgressIndicatorLeft; + class?: string; + className?: string; + children?: ProgressIndicatorChildren; + + /** + * Will be called once the `min_time` has timed out. + */ + on_complete?: (...args: any[]) => any; +} +export default class ProgressIndicator extends React.Component< + ProgressIndicatorProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts new file mode 100644 index 00000000000..4ac179eb1d4 --- /dev/null +++ b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorCircular.d.ts @@ -0,0 +1,39 @@ +import * as React from 'react'; +export type ProgressIndicatorCircularProgress = string | number; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface ProgressIndicatorCircularProps + extends React.HTMLProps { + /** + * Defines the size, like `large` or `medium`. Defaults to `medium`. + */ + size?: string; + + /** + * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`. + */ + visible?: boolean; + complete?: boolean; + + /** + * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`. + */ + progress?: ProgressIndicatorCircularProgress; + maxOffset?: number; + onComplete?: (...args: any[]) => any; + callOnCompleteHandler?: (...args: any[]) => any; + + /** + * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. + */ + title?: string; +} +export default class ProgressIndicatorCircular extends React.Component< + ProgressIndicatorCircularProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts new file mode 100644 index 00000000000..78f185c4dab --- /dev/null +++ b/packages/dnb-eufemia/src/components/progress-indicator/ProgressIndicatorLinear.d.ts @@ -0,0 +1,38 @@ +import * as React from 'react'; +export type ProgressIndicatorLinearProgress = string | number; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface ProgressIndicatorLinearProps + extends React.HTMLProps { + /** + * Defines the size, like `large` or `medium`. Defaults to `medium`. + */ + size?: string; + + /** + * Defines the visibility of the progress. Toggling the `visible` property to false will force a fade-out animation. Defaults to `true`. + */ + visible?: boolean; + complete?: boolean; + + /** + * To visualize a static "percentage" (0-100) as a progress state. Defaults to `null`. + */ + progress?: ProgressIndicatorLinearProgress; + onComplete?: (...args: any[]) => any; + callOnCompleteHandler?: (...args: any[]) => any; + + /** + * Used to set title and aria-label. Defaults to the value of progress property, formatted as a percent. + */ + title?: string; +} +export default class ProgressIndicatorLinear extends React.Component< + ProgressIndicatorLinearProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/progress-indicator/index.js b/packages/dnb-eufemia/src/components/progress-indicator/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/progress-indicator/index.js rename to packages/dnb-eufemia/src/components/progress-indicator/index.ts diff --git a/packages/dnb-eufemia/src/components/progress-indicator/style.js b/packages/dnb-eufemia/src/components/progress-indicator/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/progress-indicator/style.js rename to packages/dnb-eufemia/src/components/progress-indicator/style.ts diff --git a/packages/dnb-eufemia/src/components/radio/Radio.d.ts b/packages/dnb-eufemia/src/components/radio/Radio.d.ts new file mode 100644 index 00000000000..56f40da9ebd --- /dev/null +++ b/packages/dnb-eufemia/src/components/radio/Radio.d.ts @@ -0,0 +1,126 @@ +import * as React from 'react'; +import RadioGroup from './RadioGroup'; +export type RadioLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type RadioLabelSrOnly = string | boolean; +export type RadioLabelPosition = 'left' | 'right'; +export type RadioChecked = string | boolean; +export type RadioDisabled = string | boolean; +export type RadioSize = 'default' | 'medium' | 'large'; +export type RadioStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type RadioStatusNoAnimation = string | boolean; +export type RadioSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type RadioAttributes = string | Record; +export type RadioSkeleton = string | boolean; +export type RadioReadOnly = string | boolean; +export type RadioSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type RadioTop = string | number | boolean; +export type RadioRight = string | number | boolean; +export type RadioBottom = string | number | boolean; +export type RadioLeft = string | number | boolean; +export type RadioChildren = string | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface RadioProps extends React.HTMLProps { + /** + * Use either the `label` property or provide a custom one. + */ + label?: RadioLabel; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: RadioLabelSrOnly; + + /** + * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. + */ + label_position?: RadioLabelPosition; + + /** + * Determine whether the radio is checked or not. Default will be `false`. + */ + checked?: RadioChecked; + disabled?: RadioDisabled; + id?: string; + element?: React.ReactNode; + + /** + * Use a unique group identifier to define the Radio buttons that belongs together. + */ + group?: string; + + /** + * The size of the Radio button. For now there is "medium" (default) and "large". + */ + size?: RadioSize; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: RadioStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: RadioStatusNoAnimation; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + suffix?: RadioSuffix; + + /** + * (required) defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup". + */ + value?: string; + attributes?: RadioAttributes; + skeleton?: RadioSkeleton; + readOnly?: RadioReadOnly; + space?: RadioSpace; + top?: RadioTop; + right?: RadioRight; + bottom?: RadioBottom; + left?: RadioLeft; + class?: string; + className?: string; + children?: RadioChildren; + + /** + * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`. + */ + on_change?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; +} +export default class Radio extends React.Component { + static defaultProps: object; + static Group = RadioGroup; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts b/packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts new file mode 100644 index 00000000000..6c4354ee1de --- /dev/null +++ b/packages/dnb-eufemia/src/components/radio/RadioGroup.d.ts @@ -0,0 +1,125 @@ +import * as React from 'react'; +export type RadioGroupLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type RadioGroupLabelDirection = 'horizontal' | 'vertical'; +export type RadioGroupLabelSrOnly = string | boolean; +export type RadioGroupLabelPosition = 'left' | 'right'; +export type RadioGroupNoFieldset = string | boolean; +export type RadioGroupDisabled = string | boolean; +export type RadioGroupSkeleton = string | boolean; +export type RadioGroupSize = 'default' | 'medium' | 'large'; +export type RadioGroupStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type RadioGroupStatusNoAnimation = string | boolean; +export type RadioGroupSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type RadioGroupLayoutDirection = 'column' | 'row'; +export type RadioGroupVertical = string | boolean; +export type RadioGroupAttributes = string | Record; +export type RadioGroupSpace = + | string + | number + | boolean + | { + top?: string | number | boolean; + right?: string | number | boolean; + bottom?: string | number | boolean; + left?: string | number | boolean; + }; +export type RadioGroupTop = string | number | boolean; +export type RadioGroupRight = string | number | boolean; +export type RadioGroupBottom = string | number | boolean; +export type RadioGroupLeft = string | number | boolean; +export type RadioGroupChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface RadioGroupProps extends React.HTMLProps { + /** + * Use either the `label` property or provide a custom one. + */ + label?: RadioGroupLabel; + label_direction?: RadioGroupLabelDirection; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: RadioGroupLabelSrOnly; + + /** + * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. + */ + label_position?: RadioGroupLabelPosition; + title?: string; + no_fieldset?: RadioGroupNoFieldset; + disabled?: RadioGroupDisabled; + skeleton?: RadioGroupSkeleton; + id?: string; + name?: string; + + /** + * The size of the Radio button. For now there is "medium" (default) and "large". + */ + size?: RadioGroupSize; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: RadioGroupStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + status_no_animation?: RadioGroupStatusNoAnimation; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + suffix?: RadioGroupSuffix; + layout_direction?: RadioGroupLayoutDirection; + vertical?: RadioGroupVertical; + + /** + * (required) defines the `value` as a string. Use it to get the value during the `on_change` event listener callback in the "RadioGroup". + */ + value?: string; + attributes?: RadioGroupAttributes; + space?: RadioGroupSpace; + top?: RadioGroupTop; + right?: RadioGroupRight; + bottom?: RadioGroupBottom; + left?: RadioGroupLeft; + class?: string; + className?: string; + children?: RadioGroupChildren; + + /** + * Will be called on state changes made by the user. Returns a boolean and string `{ checked, value, event }`. + */ + on_change?: (...args: any[]) => any; +} +export default class RadioGroup extends React.Component< + RadioGroupProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/radio/index.js b/packages/dnb-eufemia/src/components/radio/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/radio/index.js rename to packages/dnb-eufemia/src/components/radio/index.ts diff --git a/packages/dnb-eufemia/src/components/radio/style.js b/packages/dnb-eufemia/src/components/radio/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/radio/style.js rename to packages/dnb-eufemia/src/components/radio/style.ts diff --git a/packages/dnb-eufemia/src/components/section/index.js b/packages/dnb-eufemia/src/components/section/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/section/index.js rename to packages/dnb-eufemia/src/components/section/index.ts diff --git a/packages/dnb-eufemia/src/components/section/style.js b/packages/dnb-eufemia/src/components/section/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/section/style.js rename to packages/dnb-eufemia/src/components/section/style.ts diff --git a/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts b/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts index 8a33c4d0e02..b8e82f2bac0 100644 --- a/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts +++ b/packages/dnb-eufemia/src/components/skeleton/Skeleton.d.ts @@ -39,10 +39,10 @@ export type SkeletonChildren = | string | ((...args: any[]) => any) | React.ReactNode; - /** * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". */ + export interface SkeletonProps extends React.HTMLProps { /** * Use `true` to enable/show the skeleton for the component used inside. Defaults to `false`. diff --git a/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts b/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts index 87bb197b68a..3cd77dfbb2b 100644 --- a/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts +++ b/packages/dnb-eufemia/src/components/skeleton/SkeletonHelper.d.ts @@ -1,17 +1,14 @@ import * as React from 'react'; import { SkeletonShow } from './Skeleton'; - export interface AutoSizeProps { __element?: React.ReactNode; children?: React.ReactNode; className?: string; style?: React.CSSProperties; } - export class AutoSize extends React.Component { render(): JSX.Element; } - export interface SkeletonContextProps { translation?: { Skeleton?: { @@ -22,15 +19,12 @@ export interface SkeletonContextProps { }; }; } - export type SkeletonMethods = 'shape' | 'font' | 'code'; - export const createSkeletonClass: ( method: SkeletonMethods, skeleton: SkeletonShow, context?: SkeletonContextProps ) => string; - export interface skeletonDOMAttributesContext { translation?: { Skeleton: { @@ -41,7 +35,6 @@ export interface skeletonDOMAttributesContext { }; }; } - export const skeletonDOMAttributes: ( params: React.HTMLProps, skeleton: boolean, diff --git a/packages/dnb-eufemia/src/components/skeleton/figures/Article.d.ts b/packages/dnb-eufemia/src/components/skeleton/figures/Article.d.ts new file mode 100644 index 00000000000..88a3af216b0 --- /dev/null +++ b/packages/dnb-eufemia/src/components/skeleton/figures/Article.d.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; +export type SkeletonArticleRows = string | number; +export type SkeletonArticleChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface SkeletonArticleProps + extends React.HTMLProps { + rows?: SkeletonArticleRows; + children?: SkeletonArticleChildren; +} +export default class SkeletonArticle extends React.Component< + SkeletonArticleProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/skeleton/figures/Circle.d.ts b/packages/dnb-eufemia/src/components/skeleton/figures/Circle.d.ts new file mode 100644 index 00000000000..90d55ade784 --- /dev/null +++ b/packages/dnb-eufemia/src/components/skeleton/figures/Circle.d.ts @@ -0,0 +1,20 @@ +import * as React from 'react'; +export type SkeletonCircleRows = string | number; +export type SkeletonCircleChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface SkeletonCircleProps extends React.HTMLProps { + rows?: SkeletonCircleRows; + children?: SkeletonCircleChildren; +} +export default class SkeletonCircle extends React.Component< + SkeletonCircleProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/skeleton/figures/Product.d.ts b/packages/dnb-eufemia/src/components/skeleton/figures/Product.d.ts new file mode 100644 index 00000000000..43d9d7cd6c0 --- /dev/null +++ b/packages/dnb-eufemia/src/components/skeleton/figures/Product.d.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; +export type SkeletonProductRows = string | number; +export type SkeletonProductChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface SkeletonProductProps + extends React.HTMLProps { + rows?: SkeletonProductRows; + children?: SkeletonProductChildren; +} +export default class SkeletonProduct extends React.Component< + SkeletonProductProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/skeleton/figures/Table.d.ts b/packages/dnb-eufemia/src/components/skeleton/figures/Table.d.ts new file mode 100644 index 00000000000..c7e5b28af07 --- /dev/null +++ b/packages/dnb-eufemia/src/components/skeleton/figures/Table.d.ts @@ -0,0 +1,20 @@ +import * as React from 'react'; +export type SkeletonTableRows = string | number; +export type SkeletonTableChildren = + | string + | ((...args: any[]) => any) + | React.ReactNode; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface SkeletonTableProps extends React.HTMLProps { + rows?: SkeletonTableRows; + children?: SkeletonTableChildren; +} +export default class SkeletonTable extends React.Component< + SkeletonTableProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/skeleton/index.js b/packages/dnb-eufemia/src/components/skeleton/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/skeleton/index.js rename to packages/dnb-eufemia/src/components/skeleton/index.ts diff --git a/packages/dnb-eufemia/src/components/skeleton/style.js b/packages/dnb-eufemia/src/components/skeleton/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/skeleton/style.js rename to packages/dnb-eufemia/src/components/skeleton/style.ts diff --git a/packages/dnb-eufemia/src/components/skip-content/index.js b/packages/dnb-eufemia/src/components/skip-content/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/skip-content/index.js rename to packages/dnb-eufemia/src/components/skip-content/index.ts diff --git a/packages/dnb-eufemia/src/components/skip-content/style.js b/packages/dnb-eufemia/src/components/skip-content/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/skip-content/style.js rename to packages/dnb-eufemia/src/components/skip-content/style.ts diff --git a/packages/dnb-eufemia/src/components/slider/index.js b/packages/dnb-eufemia/src/components/slider/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/slider/index.js rename to packages/dnb-eufemia/src/components/slider/index.ts diff --git a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx index 052cfaf9376..4884c0342da 100644 --- a/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx +++ b/packages/dnb-eufemia/src/components/slider/stories/Slider.stories.tsx @@ -141,7 +141,7 @@ const SliderStory = () => { { + on_change={({ value }) => { setValue(value as number) }} /> diff --git a/packages/dnb-eufemia/src/components/slider/style.js b/packages/dnb-eufemia/src/components/slider/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/slider/style.js rename to packages/dnb-eufemia/src/components/slider/style.ts diff --git a/packages/dnb-eufemia/src/components/space/index.js b/packages/dnb-eufemia/src/components/space/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/space/index.js rename to packages/dnb-eufemia/src/components/space/index.ts diff --git a/packages/dnb-eufemia/src/components/space/style.js b/packages/dnb-eufemia/src/components/space/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/space/style.js rename to packages/dnb-eufemia/src/components/space/style.ts diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts new file mode 100644 index 00000000000..6dfb2945c2a --- /dev/null +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicator.d.ts @@ -0,0 +1,156 @@ +import * as React from 'react'; +import StepIndicatorSidebar from './StepIndicatorSidebar'; +export type StepIndicatorMode = 'static' | 'strict' | 'loose'; +export type StepIndicatorData = + | string + | string[] + | { + title: string | React.ReactNode; + is_current?: boolean; + inactive?: boolean; + disabled?: boolean; + status?: string | React.ReactNode; + status_state?: 'warn' | 'info' | 'error'; + + /** + * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`. + */ + on_click?: (...args: any[]) => any; + on_render?: (...args: any[]) => any; + }[]; +export type StepIndicatorTitle = string | React.ReactNode; +export type StepIndicatorStatus = string | React.ReactNode; +export type StepIndicatorStatusState = 'warn' | 'info' | 'error'; +export type StepIndicatorCurrentStep = string | number; +export type StepIndicatorHideNumbers = string | boolean; +export type StepIndicatorNoAnimation = string | boolean; +export type StepIndicatorSkeleton = string | boolean; +export type StepIndicatorSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type StepIndicatorTop = string | number | boolean; +export type StepIndicatorRight = string | number | boolean; +export type StepIndicatorBottom = string | number | boolean; +export type StepIndicatorLeft = string | number | boolean; +export type StepIndicatorChildren = + | React.ReactNode + | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface StepIndicatorProps extends React.HTMLProps { + /** + * (required) a unique string-based ID in order to bind together the main component and the sidebar (``). Both have to get the same ID. + */ + sidebar_id?: string; + + /** + * (required) defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely. + */ + mode?: StepIndicatorMode; + + /** + * (required) defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above. + */ + data?: StepIndicatorData; + title: StepIndicatorTitle; + is_current?: boolean; + inactive?: boolean; + disabled?: boolean; + status?: StepIndicatorStatus; + status_state?: StepIndicatorStatusState; + + /** + * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`. + */ + on_click?: (...args: any[]) => any; + on_render?: (...args: any[]) => any; + overview_title?: string; + step_title_extended?: string; + step_title?: string; + + /** + * Defines the active number marked step starting by 0. Defaults to `0`. + */ + current_step?: StepIndicatorCurrentStep; + + /** + * Define whether to show automatically counted numbers or not. Defaults to `false`. + */ + hide_numbers?: StepIndicatorHideNumbers; + + /** + * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`. + */ + on_item_render?: (...args: any[]) => any; + + /** + * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false. + */ + no_animation?: StepIndicatorNoAnimation; + skeleton?: StepIndicatorSkeleton; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: StepIndicatorSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: StepIndicatorTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: StepIndicatorRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: StepIndicatorBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: StepIndicatorLeft; + class?: string; + className?: string; + children?: StepIndicatorChildren; + + /** + * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`. + */ + on_change?: (...args: any[]) => any; +} +export default class StepIndicator extends React.Component< + StepIndicatorProps, + any +> { + static defaultProps: object; + static Sidebar = StepIndicatorSidebar; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.d.ts new file mode 100644 index 00000000000..84b2845b1cc --- /dev/null +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorContext.d.ts @@ -0,0 +1,19 @@ +import * as React from 'react'; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface StepIndicatorProviderProps { + /** + * (required) a unique string-based ID in order to bind together the main component and the sidebar (``). Both have to get the same ID. + */ + sidebar_id: string; + children: React.ReactNode; + isSidebar?: boolean; +} +export class StepIndicatorProvider extends React.Component< + StepIndicatorProviderProps, + any +> { + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts new file mode 100644 index 00000000000..3f3625952b9 --- /dev/null +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorItem.d.ts @@ -0,0 +1,79 @@ +import * as React from 'react'; +export type StepIndicatorItemTitle = string | React.ReactNode; +export type StepIndicatorItemHideNumbers = string | boolean; +export type StepIndicatorItemStatus = string | React.ReactNode; +export type StepIndicatorItemStatusState = 'warn' | 'info' | 'error'; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface StepIndicatorItemProps + extends React.HTMLProps { + /** + * (required) defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely. + */ + mode?: string; + title: StepIndicatorItemTitle; + step_title?: string; + + /** + * Define whether to show automatically counted numbers or not. Defaults to `false`. + */ + hide_numbers?: StepIndicatorItemHideNumbers; + + /** + * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`. + */ + on_item_render?: (...args: any[]) => any; + + /** + * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`. + */ + on_change?: (...args: any[]) => any; + on_render?: (...args: any[]) => any; + + /** + * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`. + */ + on_click?: (...args: any[]) => any; + is_current?: boolean; + inactive?: boolean; + disabled?: boolean; + status?: StepIndicatorItemStatus; + status_state?: StepIndicatorItemStatusState; + currentItemNum: number; +} +export default class StepIndicatorItem extends React.Component< + StepIndicatorItemProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface StepItemButtonProps { + children?: React.ReactNode; + inner_ref?: Record; + className?: string; + status?: string; + status_state?: string; +} +export const StepItemButton: React.FC; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface StepItemWrapperProps { + children?: React.ReactNode; + number?: number; + + /** + * Define whether to show automatically counted numbers or not. Defaults to `false`. + */ + hide_numbers?: boolean; + status?: string; +} +export const StepItemWrapper: React.FC; diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts new file mode 100644 index 00000000000..879121a99f1 --- /dev/null +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorSidebar.d.ts @@ -0,0 +1,55 @@ +import * as React from 'react'; +export type StepIndicatorSidebarMode = 'static' | 'strict' | 'loose'; +export type StepIndicatorSidebarCurrentStep = string | number; +export type StepIndicatorSidebarData = + | string + | string[] + | { + title: string | React.ReactNode; + is_current?: boolean; + inactive?: boolean; + disabled?: boolean; + status?: string | React.ReactNode; + status_state?: 'warn' | 'info' | 'error'; + + /** + * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`. + */ + on_click?: (...args: any[]) => any; + on_render?: (...args: any[]) => any; + }[]; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface StepIndicatorSidebarProps + extends React.HTMLProps { + /** + * (required) a unique string-based ID in order to bind together the main component and the sidebar (``). Both have to get the same ID. + */ + sidebar_id: string; + + /** + * (required) defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely. + */ + mode?: StepIndicatorSidebarMode; + + /** + * Defines the active number marked step starting by 0. Defaults to `0`. + */ + current_step?: StepIndicatorSidebarCurrentStep; + + /** + * (required) defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above. + */ + data?: StepIndicatorSidebarData; + internalId?: string; + showInitialData?: boolean; +} +export default class StepIndicatorSidebar extends React.Component< + StepIndicatorSidebarProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorTriggerButton.d.ts b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorTriggerButton.d.ts new file mode 100644 index 00000000000..cd52ccca8ed --- /dev/null +++ b/packages/dnb-eufemia/src/components/step-indicator/StepIndicatorTriggerButton.d.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface StepIndicatorTriggerButtonProps + extends React.HTMLProps { + /** + * (required) a unique string-based ID in order to bind together the main component and the sidebar (``). Both have to get the same ID. + */ + sidebar_id?: string; + className?: string; + inner_ref?: Record; +} +export default class StepIndicatorTriggerButton extends React.Component< + StepIndicatorTriggerButtonProps, + any +> { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/step-indicator/index.js b/packages/dnb-eufemia/src/components/step-indicator/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/step-indicator/index.js rename to packages/dnb-eufemia/src/components/step-indicator/index.ts diff --git a/packages/dnb-eufemia/src/components/step-indicator/style.js b/packages/dnb-eufemia/src/components/step-indicator/style.ts similarity index 100% rename from packages/dnb-eufemia/src/components/step-indicator/style.js rename to packages/dnb-eufemia/src/components/step-indicator/style.ts diff --git a/packages/dnb-eufemia/src/components/style/index.js b/packages/dnb-eufemia/src/components/style/index.ts similarity index 100% rename from packages/dnb-eufemia/src/components/style/index.js rename to packages/dnb-eufemia/src/components/style/index.ts diff --git a/packages/dnb-eufemia/src/components/switch/Switch.d.ts b/packages/dnb-eufemia/src/components/switch/Switch.d.ts new file mode 100644 index 00000000000..8de8ae2d2ce --- /dev/null +++ b/packages/dnb-eufemia/src/components/switch/Switch.d.ts @@ -0,0 +1,166 @@ +import * as React from 'react'; +export type SwitchLabel = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type SwitchLabelPosition = 'left' | 'right'; +export type SwitchChecked = string | boolean; +export type SwitchDisabled = string | boolean; +export type SwitchSize = 'default' | 'medium' | 'large'; +export type SwitchStatus = + | string + | boolean + | ((...args: any[]) => any) + | React.ReactNode; +export type SwitchStatusNoAnimation = string | boolean; +export type SwitchSuffix = + | string + | ((...args: any[]) => any) + | React.ReactNode; +export type SwitchAttributes = string | Record; +export type SwitchReadOnly = string | boolean; +export type SwitchSkeleton = string | boolean; +export type SwitchSpace = + | string + | number + | boolean + | { + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: string | number | boolean; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: string | number | boolean; + }; +export type SwitchTop = string | number | boolean; +export type SwitchRight = string | number | boolean; +export type SwitchBottom = string | number | boolean; +export type SwitchLeft = string | number | boolean; +export type SwitchChildren = string | ((...args: any[]) => any); +/** + * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js". + */ + +export interface SwitchProps extends React.HTMLProps { + /** + * Use either the `label` property or provide a custom one. + */ + label?: SwitchLabel; + + /** + * Defines the position of the `label`. Use either `left` or `right`. Defaults to `right`. + */ + label_position?: SwitchLabelPosition; + + /** + * Use `true` to make the label only readable by screen readers. + */ + label_sr_only?: boolean; + + /** + * (required) the `title` of the input - describing it a bit further for accessibility reasons. + */ + title?: string; + + /** + * Determine whether the switch is checked or not. The default will be `false`. + */ + checked?: SwitchChecked; + disabled?: SwitchDisabled; + id?: string; + + /** + * The size of the switch. For now there is "medium" (default) and "large". + */ + size?: SwitchSize; + + /** + * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message. + */ + status?: SwitchStatus; + + /** + * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`. + */ + status_state?: string; + + /** + * Use an object to define additional FormStatus properties. + */ + status_props?: Record; + + /** + * The `status_id` used for the target GlobalStatus. + */ + global_status_id?: string; + status_no_animation?: SwitchStatusNoAnimation; + + /** + * Text describing the content of the Switch more than the label. You can also send in a React component, so it gets wrapped inside the Switch component. + */ + suffix?: SwitchSuffix; + value?: string; + attributes?: SwitchAttributes; + readOnly?: SwitchReadOnly; + + /** + * If set to `true`, an overlaying skeleton with animation will be shown. + */ + skeleton?: SwitchSkeleton; + + /** + * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`. + */ + space?: SwitchSpace; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`. + */ + top?: SwitchTop; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`. + */ + right?: SwitchRight; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`. + */ + bottom?: SwitchBottom; + + /** + * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`. + */ + left?: SwitchLeft; + class?: string; + className?: string; + children?: SwitchChildren; + + /** + * Will be called on state changes made by the user. Returns a boolean `{ checked, event }`. + */ + on_change?: (...args: any[]) => any; + + /** + * Will be called on state changes made by the user, but with a delay. This way the user sees the animation before e.g. an error will be removed. Returns a boolean `{ checked, event }`. + */ + on_change_end?: (...args: any[]) => any; + on_state_update?: (...args: any[]) => any; +} +export default class Switch extends React.Component { + static defaultProps: object; + render(): JSX.Element; +} diff --git a/packages/dnb-eufemia/src/components/switch/Switch.js b/packages/dnb-eufemia/src/components/switch/Switch.js index ac78ebf2291..e740a26b78e 100644 --- a/packages/dnb-eufemia/src/components/switch/Switch.js +++ b/packages/dnb-eufemia/src/components/switch/Switch.js @@ -45,6 +45,7 @@ export default class Switch extends React.PureComponent { PropTypes.node, ]), label_position: PropTypes.oneOf(['left', 'right']), + label_sr_only: PropTypes.bool, title: PropTypes.string, checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), @@ -87,6 +88,7 @@ export default class Switch extends React.PureComponent { static defaultProps = { label: null, label_position: null, + label_sr_only: null, title: null, checked: null, disabled: null, diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap index e97f1bed62e..196ac3c133c 100644 --- a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap +++ b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap @@ -12,6 +12,7 @@ exports[`Switch component have to match snapshot 1`] = ` label="label" label_direction="horizontal" label_position="left" + label_sr_only={true} on_change={[Function]} on_change_end={[Function]} on_state_update={[Function]} @@ -41,14 +42,14 @@ exports[`Switch component have to match snapshot 1`] = ` id="id-label" label_direction={null} skeleton="skeleton" - sr_only={null} + sr_only={true} text="label" title={null} vertical={null} >