Ripple

Ripple is a Vue.js component pattern library for SDP.

Intro

Visit our styleguide site for Ripple: ripple.sdp.vic.gov.au.

This git repo is a monorepo which contains all Ripple component packages. View all Ripple componet packages.

This git repo also contains a styleguide site which uses Storybook and can be used for local development environment.

Page template examples

Below are a list example page demos showing how to use Ripple components in your Vue template.

• Landing page demo

  Code example: /src/storybook-components/Page.vue

• Campain page demo

  Code example: /src/storybook-components/Page.vue

• Search page demo

  Code example: /src/storybook-components/Page.vue

• Event search page demo

  Code example: /src/storybook-components/Page.vue

Install Ripple in your Nuxt project

We will provide a start template soon. Below is just a simple example.

Example for installing @dpc-sdp/ripple-global and @dpc-sdp/ripple-site-header.

npm install @dpc-sdp/ripple-global @dpc-sdp/ripple-site-header --save

Usage in Nuxt project

import RplSiteHeader from '@dpc-sdp/ripple-site-header'
import RplBreadcrumb from '@dpc-sdp/ripple-breadcrumb'
import RplFooterNavigation from '@dpc-sdp/ripple-footer-navigation'

Contributing

We welcome contributions to Ripple. Check out contributing guide.

Lerna

We manage package deployments to npm using lerna.

Package deployments are an automatic process as part of CI.