Netapp-design-system NPM

UI components library for NetApp platform design system

According to the design system: https://www.figma.com/file/m2qHY6i3DnJfgbvZmn2ESx/Fabric-Design-System

Install

install the library in your service by simply running the following command:

npm install git+http://stash.tlveng.netapp.com/scm/suc/shared-ui-components.git#[version]

Check the latest version of the library from bitbucket and replace the 'version' in the command for example 'v0.7.10' When updating the library to a newer version, simply update the version in package.json and run 'npm run update --legacy-peer-deps'
Usage example
import React, { Component } from 'react'

import ButtonBase from '@netapp/shared-components/components/ButtonBase' import ByolIcon from 'shared-components/assets/svgs/byol.svg'

const Example = ()=>( <> </>)

>You may find all available components at http://netapp-platform-design-system.s3-website.eu-west-3.amazonaws.com/

## Editing/Adding Components
```bash
git clone http://stash.tlveng.netapp.com/scm/suc/shared-ui-components.git

Open a relevant jira on SUC board (http://jira.tlveng.netapp.com/secure/RapidBoard.jspa)
Please develop in a side branch, JIRA_NUMBER_task_description
Each component should include:
1. Default props
2. PropTypes defined
3. Comments describing what is the component and for the props(see other components as example)
4. A stroy including all possible variations of the component, if user interaction is required to achieve several variations, you may use puppeteer test(https://pptr.dev/)
5. Adding the component to index.js
6. run script 'test' from package.json,if there are failures review them, fix if there are unintentional changes
7. run script 'test-fix', it will create new baseline for all tests
8. run script 'build', then commit with the jira name, and very detailed explanation of what changed
9. push changes
Submit a PR to master branch
Once the PR has been reviewed and merged: 1. From 'master' branch 2. If there are breaking changes run script 'version-minor', otherwise 'version-patch' 3. Push changes with tag (git push --tags)
If you are missing permissions for bitbucket or jira talk with Dan Hilerowicz
Tests
We are using 3 kinds of tests:
Visual testing - each story generate a screenshot and compare it with the baseline saved in 'image_snapshots', it will fail if there are significant changes, failed tests screenshots will be saved in 'dif_output' library - zero code zero maintenance :-)
Snapshot testing - each stOry generate a snapshot (html markup) and compare it with the baseline saved in 'snapshots' any difference will fail the test, and will show the diff in the console - zero code zero maintenance :-)
Puppeteer testing/ Interaction testing - for components that need user interaction (click, hover) to see some variations of the components, use puppeteer to simulate the user action and then call for 'compareSnapshotAndScreenshot()' which will generate a screenshot and snapshot, Example:

// At the story, see Select.stories.js for full working example
[story-name].parameters = {
  async puppeteerTest(page) {
    const element = await page.$('.Suc-Select-container')
    await element.click() // open select menu
    await compareSnapshotAndScreenshot(page)
  }
}