WVS Org Shared Components

This is a shared component library for use by WVS org. We have made this accessible under MIT license. Please see the License for full details.

Installation

Using npm: npm install wvs-org-shared-components

Usage

Import the component you require:

import React from 'react';
import { Button } from 'wvs-org-shared-components';

function App() {
  return (
    <Button
      disabled={someDisabledState}
      isUpdating={someInUpdatingState}
      onClick={() => console.log('I have been clicked!')}
      small={true}
      updatingText={'Component is updating...'}
      variant={'secondary'}
    >
      Click me!
    </Button>
  );
}

export default App;

Adding to the library

In order to add into the library:

• Take a copy of an existing component in the /src/components directory
• Rename and update the component directory, component.tsx, index.ts and styles.tsx
• Ensure that the new component is included in src/components/index.ts

Once updates are made and you are ready to deploy:

• Update package.json to increase the version number
• Have a PR made and merged to main branch
• Run npm run rollup
• Run npm publish
• Run git tag -a vx.x.x -m "Release vx.x.x"
• Run git push --tags
• Go here in browser and click "Draft a new release"
• Select the tag you just pushed
• Add a release title that matches the version number
• Complete an explanation of the release, some things to note on this:
  • Add ##What's Changed at top
  • Add ### New Features and include a list below
  • Prepend any items with [Breaking/Deprecation/Feature/Improvement] making sure to order them as shown here
• Make sure that "Set as the latest release" is selected and press "Publish Release"

Components that are being phased out

The following components are being phased out and should not be used in new projects:

• CallToAction
• Content
• Dialog
• Hero
• HeroAspectRatio
• IframeWrapper
• Image
• ImageWrapper

They will continue to be supported in existing projects but will not be updated with new features or bug fixes.