@design-system-rte/react 0.10.0 → 0.12.0

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.
Files changed (22) hide show
  1. package/README.md +35 -1
  2. package/dist/components/badge/Badge.d.ts +3 -4
  3. package/dist/components/banner/Banner.d.ts +5 -0
  4. package/dist/components/breadcrumbs/Breadcrumbs.d.ts +5 -0
  5. package/dist/components/dropdown/Dropdown.d.ts +6 -0
  6. package/dist/components/dropdown/DropdownUtils.d.ts +4 -0
  7. package/dist/components/dropdown/context/DropdownContext.d.ts +5 -0
  8. package/dist/components/dropdown/context/DropdownContextProvider.d.ts +6 -0
  9. package/dist/components/dropdown/dropdownItem/DropdownItem.d.ts +6 -0
  10. package/dist/components/dropdown/hooks/useDropdownState.d.ts +7 -0
  11. package/dist/components/loader/Loader.d.ts +5 -0
  12. package/dist/components/overlay/Overlay.d.ts +6 -0
  13. package/dist/components/popover/Popover.d.ts +8 -0
  14. package/dist/components/tab/Tab.d.ts +7 -0
  15. package/dist/components/tab/tabitem/TabItem.d.ts +7 -0
  16. package/dist/components/tooltip/Tooltip.d.ts +1 -0
  17. package/dist/index.d.ts +4 -1
  18. package/dist/react-package.cjs +1 -1
  19. package/dist/react-package.js +2964 -2526
  20. package/dist/style.css +1 -1
  21. package/package.json +6 -5
  22. package/dist/components/segmentedControl/hooks/useSelectedSegmentIndicatorStyle.d.ts +0 -7
package/README.md CHANGED
@@ -1 +1,35 @@
1
- <h1 align="center">@design-system/react</h1>
1
+ ### Installation Instructions
2
+
3
+ 1. **Add Design System base styles:**
4
+ ```tsx
5
+ import "@design-system-rte/react/dist/style.css";
6
+
7
+ createRoot(document.getElementById("root")!).render(
8
+ <StrictMode>
9
+ <App />
10
+ </StrictMode>,
11
+ );
12
+ ```
13
+
14
+ 2. **Add Branding/Theme Mixin:**
15
+
16
+ Include the branding/theme mixin in your main `.scss` file. This will create a style scope for the components.
17
+ (If you don't have scss support, you can use the .css files in `@design-system/core/css/rte-themes.css` and add them to your main styles file).
18
+ ```scss
19
+ @use "@design-system-rte/core/design-tokens/tokens/mixins" as *;
20
+
21
+ @include theme-selector('bleu_iceberg', 'light');
22
+ ```
23
+
24
+ 3. **Add HTML Selector:**
25
+
26
+ Add an HTML selector to define the context for applying component styles.
27
+ ```html
28
+ <body data-theme="bleu_iceberg" data-mode="light">
29
+ ...
30
+ </body>
31
+ ```
32
+
33
+ 4. **Use Components:**
34
+
35
+ Implement the different components as documented in the [Storybook](https://opensource.rte-france.com/design-system-rte/?path=/docs/react_button--docs) provided with the library.
package/dist/components/badge/Badge.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import { BadgeProps as BadgePropsCore } from '../../../../core/components/badge/badge.interface';
2
- import { RegularIconIdKey, TogglableIconIdKey } from '../icon/Icon';
3
- export interface BadgeProps extends BadgePropsCore, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
4
- children: React.ReactNode;
5
- icon?: RegularIconIdKey | TogglableIconIdKey;
2
+ export interface BadgeProps extends BadgePropsCore, Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content"> {
3
+ children?: React.ReactNode;
4
+ icon?: string;
6
5
  }
7
6
  declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLDivElement>>;
8
7
  export default Badge;
package/dist/components/banner/Banner.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { BannerProps as CoreBannerProps } from '../../../../core/components/banner/banner.interface';
2
+ interface BannerProps extends CoreBannerProps, React.HTMLAttributes<HTMLDivElement> {
3
+ }
4
+ declare const Banner: import('react').ForwardRefExoticComponent<BannerProps & import('react').RefAttributes<HTMLDivElement>>;
5
+ export default Banner;
package/dist/components/breadcrumbs/Breadcrumbs.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { BreadcrumbsProps as BreadcrumbsPropsCore } from '../../../../core/components/breadcrumbs/breadcrumbs.interface';
2
+ export interface BreadcrumbsProps extends BreadcrumbsPropsCore, React.HTMLAttributes<HTMLElement> {
3
+ }
4
+ declare const Breadcrumbs: import('react').ForwardRefExoticComponent<BreadcrumbsProps & import('react').RefAttributes<HTMLDivElement>>;
5
+ export default Breadcrumbs;
package/dist/components/dropdown/Dropdown.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { DropdownProps as CoreDropdownProps } from '../../../../core/components/dropdown/dropdown.interface';
2
+ interface DropdownProps extends CoreDropdownProps, React.HTMLAttributes<HTMLDivElement> {
3
+ trigger: React.ReactNode;
4
+ }
5
+ export declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<HTMLDivElement>>;
6
+ export {};
package/dist/components/dropdown/DropdownUtils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const focusNextElement: (dropdown: HTMLElement) => void;
2
+ export declare const focusPreviousElement: (dropdown: HTMLElement) => void;
3
+ export declare const focusChildDropdownFirstElement: (childDropdownId: string) => void;
4
+ export declare const focusParentDropdownFirstElement: (dropdownId: string) => void;
package/dist/components/dropdown/context/DropdownContext.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const DropdownParentContext: import('react').Context<{
2
+ dropdownId: string;
3
+ closeRoot: () => void;
4
+ autoClose: boolean;
5
+ } | undefined>;
package/dist/components/dropdown/context/DropdownContextProvider.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export declare const DropdownContextProvider: ({ dropdownId, closeRoot, autoClose, children, }: {
2
+ dropdownId: string;
3
+ autoClose?: boolean;
4
+ closeRoot: () => void;
5
+ children: React.ReactNode;
6
+ }) => import("react/jsx-runtime").JSX.Element;
package/dist/components/dropdown/dropdownItem/DropdownItem.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { DropdownItemProps as CoreDropdownItemProps } from '../../../../../core/components/dropdown/dropdown.interface';
2
+ interface DropdownItemProps extends Omit<CoreDropdownItemProps, "onClick">, React.HTMLAttributes<HTMLLIElement> {
3
+ onClick?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
4
+ }
5
+ export declare const DropdownItem: ({ label, leftIcon, trailingText, disabled, hasSeparator, hasIndent, children, onClick, ...props }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
6
+ export {};
package/dist/components/dropdown/hooks/useDropdownState.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export declare const useDropdownState: (dropdownId?: string) => {
2
+ dropdownId: string;
3
+ isOpen: boolean;
4
+ open: () => void;
5
+ close: () => void;
6
+ toggle: () => void;
7
+ };
package/dist/components/loader/Loader.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { LoaderProps as CoreLoaderProps } from '../../../../core/components/loader/loader.interface';
2
+ interface LoaderProps extends CoreLoaderProps, React.HTMLAttributes<HTMLDivElement> {
3
+ }
4
+ declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
5
+ export default Loader;
package/dist/components/overlay/Overlay.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ type OverlayPortalProps = {
3
+ children: ReactNode;
4
+ };
5
+ export declare const Overlay: ({ children }: OverlayPortalProps) => import("react/jsx-runtime").JSX.Element | null;
6
+ export {};
package/dist/components/popover/Popover.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { PopoverProps as CorePopoverProps } from '../../../../core/components/popover/popover.interface';
2
+ interface PopoverProps extends CorePopoverProps, Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content"> {
3
+ content: string;
4
+ children: React.ReactNode;
5
+ triggerStyles?: React.CSSProperties;
6
+ }
7
+ declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;
8
+ export default Popover;
package/dist/components/tab/Tab.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { TabProps as CoreTabProps } from '../../../../core/components/tab/tab.interface';
2
+ import { HTMLAttributes } from 'react';
3
+ interface TabProps extends CoreTabProps, Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
4
+ onChange: (id: string) => void;
5
+ }
6
+ declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLDivElement>>;
7
+ export default Tab;
package/dist/components/tab/tabitem/TabItem.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { TabItemProps as CoreTabItemProps } from '../../../../../core/components/tab/tab.interface';
2
+ import { HTMLAttributes, MouseEvent, KeyboardEvent } from 'react';
3
+ interface TabItemProps extends CoreTabItemProps, Omit<HTMLAttributes<HTMLButtonElement>, "id" | "onClick"> {
4
+ onClick: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
5
+ }
6
+ declare const TabItem: import('react').ForwardRefExoticComponent<TabItemProps & import('react').RefAttributes<HTMLButtonElement>>;
7
+ export default TabItem;
package/dist/components/tooltip/Tooltip.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { TooltipProps as CoreTooltipProps } from '../../../../core/components/tooltip/tooltip.interface';
2
2
  interface TooltipProps extends CoreTooltipProps, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
