@aymen_diva/diva-demo-call-to-action

Diva Shared Demo Call To Action

A React component for displaying customized demo call-to-action sections across Diva Software platforms.

Features

• CSS isolation using Tailwind prefix

• Responsive design

Installation

Prerequisites

• Node.js (v14 or higher)

• NPM or Yarn

• Valid NPM authentication token from Diva Software

Authentication Setup

1. Contact the package administrator ([e-mail]) to obtain an NPM token

2. Create an .npmrc file in your project's root directory with the following content:

  
  
  

@npm_username:registry=https://registry.npmjs.org/

  
  
  

//registry.npmjs.org/:_authToken=PROVIDED_NPM_TOKEN

  
  
  

Package Installation

Choose one of the following methods to install the package:

Option 1: Add to package.json:

{

"dependencies": {

"@aymen_diva/diva-demo-call-to-action": "*"

}

}

Then run:

  
  
  

npm  install

  
  
  

Option 2: Install directly via npm:

  
  
  

npm  install  @aymen_diva/diva-demo-call-to-action@latest

  
  
  

Usage

1. Import Styles

Add the following import to your main CSS file (e.g., index.css):

@import  '@aymen_diva/diva-demo-call-to-action/dist/index.css';

2. Import and Use Components

import { GeneralDemoCallToAction } from  '@aymen_diva/diva-demo-call-to-action'

  

function  App() {

return (

<GeneralDemoCallToAction>

<GeneralColWrapper>

<GeneralTitle />

  

<GeneralDescription />

  

<GeneralButton />

</GeneralColWrapper>

  

<GenralRowWrapper>

<GeneralImage />

</GenralRowWrapper>

</GeneralDemoCallToAction>

)

}

  

export  default  App

GeneralDemoCallToAction Props

| Prop | Type | Required | Description | default Value |

| ---------------------- | ------------------------------ | -------- | ------------------------------------------------ | ------------- |

| children | ReactNode | yes | Components Inside the wrapper | - |

| direction | column,row | no | flex Direction | column |

| cardBackground | hexColor | no | the background Color of the wrapper | #ffffff |

| darkModeCardBackground | hexColor | no | the background Color of the wrapper in dark mode | undefined |

| radius | 'none', 'sm', 'md' ,'lg' ,'xl' | no | Card border Radius | none |

| hasPadding | boolean | no | card has padding x | false |

| darkModeName | string | no | the storage key used is theme | theme |

GeneralLayoutWrapper Props

| Prop | Type | Required | Description | default Value |

| --------- | -------------- | -------- | ----------------------------- | ------------- |

| children | ReactNode | yes | Components Inside the wrapper | - |

| direction | 'column','row' | no | flex Direction | 'column' |

GeneralButton Props

| Prop | Type | Required | Description | default Value |

| ---------- | ------------------------- | -------- | ----------------------------- | ---------------- |

| buttonText | string | no | the text inside the button | Réserver Un Démo |

| buttonPath | string | no | href when clicking the button | /demo |

| width | 'quarter', 'half' ,'full' | no | the width of the button | 'half' |

GeneralDescription Props

| Prop | Type | Required | Description | default Value |

| ------------- | ----------------------------- | -------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

| description | string | no | the text to be shown | Maximisez l’efficacité et la rentabilité avec une solution ERP qui redéfinit la gestion textile. Découvrez ci-dessous les différents modules qui composent notre outil global. |

| width | 'full' , 'half' , 'contained' | no | the width of the paragraph | 'full' |

| textColor | hex color | no | the color of the paragraph | '#000000' |

| darkTextColor | hex color | no | the color of the paragraph on dark mode | undefined |

| size | 'sm' , 'lg' , 'xl' | no | the size of the paragraph | 'sm' |

| textAlign | 'start' , 'center' , 'end' | no | the text align of the description | 'start' |

GeneralColWrapper Props

| Prop | Type | Required | Description | default Value |

| -------- | --------- | -------- | ------------------------------ | ------------- |

| children | ReactNode | true | the data shown on this wrapper | |

GeneralTitle Props

| Prop | Type | Required | Description | default Value |

| ------------- | -------------------------- | -------- | ------------------------------------------------- | ------------------------- |

| title | string | no | the title to display | 'Votre atout stratégique' |

| textAlign | 'start' , 'center' , 'end' | no | the size of the title | 'start' |

| font | 'bold' , 'semiBold' | no | the font weight of the title | 'bold' |

| subTitle | string | no | if added it will be shown on the top of the title | undefined |

| textColor | hex color | no | the color of the title | '#000000' |

| darkTextColor | hex color | no | the color of the title on dark mode | undefined |

GeneralImage Props

| Prop | Type | Required | Description | default Value |

| ---------- | ------- | -------- | ------------------------------ | --------------------------------- |

| imagePath | string | no | the image path | 'https://i.imgur.com/vRVX5WZ.png' |

| scaleImage | boolean | no | if the image need to be scaled | false |

GenralRowWrapper Props

| Prop | Type | Required | Description | default Value |

| -------- | --------- | -------- | ------------------------------ | ------------- |

| children | ReactNode | true | the data shown on this wrapper | |

Dark Mode Toggle Configuration

For the dark mode toggle functionality, we assume that the consuming application uses localStorage to manage the dark and light mode states. By default, the storage key used is theme. However, if you are using a different key name, you can specify it by passing the key as the darkModeName argument in the GeneralDemoCallToActionProps.

