# @coopdigital/coop-frontend-components

> Components contains styles for using the Co-op components from the design system

Latest version **0.1.2** (published 2018-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @coopdigital/coop-frontend-components
pnpm add @coopdigital/coop-frontend-components
yarn add @coopdigital/coop-frontend-components
bun add @coopdigital/coop-frontend-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2018-10-12 |
| First published | 2018-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 171.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | kylewelsby, matt-tyas, matthewmorek |

## Links

- npm: https://www.npmjs.com/package/@coopdigital/coop-frontend-components
- Repository: https://github.com/coopdigital/coop-frontend-components
- Homepage: https://github.com/coopdigital/coop-frontend-components#readme
- Issues: https://github.com/coopdigital/coop-frontend-components/issues
- npm.io page: https://npm.io/package/@coopdigital/coop-frontend-components

## Recent versions

- 0.1.2 (latest) — 2018-10-12
- 0.1.1 — 2018-08-31
- 0.1.0 — 2018-08-16

## README

# Co-op front-end components

All components are dependant on the [foundations base styles](https://github.com/coopdigital/coop-frontend-foundations).

## Using the components
Components and their usage are documented in the [design system pattern library](https://coop-design-system.herokuapp.com/).

## Building components

All components are name spaced with:

`.coop-c-[name]`

We build our components based on the [BEM style](http://getbem.com/). This combination of name spacing and BEM allows us to build flexible components that can be shared across the Co-op easily - avoiding clashing styles or the need to create complex overrides when developing services.

If you are building a component for the design system you would name space your component with `coop-c-[name]`.

When developing components for specific services choose a sensible namespace for your service. For example funeral care components would be named `fc-c-`.

For example the card component:

```SCSS
/* ===============================================
Cards - Co-op components
=============================================== */

.coop-c-card {
  @include spacing('margin', 'bottom', 'base');
}

.coop-c-card__content {
  padding: 12px;
  color: $text;
  background: $page;
  box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.05);

  > :last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  @include media(medium) {
    padding: 24px;
  }
}

.coop-c-card__image {
  display: block;
  width: 100%;
}

// Only apply the content offset if an image is present
.coop-c-card__image + .coop-c-card__content {
  position: relative;
  z-index: 101;
  margin: -32px $eighth-spacing-unit 0 0;

  @include media(small) {
    margin-right: $quarter-spacing-unit;
  }

  @include media(medium) {
    margin: -50px $half-spacing-unit 0 0;
  }
}

.coop-c-card__title {
  color: $text;
}

.coop-c-card-heading {
  position: absolute;
  top: -20px;
  left: 20px;
  z-index: 110;
  display: block;
  background: $page;
  font-family: $medium;
  font-size: em-calc(16px);
  padding: 8px 12px;

  @include media(medium) {
    top: -24px;
    left: 40px;
    padding: 8px 12px;
    font-size: em-calc(20px);
  }

  @include media(large) {
    top: -35px;
    padding: 18px 24px;
  }
}

.coop-c-card-heading__link {
  display: block;
  color: $text;
  text-decoration: underline;
  border-bottom: 0;
}

.coop-c-card-heading__link:hover {
  color: $text;
  text-decoration: none;
}

// Some styles are only applied if the card is a link
.coop-c-card__link {
  display: block;
  border-bottom: 0;

  .coop-c-card__title {
    text-decoration: underline;
  }

  .coop-c-card__content {
    &:hover {
      .coop-c-card__title {
        text-decoration: none;
      }
    }
  }
}

@mixin cardBackground($link, $backgroundColour) {
  background-color: $backgroundColour;
  box-shadow: none;

  a {
    color: $link;
    border-color: $link;
  }
}

.coop-c-card__content--background {
  @include cardBackground($text, $yellow-mid);
}
```

## Extending components

If you use a global component but want to change it's styling, use extra classes to extend it. For example if you wanted to centre align the text in card, you would add a modifier class (as per BEM) to change the alignment. This SCSS would be written within a `cards.scss` file in your project - do not directly edit the component SCSS unless you are amending styles to be included within the design system. Note that the override class uses the name space from the fictional funeral care service built on top of the base components.

```SCSS
.fc-c-card__content--centre {
  text-align: center;
}
```

---
_Source: https://npm.io/package/@coopdigital/coop-frontend-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._