bpk-logos v0.0.1

bpk-logos

Backpack logos (Sass mixins & React components).

Installation

First make sure you have a .npmrc file in the same directory as your package.json with the following contents:

registry=https://artifactory.skyscannertools.net/artifactory/api/npm/npm

Then install using the npm CLI as normal:

npm install bpk-logos --save-dev

Usage

As with all atom level Backpack components, there are two methods of available to consume: React components and Sass mixins.

React components

import React from 'react';
import {
  BpkInlineLogo,
  BpkSymbolLogo,
  BpkStackedLogo,
  BpkTianxunLogo,
  BpkTianxunStackedLogo
} from 'bpk-logos';

export default MyComponent = () => (
  <div>
    <BpkInlineLogo />
    <BpkSymbolLogo />
    <BpkStackedLogo />
    <BpkTianxunLogo />
    <BpkTianxunStackedLogo />
  </div>
)

Note: If you want to adjust any css properties such as fill or height then define a class like so:

@import '~bpk-logos/sass';

.my-custom-logo {
  @include bpk-logo-symbol('', $bpk-spacing-xxl);

  fill: $bpk-color-sky-blue;
}

...and pass your custom className as a prop:

import React from 'react';
import { BpkInlineLogo } from 'bpk-logos';

export default MyComponent = () => (
  <BpkInlineLogo className="my-custom-logo" />
)

Sass mixins

Each mixin accepts two arguments:

• $logo key (comprised of {bpk_logo_name}-{bpk_color_name})
• $height value (please try to use one of Backpacks spacing values i.e. $bpk-spacing-xl)

@import '~bpk-logos/sass';

.my-symbol-logo {
  @include bpk-logo-symbol(symbol-sky-blue, $bpk-spacing-xxl);
}

.my-inline-logo {
  @include bpk-logo-inline(inline-sky-gray);
}

.my-stacked-logo {
  @include bpk-logo-stacked(stacked-white);
}

.my-tianxun-logo {
  @include bpk-logo-tianxun(tianxun-panjin);
}

.my-tianxun-stacked-logo {
  @include bpk-logo-tianxun-stacked(tianxun-stacked-monteverde);
}

Theme props

The fill color for the svg images is exposed as a theme property:

• logoFillColor

Developing

• npm install - Installs dependencies
• npm run lint - Runs linter
• npm run build - Optimises svgs, generates Sass datauri variables & React components
• npm start - Runs build and starts a dev server
• npm test - Runs linter and tests

See CONTRIBUTING.md if you want to contribute.