spark-o-buttons

spark-o-buttons is a React based version of the Origami component o-buttons which is developed by the Origami team. This imports their TypeScript template and converts it to work with React.

Installation

spark-o-buttons is a component that needs to be installed early on in the development if you are doing things with it within the project you're involved in. It is already installed as a component in Spark which lives in a npm workspace. This can be found at packages/@financial-times/spark-o-buttons in the root folder of Spark.

If installing as a dependency (for external repos outside Spark)

npm install @financial-times/spark-o-buttons

N.B. It is recommended (by Origami) to install it as a peer dependency with the flag --peer-dependency on the install script.

Usage

An example of importing the component into an app:

import { Button } from '@financial-times/spark-o-buttons';

<Button
	label="Search"
	type="primary"
	size="big"
	icon="search"
	onClick={this.onSearch}
/>

N.B. See the proptypes for available props types that you can use with a <Button> or <LinkButton> component.

Available Prop Types

| name | type | options | |:-----|:-----|:--------| | label | string, function, object, boolean | Can be any of the 4 types depending on the use of the button in the Spark ecosystem | | type | string | primary, secondary, ghost | | size | string | '', big | | theme | string | inverse, mono | | icon | string | 'arrow-left', 'arrow-right', 'upload', 'tick', 'plus', 'warning', 'arrow-down', 'arrow-up', 'grid', 'list', 'edit', 'download', 'search', 'refresh', 'cross' | | iconOnly | boolean | true, false | | attributes | object | | | onClick | function | use onClick functions defined in Spark |

N.B. attributes allows you to do things like adding a disabled state to a button, or to add data attributes for tracking and so on.

Development

If updating the Origami component in the workspace to a newer version (for Spark only)

If you are looking to update the Origami dependency from the current version which could be out of date to the latest version that Origami has put on NPM, you can do the command below or use the specific version in place instead of @latest i.e. @7.7.2:

npm install @financial-times/o-buttons@latest --workspace @financial-times/spark-o-buttons

Omission of Storybook

The team has decided not to use Storybook for development as it will be removed from Spark in the future. To test development of a component, it is advised to find an instance of the component in the Spark codebase and to change it to use the component instead and to test further.