@engie-group/fluid-design-system-vue

Fluid Design System Vue

0.1.0
npm

Version published: 2 years ago

Maintainers: 3

Created: 2 years ago

Source

Vue Fluid Design System by ENGIE

Quick Start

Install the package inside your application:

npm install @engie-group/fluid-design-system-vue

How to use

Font & css

<!-- Font and icon font used by Fluid. -->
<link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&amp;display=swap"
  rel="stylesheet"
/>

<!-- 
  Fluid tokens as CSS variables.
  Can also be imported from the package, see instructions below.
-->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens/lib/css/tokens.css"
/>

You can also import the stylesheet from the @engie-group/fluid-design-tokens package.

import "@engie-group/fluid-design-system/lib/tokens.css";

Using the component library with the "Single File Component" syntax

<script setup>
  import { Button } from "@engie-group/fluid-design-system-vue";

  function sayHello() {
    console.log("Hello world!");
  }
</script>

<template>
  <button emphasis="subtle" @click="sayHello">Do an action</button>
</template>

Using the component library directly in the browser

<body>
  <div id="app">
    <nj-button emphasis="subtle" @click="sayHello">Do an action</nj-button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-vue/dist/reboot.umd.cjs"></script>

  <script>
    const { createApp } = Vue;
    const { Button: NjButton } = FluidVue;

    createApp({
      components: { NjButton },
      methods: {
        sayHello() {
          console.log("Hello world");
        },
      },
    }).mount("#app");
  </script>
</body>

How to Contribute new Components

Create a component folder inside src/components:

src/components -
            / componentName -
                            / ComponentName.vue
                            / ComponentName.test.ts

Update src/main.ts by adding component import/export
Create a component folder inside fluid-doc-vue package:

src/stories/componentName/ComponentName.stories.ts

Keywords

FAQs

What is @engie-group/fluid-design-system-vue?

Is @engie-group/fluid-design-system-vue well maintained?

Package last updated on 21 Oct 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install