Component Renovation

draft

Component Renovation is the ability to alter a component with available CSS Properties for the component and elements. All with out changing the code or affecting other instances of the component.

Purpose

There are occasions when a developed component does not fit the desired objectives or goals. Previously this would require new custom one-off work. With Neighborhood we have enhanced our ability for styling components not only by the brand but also with the use of CSS Properties. All available styles for components are set to properties that can be passed to componentRenovation property of a given component.

Warning

It’s important to note that this is designed and built to be a break glass in case of emergencies type feature. Altering of styles can go against defined and implemented best practices that we have already established. Please use best judgement when utilizing componentRenovation.

Example

We’ve entered content to a page using the Headline Content component.

Now let’s say there’s a promotion about to launch for another brand or we want to alter some of the styling to make this component standout on the page. Instead of creating a new component we would leverage the available CSS Properties for the component and it’s elements and pass any desired updates as part of the componentRenovation property.

For this example let’s say we wanted to promote something for Earth Day and in doing so wanted to emphasize green which isn’t part of our brand palette. We are going to want to change the text color of eyebrow, the font size, font family, font weight, and text color of title and we also should change the background color and border color for ctaButton. For added measure let’s also change the content max-width for Headline Content to 700px.

Reviewing the documentation for Headline Content we see the available CSS Properties. Additional we can view the documentation for the elements that we want to renovate styling for. title, eyebrow, and link.

Once we have the properties we need, we begin to update the componentRenovation property on the component with our new values for the CSS Properties.

SYNTAX AND CASE DO MATTER. --nbhd-[CSS-PROPERTY]: value; Like entering an inline-style you enter the CSS Property name then a : followed by the value you want for that property and ; While this might not be entirely intuitive, that’s by design. We encourage using the components as they’re built but have provided additional capabilities for those extreme cases.

Back to our Earth Day example. We’re going to change the font weight to 300 and the font size to 45px Then change the text color to be black.

--nbhd-title-font-weight: 300; --nbhd-title-font-size: 45px; --nbhd-title-text-color: black;

Next up we want to change the text color of eyebrow to darkgreen to emphasize Earth Day.

--nbhd-eyebrow-text-color: darkgreen;

We also wanted to change the content max with to 700px;

--nbhd-headline-content--content--max-width: 700px;

And lastly we want to change the ctaButton background and border color to both be darkgreen.

--nbhd-button-primary-background-color: darkgreen; --nbhd-button-primary-border-color: darkgreen;

Now that we’ve defined our renovation updates for this component let’s add them to the componentRenovation property.

--nbhd-title-font-weight: 300; --nbhd-title-font-size: 45px; --nbhd-title-text-color: black; --nbhd-eyebrow-text-color: darkgreen; --nbhd-headline-content--content--max-width: 700px; --nbhd-button-primary-background-color: darkgreen; --nbhd-button-primary-border-color: darkgreen;

And now the final result.