@coopdigital/coop-frontend-components

Co-op front-end components

All components are dependant on the foundations base styles.

Using the components

Components and their usage are documented in the design system pattern library.

Building components

All components are name spaced with:

.coop-c-[name]

We build our components based on the BEM style. 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:

/* ===============================================
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.

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