desyre

    2.1.4 • Public • Published

    desyre

    Asset library for Renault Design System.

    How to use

    Configure Renault artifactory:

    • Connect to Renault artifactory to ensure your account is already created
    • Go to your profile and get your API key (or generate it and copy it)
    • Then configure artifactory in your npm settings:
    npm config set registry https://artifactory.dt.renault.com/artifactory/api/npm/npm/
    npm login
    # and enter: your ipn as username, copied API key as password, and your email 

    Install package:

    npm i desyre

    And then link files from node_modules/desyre/dist/ folder. Example in a SCSS file: Include the entire library:

    @import '~desyre/dist/css/desyre.min.css';

    Include only the used components:

    @import '~desyre/dist/css/global/desyre-text.min.css';
    @import '~desyre/dist/css/global/desyre-fonts.min.css';
    @import '~desyre/dist/css/compoenents/desyre.min.css';

    See complete documentation about variables and available components here: https://design-system.gitlab-pages.dt.renault.com/desyre/landing-page

    How to contribute

    Build

    npm run build:all

    Files are generated in dist/ folder.

    Watchers

    You can also start the watchers, to generate files each time the source change:

    npm run watch

    Preview

    Styles can be previewed from html pages in test/html/ folder.

    Publish a new version

    npm version <newversion>
    npm publish

    This step is done by Gitlab CI. You need to bump the version, then merge develop branch into master branch to trigger the package publication to npm repository.

    Workflow

    Git workflow

    • Main development branch is develop.
    • A feature branch starts from develop, and is attached to a merge request. Once accepted, the feature branch can be merged in develop and will be deleted.
    • When develop is stable and candidate for a package release in production, bump the version and commit it, then merge to master. It will be automatically published to npm repository.

    For each development (feature, fix, rework, ...), the CHANGELOG.md file should be updated with the description of the new changes. It will enable to have the complete list of all changes linked to a release. For further information, please read the CHANGELOG.md file.

    Conventions

    CSS objects naming

    Variables

    CSS variables must be named according to the following pattern:

    dsr-elementtype-elementname--modifier

    --modifier is optional

    Examples:

    dsr-color-yellow
    dsr-color-red--light

    Classes

    CSS classes must be named according to the following pattern:

    dsr-block__element--modifier

    block is a standalone entity that is meaningful on its own: header, container, menu, checkbox, input ...

    element is a part of a block that has no standalone meaning and is semantically tied to its block: menu item, list item, checkbox caption, header title ...

    modifier is a flag on a block or element. Use them to change appearance, behavior or state: disabled, highlighted, checked, fixed, size big, color yellow

    --modifier is optional

    Find more examples there: http://getbem.com/naming/

    Examples:

    dsr-btn__icon
    dsr-btn__icon--hover
    dsr-card__title
    dsr-card__title--danger

    Install

    npm i desyre

    DownloadsWeekly Downloads

    85

    Version

    2.1.4

    License

    ISC

    Unpacked Size

    86.6 MB

    Total Files

    130

    Last publish

    Collaborators

    • fabien99
    • sophietk
    • tezukalan