@trilogy-ds/react 0.0.1-beta-4 → 0.0.1-beta-54

package/README.md

@@ -0,0 +1,117 @@
+<div align='center'>
+
+# Trilogy DS
+
+## 🚀 [Quick Start](#usage)
+
+Trilogy DS, developed by Bouygues Telecom, is a multiplatform design system ( Web / React / React Native ) with reusable components with same codebase.
+
+</div>
+
+![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)
+![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+---
+
+### Structure
+
+```
+.
+├── react             
+   ├── components      # ◀ React functional components
+   ├── context         # Providers (Themes , styles / hashed styles)
+   ├── events          # Event type definitions
+   ├── helpers         # Utility functions
+   ├── objects         # Atoms & facets definition & implementation
+   ├── services        # Hooks
+   └── types           # Typescript types
+```
+
+---
+
+## Usage
+
+```
+npm i @trilogy-ds/react
+```
+
+```typescript jsx
+import { Button, Text } from '@trilogy-ds/react';
+
+<Button variant='PRIMARY'>My Button</Button>
+<Text level='1'>My Text</Text>
+```
+
+### Trilogy Provider - Import directly css styles
+
+The **TrilogyProvider** simplifies integrating Trilogy style into your app by wrapping your entry point with a provider. It offers two props for customization:
+
+- `mangled` [optional]: Apply compressed styling for performance.
+- `injectTrilogyAssets`: Inject Trilogy assets directly into the DOM.
+
+#### Web Usage
+
+1. Import the `TrilogyProvider` component:
+
+   ```typescript jsx
+   import { TrilogyProvider } from "@trilogy-ds/react/lib/context/provider"
+   ```
+
+2. Wrap your app's root component with it:
+
+   ```typescript jsx
+     <TrilogyProvider mangled injectTrilogyAssets>
+       <App />
+     </TrilogyProvider>
+   ```
+
+#### Native Usage
+
+1. Import the `TrilogyThemeProvider` along with `SVGicons` & colors from [@trilogy-ds/assets](https://www.npmjs.com/package/@trilogy-ds/assets) library:
+
+   ```typescript jsx
+   import { TrilogyThemeProvider, defaultTheme } from '@trilogy-ds/react/lib/context/providerTheme'
+   import { SVGicons } from '@trilogy-ds/assets/lib/iconsPath'
+   ```
+
+2. Wrap your app's root component with it:
+
+   ```typescript jsx
+     const theme = {
+       ...defaultTheme,
+       icons: SVGicons,
+       // here: override theme colors
+     }
+
+     <TrilogyThemeProvider theme={theme}>
+       <AppNative />
+     </TrilogyThemeProvider>
+   ```
+
+### Environment
+
+#### Web
+
+- [Node.js](https://nodejs.org/en/) (>= 18.0.0)
+- [npm](https://www.npmjs.com/) (>= 9.0.0)
+
+#### Mobile (Android / IOS)
+
+- [Java](https://www.java.com/fr/download/manual.jsp)
+- [cocoapods](https://cocoapods.org/) (>= 1.10.1) (only for ios)
+- [Xcode](https://developer.apple.com/xcode/) (>= 12.5.1) (only for ios)
+- [Android Studio](https://developer.android.com/studio) (>= 4.2.2) (only for android)
+
+See how to setup your environment for [Android](https://reactnative.dev/docs/environment-setup) and [IOS](https://reactnative.dev/docs/environment-setup)
+
+### Example
+
+Check out our [example project](https://github.com/BouyguesTelecom/trilogy/tree/master/examples/react-template) using Trilogy for consumption.
+
+### Contributing
+
+Read [the contributing guide](https://github.com/BouyguesTelecom/trilogy/blob/master/CONTRIBUTING.md) to become familiar with our development process, suggest fixes for bugs and improvements, and understand how to construct and assess your modifications
+
+### Changelog
+
+[The changelog](https://github.com/BouyguesTelecom/trilogy/blob/master/CHANGELOG.md) is consistently refreshed to show the modifications made in each new version.

package/lib/components/accordion/Accordion.d.ts

@@ -1,13 +1,8 @@
-import React from 'react';
-import { AccordionProps } from './AccordionProps';
-export declare const AccordionContext: React.Context<{
-    inverted: boolean;
-}>;
+import * as React from "react";
+import { AccordionProps } from "./AccordionProps";
 /**
  * Accordion Component
  * @param className {string} Additionnal CSS Classes
- * @param children {ReactNode}
- * @param inverted {boolean} Accordion with white background
  */
-declare const Accordion: ({ className, testId, inverted, ...others }: AccordionProps) => React.JSX.Element;
+declare const Accordion: ({ className, testId, ...others }: AccordionProps) => React.JSX.Element;
 export default Accordion;

package/lib/components/accordion/Accordion.js

@@ -1,19 +1,15 @@
-import React, { createContext } from 'react';
-import clsx from 'clsx';
-import { useTrilogyContext } from '../../context/index';
-import { hashClass } from '../..//helpers/hashClassesHelpers';
-export const AccordionContext = createContext({ inverted: false });
+import * as React from "react";
+import clsx from "clsx";
+import { useTrilogyContext } from "../../context/index";
+import { hashClass } from "../../helpers/hashClassesHelpers";
 /**
  * Accordion Component
  * @param className {string} Additionnal CSS Classes
- * @param children {ReactNode}
- * @param inverted {boolean} Accordion with white background
  */
-const Accordion = ({ className, testId, inverted, ...others }) => {
+const Accordion = ({ className, testId, ...others }) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('accordions', className));
-    return (React.createElement(AccordionContext.Provider, { value: { inverted: inverted || false } },
-        React.createElement("section", { className: classes, ...others, "data-testid": testId })));
+    const classes = hashClass(styled, clsx("accordions", className));
+    return React.createElement("section", { className: classes, ...others, "data-testid": testId });
 };
 export default Accordion;
 //# sourceMappingURL=Accordion.js.map

package/lib/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAA;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;AAElE;;;;;GAKG;AACH,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAkB,EAAqB,EAAE;IAClG,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAA;IAChE,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAAE;QAC/D,iCAAS,SAAS,EAAE,OAAO,KAAM,MAAM,iBAAe,MAAM,GAAI,CACtC,CAC7B,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../components/accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD;;;GAGG;AACH,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,MAAM,EACN,GAAG,MAAM,EACM,EAAqB,EAAE;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAA;IAChE,OAAO,iCAAS,SAAS,EAAE,OAAO,KAAM,MAAM,iBAAe,MAAM,GAAI,CAAA;AACzE,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/components/accordion/Accordion.native.d.ts

@@ -1,15 +1,12 @@
-import React from 'react';
-import { AccordionProps } from './AccordionProps';
-import { ComponentName } from '../enumsComponentsName';
-export declare const AccordionContext: React.Context<{
-    inverted: boolean;
-}>;
+/// <reference types="react" />
+import { AccordionProps } from "./AccordionProps";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Accordion Component
  * @param children {ReactNode}
  */
 declare const Accordion: {
-    ({ inverted, ...others }: AccordionProps): JSX.Element;
+    ({ ...others }: AccordionProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Accordion;

package/lib/components/accordion/Accordion.native.js

@@ -1,21 +1,19 @@
-import React, { createContext } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { ComponentName } from '../enumsComponentsName';
-export const AccordionContext = createContext({ inverted: false });
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Accordion Component
  * @param children {ReactNode}
  */
-const Accordion = ({ inverted, ...others }) => {
+const Accordion = ({ ...others }) => {
     const styles = StyleSheet.create({
         accordion: {
-            width: '100%',
+            width: "100%",
             minHeight: 10,
             borderRadius: 6,
         },
     });
-    return (React.createElement(AccordionContext.Provider, { value: { inverted: inverted || false } },
-        React.createElement(View, { style: styles.accordion, ...others })));
+    return React.createElement(View, { style: styles.accordion, ...others });
 };
 Accordion.displayName = ComponentName.Accordion;
 export default Accordion;

package/lib/components/accordion/Accordion.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.native.js","sourceRoot":"","sources":["../../../components/accordion/Accordion.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;AAElE;;;GAGG;AACH,MAAM,SAAS,GAAG,CAAC,EAAG,QAAQ,EAAE,GAAG,MAAM,EAAkB,EAAe,EAAE;IAC1E,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,EAAE;YACb,YAAY,EAAE,CAAC;SAChB;KACF,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAAE;QAC/D,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,KAAM,MAAM,GAAI,CACnB,CAC7B,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAA;AAC/C,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Accordion.native.js","sourceRoot":"","sources":["../../../components/accordion/Accordion.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE;;;GAGG;AACH,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,MAAM,EAAkB,EAAe,EAAE;IAC/D,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,EAAE;YACb,YAAY,EAAE,CAAC;SAChB;KACF,CAAC,CAAA;IAEF,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,KAAM,MAAM,GAAI,CAAA;AACtD,CAAC,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,SAAS,CAAA;AAC/C,eAAe,SAAS,CAAA"}

package/lib/components/accordion/AccordionProps.d.ts

@@ -6,5 +6,4 @@ import { Accessibility } from "../../objects";
 export interface AccordionProps extends Accessibility {
     children?: React.ReactNode;
     className?: string;
-    inverted?: boolean;
 }

package/lib/components/accordion/body/AccordionBody.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { AccordionBodyProps } from './AccordionBodyProps';
+import * as React from "react";
+import { AccordionBodyProps } from "./AccordionBodyProps";
 /**
  * Accordion Body Component
  * @param children {React.ReactNode} Children for Accordion body

package/lib/components/accordion/body/AccordionBody.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import * as React from "react";
+import clsx from "clsx";
+import { hashClass } from "../../../helpers";
+import { useTrilogyContext } from "../../../context";
 /**
  * Accordion Body Component
  * @param children {React.ReactNode} Children for Accordion body
@@ -11,8 +11,10 @@ import { useTrilogyContext } from '../../../context';
  */
 const AccordionBody = ({ children, className, dataId, testId, ...others }) => {
     const { styled } = useTrilogyContext();
-    return (React.createElement("div", { "data-accordion-body": true, "data-id": dataId, "data-testid": testId, className: hashClass(styled, clsx('accordion-body is-clipped', className)), ...others },
-        React.createElement("div", { className: hashClass(styled, clsx('accordion-content')) }, children)));
+    return (React.createElement("div", { "data-accordion-body": true, "data-id": dataId, "data-testid": testId, className: hashClass(styled, clsx("accordion-body is-clipped", className)), ...others, onClick: (e) => {
+            e.stopPropagation();
+        } },
+        React.createElement("div", { className: hashClass(styled, clsx("accordion-content")) }, children)));
 };
 export default AccordionBody;
 //# sourceMappingURL=AccordionBody.js.map

package/lib/components/accordion/body/AccordionBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.js","sourceRoot":"","sources":["../../../../components/accordion/body/AccordionBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD;;;;;;GAMG;AACH,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,EAAsB,EAAqB,EAAE;IAClH,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,CACL,oDAA0B,IAAI,aAChB,MAAM,iBACH,MAAM,EAAE,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAAC,KAAM,MAAM;QAC7G,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,IAAG,QAAQ,CAAO,CAC1E,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"AccordionBody.js","sourceRoot":"","sources":["../../../../components/accordion/body/AccordionBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;;;GAMG;AACH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,EACN,GAAG,MAAM,EACU,EAAqB,EAAE;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,CACL,oDACuB,IAAI,aAChB,MAAM,iBACF,MAAM,EACnB,SAAS,EAAE,SAAS,CAClB,MAAM,EACN,IAAI,CAAC,2BAA2B,EAAE,SAAS,CAAC,CAC7C,KACG,MAAM,EACV,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;QAED,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC,IACzD,QAAQ,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/lib/components/accordion/body/AccordionBody.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AccordionBodyProps } from './AccordionBodyProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { AccordionBodyProps } from "./AccordionBodyProps";
+import { ComponentName } from "../../../components/enumsComponentsName";
 /**
  * Accordion Header
  * @param children {React.ReactNode} Children for Accordion body

package/lib/components/accordion/body/AccordionBody.native.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { ComponentName } from '../../enumsComponentsName';
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { ComponentName } from "../../../components/enumsComponentsName";
 /**
  * Accordion Header
  * @param children {React.ReactNode} Children for Accordion body

package/lib/components/accordion/body/AccordionBody.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.native.js","sourceRoot":"","sources":["../../../../components/accordion/body/AccordionBody.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD;;;GAGG;AACH,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,EAAsB,EAAe,EAAE;IACjF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,aAAa,EAAE,EAAE;KAClB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,KAAM,MAAM,IAC5C,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CAAA;AAED,aAAa,CAAC,WAAW,GAAG,aAAa,CAAC,aAAa,CAAA;AAEvD,eAAe,aAAa,CAAA"}
+{"version":3,"file":"AccordionBody.native.js","sourceRoot":"","sources":["../../../../components/accordion/body/AccordionBody.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE;;;GAGG;AACH,MAAM,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,GAAG,MAAM,EACU,EAAe,EAAE;IACpC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,aAAa,EAAE,EAAE;KAClB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,KAAM,MAAM,IAC5C,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CAAA;AAED,aAAa,CAAC,WAAW,GAAG,aAAa,CAAC,aAAa,CAAA;AAEvD,eAAe,aAAa,CAAA"}

package/lib/components/accordion/header/AccordionHeader.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { AccordionHeaderProps } from './AccordionHeaderProps';
+import * as React from "react";
+import { AccordionHeaderProps } from "./AccordionHeaderProps";
 /**
  * Accordion Header
  * @param className {string} Additionnal CSS Classes
@@ -7,5 +7,5 @@ import { AccordionHeaderProps } from './AccordionHeaderProps';
  * @param testId
  * @param others
  */
-declare const AccordionHeader: ({ children, className, testId, dataId, ...others }: AccordionHeaderProps) => React.JSX.Element;
+declare const AccordionHeader: ({ children, className, testId, ...others }: AccordionHeaderProps) => React.JSX.Element;
 export default AccordionHeader;

package/lib/components/accordion/header/AccordionHeader.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import * as React from "react";
+import clsx from "clsx";
+import { hashClass } from "../../../helpers";
+import { useTrilogyContext } from "../../../context";
 /**
  * Accordion Header
  * @param className {string} Additionnal CSS Classes
@@ -9,11 +9,9 @@ import { useTrilogyContext } from '../../../context';
  * @param testId
  * @param others
  */
-const AccordionHeader = ({ children, className, testId, dataId, ...others }) => {
+const AccordionHeader = ({ children, className, testId, ...others }) => {
     const { styled } = useTrilogyContext();
-    return (React.createElement("label", { "data-accordion-header": true, className: hashClass(styled, clsx('accordion-header', className)), "aria-label": 'toggle', ...others, "data-testid": testId, htmlFor: `toggle_${dataId}` },
-        children,
-        React.createElement("div", { className: hashClass(styled, clsx('toggle')) })));
+    return (React.createElement("summary", { "data-accordion-header": true, className: hashClass(styled, clsx("accordion-header", className)), "aria-label": 'toggle', ...others, "data-testid": testId }, children));
 };
 export default AccordionHeader;
 //# sourceMappingURL=AccordionHeader.js.map

package/lib/components/accordion/header/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../../../components/accordion/header/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD;;;;;;GAMG;AACH,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,EACN,GAAG,MAAM,EACY,EAAqB,EAAE;IAC5C,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,CACL,wDACyB,IAAI,EAC3B,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,gBACtD,QAAQ,KACf,MAAM,iBACG,MAAM,EACnB,OAAO,EAAE,UAAU,MAAM,EAAE;QAE1B,QAAQ;QACT,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAI,CAC/C,CACT,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../../../components/accordion/header/AccordionHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;;;GAMG;AACH,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,GAAG,MAAM,EACY,EAAqB,EAAE;IAC5C,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,CACL,0DACyB,IAAI,EAC3B,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,gBACtD,QAAQ,KACf,MAAM,iBACG,MAAM,IAElB,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/lib/components/accordion/header/AccordionHeader.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AccordionHeaderProps } from './AccordionHeaderProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { AccordionHeaderProps } from "./AccordionHeaderProps";
+import { ComponentName } from "../../../components/enumsComponentsName";
 /**
  * Accordion Header
  * @param children {React.ReactNode}

package/lib/components/accordion/header/AccordionHeader.native.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import { ComponentName } from '../../enumsComponentsName';
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import { ComponentName } from "../../../components/enumsComponentsName";
 /**
  * Accordion Header
  * @param children {React.ReactNode}
@@ -8,9 +8,9 @@ import { ComponentName } from '../../enumsComponentsName';
 const AccordionHeader = ({ children }) => {
     const styles = StyleSheet.create({
         header: {
-            maxWidth: '95%',
-            minWidth: '95%',
-            width: '95%',
+            maxWidth: "95%",
+            minWidth: "95%",
+            width: "95%"
         },
     });
     return React.createElement(View, { style: styles.header }, children);

package/lib/components/accordion/header/AccordionHeader.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.native.js","sourceRoot":"","sources":["../../../../components/accordion/header/AccordionHeader.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAe,EAAE;IAC1E,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,MAAM,EAAE;YACN,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;SACb;KACF,CAAC,CAAA;IAEF,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,IAAG,QAAQ,CAAQ,CAAA;AACtD,CAAC,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,aAAa,CAAC,eAAe,CAAA;AAE3D,eAAe,eAAe,CAAA"}
+{"version":3,"file":"AccordionHeader.native.js","sourceRoot":"","sources":["../../../../components/accordion/header/AccordionHeader.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAe,EAAE;IAC1E,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,MAAM,EAAE;YACN,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;SACb;KACF,CAAC,CAAA;IAEF,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,IAAG,QAAQ,CAAQ,CAAA;AACtD,CAAC,CAAA;AAED,eAAe,CAAC,WAAW,GAAG,aAAa,CAAC,eAAe,CAAA;AAE3D,eAAe,eAAe,CAAA"}

package/lib/components/accordion/item/AccordionItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AccordionItemProps } from './AccordionItemProps';
+import { AccordionItemProps } from "./AccordionItemProps";
 /**
  * Accordion Item Component
  * @param active {boolean} Active Accordion Item

package/lib/components/accordion/item/AccordionItem.js

@@ -1,10 +1,8 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import shortid from 'shortid';
-import { is, has } from '../../../services';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
-import { AccordionContext } from '../Accordion';
+import React, { useEffect, useRef, useState } from "react";
+import shortid from "shortid";
+import clsx from "clsx";
+import { hashClass } from "../../../helpers";
+import { useTrilogyContext } from "../../../context";
 /**
  * Accordion Item Component
  * @param active {boolean} Active Accordion Item
@@ -22,7 +20,6 @@ const AccordionItem = ({ active, className, children, id = shortid.generate(), o
     const [isActive, setIsActive] = useState(active || false);
     const [expandedHeight, setExpandedHeight] = useState();
     const [collapsedHeight, setCollapsedHeight] = useState();
-    const accordionContextValues = useContext(AccordionContext);
     // Faire à l'avance un pré-calcul de la hauteur de l'accordéon plié et déplié,
     // Ces infos sont enregistrées dans les data-attributs "data-collapsed" et "data-expanded".
     // Nécessaire quand l'accordion est consommé par un parent où un traitement supplémentaire
@@ -46,7 +43,7 @@ const AccordionItem = ({ active, className, children, id = shortid.generate(), o
     useEffect(() => {
         setIsActive(active || false);
     }, [active]);
-    const classes = hashClass(styled, clsx('accordion', className, isActive && is('active'), disabled && is('disabled'), (accordionContextValues.inverted) && has('background-white')));
+    const classes = hashClass(styled, clsx("accordion", className));
     let childrenElement;
     if (children) {
         childrenElement = Array.isArray(children)
@@ -59,16 +56,19 @@ const AccordionItem = ({ active, className, children, id = shortid.generate(), o
             })
             : children;
     }
-    return (React.createElement("article", { "data-testid": id, className: classes, ref: ref, id: id, ...others, "data-collapsed": collapsedHeight, "data-expanded": expandedHeight, onClick: (e) => {
+    const ariaProps = {};
+    if (disabled) {
+        ariaProps["tabIndex"] = -1;
+        ariaProps["aria-disabled"] = true;
+    }
+    return (React.createElement("details", { open: isActive, ...ariaProps, "data-testid": id, className: classes, ref: ref, id: id, ...others, "data-collapsed": collapsedHeight, "data-expanded": expandedHeight, onClick: (e) => {
             if (onOpen && !isActive)
                 onOpen(e);
             if (onClose && isActive)
                 onClose(e);
             if (onClick)
                 onClick(e);
-        } },
-        !disabled && (React.createElement("input", { type: 'checkbox', "data-accordion-toggle": true, id: `toggle_header-${id}`, style: { display: 'none' }, defaultChecked: isActive })),
-        childrenElement));
+        } }, childrenElement));
 };
 export default AccordionItem;
 //# sourceMappingURL=AccordionItem.js.map

package/lib/components/accordion/item/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../../components/accordion/item/AccordionItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../../../../components/accordion/item/AccordionItem.tsx"],"names":[],"mappings":"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"}

package/lib/components/accordion/item/AccordionItem.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { AccordionItemProps } from './AccordionItemProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { AccordionItemProps } from "./AccordionItemProps";
+import { ComponentName } from "../../../components/enumsComponentsName";
 /**
  * Accordion Item Component
  * @param active {boolean} Active Accordion Item

package/lib/components/accordion/item/AccordionItem.native.js

@@ -1,12 +1,11 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Animated, Easing, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
-import { getColorStyle, mixColors, TrilogyColor } from '../../../objects/facets/Color';
-import { hasDisplayName } from './AccordionItem.helper';
-import { IconName } from '../../icon/IconNameEnum';
-import { Spacer, SpacerSize } from '../../spacer';
-import { Icon, IconSize } from '../../icon';
-import { ComponentName } from '../../enumsComponentsName';
-import { AccordionContext } from '../Accordion.native';
+import React, { useEffect, useRef, useState } from "react";
+import { Animated, Easing, StyleSheet, TouchableWithoutFeedback, View, } from "react-native";
+import { getColorStyle, TrilogyColor } from "../../../objects/facets/Color";
+import { hasDisplayName } from "./AccordionItem.helper";
+import { IconName } from "../../../components/icon/IconNameEnum";
+import { Spacer, SpacerSize } from "../../../components/spacer";
+import { Icon, IconSize } from "../../../components/icon";
+import { ComponentName } from "../../../components/enumsComponentsName";
 /**
  * Accordion Item Component
  * @param active {boolean} Active Accordion Item
@@ -18,45 +17,47 @@ import { AccordionContext } from '../Accordion.native';
  * @param children
  */
 const AccordionItem = ({ active, id, onClick, disabled, onOpen, onClose, children, ...others }) => {
-    const [isActive, setIsActive] = useState(Boolean(typeof active !== 'undefined' ? active : false));
+    const [isActive, setIsActive] = useState(Boolean(typeof active !== "undefined" ? active : false));
     const animatedController = useRef(new Animated.Value(0)).current;
     const [bodySectionHeight, setBodySectionHeight] = useState(0);
-    const [childs, setChilds] = useState({ header: undefined, body: undefined });
-    const accordionContextValues = useContext(AccordionContext);
-    const itemColor = accordionContextValues.inverted
-        ? getColorStyle(TrilogyColor.WHITE)
-        : mixColors(TrilogyColor.GREY, -96);
+    const [childs, setChilds] = useState({
+        header: undefined,
+        body: undefined,
+    });
     const styles = StyleSheet.create({
         item: {
-            width: '100%',
+            width: "100%",
             padding: 5,
             borderRadius: 6,
-            backgroundColor: itemColor,
+            backgroundColor: disabled
+                ? getColorStyle(TrilogyColor.DISABLED, 1)
+                : getColorStyle(TrilogyColor.BACKGROUND),
             borderWidth: 1,
-            borderColor: mixColors(TrilogyColor.GREY, -80),
+            borderColor: (disabled && getColorStyle(TrilogyColor.DISABLED, 1)) ||
+                getColorStyle(TrilogyColor.FONT, 1)
         },
         bodyBackground: {
             borderRadius: 6,
-            backgroundColor: itemColor,
-            overflow: 'hidden',
+            backgroundColor: getColorStyle(TrilogyColor.BACKGROUND),
+            overflow: "hidden",
         },
         titleContainer: {
-            minWidth: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            paddingLeft: 5,
+            minWidth: "100%",
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingLeft: 10,
             paddingRight: 5,
             paddingTop: 5,
             paddingBottom: 5,
-            borderColor: itemColor,
+            borderColor: getColorStyle(TrilogyColor.BACKGROUND),
         },
         bodyContainer: {
             padding: 10,
             paddingLeft: 10,
             paddingRight: 10,
-            position: 'absolute',
+            position: "absolute",
             bottom: 0,
             borderRadius: 6,
         },
@@ -67,7 +68,7 @@ const AccordionItem = ({ active, id, onClick, disabled, onOpen, onClose, childre
     });
     const arrowAngle = animatedController.interpolate({
         inputRange: [0, 1],
-        outputRange: ['0rad', `${Math.PI}rad`],
+        outputRange: ["0rad", `${Math.PI}rad`],
     });
     useEffect(() => {
         setIsActive(active || false);
@@ -99,15 +100,15 @@ const AccordionItem = ({ active, id, onClick, disabled, onOpen, onClose, childre
         if (Array.isArray(children)) {
             children.forEach((child) => {
                 if (child &&
-                    typeof child === 'object' &&
-                    'type' in child &&
-                    typeof child.type === 'function' &&
+                    typeof child === "object" &&
+                    "type" in child &&
+                    typeof child.type === "function" &&
                     hasDisplayName(child.type)) {
                     switch (child.type.displayName) {
-                        case 'AccordionHeader':
+                        case "AccordionHeader":
                             newChilds.header = child;
                             break;
-                        case 'AccordionBody':
+                        case "AccordionBody":
                             newChilds.body = child;
                             break;
                         default:
@@ -120,7 +121,7 @@ const AccordionItem = ({ active, id, onClick, disabled, onOpen, onClose, childre
     }, [children]);
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: styles.item },
-            React.createElement(TouchableWithoutFeedback, { style: styles.item, testID: id || '', 
+            React.createElement(TouchableWithoutFeedback, { style: styles.item, testID: id || "", 
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 onPress: (e) => {
                     if (!disabled) {
@@ -136,7 +137,7 @@ const AccordionItem = ({ active, id, onClick, disabled, onOpen, onClose, childre
                 React.createElement(View, { style: styles.titleContainer },
                     childs.header && React.createElement(View, null, childs.header),
                     React.createElement(Animated.View, { style: { transform: [{ rotateZ: arrowAngle }] } },
-                        React.createElement(Icon, { name: IconName.ARROW_DOWN, size: IconSize.SMALLER, color: isActive ? TrilogyColor.SECONDARY : TrilogyColor.GREY_DARK })))),
+                        React.createElement(Icon, { name: IconName.ARROW_DOWN, size: IconSize.SMALLER, color: disabled ? TrilogyColor.DISABLED : TrilogyColor.MAIN })))),
             React.createElement(Animated.View, { style: [styles.bodyBackground, { height: bodyHeight }] },
                 React.createElement(View, { style: styles.bodyContainer, 
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any