@financial-times/enhanced-search-suggestions v1.0.5

enhanced-search-suggestions 💪🔍

This is the new search suggestions UI component. It will be integrated with the dotcom-ui-header component. This integration will allow the dotcom-ui-header component to dynamically render the appropriate search bar version based on the Ammit flag parameter.

Install the package

npm install @financial-times/enhanced-search-suggestions
# or using yarn
yarn add @financial-times/enhanced-search-suggestions

Contribution

For now, you can run the enhanced-search-suggestions as a webapp on your browser after cloning the repo:

npm install
npm run start

Storybook

The enhanced-search-suggestions project includes a Storybook environment to view and interact with the UI components.

Getting Started with Storybook

To run Storybook locally, follow these steps:

1. Make sure you have already run npm install to install the project dependencies.

2. Start Storybook using the command npm start

3. The Storybook development server should now be running. Open http://localhost:6006 in your browser to access the Storybook UI.

Writing Stories

In the src/stories directory, you can find different story files that demonstrate the various states and use cases of the UI components. Each story file represents a different component or a variation of a component.

To create new stories, follow the Storybook documentation. Use the various Storybook addons to showcase different component states, props, and interactions.

Publishing new version

A new version will be published when a new tag is pushed, you can do so by

1. Update the version and create a new tag for this version and then

npm run version <v x.x.x>

2. Push the changes with the new tag

git push --follow-tags

then circleci will pick the tag and trigger the publish job