# Notes sur le composant ProgramCard
## Props du composant ...
### ... de web-front
| Name | Type | Default | Description |
| --------------- | -------------------------------------- | --------- | --------------------------------------------------------------- |
| externalUrl | string | `''` | If not empty, the link is opened in a new tab. |
| format | `'containergrid' or 'containerslider'` | undefined | Dimensions of the component and the child component "Thumbnail" |
| freemium | FreemiumLinkFragment | undefined | Special program of the component. |
| hideBookmark | boolean | false | If true, the bookmark is hidden. |
| hideTitle | boolean | undefined | If true, the title is hidden. |
| isLazyLoading | boolean | true | If true, image is loaded when it is needed. |
| isNbVideosTitle | boolean | undefined | If true, it displays the number of videos instead of the title. |
| linkSection | string | undefined | Allows you to replace a part of the programLink. |
| onClick | function | undefined | A custom function triggered when the component is clicked. |
| program | ProgramFragment | undefined | Program of the component. |
### ... du design system
| Name | Type | Default | Description |
| ------------ | ---------------------- | ------- | -------------------------------------- |
| description | string | | The description of the component. |
| isBookmarked | boolean | false | If true, the bookmark is displayed. |
| isNew | boolean | false | If true, the badge "New" is displayed. |
| loading | boolean | false | If true, the loader is displayed. |
| thumbnail | object { src: string } | | The image of the component. |
---
## Son arbre de composants sur le projet web-front
```
ProgramCard
│
└───ProgramCardContent
│
└───InteractiveElement
│
└───ProgramThumbnail
│ │
│ └───ImageWithFallback
│
└───AppLink
│ │
│ └───InteractiveElement
│ │
│ └───ExternalLink
│ │
│ └───InternalLink
│
└───NewBadge
│
└───FavoriteProgramIcon
│
└───BookmarkIcon
│
└───InteractiveElement
│
└───GetBookmarkInstance
```
## Props utilisées par chaques composants enfants
~~name~~ : props is only sending to a child, it not used in the current component.
### ProgramCardContent
| Name | Type | Default | Description |
| --------------- | -------------------------------------- | --------- | --------------------------------------------------------------- |
| externalUrl | string | undefined | If not empty, the link is opened in a new tab. |
| ~~format~~ | `'containergrid' or 'containerslider'` | undefined | Dimensions of the component and the child component "Thumbnail" |
| freemium | FreemiumLinkFragment | undefined | Special program of the component. |
| hideBookmark | boolean | false | If true, the bookmark is hidden. |
| hideTitle | boolean | false | If true, the title is hidden. |
| ~~isLazyLoading~~ | boolean | true | If true, image is loaded when it is needed. |
| isNbVideosTitle | boolean | undefined | If true, it displays the number of videos instead of the title. |
| linkSection | string | undefined | Allows you to replace a part of the programLink. |
| ~~onClick~~ | function | undefined | A custom function triggered when the component is clicked. |
| program | ProgramFragment | undefined | Program of the component. |
#### 1. InteractiveElement
| Name | Type | Default | Description |
| --------- | -------------------- | --------- | ---------------------------------------------------------- |
| role | `'link' or 'button'` | | The ARIA role attribute of the element. |
| onClick | function | undefined | A custom function triggered when the component is clicked. |
| className | string | undefined | Override or extend the styles applied to the component. |
| isWrapper | boolean | undefined | If true, cloneElement will not be called. |
| children | node | | The content of the component. |
| ...rest | any | | A spread operator. |
#### 2. ProgramThumbnail
| Name | Type | Default | Description |
| ------------- | -------------------------------------- | ---------------------- | --------------------------------------------------------------- |
| isLazyLoading | boolean | undefined | If true, image is loaded when it is needed. |
| ~~image~~ | ProgramThumbnailFragment | | The image of the component. |
| ~~name~~ | string | `'image de programme'` | The "alt" attribute of the image of the component. |
| format | `'containergrid' or 'containerslider'` | undefined | Dimensions of the component and the child component “Thumbnail” |
##### 2.1. ImageWithFallback
| Name | Type | Default | Description |
| -------- | ------------------------- | --------- | --------------------------------------------------------------------- |
| fallback | any | | Is used when an error occurs and executes itself if it is a function. |
| sources | Array | `[]` | Contains the sources of the image. |
| widths | `Widths` | undefined | Endpoint according to the type of screen. |
| src | string | undefined | Is used if no image has been extracted from "sources". |
| alt | string | `''` | The "alt" attribute of the image of the component. |
| layout | `'responsive' or 'fixed'` | undefined | Allows the image to be adapted to the display. |
| dataHero | boolean | undefined | "react-amphtml" props. |
| loading | `'lazy' or 'eager'` | undefined | The type of loading. |
| ...rest | any | | A spread operator. |
#### 3. AppLink
| Name | Type | Default | Description |
| ---------------- | ----------------- | --------- | ----------------------------------------------------------------------------------------------------------- |
| children | any | | The content of the component. |
| to | `LinkProps['to']` | undefined | A representation of the Link location. |
| ~~className~~ | string | undefined | Override or extend the styles applied to the component. |
| isExternal | boolean | false | Allows you to use the ExternalLink component. |
| ~~withExternalIcon~~ | boolean | undefined | If true, IconExternalLink is displayed. |
| ~~itemProp~~ | string | undefined | |
| ~~onClick~~ | function | undefined | A custom function triggered when the component is clicked. |
| ~~rel~~ | string | undefined | Defines the relationship between a linked resource and the current document. |
| ~~target~~ | string | undefined | Allows you to know where to display the linked URL (a tab, a window or an `<iframe>`). |
| ~~tabIndex~~ | number | undefined | Used to manage the keyboard focus. |
| ~~replace~~ | boolean | undefined | If true, clicking the link will replace the current entry in the history stack instead of adding a new one. |
| ...rest | any | | A spread operator. |
##### 3.1. InteractiveElement
| Name | Type | Default | Description |
| --------- | -------------------- | --------- | ---------------------------------------------------------- |
| role | `'button' or 'link'` | | The ARIA role attribute of the element. |
| isWrapper | boolean | undefined | If true, cloneElement will not be called. |
| onClick | function | undefined | A custom function triggered when the component is clicked. |
| className | string | undefined | Override or extend the styles applied to the component. |
| ...rest | any | | A spread operator. |
##### 3.2. ExternalLink
| Name | Type | Default | Description |
| ---------------- | ----------------- | --------------------- | -------------------------------------------------------------------------------------- |
| children | any | | The content of the component. |
| to | `LinkProps['to']` | undefined | A representation of the Link location. |
| rel | string | `noopener noreferrer` | Defines the relationship between a linked resource and the current document. |
| target | string | `_blank` | Allows you to know where to display the linked URL (a tab, a window or an `<iframe>`). |
| withExternalIcon | boolean | false | If true, IconExternalLink is displayed. |
| ...rest | any | | A spread operator. |
##### 3.3. InternalLink
| Name | Type | Default | Description |
| -------- | ----------------- | ------- | -------------------------------------- |
| children | any | | The content of the component. |
| to | `LinkProps['to']` | `''` | A representation of the Link location. |
| ...rest | any | | A spread operator. |
#### 4. NewBadge
| Name | Type | Default | Description |
| --------- | ------ | ------- | ------------------------------------------------------- |
| className | string | `''` | Override or extend the styles applied to the component. |
#### 5. FavoriteProgramIcon
| Name | Type | Default | Description |
| --------------------- | -------- | --------- | ---------------------------------------------------------------------- |
| id | string | `''` | `id` of Program. |
| ~~isFavorite~~ | boolean | false | If true, a check icon is displayed otherwise an add icon is displayed. |
| ~~withoutHoverEffect~~ | boolean | false | If true, applies a particular style. |
| ~~className~~ | string | `''` | Override or extend the styles applied to the component. |
| ~~suffix~~ | string | `Suivre` | Is displayed if "isFavorite" is false. |
| ~~updateSuffix~~ | string | `Suivre` | Is displayed if "isFavorite" is true. |
| ~~programSlug~~ | string | undefined | The program slug in the "state" of "history. |
| onAddToBookmarks | function | undefined | A custom function triggered when the component is clicked. |
| onRemoveFromBookmarks | function | undefined | A custom function triggered when the component is clicked. |
##### 5.1. BookmarkIcon
| Name | Type | Default | Description |
| --------------------- | -------- | --------- | ---------------------------------------------------------------------- |
| isBookmarked | boolean | | If true, a check icon is displayed otherwise an add icon is displayed. |
| className | string | undefined | Override or extend the styles applied to the component. |
| suffix | string | | Is displayed if "isBookmarked" is false. |
| updateSuffix | string | | Is displayed if "isBookmarked" is true. |
| withoutHoverEffect | boolean | false | If true, applies a particular style. |
| programSlug | string | undefined | The program slug in the "state" of "history. |
| transparent | boolean | false | If true, applies a particular style. |
| onAddToBookmarks | function | | A custom function triggered when the component is clicked. |
| onRemoveFromBookmarks | function | | A custom function triggered when the component is clicked. |
##### 5.1.1 InteractiveElement
| Name | Type | Default | Description |
| --------- | -------------------- | --------- | ---------------------------------------------------------- |
| role | `'button' or 'link'` | | The ARIA role attribute of the element. |
| isWrapper | boolean | undefined | Override or extend the styles applied to the component. |
| onClick | function | undefined | A custom function triggered when the component is clicked. |
| className | string | undefined | Override or extend the styles applied to the component. |
| children | node | | The content of the component. |
| ...rest | any | | The other props of the parent component. |
##### 5.1.1.1 GetBookmarkInstance
| Name | Type | Default | Description |
| ------------ | ------- | ------- | --------------------------------------------------------------------- |
| isBookmarked | boolean | | If true, a check icon is displayed otherwise an add icon is displayed |
Sign in with Wallet
Connect another wallet