3
3
  children: React.ReactNode;
4
+ triggerStyles?: React.CSSProperties;
4
5
  }
5
6
  declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
6
7
  export default Tooltip;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  import { default as Badge } from './components/badge/Badge.tsx';
2
+ import { default as Banner } from './components/banner/Banner.tsx';
3
+ import { default as Breadcrumbs } from './components/breadcrumbs/Breadcrumbs.tsx';
2
4
  import { default as Button } from './components/button/Button';
3
5
  import { default as Checkbox } from './components/checkbox/Checkbox.tsx';
4
6
  import { default as CheckboxGroup } from './components/checkboxGroup/CheckboxGroup.tsx';
@@ -9,6 +11,7 @@ import { default as Icon } from './components/icon/Icon.tsx';
9
11
  import { default as IconButton } from './components/iconButton/IconButton.tsx';
10
12
  import { default as IconButtonToggle } from './components/iconButtonToggle/IconButtonToggle.tsx';
11
13
  import { default as Link } from './components/link/Link.tsx';
14
+ import { default as Popover } from './components/popover/Popover.tsx';
12
15
  import { default as RadioButton } from './components/radioButton/RadioButton.tsx';
13
16
  import { default as RadioButtonGroup } from './components/radioButtonGroup/RadioButtonGroup.tsx';
14
17
  import { default as SegmentedControl } from './components/segmentedControl/SegmentedControl.tsx';
@@ -17,4 +20,4 @@ import { default as Switch } from './components/switch/Switch.tsx';
17
20
  import { default as Textarea } from './components/textarea/Textarea.tsx';
18
21
  import { default as TextInput } from './components/textInput/TextInput.tsx';
19
22
  import { default as Tooltip } from './components/tooltip/Tooltip.tsx';
20
- export { Button, Grid, Checkbox, CheckboxGroup, Link, RadioButton, RadioButtonGroup, Icon, IconButton, IconButtonToggle, SplitButton, Tooltip, TextInput, Chip, Badge, Textarea, Divider, Switch, SegmentedControl, };
23
+ export { Button, Grid, Checkbox, CheckboxGroup, Link, RadioButton, RadioButtonGroup, Icon, IconButton, IconButtonToggle, SplitButton, Tooltip, TextInput, Chip, Badge, Textarea, Divider, Switch, SegmentedControl, Breadcrumbs, Banner, Popover, };