@design-system-rte/react 0.10.0 → 0.11.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 (10) hide show
  1. package/README.md +35 -1
  2. package/dist/components/breadcrumbs/Breadcrumbs.d.ts +5 -0
  3. package/dist/components/loader/Loader.d.ts +5 -0
  4. package/dist/components/overlay/Overlay.d.ts +6 -0
  5. package/dist/components/tooltip/Tooltip.d.ts +1 -0
  6. package/dist/index.d.ts +2 -1
  7. package/dist/react-package.cjs +1 -1
  8. package/dist/react-package.js +3511 -3354
  9. package/dist/style.css +1 -1
  10. package/package.json +2 -2
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/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/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/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,5 @@
1
1
  import { default as Badge } from './components/badge/Badge.tsx';
2
+ import { default as Breadcrumbs } from './components/breadcrumbs/Breadcrumbs.tsx';
2
3
  import { default as Button } from './components/button/Button';
3
4
  import { default as Checkbox } from './components/checkbox/Checkbox.tsx';
4
5
  import { default as CheckboxGroup } from './components/checkboxGroup/CheckboxGroup.tsx';
@@ -17,4 +18,4 @@ import { default as Switch } from './components/switch/Switch.tsx';
17
18
  import { default as Textarea } from './components/textarea/Textarea.tsx';
18
19
  import { default as TextInput } from './components/textInput/TextInput.tsx';
19
20
  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, };
21
+ export { Button, Grid, Checkbox, CheckboxGroup, Link, RadioButton, RadioButtonGroup, Icon, IconButton, IconButtonToggle, SplitButton, Tooltip, TextInput, Chip, Badge, Textarea, Divider, Switch, SegmentedControl, Breadcrumbs, };