The expected values for dark mode are the strings 'dark' and 'light'. If you are using a boolean value (e.g., true for dark mode and false for light mode), we recommend adding a separate localStorage item that is synchronized with your dark mode state, and ensure the value is stored as a string ('dark' or 'light').

CSS Isolation

The package uses a pkg- prefix in its Tailwind configuration to prevent style conflicts with the consuming project. This ensures all package-specific styles are namespaced and won't interfere with your project's existing styles.

Troubleshooting

If you encounter any issues:

1. Ensure you have the correct NPM token configured

2. Verify that styles are properly imported

3. Confirm that the component is wrapped in a React application context

Support

For technical support or questions, please contact:

• Email: [e-mail]

License

Proprietary - All rights reserved by Diva Software# Diva Shared Demo Call To Action

A React component for displaying customized demo call-to-action sections across Diva Software platforms.

Features

• CSS isolation using Tailwind prefix

• Responsive design

Installation

Prerequisites

• Node.js (v14 or higher)

• NPM or Yarn

• Valid NPM authentication token from Diva Software

Authentication Setup

1. Contact the package administrator ([e-mail]) to obtain an NPM token

2. Create an .npmrc file in your project's root directory with the following content:

  
  
  

@npm_username:registry=https://registry.npmjs.org/

  
  
  

//registry.npmjs.org/:_authToken=PROVIDED_NPM_TOKEN

  
  
  

Package Installation

Choose one of the following methods to install the package:

Option 1: Add to package.json:

{

"dependencies": {

"@aymen_diva/diva-demo-call-to-action": "*"

}

}

Then run:

  
  
  

npm  install

  
  
  

Option 2: Install directly via npm:

  
  
  

npm  install  @aymen_diva/diva-demo-call-to-action@latest

  
  
  

Usage

1. Import Styles

Add the following import to your main CSS file (e.g., index.css):

@import  '@aymen_diva/diva-demo-call-to-action/dist/index.css';

2. Import and Use Components

import { GeneralDemoCallToAction } from  '@aymen_diva/diva-demo-call-to-action'

  

function  App() {

return (

<GeneralDemoCallToAction>

<GeneralColWrapper>

<GeneralTitle />

  

<GeneralDescription />

  

<GeneralButton />

</GeneralColWrapper>

  

<GenralRowWrapper>

<GeneralImage />

</GenralRowWrapper>

</GeneralDemoCallToAction>

)

}

  

export  default  App

GeneralDemoCallToAction Props

Prop	Type	Required	Description	default Value
children	ReactNode	yes	Components Inside the wrapper	-
direction	column,row	no	flex Direction	column
cardBackground	hexColor	no	the background Color of the wrapper	#ffffff
darkModeCardBackground	hexColor	no	the background Color of the wrapper in dark mode	undefined
radius	'none', 'sm', 'md' ,'lg' ,'xl'	no	Card border Radius	none
hasPadding	boolean	no	card has padding x	false
theme	light ,dark	yes	the theme value	need to be specified

GeneralLayoutWrapper Props

Prop	Type	Required	Description	default Value
children	ReactNode	yes	Components Inside the wrapper	-
direction	'column','row'	no	flex Direction	'column'

GeneralButton Props

Prop	Type	Required	Description	default Value
buttonText	string	no	the text inside the button	Réserver Un Démo
buttonPath	string	no	href when clicking the button	/demo
width	'quarter', 'half' ,'full'	no	the width of the button	'half'

GeneralDescription Props

Prop	Type	Required	Description	default Value
description	string	no	the text to be shown	Maximisez l’efficacité et la rentabilité avec une solution ERP qui redéfinit la gestion textile. Découvrez ci-dessous les différents modules qui composent notre outil global.
width	'full' , 'half' , 'contained'	no	the width of the paragraph	'full'
textColor	hex color	no	the color of the paragraph	'#000000'
darkTextColor	hex color	no	the color of the paragraph on dark mode	undefined
size	'sm' , 'lg' , 'xl'	no	the size of the paragraph	'sm'
textAlign	'start' , 'center' , 'end'	no	the text align of the description	'start'

GeneralColWrapper Props

Prop	Type	Required	Description	default Value
children	ReactNode	true	the data shown on this wrapper

GeneralTitle Props

Prop	Type	Required	Description	default Value
title	string	no	the title to display	'Votre atout stratégique'
textAlign	'start' , 'center' , 'end'	no	the size of the title	'start'
font	'bold' , 'semiBold'	no	the font weight of the title	'bold'
subTitle	string	no	if added it will be shown on the top of the title	undefined
textColor	hex color	no	the color of the title	'#000000'
darkTextColor	hex color	no	the color of the title on dark mode	undefined

GeneralImage Props

Prop	Type	Required	Description	default Value
imagePath	string	no	the image path	'https://i.imgur.com/vRVX5WZ.png'
scaleImage	boolean	no	if the image need to be scaled	false

GenralRowWrapper Props

Prop	Type	Required	Description	default Value
children	ReactNode	true	the data shown on this wrapper

CSS Isolation

The package uses a pkg- prefix in its Tailwind configuration to prevent style conflicts with the consuming project. This ensures all package-specific styles are namespaced and won't interfere with your project's existing styles.

Troubleshooting

If you encounter any issues:

1. Ensure you have the correct NPM token configured

2. Verify that styles are properly imported

3. Confirm that the component is wrapped in a React application context

Support

For technical support or questions, please contact:

• Email: [e-mail]

License

Proprietary - All rights reserved by Diva Software