@cdssnc/gcds-components-react

La version française suit.

GC Design System Components – React

GC Design System Components – React provides the GC Design System Components within a React wrapper to ease integration of the components into React apps.

Documentation

You can find the full documentation for GC Design System Components on https://design-system.alpha.canada.ca/.

Installation

Install from npm

Navigate to the root folder of your project and run:

npm install @cdssnc/gcds-components @cdssnc/gcds-components-react

Place the following code in the index.js file of your app.

import '@cdssnc/gcds-components-react/gcds.css'

How to contribute

If you are interested in contributing to GC Design System Components, please read our contributing guidelines.

License

Code released under the MIT License.

---

Composants de Système de design GC — React

Composants de Système de design GC — React fournit des composants de Système de design GC dans un encapsulateur React afin de faciliter l’intégration dans les applications React.

Documentation

Toute la documentation sur les composants de Système de design GC est accessible à l’adresse https://systeme-design.alpha.canada.ca/.

Installation

Installer le paquet avec npm

Naviguez jusqu'au dossier racine de votre projet et exécutez :

npm install @cdssnc/gcds-components @cdssnc/gcds-components-react

Insérez le code qui suit dans le fichier index.js de votre application.

import '@cdssnc/gcds-components-react/gcds.css'

Apportez votre contribution

Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos lignes directrices sur la contribution.

Licence

Code publié en vertu de la licence MIT (en anglais).

Changelog

0.25.0

Released on: 2024-08-19

:rotating_light: Breaking changes

The Card and Stepper components have been redesigned and will have some changes in their API structure.

Updates to the Card component

The property type will be removed as the component will now only support link interactions. If you’re using type=action, note that this will be unsupported in this release.

The tag property will be replaced by a new property named badge.

The property title-element will be replaced by a new property named card-title-tag.

We’re dropping support for the footer slot (slot="footer"). We’re removing it as we haven’t observed any use of the slot.

New: We’ve introduced a slot to support the display of HTML text formatting within the Card component. You can still use the description property for this purpose with a simple string value (text) only.

Old implementation

<gcds-card
  type="link"
  card-title=""
  href=""
  title-element=""
  description=""
  tag=""
  img-src=""
  img-alt=""
>
 <slot name=”footer”></slot>
</gcds-card>

New implementation

<gcds-card
  card-title=""
  href=""
  card-title-tag="a"
  description=""
  badge=""
  img-src=""
  img-alt=""
>
 <slot></slot>
</gcds-card>

Updates to the Stepper component

New: A new tag property will be available to allow the developer to choose the right heading to render the element.

New (required): The stepper will now require text or an element passed into the slot to display the heading element. It’s a required property and the component will not render without it.

If you experience issues with the change, ‌‌contact us.

Old implementation

<gcds-stepper
  current-step=""
  total-steps=""
></gcds-stepper>

New implementation

<gcds-stepper
  current-step=""
  total-steps=""
  tag=""
>
  <slot></slot>
</gcds-stepper>

:rocket: New Features

• Add gcds-date-input component (#607) (ce0b4cc)
• add new main-container prop to container (#613) (4eef9b3)
• update gcds-card (breaking change) (#578) (4a72105)
• updates to stepper component (breaking change + new tag attribute) (#573) (0f8bd2f)

:arrows_counterclockwise: Code Refactoring

• change fieldset legend required to span (#612) (ca5108f)