@dfds-ui/react-components 2.0.23-alpha.fcaa34df → 2.0.24-alpha.0815746b
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/app-bar/AppBarItem.d.ts +1 -1
- package/assertions/toast/Toast.d.ts +2 -1
- package/assertions/toast/Toast.js +10 -8
- package/cjs/accordion/Accordion.d.ts +101 -0
- package/cjs/accordion/AccordionContent.d.ts +13 -0
- package/cjs/accordion/AccordionSmall.d.ts +55 -0
- package/cjs/accordion/index.d.ts +3 -0
- package/cjs/app-bar/AppBar.d.ts +13 -0
- package/cjs/app-bar/AppBarContext.d.ts +12 -0
- package/cjs/app-bar/AppBarDrawer.d.ts +5 -0
- package/cjs/app-bar/AppBarIconButton.d.ts +10 -0
- package/cjs/app-bar/AppBarItem.d.ts +23 -0
- package/cjs/app-bar/AppBarListItem.d.ts +16 -0
- package/cjs/app-bar/index.d.ts +7 -0
- package/cjs/assertions/banner/Banner.d.ts +74 -0
- package/cjs/assertions/banner/BannerAction.d.ts +19 -0
- package/cjs/assertions/banner/BannerTypography.d.ts +7 -0
- package/cjs/assertions/banner/index.d.ts +3 -0
- package/cjs/assertions/index.d.ts +2 -0
- package/cjs/assertions/toast/Toast.d.ts +12 -0
- package/cjs/assertions/toast/Toast.js +10 -8
- package/cjs/assertions/toast/Toaster.d.ts +19 -0
- package/cjs/assertions/toast/index.d.ts +2 -0
- package/cjs/badge/Badge.d.ts +26 -0
- package/cjs/badge/index.d.ts +2 -0
- package/cjs/button/BadgeIcon.d.ts +7 -0
- package/cjs/button/BaseButton.d.ts +14 -0
- package/cjs/button/Button.d.ts +19 -0
- package/cjs/button/IconButton.d.ts +75 -0
- package/cjs/button/LinkButton.d.ts +8 -0
- package/cjs/button/button-style.d.ts +7 -0
- package/cjs/button/index.d.ts +7 -0
- package/cjs/button-stack/ButtonStack.d.ts +11 -0
- package/cjs/button-stack/index.d.ts +1 -0
- package/cjs/card/Card.d.ts +18 -0
- package/cjs/card/CardActions.d.ts +4 -0
- package/cjs/card/CardContent.d.ts +13 -0
- package/cjs/card/CardMedia.d.ts +18 -0
- package/cjs/card/CardPriceTag.d.ts +25 -0
- package/cjs/card/CardTitle.d.ts +18 -0
- package/cjs/card/index.d.ts +6 -0
- package/cjs/chip/Chip.d.ts +19 -0
- package/cjs/chip/index.d.ts +2 -0
- package/cjs/common/LockBodyScroll.d.ts +25 -0
- package/cjs/common/arrow.d.ts +6 -0
- package/cjs/common/emotionCloneElement.d.ts +3 -0
- package/cjs/common/intent.d.ts +3 -0
- package/cjs/common/miniMoize.d.ts +1 -0
- package/cjs/common/polymorphic.d.ts +25 -0
- package/cjs/common/use-media.d.ts +1 -0
- package/cjs/common/useOnClickOutside.d.ts +4 -0
- package/cjs/common/utils.d.ts +3 -0
- package/cjs/counter/Counter.d.ts +26 -0
- package/cjs/counter/PluralCounter.d.ts +13 -0
- package/cjs/counter/index.d.ts +2 -0
- package/cjs/data-table/DataTable.d.ts +10 -0
- package/cjs/data-table/index.d.ts +1 -0
- package/cjs/date-range-picker/DatePickerDefaultStyles.d.ts +2 -0
- package/cjs/date-range-picker/DatePickerDfdsStyles.d.ts +2 -0
- package/cjs/date-range-picker/DateRangePicker.d.ts +33 -0
- package/cjs/date-range-picker/index.d.ts +1 -0
- package/cjs/divider/Divider.d.ts +26 -0
- package/cjs/divider/index.d.ts +1 -0
- package/cjs/drawer/Drawer.d.ts +31 -0
- package/cjs/drawer/index.d.ts +1 -0
- package/cjs/dropdown-menu/Dropdown.d.ts +46 -0
- package/cjs/dropdown-menu/DropdownContext.d.ts +13 -0
- package/cjs/dropdown-menu/MenuCheckbox.d.ts +34 -0
- package/cjs/dropdown-menu/MenuItem.d.ts +45 -0
- package/cjs/dropdown-menu/MenuTitle.d.ts +14 -0
- package/cjs/dropdown-menu/index.d.ts +5 -0
- package/cjs/elevation/index.d.ts +3 -0
- package/cjs/flexbox/FlexBox.d.ts +100 -0
- package/cjs/flexbox/index.d.ts +1 -0
- package/cjs/footer/Footer.d.ts +7 -0
- package/cjs/footer/index.d.ts +1 -0
- package/cjs/forms/assistive-text/AssistiveText.d.ts +8 -0
- package/cjs/forms/asterisk/Asterisk.d.ts +3 -0
- package/cjs/forms/checkbox/Checkbox.d.ts +39 -0
- package/cjs/forms/checkbox/ExampleControlComponent.d.ts +10 -0
- package/cjs/forms/checkbox/index.d.ts +1 -0
- package/cjs/forms/email-field/EmailField.d.ts +6 -0
- package/cjs/forms/error-text/ErrorText.d.ts +8 -0
- package/cjs/forms/field/Field.d.ts +10 -0
- package/cjs/forms/index.d.ts +21 -0
- package/cjs/forms/input/Input.d.ts +19 -0
- package/cjs/forms/input/InputComposition.d.ts +43 -0
- package/cjs/forms/label/Label.d.ts +10 -0
- package/cjs/forms/number-field/NumberField.d.ts +6 -0
- package/cjs/forms/password-field/PasswordField.d.ts +4 -0
- package/cjs/forms/radio/Radio.d.ts +35 -0
- package/cjs/forms/reactselect/ReactSelect.d.ts +25 -0
- package/cjs/forms/searchable-select/AsyncSearchableSelect.d.ts +6 -0
- package/cjs/forms/select/Select.d.ts +16 -0
- package/cjs/forms/select-field/SelectField.d.ts +17 -0
- package/cjs/forms/switch/Switch.d.ts +13 -0
- package/cjs/forms/tel-field/TelField.d.ts +6 -0
- package/cjs/forms/text-field/TextField.d.ts +26 -0
- package/cjs/global-styles/GlobalStyles.d.ts +3 -0
- package/cjs/global-styles/ResetStyles.d.ts +9 -0
- package/cjs/global-styles/sanitize.d.ts +1 -0
- package/cjs/grid/Column.d.ts +10 -0
- package/cjs/grid/Container.d.ts +15 -0
- package/cjs/grid/index.d.ts +2 -0
- package/cjs/hero/Hero.d.ts +10 -0
- package/cjs/hero/index.d.ts +1 -0
- package/cjs/hero/stripes.d.ts +6 -0
- package/cjs/ie-banner/IEBanner.d.ts +11 -0
- package/cjs/ie-banner/index.d.ts +1 -0
- package/cjs/index.d.ts +44 -0
- package/cjs/layout/LayoutLegacy.d.ts +2 -0
- package/cjs/lists/FeatureList.d.ts +24 -0
- package/cjs/lists/ListAddon.d.ts +11 -0
- package/cjs/lists/ListDivider.d.ts +5 -0
- package/cjs/lists/ListIcon.d.ts +18 -0
- package/cjs/lists/ListItem.d.ts +46 -0
- package/cjs/lists/ListText.d.ts +39 -0
- package/cjs/lists/ListTextGroup.d.ts +15 -0
- package/cjs/lists/ListTitle.d.ts +4 -0
- package/cjs/lists/index.d.ts +8 -0
- package/cjs/loader/DfdsLoader.d.ts +9 -0
- package/cjs/loader/Loader.d.ts +6 -0
- package/cjs/loader/index.d.ts +2 -0
- package/cjs/localization/LocaleFlag.d.ts +13 -0
- package/cjs/localization/index.d.ts +2 -0
- package/cjs/localization/locales.d.ts +35 -0
- package/cjs/logo/Logo.d.ts +11 -0
- package/cjs/logo/index.d.ts +1 -0
- package/cjs/media/index.d.ts +2 -0
- package/cjs/menu/Menu.d.ts +7 -0
- package/cjs/menu/index.d.ts +2 -0
- package/cjs/mobile-stepper/MobileStepper.d.ts +25 -0
- package/cjs/mobile-stepper/index.d.ts +1 -0
- package/cjs/nav-bar/NavBar.d.ts +35 -0
- package/cjs/nav-bar/index.d.ts +2 -0
- package/cjs/nav-menu/NavMenuItem.d.ts +10 -0
- package/cjs/nav-menu/index.d.ts +1 -0
- package/cjs/pagination/Pagination.d.ts +44 -0
- package/cjs/pagination/Pagination.styles.d.ts +6 -0
- package/cjs/pagination/index.d.ts +1 -0
- package/cjs/popper/Popper.d.ts +29 -0
- package/cjs/popper/index.d.ts +1 -0
- package/cjs/progress-bar/ProgressBar.d.ts +8 -0
- package/cjs/progress-bar/index.d.ts +2 -0
- package/cjs/schedule/ScheduleItem.d.ts +21 -0
- package/cjs/schedule/ScheduleList.d.ts +11 -0
- package/cjs/schedule/index.d.ts +2 -0
- package/cjs/side-sheet/SideSheet.d.ts +57 -0
- package/cjs/side-sheet/SideSheetCloseButton.d.ts +13 -0
- package/cjs/side-sheet/SideSheetContent.d.ts +7 -0
- package/cjs/side-sheet/SideSheetFooter.d.ts +7 -0
- package/cjs/side-sheet/SideSheetHeader.d.ts +9 -0
- package/cjs/side-sheet/SideSheetHeadline.d.ts +7 -0
- package/cjs/side-sheet/index.d.ts +4 -0
- package/cjs/site-layout/SiteLayout.d.ts +36 -0
- package/cjs/site-layout/index.d.ts +2 -0
- package/cjs/skeleton/Skeleton.d.ts +8 -0
- package/cjs/skeleton/index.d.ts +1 -0
- package/cjs/social-media-link-list/SocialMediaLinkList.d.ts +26 -0
- package/cjs/social-media-link-list/index.d.ts +1 -0
- package/cjs/spinner/Spinner.d.ts +58 -0
- package/cjs/spinner/index.d.ts +1 -0
- package/cjs/step/Step.d.ts +45 -0
- package/cjs/step/Step.styles.d.ts +4 -0
- package/cjs/step/StepButton.d.ts +4 -0
- package/cjs/step/StepContent.d.ts +6 -0
- package/cjs/step/StepContext.d.ts +12 -0
- package/cjs/step/StepLabel.d.ts +7 -0
- package/cjs/step/index.d.ts +1 -0
- package/cjs/stepper/Stepper.d.ts +25 -0
- package/cjs/stepper/StepperContext.d.ts +9 -0
- package/cjs/stepper/index.d.ts +1 -0
- package/cjs/stepper-feedback-message/StepperFeedbackMessage.d.ts +5 -0
- package/cjs/stepper-feedback-message/index.d.ts +1 -0
- package/cjs/styles/index.d.ts +3 -0
- package/cjs/styles/media.d.ts +21 -0
- package/cjs/styles/rem.d.ts +1 -0
- package/cjs/styles/style-helpers.d.ts +1 -0
- package/cjs/styles/theme.d.ts +39 -0
- package/cjs/surface/Surface.d.ts +32 -0
- package/cjs/surface/index.d.ts +1 -0
- package/cjs/tab/Tab.d.ts +12 -0
- package/cjs/tab/TabPanel.d.ts +7 -0
- package/cjs/tab/Tabs.d.ts +11 -0
- package/cjs/tab/TabsContext.d.ts +16 -0
- package/cjs/tab/index.d.ts +4 -0
- package/cjs/table/Table.d.ts +22 -0
- package/cjs/table/TableBody.d.ts +9 -0
- package/cjs/table/TableDataCell.d.ts +14 -0
- package/cjs/table/TableHead.d.ts +14 -0
- package/cjs/table/TableHeaderCell.d.ts +15 -0
- package/cjs/table/TableRow.d.ts +17 -0
- package/cjs/table/index.d.ts +6 -0
- package/cjs/test/Test.d.ts +8 -0
- package/cjs/tooltip/Tooltip.d.ts +26 -0
- package/cjs/tooltip/index.d.ts +2 -0
- package/cjs/typography/Headlines.d.ts +70 -0
- package/cjs/typography/Text.d.ts +5 -0
- package/cjs/typography/index.d.ts +2 -0
- package/package.json +9 -9
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { FunctionComponent } from 'react';
|
|
2
|
+
export declare type SocialMediaLinkListProps = {
|
|
3
|
+
instagramLink?: string;
|
|
4
|
+
facebookLink?: string;
|
|
5
|
+
blogLink?: string;
|
|
6
|
+
twitterLink?: string;
|
|
7
|
+
linkedinLink?: string;
|
|
8
|
+
youtubeLink?: string;
|
|
9
|
+
mailshareLink?: string;
|
|
10
|
+
iconSize?: string;
|
|
11
|
+
noPadding?: boolean;
|
|
12
|
+
colorOverwrite?: string;
|
|
13
|
+
};
|
|
14
|
+
export declare const SoMeWrapper: import("@emotion/styled").StyledComponent<{
|
|
15
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
+
as?: React.ElementType<any> | undefined;
|
|
17
|
+
} & import("../flexbox/FlexBox").FlexBoxProps & {
|
|
18
|
+
as?: React.ElementType<any> | undefined;
|
|
19
|
+
} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
} & {
|
|
22
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
23
|
+
} & SocialMediaLinkListProps, {}, {}>;
|
|
24
|
+
declare type socialMediaLinkListComponent = FunctionComponent<SocialMediaLinkListProps>;
|
|
25
|
+
export declare const SocialMediaLinkList: socialMediaLinkListComponent;
|
|
26
|
+
export default SocialMediaLinkList;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './SocialMediaLinkList';
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PolymorphicComponentProps } from '../common/polymorphic';
|
|
3
|
+
declare type Color = 'dark' | 'secondary' | 'light';
|
|
4
|
+
export declare type SpinnerProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Indicates that Spinner will show up instantaneously (instead of fading in).
|
|
7
|
+
*
|
|
8
|
+
*/
|
|
9
|
+
instant?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Specifies the size of the Spinner.
|
|
12
|
+
*
|
|
13
|
+
* @deprecated Use css instead.
|
|
14
|
+
*/
|
|
15
|
+
size?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Class name to be assigned to component.
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Set the color variant to use.
|
|
22
|
+
*/
|
|
23
|
+
color?: Color;
|
|
24
|
+
} & PolymorphicComponentProps;
|
|
25
|
+
/**
|
|
26
|
+
* A spinner is used to give user a sense of progress, when the time required to complete the given task is not known.
|
|
27
|
+
*/
|
|
28
|
+
export declare function Spinner({ instant, size, className, color, as, ...rest }: SpinnerProps): JSX.Element;
|
|
29
|
+
export declare namespace Spinner {
|
|
30
|
+
var displayName: string;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* @deprecated Style the regular spinner to achieve the desired effect.
|
|
34
|
+
*/
|
|
35
|
+
export declare const CenteredSpinner: import("@emotion/styled").StyledComponent<{
|
|
36
|
+
/**
|
|
37
|
+
* Indicates that Spinner will show up instantaneously (instead of fading in).
|
|
38
|
+
*
|
|
39
|
+
*/
|
|
40
|
+
instant?: boolean | undefined;
|
|
41
|
+
/**
|
|
42
|
+
* Specifies the size of the Spinner.
|
|
43
|
+
*
|
|
44
|
+
* @deprecated Use css instead.
|
|
45
|
+
*/
|
|
46
|
+
size?: string | undefined;
|
|
47
|
+
/**
|
|
48
|
+
* Class name to be assigned to component.
|
|
49
|
+
*/
|
|
50
|
+
className?: string | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* Set the color variant to use.
|
|
53
|
+
*/
|
|
54
|
+
color?: Color | undefined;
|
|
55
|
+
} & PolymorphicComponentProps & {
|
|
56
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
57
|
+
}, {}, {}>;
|
|
58
|
+
export default Spinner;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Spinner';
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare type StepProps = {
|
|
3
|
+
/**
|
|
4
|
+
* The position of the step
|
|
5
|
+
*/
|
|
6
|
+
index: number;
|
|
7
|
+
/**
|
|
8
|
+
* Step label
|
|
9
|
+
*/
|
|
10
|
+
label?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Sets the step as active
|
|
13
|
+
*/
|
|
14
|
+
active?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Sets the step as completed
|
|
17
|
+
*/
|
|
18
|
+
completed?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* If `true`, the step button will be disabled
|
|
21
|
+
*/
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Should be Step sub-components, such as `StepContent` for the vertical variant
|
|
25
|
+
*/
|
|
26
|
+
children?: ReactNode;
|
|
27
|
+
/**
|
|
28
|
+
* Optional label. Is shown below the step label
|
|
29
|
+
*/
|
|
30
|
+
optionalStepText?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Error step. Error icon will be showen in the step button
|
|
33
|
+
*/
|
|
34
|
+
hasError?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Editing step. Editing icon wil be showen in the step button
|
|
37
|
+
*/
|
|
38
|
+
isEditing?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* The function is triggered when step button is clicked
|
|
41
|
+
*/
|
|
42
|
+
handleStepClick?: () => void;
|
|
43
|
+
};
|
|
44
|
+
declare const _default: React.MemoExoticComponent<({ index, label, active: activeProp, completed: completedProp, disabled, children, hasError, optionalStepText, isEditing, handleStepClick, ...props }: StepProps) => JSX.Element>;
|
|
45
|
+
export default _default;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const stepWrapperHorizontalStyles: import("@emotion/utils").SerializedStyles;
|
|
2
|
+
export declare const stepWrapperVerticalStyles: import("@emotion/utils").SerializedStyles;
|
|
3
|
+
export declare const stepHeaderStyles: import("@emotion/utils").SerializedStyles;
|
|
4
|
+
export declare const stepContentStyles: import("@emotion/utils").SerializedStyles;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare type StepContextType = {
|
|
3
|
+
index: number;
|
|
4
|
+
active: boolean;
|
|
5
|
+
hasError?: boolean;
|
|
6
|
+
completed?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
isEditing?: boolean;
|
|
9
|
+
feedback?: ReactNode;
|
|
10
|
+
};
|
|
11
|
+
declare const StepContext: React.Context<StepContextType>;
|
|
12
|
+
export default StepContext;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Step } from './Step';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare type StepperProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Stepper layout orientation `'horizontal' | 'vertical'`
|
|
5
|
+
*/
|
|
6
|
+
orientation?: 'horizontal' | 'vertical';
|
|
7
|
+
/**
|
|
8
|
+
* Multiple `<Step/>` components
|
|
9
|
+
*/
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* The initial step
|
|
13
|
+
*/
|
|
14
|
+
activeStep?: number;
|
|
15
|
+
/**
|
|
16
|
+
* If set the component will not assist in controlling steps for sequential flow
|
|
17
|
+
*/
|
|
18
|
+
sequential?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* A feedback message can be passed to display a transitory feedback message as the step label
|
|
21
|
+
*/
|
|
22
|
+
stepFeedbackMessage?: string;
|
|
23
|
+
};
|
|
24
|
+
declare const _default: React.MemoExoticComponent<({ children, activeStep, sequential, orientation, stepFeedbackMessage, ...other }: StepperProps) => JSX.Element>;
|
|
25
|
+
export default _default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare type StepperContextType = {
|
|
3
|
+
activeStep: number;
|
|
4
|
+
orientation: 'horizontal' | 'vertical';
|
|
5
|
+
sequential: boolean;
|
|
6
|
+
stepFeedbackMessage?: string;
|
|
7
|
+
};
|
|
8
|
+
declare const StepperContext: React.Context<StepperContextType>;
|
|
9
|
+
export default StepperContext;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Stepper } from './Stepper';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as StepperFeedbackMessage } from './StepperFeedbackMessage';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
declare const defaultBreakPoints: {
|
|
2
|
+
xl: number;
|
|
3
|
+
lg: number;
|
|
4
|
+
md: number;
|
|
5
|
+
sm: number;
|
|
6
|
+
xs: number;
|
|
7
|
+
};
|
|
8
|
+
declare type BreakPoint = keyof typeof defaultBreakPoints | number;
|
|
9
|
+
export declare function legacyGenerateMedia(breakPoints: typeof defaultBreakPoints): {
|
|
10
|
+
lt: (breakPoint: BreakPoint) => string;
|
|
11
|
+
gt: (breakPoint: BreakPoint) => string;
|
|
12
|
+
bt: (firstBreakpoint: BreakPoint, secondBreakpoint: BreakPoint) => string;
|
|
13
|
+
tablet: () => string;
|
|
14
|
+
};
|
|
15
|
+
export declare const legacyMedia: {
|
|
16
|
+
lt: (breakPoint: BreakPoint) => string;
|
|
17
|
+
gt: (breakPoint: BreakPoint) => string;
|
|
18
|
+
bt: (firstBreakpoint: BreakPoint, secondBreakpoint: BreakPoint) => string;
|
|
19
|
+
tablet: () => string;
|
|
20
|
+
};
|
|
21
|
+
export default legacyMedia;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const rem: (targetPixelValue: number, base?: number) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const visuallyHidden: () => import("@emotion/utils").SerializedStyles;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export declare const theme: {
|
|
2
|
+
colors: {
|
|
3
|
+
yesGreen: string;
|
|
4
|
+
cautionAmber: string;
|
|
5
|
+
noRed: string;
|
|
6
|
+
linkBlue: string;
|
|
7
|
+
linkHover: string;
|
|
8
|
+
actionBlue: string;
|
|
9
|
+
actionHover: string;
|
|
10
|
+
actionMedium: string;
|
|
11
|
+
actionLight: string;
|
|
12
|
+
primaryOrange: string;
|
|
13
|
+
primaryHover: string;
|
|
14
|
+
uiEnabled: string;
|
|
15
|
+
uiDisabled: string;
|
|
16
|
+
textGrey: string;
|
|
17
|
+
textMedium: string;
|
|
18
|
+
textLight: string;
|
|
19
|
+
groupBlue: string;
|
|
20
|
+
groupMedium: string;
|
|
21
|
+
groupLight: string;
|
|
22
|
+
backgroundGrey: string;
|
|
23
|
+
white: string;
|
|
24
|
+
whiteHover: string;
|
|
25
|
+
};
|
|
26
|
+
fontFamily: string;
|
|
27
|
+
spacing: {
|
|
28
|
+
xxs: string;
|
|
29
|
+
xs: string;
|
|
30
|
+
s: string;
|
|
31
|
+
m: string;
|
|
32
|
+
l: string;
|
|
33
|
+
xl: string;
|
|
34
|
+
xxl: string;
|
|
35
|
+
};
|
|
36
|
+
uiRoundness: string;
|
|
37
|
+
};
|
|
38
|
+
export declare type ThemeInterface = typeof theme;
|
|
39
|
+
export default theme;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { theme } from '@dfds-ui/theme';
|
|
3
|
+
export declare type SurfaceType = keyof typeof theme.colors.surface;
|
|
4
|
+
export declare type SurfaceContextType = {
|
|
5
|
+
surface: SurfaceType;
|
|
6
|
+
backgroundColor: string;
|
|
7
|
+
textColors: {
|
|
8
|
+
primary: string;
|
|
9
|
+
secondary: string;
|
|
10
|
+
disabled: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export declare function getTextColors(surface: SurfaceType): {
|
|
14
|
+
primary: string;
|
|
15
|
+
secondary: string;
|
|
16
|
+
disabled: string;
|
|
17
|
+
};
|
|
18
|
+
export declare function getBackgroundColor(surface: SurfaceType): string;
|
|
19
|
+
export declare const SurfaceContext: React.Context<SurfaceContextType | undefined>;
|
|
20
|
+
export declare const SurfaceProvider: React.FC<{
|
|
21
|
+
surface: SurfaceType;
|
|
22
|
+
children?: React.ReactNode;
|
|
23
|
+
}>;
|
|
24
|
+
export declare function MaybeSurfaceProvider({ surface, ...rest }: React.PropsWithChildren<{
|
|
25
|
+
surface?: SurfaceType;
|
|
26
|
+
}>): JSX.Element;
|
|
27
|
+
export declare const useSurfaceContext: (surface?: SurfaceType) => SurfaceContextType;
|
|
28
|
+
export declare const Surface: React.FC<{
|
|
29
|
+
surface: SurfaceType;
|
|
30
|
+
className?: string;
|
|
31
|
+
children?: React.ReactNode;
|
|
32
|
+
}>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Surface';
|
package/cjs/tab/Tab.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare type Index = number | string;
|
|
3
|
+
export declare type TabProps = {
|
|
4
|
+
active?: boolean;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
transparent?: boolean;
|
|
7
|
+
index: Index;
|
|
8
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
};
|
|
11
|
+
declare const Tab: React.FC<TabProps>;
|
|
12
|
+
export default Tab;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { Index } from './Tab';
|
|
3
|
+
export declare type TabsContextProps = {
|
|
4
|
+
transparent?: boolean;
|
|
5
|
+
onChange?: (index: any) => void;
|
|
6
|
+
size?: 's' | 'm';
|
|
7
|
+
activeTab?: Index | undefined;
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
};
|
|
10
|
+
export declare const TabsContext: React.Context<TabsContextProps>;
|
|
11
|
+
export declare const TabsContextProvider: React.FC<{
|
|
12
|
+
value: TabsContextProps;
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
}>;
|
|
15
|
+
export declare const useTabsContext: () => TabsContextProps;
|
|
16
|
+
export default useTabsContext;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export declare type TableProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Table content
|
|
5
|
+
*/
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Enables interaction effect on table rows
|
|
9
|
+
*/
|
|
10
|
+
isInteractive?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Makes table header sticky when scrolling (no IE 11 support)
|
|
13
|
+
*/
|
|
14
|
+
isHeaderSticky?: boolean;
|
|
15
|
+
} & ComponentPropsWithRef<'table'>;
|
|
16
|
+
export declare type TableContextProps = {
|
|
17
|
+
isInteractive: boolean;
|
|
18
|
+
isHeaderSticky: boolean;
|
|
19
|
+
};
|
|
20
|
+
export declare const useTable: () => TableContextProps;
|
|
21
|
+
export declare const Table: React.ForwardRefExoticComponent<Pick<TableProps, "key" | "css" | keyof React.TableHTMLAttributes<HTMLTableElement> | "isHeaderSticky" | "isInteractive"> & React.RefAttributes<HTMLTableElement>>;
|
|
22
|
+
export default Table;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export declare type TableBodyProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Table body content
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
} & ComponentPropsWithRef<'tbody'>;
|
|
8
|
+
export declare const TableBody: React.ForwardRefExoticComponent<Pick<TableBodyProps, "key" | "css" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
9
|
+
export default TableBody;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
import { Alignment } from './TableHeaderCell';
|
|
3
|
+
export declare type TableDataCellProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Sets alignment for the content in the tag
|
|
6
|
+
*/
|
|
7
|
+
align?: Alignment;
|
|
8
|
+
/**
|
|
9
|
+
* Table cell content
|
|
10
|
+
*/
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
} & ComponentPropsWithRef<'td'>;
|
|
13
|
+
export declare const TableDataCell: React.ForwardRefExoticComponent<Pick<TableDataCellProps, "key" | "css" | keyof React.TdHTMLAttributes<HTMLTableDataCellElement>> & React.RefAttributes<HTMLTableCellElement>>;
|
|
14
|
+
export default TableDataCell;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export declare type TableHeadProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Table header content
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Classes applied on the thead tag
|
|
9
|
+
*/
|
|
10
|
+
className?: string;
|
|
11
|
+
} & ComponentPropsWithRef<'thead'>;
|
|
12
|
+
export declare const tableHeadStyle: import("@emotion/utils").SerializedStyles;
|
|
13
|
+
export declare const TableHead: React.ForwardRefExoticComponent<Pick<TableHeadProps, "key" | "css" | keyof React.HTMLAttributes<HTMLTableSectionElement>> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
14
|
+
export default TableHead;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export declare type Alignment = 'left' | 'center' | 'right' | 'justify' | 'char';
|
|
3
|
+
export declare type TableHeaderCellProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Sets alignment for the content in the tag
|
|
6
|
+
*/
|
|
7
|
+
align?: Alignment;
|
|
8
|
+
/**
|
|
9
|
+
* Table cell content
|
|
10
|
+
*/
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
} & ComponentPropsWithRef<'th'>;
|
|
13
|
+
export declare const getTableCellStyle: (align?: Alignment) => import("@emotion/utils").SerializedStyles;
|
|
14
|
+
export declare const TableHeaderCell: React.ForwardRefExoticComponent<Pick<TableHeaderCellProps, "key" | "css" | keyof React.ThHTMLAttributes<HTMLTableHeaderCellElement>> & React.RefAttributes<HTMLTableCellElement>>;
|
|
15
|
+
export default TableHeaderCell;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React, { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
export declare type TableRowProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Table row content
|
|
5
|
+
*/
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* Classes applied on the tr tag
|
|
9
|
+
*/
|
|
10
|
+
className?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Applies Selected state styling to the row
|
|
13
|
+
*/
|
|
14
|
+
isSelected?: boolean;
|
|
15
|
+
} & ComponentPropsWithRef<'tr'>;
|
|
16
|
+
export declare const TableRow: React.ForwardRefExoticComponent<Pick<TableRowProps, "key" | "css" | keyof React.HTMLAttributes<HTMLTableRowElement> | "isSelected"> & React.RefAttributes<HTMLTableRowElement>>;
|
|
17
|
+
export default TableRow;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TippyProps } from '@tippyjs/react';
|
|
3
|
+
declare type Placement = 'top' | 'right' | 'bottom' | 'left';
|
|
4
|
+
declare type TooltipProps = {
|
|
5
|
+
content: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
placement?: Placement;
|
|
8
|
+
offset?: number;
|
|
9
|
+
delay?: [number, number] | false;
|
|
10
|
+
containerProps?: any;
|
|
11
|
+
tabIndex?: number;
|
|
12
|
+
visible?: boolean;
|
|
13
|
+
onClickOutside?: () => void;
|
|
14
|
+
children?: React.ReactNode;
|
|
15
|
+
};
|
|
16
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
17
|
+
/**
|
|
18
|
+
* The `UnstableWithTooltip` component can be used to wrap an element with a tooltip but unlike the `Tooltip` component
|
|
19
|
+
* no extra html markup will wrapped around the targeted element.
|
|
20
|
+
*
|
|
21
|
+
* NOTE: It is important that the component being wrapped forwards a ref to the DOM node.
|
|
22
|
+
*/
|
|
23
|
+
export declare const UnstableWithTooltip: ({ delay, ...rest }: {
|
|
24
|
+
className?: string;
|
|
25
|
+
} & TippyProps) => JSX.Element;
|
|
26
|
+
export default Tooltip;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const headlineStyles: {
|
|
3
|
+
h1: import("@emotion/utils").SerializedStyles;
|
|
4
|
+
h2: import("@emotion/utils").SerializedStyles;
|
|
5
|
+
h3: import("@emotion/utils").SerializedStyles;
|
|
6
|
+
h4: import("@emotion/utils").SerializedStyles;
|
|
7
|
+
};
|
|
8
|
+
export declare const H1: import("@emotion/styled").StyledComponent<{
|
|
9
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
10
|
+
as?: React.ElementType<any> | undefined;
|
|
11
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
12
|
+
as?: React.ElementType<any> | undefined;
|
|
13
|
+
noMargin?: boolean | undefined;
|
|
14
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
15
|
+
export declare const H2: import("@emotion/styled").StyledComponent<{
|
|
16
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
17
|
+
as?: React.ElementType<any> | undefined;
|
|
18
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
19
|
+
as?: React.ElementType<any> | undefined;
|
|
20
|
+
noMargin?: boolean | undefined;
|
|
21
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
22
|
+
export declare const H3: import("@emotion/styled").StyledComponent<{
|
|
23
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
24
|
+
as?: React.ElementType<any> | undefined;
|
|
25
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
26
|
+
as?: React.ElementType<any> | undefined;
|
|
27
|
+
noMargin?: boolean | undefined;
|
|
28
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
29
|
+
export declare const H4: import("@emotion/styled").StyledComponent<{
|
|
30
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
31
|
+
as?: React.ElementType<any> | undefined;
|
|
32
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
33
|
+
as?: React.ElementType<any> | undefined;
|
|
34
|
+
noMargin?: boolean | undefined;
|
|
35
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
36
|
+
export declare const Headline: React.FunctionComponent<{
|
|
37
|
+
as?: React.ElementType;
|
|
38
|
+
styledAs?: keyof typeof headlineStyles;
|
|
39
|
+
className?: string;
|
|
40
|
+
noMargin?: boolean;
|
|
41
|
+
}>;
|
|
42
|
+
export declare const HeroHeadline: import("@emotion/styled").StyledComponent<{
|
|
43
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
44
|
+
as?: React.ElementType<any> | undefined;
|
|
45
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
46
|
+
as?: React.ElementType<any> | undefined;
|
|
47
|
+
noMargin?: boolean | undefined;
|
|
48
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
49
|
+
export declare const SectionHeadline: import("@emotion/styled").StyledComponent<{
|
|
50
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
51
|
+
as?: React.ElementType<any> | undefined;
|
|
52
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
53
|
+
as?: React.ElementType<any> | undefined;
|
|
54
|
+
noMargin?: boolean | undefined;
|
|
55
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
56
|
+
export declare const SubHeadline: import("@emotion/styled").StyledComponent<{
|
|
57
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
58
|
+
as?: React.ElementType<any> | undefined;
|
|
59
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
60
|
+
as?: React.ElementType<any> | undefined;
|
|
61
|
+
noMargin?: boolean | undefined;
|
|
62
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
63
|
+
export declare const SmallHeadline: import("@emotion/styled").StyledComponent<{
|
|
64
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
65
|
+
as?: React.ElementType<any> | undefined;
|
|
66
|
+
} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "key" | "css" | keyof React.HTMLAttributes<HTMLHeadingElement>> & {
|
|
67
|
+
as?: React.ElementType<any> | undefined;
|
|
68
|
+
noMargin?: boolean | undefined;
|
|
69
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
|
|
70
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Text: import("@emotion/styled").StyledComponent<{
|
|
3
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
4
|
+
as?: import("react").ElementType<any> | undefined;
|
|
5
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|