@navikt/ds-react 0.19.25 → 1.0.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +43 -0
- package/_docs.json +364 -520
- package/cjs/accordion/Accordion.js +2 -2
- package/cjs/accordion/AccordionContent.js +5 -9
- package/cjs/accordion/AccordionHeader.js +5 -10
- package/cjs/accordion/AccordionItem.js +3 -7
- package/cjs/alert/Alert.js +2 -2
- package/cjs/button/Button.js +9 -7
- package/cjs/{speech-bubble → chat}/Bubble.js +7 -4
- package/cjs/{speech-bubble/SpeechBubble.js → chat/Chat.js} +11 -10
- package/cjs/{menu → chat}/index.js +3 -3
- package/cjs/chat/package.json +6 -0
- package/cjs/form/ConfirmationPanel.js +3 -3
- package/cjs/form/Fieldset/Fieldset.js +6 -6
- package/cjs/form/Select.js +6 -6
- package/cjs/form/Switch.js +4 -4
- package/cjs/form/TextField.js +6 -6
- package/cjs/form/Textarea.js +14 -14
- package/cjs/form/checkbox/Checkbox.js +3 -3
- package/cjs/form/checkbox/CheckboxGroup.js +2 -2
- package/cjs/form/error-summary/ErrorSummary.js +3 -3
- package/cjs/form/error-summary/ErrorSummaryItem.js +2 -2
- package/cjs/form/radio/Radio.js +2 -2
- package/cjs/form/radio/RadioGroup.js +2 -2
- package/cjs/form/search/Search.js +6 -7
- package/cjs/form/search/SearchButton.js +2 -4
- package/cjs/form/useFormField.js +2 -2
- package/cjs/grid/Cell.js +2 -2
- package/cjs/grid/ContentContainer.js +2 -2
- package/cjs/grid/Grid.js +2 -2
- package/cjs/guide-panel/Guide.js +3 -3
- package/cjs/guide-panel/GuidePanel.js +2 -2
- package/cjs/help-text/HelpText.js +5 -5
- package/cjs/index.js +1 -6
- package/cjs/link/Link.js +2 -2
- package/cjs/link-panel/LinkPanel.js +2 -2
- package/cjs/link-panel/LinkPanelDescription.js +2 -2
- package/cjs/link-panel/LinkPanelTitle.js +2 -2
- package/cjs/loader/Loader.js +2 -2
- package/cjs/modal/Modal.js +5 -7
- package/cjs/modal/ModalContent.js +2 -2
- package/cjs/pagination/Pagination.js +18 -23
- package/cjs/{menu/MenuItem.js → pagination/PaginationItem.js} +5 -4
- package/cjs/panel/Panel.js +2 -2
- package/cjs/popover/Popover.js +55 -45
- package/cjs/popover/PopoverContent.js +2 -2
- package/cjs/read-more/ReadMore.js +7 -11
- package/cjs/stepper/Step.js +2 -2
- package/cjs/stepper/Stepper.js +3 -3
- package/cjs/table/Body.js +2 -2
- package/cjs/table/DataCell.js +2 -2
- package/cjs/table/ExpandableRow.js +9 -12
- package/cjs/table/Header.js +2 -2
- package/cjs/table/HeaderCell.js +2 -2
- package/cjs/table/Row.js +2 -2
- package/cjs/table/Table.js +2 -2
- package/cjs/tabs/Tab.js +4 -4
- package/cjs/tabs/TabList.js +8 -7
- package/cjs/tabs/TabPanel.js +2 -2
- package/cjs/tabs/Tabs.js +5 -3
- package/cjs/tag/Tag.js +2 -2
- package/cjs/toggle-group/ToggleGroup.js +5 -5
- package/cjs/toggle-group/ToggleItem.js +2 -2
- package/cjs/tooltip/Tooltip.js +45 -92
- package/cjs/typography/BodyLong.js +2 -2
- package/cjs/typography/BodyShort.js +2 -2
- package/cjs/typography/Detail.js +2 -2
- package/cjs/typography/ErrorMessage.js +2 -2
- package/cjs/typography/Heading.js +2 -2
- package/cjs/typography/Ingress.js +2 -2
- package/cjs/typography/Label.js +2 -2
- package/cjs/util/AnimateHeight.js +204 -0
- package/cjs/util/TextareaAutoSize.js +174 -0
- package/cjs/util/debounce.js +18 -0
- package/cjs/util/index.js +14 -1
- package/cjs/util/mergeRefs.js +16 -0
- package/cjs/util/useId.js +60 -17
- package/esm/accordion/Accordion.js +1 -1
- package/esm/accordion/Accordion.js.map +1 -1
- package/esm/accordion/AccordionContent.d.ts +0 -2
- package/esm/accordion/AccordionContent.js +5 -9
- package/esm/accordion/AccordionContent.js.map +1 -1
- package/esm/accordion/AccordionHeader.js +5 -10
- package/esm/accordion/AccordionHeader.js.map +1 -1
- package/esm/accordion/AccordionItem.d.ts +0 -8
- package/esm/accordion/AccordionItem.js +2 -6
- package/esm/accordion/AccordionItem.js.map +1 -1
- package/esm/alert/Alert.d.ts +1 -1
- package/esm/alert/Alert.js +1 -1
- package/esm/alert/Alert.js.map +1 -1
- package/esm/button/Button.d.ts +10 -1
- package/esm/button/Button.js +10 -8
- package/esm/button/Button.js.map +1 -1
- package/esm/{speech-bubble → chat}/Bubble.d.ts +7 -3
- package/esm/{speech-bubble → chat}/Bubble.js +7 -4
- package/esm/chat/Bubble.js.map +1 -0
- package/esm/chat/Chat.d.ts +38 -0
- package/esm/chat/Chat.js +28 -0
- package/esm/chat/Chat.js.map +1 -0
- package/esm/chat/index.d.ts +1 -0
- package/esm/chat/index.js +2 -0
- package/esm/chat/index.js.map +1 -0
- package/esm/form/ConfirmationPanel.d.ts +1 -1
- package/esm/form/ConfirmationPanel.js +3 -3
- package/esm/form/ConfirmationPanel.js.map +1 -1
- package/esm/form/Fieldset/Fieldset.js +1 -1
- package/esm/form/Fieldset/Fieldset.js.map +1 -1
- package/esm/form/Select.js +1 -1
- package/esm/form/Select.js.map +1 -1
- package/esm/form/Switch.js +1 -1
- package/esm/form/Switch.js.map +1 -1
- package/esm/form/TextField.js +1 -1
- package/esm/form/TextField.js.map +1 -1
- package/esm/form/Textarea.js +6 -6
- package/esm/form/Textarea.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +1 -1
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/checkbox/CheckboxGroup.js +1 -1
- package/esm/form/checkbox/CheckboxGroup.js.map +1 -1
- package/esm/form/error-summary/ErrorSummary.js +3 -3
- package/esm/form/error-summary/ErrorSummary.js.map +1 -1
- package/esm/form/error-summary/ErrorSummaryItem.js +1 -1
- package/esm/form/error-summary/ErrorSummaryItem.js.map +1 -1
- package/esm/form/radio/Radio.js +1 -1
- package/esm/form/radio/Radio.js.map +1 -1
- package/esm/form/radio/RadioGroup.js +1 -1
- package/esm/form/radio/RadioGroup.js.map +1 -1
- package/esm/form/search/Search.js +4 -5
- package/esm/form/search/Search.js.map +1 -1
- package/esm/form/search/SearchButton.d.ts +1 -1
- package/esm/form/search/SearchButton.js +2 -4
- package/esm/form/search/SearchButton.js.map +1 -1
- package/esm/form/useFormField.js +1 -1
- package/esm/form/useFormField.js.map +1 -1
- package/esm/grid/Cell.js +1 -1
- package/esm/grid/Cell.js.map +1 -1
- package/esm/grid/ContentContainer.js +1 -1
- package/esm/grid/ContentContainer.js.map +1 -1
- package/esm/grid/Grid.js +1 -1
- package/esm/grid/Grid.js.map +1 -1
- package/esm/guide-panel/Guide.js +1 -1
- package/esm/guide-panel/Guide.js.map +1 -1
- package/esm/guide-panel/GuidePanel.js +1 -1
- package/esm/guide-panel/GuidePanel.js.map +1 -1
- package/esm/help-text/HelpText.d.ts +1 -2
- package/esm/help-text/HelpText.js +7 -7
- package/esm/help-text/HelpText.js.map +1 -1
- package/esm/index.d.ts +1 -5
- package/esm/index.js +1 -6
- package/esm/index.js.map +1 -1
- package/esm/link/Link.js +1 -1
- package/esm/link/Link.js.map +1 -1
- package/esm/link-panel/LinkPanel.js +1 -1
- package/esm/link-panel/LinkPanel.js.map +1 -1
- package/esm/link-panel/LinkPanelDescription.js +1 -1
- package/esm/link-panel/LinkPanelDescription.js.map +1 -1
- package/esm/link-panel/LinkPanelTitle.js +1 -1
- package/esm/link-panel/LinkPanelTitle.js.map +1 -1
- package/esm/loader/Loader.js +1 -1
- package/esm/loader/Loader.js.map +1 -1
- package/esm/modal/Modal.js +5 -7
- package/esm/modal/Modal.js.map +1 -1
- package/esm/modal/ModalContent.js +1 -1
- package/esm/modal/ModalContent.js.map +1 -1
- package/esm/pagination/Pagination.d.ts +12 -3
- package/esm/pagination/Pagination.js +17 -22
- package/esm/pagination/Pagination.js.map +1 -1
- package/esm/pagination/PaginationItem.d.ts +22 -0
- package/esm/{menu/MenuItem.js → pagination/PaginationItem.js} +6 -5
- package/esm/pagination/PaginationItem.js.map +1 -0
- package/esm/pagination/index.d.ts +1 -2
- package/esm/pagination/index.js.map +1 -1
- package/esm/panel/Panel.js +1 -1
- package/esm/panel/Panel.js.map +1 -1
- package/esm/popover/Popover.d.ts +2 -3
- package/esm/popover/Popover.js +56 -46
- package/esm/popover/Popover.js.map +1 -1
- package/esm/popover/PopoverContent.js +1 -1
- package/esm/popover/PopoverContent.js.map +1 -1
- package/esm/read-more/ReadMore.d.ts +0 -5
- package/esm/read-more/ReadMore.js +7 -11
- package/esm/read-more/ReadMore.js.map +1 -1
- package/esm/stepper/Step.js +1 -1
- package/esm/stepper/Step.js.map +1 -1
- package/esm/stepper/Stepper.js +1 -1
- package/esm/stepper/Stepper.js.map +1 -1
- package/esm/table/Body.js +1 -1
- package/esm/table/Body.js.map +1 -1
- package/esm/table/DataCell.js +1 -1
- package/esm/table/DataCell.js.map +1 -1
- package/esm/table/ExpandableRow.js +7 -10
- package/esm/table/ExpandableRow.js.map +1 -1
- package/esm/table/Header.js +1 -1
- package/esm/table/Header.js.map +1 -1
- package/esm/table/HeaderCell.js +1 -1
- package/esm/table/HeaderCell.js.map +1 -1
- package/esm/table/Row.js +1 -1
- package/esm/table/Row.js.map +1 -1
- package/esm/table/Table.js +1 -1
- package/esm/table/Table.js.map +1 -1
- package/esm/tabs/Tab.d.ts +0 -5
- package/esm/tabs/Tab.js +5 -5
- package/esm/tabs/Tab.js.map +1 -1
- package/esm/tabs/TabList.d.ts +0 -4
- package/esm/tabs/TabList.js +7 -6
- package/esm/tabs/TabList.js.map +1 -1
- package/esm/tabs/TabPanel.js +1 -1
- package/esm/tabs/TabPanel.js.map +1 -1
- package/esm/tabs/Tabs.d.ts +12 -0
- package/esm/tabs/Tabs.js +4 -2
- package/esm/tabs/Tabs.js.map +1 -1
- package/esm/tag/Tag.js +1 -1
- package/esm/tag/Tag.js.map +1 -1
- package/esm/toggle-group/ToggleGroup.js +3 -3
- package/esm/toggle-group/ToggleGroup.js.map +1 -1
- package/esm/toggle-group/ToggleItem.js +1 -1
- package/esm/toggle-group/ToggleItem.js.map +1 -1
- package/esm/tooltip/Tooltip.js +44 -91
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/esm/typography/BodyLong.js +1 -1
- package/esm/typography/BodyLong.js.map +1 -1
- package/esm/typography/BodyShort.js +1 -1
- package/esm/typography/BodyShort.js.map +1 -1
- package/esm/typography/Detail.js +1 -1
- package/esm/typography/Detail.js.map +1 -1
- package/esm/typography/ErrorMessage.js +1 -1
- package/esm/typography/ErrorMessage.js.map +1 -1
- package/esm/typography/Heading.js +1 -1
- package/esm/typography/Heading.js.map +1 -1
- package/esm/typography/Ingress.js +1 -1
- package/esm/typography/Ingress.js.map +1 -1
- package/esm/typography/Label.js +1 -1
- package/esm/typography/Label.js.map +1 -1
- package/esm/util/AnimateHeight.d.ts +10 -0
- package/esm/util/AnimateHeight.js +180 -0
- package/esm/util/AnimateHeight.js.map +1 -0
- package/esm/util/TextareaAutoSize.d.ts +14 -0
- package/esm/util/TextareaAutoSize.js +150 -0
- package/esm/util/TextareaAutoSize.js.map +1 -0
- package/esm/util/debounce.d.ts +4 -0
- package/esm/util/debounce.js +16 -0
- package/esm/util/debounce.js.map +1 -0
- package/esm/util/index.d.ts +4 -0
- package/esm/util/index.js +9 -1
- package/esm/util/index.js.map +1 -1
- package/esm/util/mergeRefs.d.ts +2 -0
- package/esm/util/mergeRefs.js +14 -0
- package/esm/util/mergeRefs.js.map +1 -0
- package/esm/util/useId.d.ts +7 -3
- package/esm/util/useId.js +36 -16
- package/esm/util/useId.js.map +1 -1
- package/package.json +13 -15
- package/src/accordion/Accordion.tsx +1 -1
- package/src/accordion/AccordionContent.tsx +13 -19
- package/src/accordion/AccordionHeader.tsx +11 -18
- package/src/accordion/AccordionItem.tsx +2 -23
- package/src/accordion/accordion.stories.tsx +30 -31
- package/src/alert/Alert.tsx +2 -2
- package/src/alert/alert.stories.tsx +7 -0
- package/src/button/Button.tsx +39 -14
- package/src/button/button.stories.tsx +55 -28
- package/src/chat/Bubble.tsx +52 -0
- package/src/chat/Chat.tsx +96 -0
- package/src/chat/chat.stories.tsx +202 -0
- package/src/chat/index.ts +1 -0
- package/src/form/ConfirmationPanel.tsx +9 -4
- package/src/form/Fieldset/Fieldset.tsx +1 -1
- package/src/form/Select.tsx +1 -1
- package/src/form/Switch.tsx +1 -1
- package/src/form/TextField.tsx +1 -1
- package/src/form/Textarea.tsx +6 -6
- package/src/form/checkbox/Checkbox.test.tsx +20 -17
- package/src/form/checkbox/Checkbox.tsx +1 -1
- package/src/form/checkbox/CheckboxGroup.tsx +1 -1
- package/src/form/error-summary/ErrorSummary.tsx +3 -3
- package/src/form/error-summary/ErrorSummaryItem.tsx +1 -1
- package/src/form/radio/Radio.tsx +1 -1
- package/src/form/radio/RadioGroup.tsx +1 -1
- package/src/form/search/Search.tsx +11 -4
- package/src/form/search/SearchButton.tsx +8 -4
- package/src/form/useFormField.ts +1 -1
- package/src/grid/Cell.tsx +1 -1
- package/src/grid/ContentContainer.tsx +1 -1
- package/src/grid/Grid.tsx +1 -1
- package/src/grid/grid.stories.tsx +68 -0
- package/src/guide-panel/Guide.tsx +1 -1
- package/src/guide-panel/GuidePanel.tsx +1 -1
- package/src/help-text/HelpText.tsx +22 -8
- package/src/help-text/help-text.stories.tsx +12 -16
- package/src/index.ts +1 -7
- package/src/link/Link.tsx +1 -1
- package/src/link-panel/LinkPanel.tsx +1 -1
- package/src/link-panel/LinkPanelDescription.tsx +1 -1
- package/src/link-panel/LinkPanelTitle.tsx +1 -1
- package/src/loader/Loader.tsx +1 -1
- package/src/modal/Modal.tsx +6 -8
- package/src/modal/ModalContent.tsx +1 -1
- package/src/pagination/Pagination.tsx +87 -72
- package/src/pagination/PaginationItem.tsx +56 -0
- package/src/pagination/index.ts +1 -2
- package/src/pagination/pagination.stories.tsx +90 -16
- package/src/panel/Panel.tsx +1 -1
- package/src/popover/Popover.test.tsx +143 -0
- package/src/popover/Popover.tsx +107 -73
- package/src/popover/PopoverContent.tsx +1 -1
- package/src/popover/popover.stories.tsx +22 -27
- package/src/read-more/ReadMore.tsx +19 -30
- package/src/read-more/readmore.stories.tsx +3 -10
- package/src/stepper/Step.tsx +1 -1
- package/src/stepper/Stepper.tsx +1 -1
- package/src/table/Body.tsx +1 -1
- package/src/table/DataCell.tsx +1 -1
- package/src/table/ExpandableRow.tsx +12 -13
- package/src/table/Header.tsx +1 -1
- package/src/table/HeaderCell.tsx +1 -1
- package/src/table/Row.tsx +1 -1
- package/src/table/Table.tsx +1 -1
- package/src/tabs/Tab.tsx +6 -19
- package/src/tabs/TabList.tsx +14 -9
- package/src/tabs/TabPanel.tsx +1 -1
- package/src/tabs/Tabs.stories.tsx +94 -117
- package/src/tabs/Tabs.tsx +17 -1
- package/src/tag/Tag.tsx +1 -1
- package/src/toggle-group/ToggleGroup.tsx +3 -3
- package/src/toggle-group/ToggleItem.tsx +1 -1
- package/src/tooltip/Tooltip.test.tsx +167 -0
- package/src/tooltip/Tooltip.tsx +106 -173
- package/src/tooltip/tooltip.stories.tsx +15 -1
- package/src/typography/BodyLong.tsx +1 -1
- package/src/typography/BodyShort.tsx +1 -1
- package/src/typography/Detail.tsx +1 -1
- package/src/typography/ErrorMessage.tsx +1 -1
- package/src/typography/Heading.tsx +1 -1
- package/src/typography/Ingress.tsx +1 -1
- package/src/typography/Label.tsx +1 -1
- package/src/util/AnimateHeight.tsx +240 -0
- package/src/util/TextareaAutoSize.tsx +224 -0
- package/src/util/debounce.ts +17 -0
- package/src/util/index.ts +14 -2
- package/src/util/mergeRefs.tsx +14 -0
- package/src/util/useId.ts +37 -20
- package/cjs/card/MicroCard.js +0 -47
- package/cjs/card/index.js +0 -8
- package/cjs/card/package.json +0 -6
- package/cjs/menu/Menu.js +0 -53
- package/cjs/menu/MenuCollapse.js +0 -65
- package/cjs/menu/MenuItems.js +0 -23
- package/cjs/menu/package.json +0 -6
- package/cjs/page-header/PageHeader.js +0 -51
- package/cjs/page-header/index.js +0 -8
- package/cjs/page-header/package.json +0 -6
- package/cjs/speech-bubble/index.js +0 -8
- package/cjs/speech-bubble/package.json +0 -6
- package/cjs/step-indicator/Step.js +0 -67
- package/cjs/step-indicator/StepIndicator.js +0 -80
- package/cjs/step-indicator/index.js +0 -8
- package/cjs/step-indicator/package.json +0 -6
- package/esm/card/MicroCard.d.ts +0 -10
- package/esm/card/MicroCard.js +0 -19
- package/esm/card/MicroCard.js.map +0 -1
- package/esm/card/index.d.ts +0 -2
- package/esm/card/index.js +0 -2
- package/esm/card/index.js.map +0 -1
- package/esm/menu/Menu.d.ts +0 -12
- package/esm/menu/Menu.js +0 -25
- package/esm/menu/Menu.js.map +0 -1
- package/esm/menu/MenuCollapse.d.ts +0 -12
- package/esm/menu/MenuCollapse.js +0 -37
- package/esm/menu/MenuCollapse.js.map +0 -1
- package/esm/menu/MenuItem.d.ts +0 -13
- package/esm/menu/MenuItem.js.map +0 -1
- package/esm/menu/MenuItems.d.ts +0 -6
- package/esm/menu/MenuItems.js +0 -19
- package/esm/menu/MenuItems.js.map +0 -1
- package/esm/menu/index.d.ts +0 -3
- package/esm/menu/index.js +0 -2
- package/esm/menu/index.js.map +0 -1
- package/esm/page-header/PageHeader.d.ts +0 -27
- package/esm/page-header/PageHeader.js +0 -24
- package/esm/page-header/PageHeader.js.map +0 -1
- package/esm/page-header/index.d.ts +0 -2
- package/esm/page-header/index.js +0 -2
- package/esm/page-header/index.js.map +0 -1
- package/esm/speech-bubble/Bubble.js.map +0 -1
- package/esm/speech-bubble/SpeechBubble.d.ts +0 -34
- package/esm/speech-bubble/SpeechBubble.js +0 -27
- package/esm/speech-bubble/SpeechBubble.js.map +0 -1
- package/esm/speech-bubble/index.d.ts +0 -1
- package/esm/speech-bubble/index.js +0 -2
- package/esm/speech-bubble/index.js.map +0 -1
- package/esm/step-indicator/Step.d.ts +0 -23
- package/esm/step-indicator/Step.js +0 -39
- package/esm/step-indicator/Step.js.map +0 -1
- package/esm/step-indicator/StepIndicator.d.ts +0 -41
- package/esm/step-indicator/StepIndicator.js +0 -52
- package/esm/step-indicator/StepIndicator.js.map +0 -1
- package/esm/step-indicator/index.d.ts +0 -1
- package/esm/step-indicator/index.js +0 -2
- package/esm/step-indicator/index.js.map +0 -1
- package/src/card/MicroCard.tsx +0 -32
- package/src/card/index.ts +0 -2
- package/src/card/stories/card.stories.mdx +0 -26
- package/src/card/stories/card.stories.tsx +0 -16
- package/src/grid/stories/grid.stories.mdx +0 -79
- package/src/grid/stories/grid.stories.tsx +0 -51
- package/src/grid/stories/styles.css +0 -21
- package/src/menu/Menu.tsx +0 -36
- package/src/menu/MenuCollapse.tsx +0 -80
- package/src/menu/MenuItem.tsx +0 -39
- package/src/menu/MenuItems.tsx +0 -21
- package/src/menu/index.ts +0 -3
- package/src/menu/stories/menu.stories.mdx +0 -93
- package/src/menu/stories/menu.stories.tsx +0 -139
- package/src/page-header/PageHeader.tsx +0 -72
- package/src/page-header/index.ts +0 -2
- package/src/page-header/stories/header.stories.mdx +0 -81
- package/src/page-header/stories/header.stories.tsx +0 -61
- package/src/page-header/stories/pictogram.tsx +0 -14
- package/src/speech-bubble/Bubble.tsx +0 -48
- package/src/speech-bubble/SpeechBubble.tsx +0 -93
- package/src/speech-bubble/index.ts +0 -1
- package/src/speech-bubble/stories/illustration.tsx +0 -66
- package/src/speech-bubble/stories/speechbubble.stories.mdx +0 -184
- package/src/speech-bubble/stories/speechbubble.stories.tsx +0 -104
- package/src/step-indicator/Step.tsx +0 -81
- package/src/step-indicator/StepIndicator.tsx +0 -148
- package/src/step-indicator/index.ts +0 -1
- package/src/step-indicator/stories/Example.tsx +0 -23
- package/src/step-indicator/stories/step-indicator.stories.mdx +0 -122
- package/src/step-indicator/stories/step-indicator.stories.tsx +0 -104
package/README.md
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# NAV React-components
|
|
2
|
+
|
|
3
|
+
All of NAVs core React-components
|
|
4
|
+
|
|
5
|
+
- Uses styling from `@navikt/ds-css`
|
|
6
|
+
- All components implemented with React.forwardRef!
|
|
7
|
+
- Most components extend native html-elements.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
Install `@navikt/ds-react` with yarn
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @navikt/ds-react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Install `@navikt/ds-react` with npm
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm install @navikt/ds-react
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Usage
|
|
24
|
+
|
|
25
|
+
Remember to also import @navikt/ds-css to apply styling!
|
|
26
|
+
|
|
27
|
+
```javascript
|
|
28
|
+
import { Button } from "@navikt/ds-react";
|
|
29
|
+
|
|
30
|
+
function App() {
|
|
31
|
+
return <Button variant="secondary">Click me!</Button>;
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Learn more
|
|
36
|
+
|
|
37
|
+
- [Designsystem documentation](https://aksel.nav.no/designsystem)
|
|
38
|
+
- [Component-docs](https://aksel.nav.no/designsystem/side/oversikt-komponenter)
|
|
39
|
+
- [Storybook](https://master--5f801fb2aea7820022de2936.chromatic.com/)
|
|
40
|
+
|
|
41
|
+
## License
|
|
42
|
+
|
|
43
|
+
[MIT](https://github.com/navikt/Designsystemet/blob/master/LICENCE)
|