Merge pull request #105 from BouyguesTelecom/update/props

Update/props
BouyguesTelecom · Sep 11, 2024 · 55f1f64 · 55f1f64
2 parents e2d8c3f + 71e4265
commit 55f1f64
Show file tree

Hide file tree

Showing 83 changed files with 380 additions and 416 deletions.
diff --git a/docs/templates/assets/index-4aa72204.js b/docs/templates/assets/index-4aa72204.js
diff --git a/docs/templates/assets/index-7070589d.js b/docs/templates/assets/index-7070589d.js
diff --git a/docs/templates/index.html b/docs/templates/index.html
@@ -7,7 +7,7 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Trilogy React Typescript" />
   <title>Trilogy DS</title>
-  <script type="module" crossorigin src="/templates/assets/index-7070589d.js"></script>
+  <script type="module" crossorigin src="/templates/assets/index-4aa72204.js"></script>
 </head>
 
 <body>

diff --git a/examples/react-template/screens/Accordion.tsx b/examples/react-template/screens/Accordion.tsx
@@ -23,7 +23,7 @@ export const AccordionScreen = (): JSX.Element => {
           <AccordionHeader>
             <Text >Hello World 1</Text>
           </AccordionHeader>
-          <AccordionBody>
+          <AccordionBody dataId="totooooo-test-id" testId="totooooo">
             <Text>Lorem ipsum dolor sit amet lorem</Text>
           </AccordionBody>
         </AccordionItem>

diff --git a/examples/react-template/screens/Alert.tsx b/examples/react-template/screens/Alert.tsx
@@ -12,7 +12,7 @@ import {
   Button,
   Section
 } from "@trilogy-ds/react/components";
-import {AlertState} from "@trilogy-ds/react/objects";
+import {StatusState} from "@trilogy-ds/react/objects";
 import {useContext, useState} from "react";
 import ToasterContext from "@trilogy-ds/react/lib/components/alert/context/ToasterContext";
 import {ToasterAlertProvider} from "@trilogy-ds/react/lib/components/alert";
@@ -39,7 +39,7 @@ export const AlertScreen = (): JSX.Element => {
         title,
         description,
         iconName: IconName.ALERT,
-        alert: AlertState.WARNING,
+        status: StatusState.WARNING,
         onClick: () => console.log('onClick'),
         closable: () => alert('closable'),
         onHide: () => console.log('onHide'),
@@ -62,15 +62,15 @@ export const AlertScreen = (): JSX.Element => {
       <ToasterAlertView />
       <Container>
         <View>
-          {Object.values(AlertState).map((alert, index) => {
+          {Object.values(StatusState).map((status, index) => {
             return (
               <AutoLayout key={index}>
-                <Title level={TitleLevels.TWO}>AlertState : {alert}</Title>
+                <Title level={TitleLevels.TWO}>StatusState : {status}</Title>
                 <Spacer size={10}/>
                 <Alert
                   display
-                  alert={alert}
-                  title={alert}
+                  status={status}
+                  title={status}
                   description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.."
                 />
                 <Divider/>

diff --git a/examples/react-template/screens/Autolayout.tsx b/examples/react-template/screens/Autolayout.tsx
@@ -1,4 +1,4 @@
-import { AlertState, TrilogyColor } from '@trilogy-ds/react'
+import { StatusState, TrilogyColor } from '@trilogy-ds/react'
 import {
   Accordion,
   AccordionBody,
@@ -73,7 +73,7 @@ export const AutolayoutScreen = (): JSX.Element => {
       </Accordion>
       <Alert
         display
-        alert={AlertState.SUCCESS}
+        status={StatusState.SUCCESS}
         title={'Test alert'}
         description='Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
       />

diff --git a/examples/react-template/screens/CountDown.tsx b/examples/react-template/screens/CountDown.tsx
@@ -10,7 +10,7 @@ import {
 export const CountdownScreen = (): JSX.Element => {
   return (
     <Section>
-      <Countdown deadline={new Date("2023-12-24 18:00:00")}></Countdown>
+      <Countdown inverted deadline={new Date("2023-12-24 18:00:00")}></Countdown>
       <Spacer size={SpacerSize.MEDIUM} />
       <Countdown
         small

diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { AlertState, TypographyBold, Section, Title, TitleLevels, Divider, Progress, ProgressItem, ProgressRadial, Text, TextLevels  } from '@trilogy-ds/react'
+import { StatusState, TypographyBold, Section, Title, TitleLevels, Divider, Progress, ProgressItem, ProgressRadial, Text, TextLevels  } from '@trilogy-ds/react'
 
 export const ProgressScreen = (): JSX.Element => {
 
@@ -12,36 +12,36 @@ export const ProgressScreen = (): JSX.Element => {
 
         <Progress percent={30} />
 
-        <Progress percent={30} alert='INFO' />
+        <Progress percent={30} status='INFO' />
 
-        <Progress percent={30} alert='WARNING' />
+        <Progress percent={30} status='WARNING' />
 
-        <Progress percent={30} alert='ERROR' />
+        <Progress percent={30} status='ERROR' />
 
-        <Progress percent={30} alert='SUCCESS' />
+        <Progress percent={30} status='SUCCESS' />
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Barre de progression empilée</Title>
         <Divider />
 
         <Progress stacked>
-          <ProgressItem percent={15} alert={AlertState.SUCCESS} />
-          <ProgressItem percent={15} alert={AlertState.INFO} />
-          <ProgressItem percent={15} alert={AlertState.WARNING} />
-          <ProgressItem percent={15} alert={AlertState.ERROR} />
+          <ProgressItem percent={15} status={StatusState.SUCCESS} />
+          <ProgressItem percent={15} status={StatusState.INFO} />
+          <ProgressItem percent={15} status={StatusState.WARNING} />
+          <ProgressItem percent={15} status={StatusState.ERROR} />
         </Progress>
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Progression avec unique légende</Title>
         <Divider />
 
-        <Progress percent={30} alert={AlertState.INFO} uniqueLegend='My unique legend' />
+        <Progress percent={30} status={StatusState.INFO} uniqueLegend='My unique legend' />
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Progression avec légendes aux extremités</Title>
         <Divider />
 
-        <Progress percent={15} alert={AlertState.INFO} firstExtremLegend='0 Go' secondExtremLegend='5 Go' />
+        <Progress percent={15} status={StatusState.INFO} firstExtremLegend='0 Go' secondExtremLegend='5 Go' />
       </Section>
       <Section>
         <Title level={TitleLevels.THREE}>Barre de progression circulaire children custo</Title>

diff --git a/examples/react-template/screens/Radio.tsx b/examples/react-template/screens/Radio.tsx
@@ -21,10 +21,22 @@ export const RadioScreen = (): JSX.Element => {
   return (
     <AutoLayout>
       <Container>
-        <Text typo={TypographyAlign.TEXT_CENTERED}>
+        <Rows>
+          <RowItem>
+          <Text typo={TypographyAlign.TEXT_CENTERED}>
           Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
           consectetur, adipisci velit...
         </Text>
+          </RowItem>
+          <RowItem>
+          <Text typo={TypographyAlign.TEXT_CENTERED}>
+          Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
+          consectetur, adipisci velit...
+        </Text>
+          </RowItem>
+
+        </Rows>
+
         <Columns>
           <ColumnsItem centered>
             <Radio

diff --git a/examples/react-template/screens/Switch.tsx b/examples/react-template/screens/Switch.tsx
@@ -1,10 +1,12 @@
 import * as React from "react";
 import { Section, Switch } from "@trilogy-ds/react/components";
+import { StatusState } from "@trilogy-ds/react/objects";
 
 export const SwitchScreen = (): JSX.Element => {
   return (
     <Section>
       <Switch
+        status={StatusState.ERROR}
         label="Switch one"
         name="switch one"
         // eslint-disable-next-line no-console

diff --git a/examples/react-template/screens/Toaster.tsx b/examples/react-template/screens/Toaster.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react'
 import { Button, Container, IconName, Section, ToasterContext, ToasterProvider } from '@trilogy-ds/react/components'
 import { ToasterPosition } from '@trilogy-ds/react/components/toaster/ToasterProps'
-import { AlertState } from '@trilogy-ds/react/objects'
+import { StatusState } from '@trilogy-ds/react/objects'
 
 export const ToasterScreen = (): JSX.Element => {
   const ToasterViewComp: React.FC = () => {
@@ -24,7 +24,7 @@ export const ToasterScreen = (): JSX.Element => {
         title,
         description,
         iconName: IconName.INFOS_CIRCLE,
-        alert: AlertState.WARNING,
+        alert: StatusState.WARNING,
         onClick: () => console.log('onClick'),
         closable: () => console.log('closable'),
         onHide: () => console.log('onHide'),

diff --git a/packages/react/components/accordion/body/AccordionBody.tsx b/packages/react/components/accordion/body/AccordionBody.tsx
@@ -9,7 +9,6 @@ import { useTrilogyContext } from "@/context"
  * @param children {React.ReactNode} Children for Accordion body
  * - ------------------ WEB PROPERTIES -----------------------
  * @param className {string} Additionnal CSS Classes
- * @param contentClassName {string} Additionnal CSS Classes for accordion-content
  */
 const AccordionBody = ({
   children,

diff --git a/packages/react/components/accordion/body/AccordionBodyProps.ts b/packages/react/components/accordion/body/AccordionBodyProps.ts
@@ -6,6 +6,5 @@ import { Accessibility } from "../../../objects"
 export interface AccordionBodyProps extends Accessibility{
   children?: React.ReactNode
   className?: string
-  contentClassName?: string
   dataId?: string
 }
diff --git a/packages/react/components/alert/Alert.native.tsx b/packages/react/components/alert/Alert.native.tsx
@@ -5,9 +5,9 @@ import { Spacer, SpacerSize } from "@/components/spacer"
 import { View } from "@/components/view"
 import { Text, TextLevels } from "@/components/text"
 import { Title, TitleLevels } from "@/components/title"
-import { getAlertIconName, getAlertStyle } from "@/objects/facets/Alert"
+import { getStatusIconName, getStatusStyle } from "@/objects/facets/Status"
 import { getColorStyle, TrilogyColor } from "@/objects/facets/Color"
-import { AlertProps, ToasterAlertPosition, ToasterAlertProps } from "./AlertProps"
+import { AlertProps, ToasterAlertPosition, ToasterStatusProps } from "./AlertProps"
 import { Icon, IconName, IconSize } from "@/components/icon"
 import { TypographyBold } from "@/objects"
 import { ComponentName } from "@/components/enumsComponentsName"
@@ -19,7 +19,7 @@ import { ToasterShowContext } from "./context/ToasterContextProps"
  * Function call by context for showing toast
  * @param params {ToasterShowContext}
  */
-const showToast: ToasterShowContext = (params: ToasterAlertProps) => {
+const showToast: ToasterShowContext = (params: ToasterStatusProps) => {
   const {
     position,
     duration,
@@ -30,7 +30,7 @@ const showToast: ToasterShowContext = (params: ToasterAlertProps) => {
     closable,
     onHide,
     iconName,
-    alert,
+    status,
   } = params
 
   LibToast.show({
@@ -49,28 +49,28 @@ const showToast: ToasterShowContext = (params: ToasterAlertProps) => {
  * @param iconName {IconName} Custom icon
  * @param title {string} Alert title content
  * @param description {string|ReactNode} Aleert description content
- * @param alert {AlertState} Alert Variant (INFO|SUCCESS|WARNING|ERROR)
+ * @param alert {StatusState} Alert Variant (INFO|SUCCESS|WARNING|ERROR)
  * @param info (boolean) Small info alert use it without button and arrow
  * @param onClick {Function} onClick Event for all alert
  */
 const Alert = ({
-  alert,
+  status,
   iconName,
   title,
   description,
   onClick,
   display,
   ...others
 }: AlertProps): JSX.Element => {
-  const backgroundColor = getColorStyle(alert as TrilogyColor, 1)
-  const fontColor = getAlertStyle(alert) || getColorStyle(TrilogyColor.MAIN)
+  const backgroundColor = getColorStyle(status as TrilogyColor, 1)
+  const fontColor = getStatusStyle(status) || getColorStyle(TrilogyColor.MAIN)
   let alertView: JSX.Element
 
   const styles = StyleSheet.create({
     container: {
       width: "100%",
       paddingTop: 10,
-      borderColor: alert !== undefined ? fontColor : backgroundColor,
+      borderColor: status !== undefined ? fontColor : backgroundColor,
       paddingBottom: 10,
       borderWidth: 1,
       backgroundColor: backgroundColor,
@@ -82,7 +82,7 @@ const Alert = ({
     icon: {
       justifyContent: "center",
       alignItems: "center",
-      color: alert !== undefined ? fontColor : getColorStyle(TrilogyColor.MAIN),
+      color: status !== undefined ? fontColor : getColorStyle(TrilogyColor.MAIN),
     },
     description: {
       justifyContent: "center",
@@ -105,7 +105,7 @@ const Alert = ({
         <ColumnsItem size={1}>
           <Icon
             style={styles.icon}
-            name={iconName ? iconName : getAlertIconName(alert)}
+            name={iconName ? iconName : getStatusIconName(status)}
           />
         </ColumnsItem>
 
@@ -157,15 +157,15 @@ const Alert = ({
  * @param title {string} Notification title content
  * @param description {string|ReactNode} Notification description content
  * @param iconName {IconName} Custom icon
- * @param alert {AlertState} Alert Variant (INFO|SUCCESS|WARNING|ERROR)
+ * @param status {StatusState} Alert Variant (INFO|SUCCESS|WARNING|ERROR)
  * @param onClick {Function} onClick Event for all notification
  * @param closable {Function} onClick Event on cross icon
  */
-export const ToasterAlert: React.FC<{ props: ToasterAlertProps }> = ({ props }) => {
-  const { title, description, iconName, alert, closable, onClick } = props
+export const ToasterAlert: React.FC<{ props: ToasterStatusProps }> = ({ props }) => {
+  const { title, description, iconName, status, closable, onClick } = props
 
-  const color = getAlertStyle(alert) || getColorStyle(TrilogyColor.MAIN)
-  const backgroundColor = getColorStyle(alert as TrilogyColor, 1)
+  const color = getStatusStyle(status) || getColorStyle(TrilogyColor.MAIN)
+  const backgroundColor = getColorStyle(status as TrilogyColor, 1)
 
   const styles = StyleSheet.create({
     toaster: {
@@ -226,7 +226,7 @@ export const ToasterAlert: React.FC<{ props: ToasterAlertProps }> = ({ props })
  * @param offset {number} Offset position margin (Default: 10 dp)
  * @param others
  */
-export const ToasterAlertProvider = ({ children }: ToasterAlertProps): JSX.Element => {
+export const ToasterAlertProvider = ({ children }: ToasterStatusProps): JSX.Element => {
   const toastConfig = {
     tomatoToast: ToasterAlert,
   }

diff --git a/packages/react/components/alert/Alert.stories.tsx b/packages/react/components/alert/Alert.stories.tsx
@@ -1,48 +1,48 @@
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 import Alert from "./Alert";
-import { AlertProps } from "./AlertProps";
-import { AlertState } from "../../objects";
+import { StatusProps } from "./StatusProps";
+import { StatusState } from "../../objects";
 
 export default {
   title: "Components/Alert",
   component: Alert,
 } as Meta;
 
-export const Base: Story<AlertProps> = (args) => <Alert {...args} />;
+export const Base: Story<StatusProps> = (args) => <Alert {...args} />;
 
 Base.args = {
   display: true,
-  alert: AlertState.INFO,
+  alert: StatusState.INFO,
   title: "Alert information",
   description:
     "Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book..",
 };
 
-export const Variant: Story<AlertProps> = () => (
+export const Variant: Story<StatusProps> = () => (
   <>
     {" "}
     <Alert
       display
-      alert={AlertState.INFO}
+      alert={StatusState.INFO}
       title="Alert information"
       description="Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book.."
     />{" "}
     <Alert
       display
-      alert={AlertState.WARNING}
+      alert={StatusState.WARNING}
       title="Alert information"
       description="Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book.."
     />
     <Alert
       display
-      alert={AlertState.SUCCESS}
+      alert={StatusState.SUCCESS}
       title="Alert information"
       description="Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book.."
     />
     <Alert
       display
-      alert={AlertState.ERROR}
+      alert={StatusState.ERROR}
       title="Alert information"
       description="Lorem Ipsum is simply dummy text type and scrambled it to make a type specimen book.."
     />{" "}