@hydrogen-design-system/properties

Hydrogen's property utility

Installation

You can install this tool as a standalone package using npm install @hydrogen-design-system/properties --save-dev

This tool can also be installed as a part of Hydrogen in its entirety. Learn more.

Usage

For standard usage, please see Hydrogen's documentation.

Contributing

Hydrogen's properties are built using Gulp, Sass, Autoprefixer, CSSnano, and Babel.

This utility contains the following in the dist folder:

• the code that is imported by @hydrogen-design-system/system
• a versioned, isolated copy of the tool that can be used independently of the system, either imported by a Sass project, or pulled as compiled CSS

The core code for this component can be found in:

• src/scripts/
• src/styles/properties/

You will need:

• Node

_VERSION

_VERSION is used by Hydrogen to process the component's files and generate a versioned instance of the component when it is built. Please ensure that all references to the main component's data-attribute have _VERSION appended (e.g. data-h2-accordion_VERSION) in the following places:

• src/scripts
• src/styles/instance.scss

It is also important to use _VERSION when creating a function for your component, as the scripts also need to be namespaced in the event a user imports an older version of your component (to prevent conflicting with the newest version). This can be done by creating functions in src/scripts that follow a function myNewFunctionName_VERSION () {} pattern.

Important commands

• npm install
  • installs all development dependencies
• npm run dev
  • builds the versioned instance of the properties and opens the test file in your browser with browser-sync running so that you can moderate your changes
• npm run build
  • runs the build command to process all files for production
  • this will automatically build the system and instanced versions of the properties
• npm publish
  • builds the properties
  • publishes it to the public package repository