---
# System prepended metadata

title: Notes sur le composant ProgramCard

---

# 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 |

