# Quintype Arrow Components
🏹 _React Component library for Malibu & Page Builder based on the **Arrow Design System**_
---
Arrow consists of a set of pre styled components based on [Malibu](https://developers.quintype.com/malibu/)'s implementation of the [Atomic Design Methodology](https://developers.quintype.com/malibu/tutorial/implementing-a-design-system.html).
Consumers of the library can import _Atoms_, _Molecules_ and _Rows_ as required by the layout. This includes composible story cards which can accept custom components amidst other pre defined atoms.
The storybook for arrow components can be found [here](https://developers.quintype.com/quintype-node-arrow)
### Installation
```bash
npm install --save @quintype/arrow
```
### Usage
Import the styles to the root stylesheet (SASS loader required):
```css
@import "@quintype/arrow/dist/app.scss";
```
Import the required component from the library:
```jsx
import { ThreeColGrid } from "@quintype/arrow";
const MyComponent = () => (
<>
{/* Some Component Logic */}
);
```
The context config consists of the params for the component, the structure is as such:
```jsx
const contextConfig = {
theme: "#ffffff",
isborder: true,
showSection: true,
showAuthorTime: true,
showSubheadline: true
};
```
### Styling
Arrow's styling follows the [Malibu](https://developers.quintype.com/malibu/)'s convention of using _CSS modules_ for it's internal component styling.
All the component styling is governed by global style variables, as defined in the earlier imported `app.scss`, which can be overridden when required. These include the ability to change the _colour palette, spacing, font scales, font families, line height and font weights_.
if you want to set of CSS rules that resets the styling of all HTML elements to a consistent baseline, install reset using `npm install reset-css` and import `@import 'reset-css'` in your project.
you can follow `https://www.npmjs.com/package/reset-css`.
Expand global style variables
:root {
/* Colour Palette */
--arrow-c-brand1: #b80002;
--arrow-c-brand2: #2f81cd;
--arrow-c-brand3: #4860bc;
--arrow-c-brand4: #f6f8ff;
--arrow-c-accent1: #2fd072;
--arrow-c-accent2: #f5a623;
--arrow-c-accent3: #ff214b;
--arrow-c-mono1: #0d0d0d;
--arrow-c-mono2: #333333;
--arrow-c-mono3: #636363;
--arrow-c-mono4: #797979;
--arrow-c-mono5: #d1d1d1;
--arrow-c-mono6: #e9e9e9;
--arrow-c-mono7: #f9f9f9;
--arrow-c-invert-mono1: #f9f9f9;
--arrow-c-invert-mono2: #e9e9e9;
--arrow-c-invert-mono3: #d1d1d1;
--arrow-c-invert-mono4: #797979;
--arrow-c-invert-mono5: #636363;
--arrow-c-invert-mono6: #333333;
--arrow-c-invert-mono7: #0d0d0d;
--arrow-c-dark: #0d0d0d;
--arrow-c-light: #ffffff;
/* Spacing */
--arrow-spacing-xs: 4px;
--arrow-spacing-s: 8px;
--arrow-spacing-m: 16px;
--arrow-spacing-l: 24px;
--arrow-spacing-xl: 32px;
/* Font Scale */
--arrow-fs-tiny: 14px;
--arrow-fs-xxs: 15px;
--arrow-fs-xs: 16px;
--arrow-fs-s: 18px;
--arrow-fs-m: 20px;
--arrow-fs-l: 24px;
--arrow-fs-xl: 26px;
--arrow-fs-xxl: 30px;
--arrow-fs-huge: 32px;
--arrow-fs-jumbo: 54px;
/* Font Family */
--arrow-typeface-primary: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
--arrow-typeface-secondary: Verdana, Geneva, Tahoma, sans-serif;
/* Line height */
--arrow-lh-1: 1;
--arrow-lh-2: 1.2;
--arrow-lh-3: 1.3;
--arrow-lh-4: 1.4;
--arrow-lh-5: 1.5;
/* Font Weight */
--arrow-fw-light: 300;
--arrow-fw-normal: 400;
--arrow-fw-semi-bold: 600;
--arrow-fw-bold: 700;
}
### Development
Arrow follows [atomic design principles](https://atomicdesign.bradfrost.com/chapter-2/). Components are splits into Atoms, Molecules and Rows (Similar to Templates in atomic design).
Each leaf folder follows below structure:
```
../HeroImage/
- index.js # A react component with styles.
- hero-image.m.css # CSS Module file
- README.md # Documentation of this component.
- stories.js # Code to inject multiple variations of
the component to story book.
```
### Releasing a new arrow version
To release a new arrow version, run the below command
```
./publish
```
To develop a new component in arrow/change a current one, these are the steps you should be following:
#### npm start storybook
This will start our storybook in a URL (something like http://localhost:53035/) where you can develop the component in isolation. Your changes will reflect in the story book.
#### Sync local changes for development
- During development, you might want to sync the changes done locally in arrow with your Malibu app. Run
```sh
npm run sync-files-to
```
- Now you'll see a message `onchange: watching ./src/**/*`. Make some change inside `./src` dir and save, it should trigger a re-build of arrow. You'll see a message `onchange: command completed with code 0` and the built files will be copied to inside your app's node_modules dir
- You might have to re-run the Malibu app's server in order for the arrow changes to reflect
#### Updating to arrow v1
- Update `@quintype/build` to v3.10.3 or higher. This is needed to process the css files exported by arrow.
- Change `@import "@quintype/arrow/dist/app.scss"` to `@import "@quintype/arrow/app.scss"` in your app.scss file
- Arrow v1 exports every component's CSS separately for better SSR performance
- So suppose you were using `Headline` and `HeroImage` arrow components previously, you might be importing them like this:
```js
import { Headline, HeroImage } from "@quintype/arrow";
```
import component styles like so:
```js
// import "@quintype/arrow//styles.arrow.css"
import { Headline, HeroImage } from "@quintype/arrow";
import "@quintype/arrow/Headline/styles.arrow.css";
import "@quintype/arrow/HeroImage/styles.arrow.css";
```
#### Updating to arrow v2
Arrow v2, has no breaking changes. It only updates the `quintype-node-components` package version from v2.29.3 to v2.31.2.
#### Updating to arrow v3
In Arrow v3, we moved storybook to webpack5 and Updated `@quintype/build` to v4.0.0