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's implementation of the Atomic Design Methodology.

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

Installation

npm install --save @quintype/arrow

Usage

Import the styles to the root stylesheet (SASS loader required):

@import "@quintype/arrow/dist/app.scss";

Import the required component from the library:

import { ThreeColGrid } from "@quintype/arrow";

const MyComponent = () => (
  <>
    {/* Some Component Logic */}
    <ThreeColGrid collection={collection} config={contextConfig} />
  </>
);

The context config consists of the params for the component, the structure is as such:

const contextConfig = {
  theme: "#ffffff",
  isborder: true,
  showSection: true,
  showAuthorTime: true,
  showSubheadline: true
};

Styling

Arrow's styling follows the 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.

: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. 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

  npm run sync-files-to <path to your app>

• 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:

  import { Headline, HeroImage } from "@quintype/arrow";

  import component styles like so:

  // import "@quintype/arrow/<component name>/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