0.5.3 • Published 13 days ago

@engie-group/fluid-design-system-vue v0.5.3

Weekly downloads
-
License
EPL-2.0
Repository
github
Last release
13 days ago

Vue Fluid Design System by ENGIE

Quick Start

Install the package inside your application:

npm install --save-exact @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
0.5.3

13 days ago

0.5.2

1 month ago

0.5.1

1 month ago

0.5.0

2 months ago

0.4.2

3 months ago

0.4.1

4 months ago

0.4.0

5 months ago

0.3.0

7 months ago

0.2.6

8 months ago

0.3.2

7 months ago

0.3.1

7 months ago

0.2.5

11 months ago

0.3.3

7 months ago

0.2.1

1 year ago

0.2.0

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.4

1 year ago

0.1.1

1 year ago

0.1.0

2 years ago