@economist/fabric-components

Fabric Components

These are a set of Components for exclusive usage by The Economist Group. For documentation and migration guides visit here. A few bigger set of components are served via their own npm packages, you can find the fabric-carousel at https://github.com/EconomistDigitalSolutions/fabric-carousel

Table of Contents

• How to Install
• Usage
• Contributing
• Issues
• Suggestions
• Support
• Change logs

How to Install

• In your console run the following npm command.

  npm install @economist/fabric-components
  

Usage

A sample implementation would be:

import React from "react";
import HeadEcon from "@economist/fabric-components/header/headecon/HeadEcon";

const App = () => {
    return (
        <div>
            <HeadEcon />
        </div>
    );
};

export default App;

Contributing

Using the script

We have a handy script set up that you can use to create components. It can be invoked directly from the scripts folder or via npm

npm run new

The bash script will ask for category; if a category does not exist, it will create it for you. After you have a provided a category, bash will ask you to name the component, it will capitalise the first letter for you, see naming conventions below for more information. Once you provide it with component name, you will get three files, namely, "Component.jsx", "component.test.js", "component.md".

All new components should have prop-types, and atleast one test written. If a component has a lot of functionalities, make sure that they are tested as well. Finally, feel free to illustrate the usage of component and add in relevant information in the markdown file.

Manually creating components.

Feel free to create your components manually, though make sure to follow our naming conventions and directory conventions which are as follows :

Directory Conventions

• Place your component in appropriate category. Certain overly complex components such as the masthead etc. can get their own categories.
• Inside the category, create a directory with the component's name in lowercase.

Naming Conventions

• Make sure that the "component.jsx" is named exactly the same as what is being export from the javascript inside.
• Lowercase the markdown files so as to not conflict imports during tests.
• Tests are to be kept lowercase as well.

Once you have created your component, do make sure to add it to the relevant categories index.js as an export.

Issues

For Component suggestions, please look into Suggestions.

• Provide a complete yet concise title to issue.
• Try to list as much information as you can about the issue.
  • Steps to reproduce the issue (wherever relevant)
  • Current Configuration / Specs (in case of performance related issue)
  • Please assign a label to the issue.
  • If you can find any similar issues, if they cover everythign your issue does, please refrain from creating a new one, if not, make sure you link to that issue as well.

Suggestions

Follow the below mentioned guidelines for filing component suggestions.

• List the scope of suggestion.
• List how the suggested component can be of value and have a general application.
• List if you are willing to contribute and code the suggested component.
• If available, illustrate with an example.

Support

For further support in using, and any questions should be addressed to Aaditya Sahay