Skip to content

What you need to know about Core 30

Gjensidige got a new corporate identity (NCI for short) last year. Now is the time for all digital products to make the jump.

What's NCI?

Hopefully most are aware that during last year Gjensidige got a new design. Posters on the side of bus stops, TV-commercials, internet banners, rollups on all our events - they're all using the new corporate identity (NCI for short).

It is not a question about "if" but "when" all digital products will make the jump. Team Builders have been working hard to upgrade Gjensidige's design system to NCI. The entire  Builders website (this!) made the jump in time for Christmas. In the process almost half of our Core Components got upgraded.

So, Core 30?

For multiple fully logical reasons we refer to NCI as "Core 30". Core 30 will make your jump to NCI much easier, but there should be no confusion: changing identity in all code will take time, and at times be confusing. Luckily Team Builders and Digitalization and Designs' Discipline Leaders will be here to help you, and we're all doing this together.

The Core Components is the code-part of the design system, and I will focus on that in this article.

Core Components

In previous Core we shipped and versioned all our components individually. This had multiple benefits, and was decided on after previously versioning everything the same (but still shipping individually).

Now, after doing that for a few years, the teams have raised multiple concerns about upgrades being painful, peer dependencies being overly complicated, and more. So we have decided to try something new - shipping everything in only one package, with one version number. We're hopeful that if you use a few of the components, upgrading will now be much smoother.

So, Team Builders created a new package, it's called core-components and its version from start, meaning 1.0. This is meant to challenge your entire brain - Core 30, version 1. You'll only need to add this as a dependency, and then use the new paths to each component, to use them.

Team Builders will continue to host old Core, but only add critical updates (but of course always accept pull requests for old Core, if you for special reasons need to support the past). Builders focus from now is to finish designing and developing more of the missing components.

Dependency

The one* dependency for NCI, nothing more, nothing less.

@gjensidige/core-components

Then import and use the desired component in your code, more or less like before.

* We actually still have icons , analytics, and some other packages separate.

How to upgrade

The job itself is more of a "search and replace" than an upgrade. All old Core components will be replaced by this new package.

One suggested approach is to:

1) Create a new branch, install the new package, keep the old ones.

2) Search and replace all import-statements. When one component is fully replaced with the new one, remove the old dependency.

3) Study the "Breaking changes" page for Core 30 and progress accordingly.

4) Running your app now should show you a mix of old and new NCI components.

This will help you estimate the remaining task, what components do you miss, which of these do you need the most, are you able to pitch in and help Team Builders code it?

NCI has more finished components in Figma than in code, so pitching in as a developer is pretty straight forward.

Breaking changes?

Team Builders have over the course of development kept a tidy list over breaking changes. Some props were removed, some changed name, some were added. You need to study this list. They have tried their hardest not to break more than necessary, but there's also been a lot of old tech debt lurking around and now was the best time to get rid of that.

There's also the scenario of brand new components you might want to use, or move over to. There's also the scenario of removed, merged, or drastically changed components. It wont hurt for both developers and designers to consider what's in Core 30 and what's used in current code, perhaps some smart and easier roads can be taken?

How to estimate?

Yeah, this is a tough one. First rule is to always be open about all the unknowns when estimating, as it is essential for understanding sudden adjustments down the road. Core's NCI Components are not complete yet, and Team Builders will need some of your help on that too. It's a bit like Christmas, you cannot just receive gifts without also giving something back. NCI is something that affects all of Gjensidige.

Another important thing is to begin upgrading and starting to use Core 30 in a new branch. Try it out! What components do you have now? Are there any breaking changes, and how do they impact you? What components are missing? How are they being prioritized? Will this require work from your team? How big is the code base of your app? Is there a middle-way were the major parts of your app can be NCI while the more complicated parts of the code can have a simplified upgrade?

We're also here to discuss these problems with you.

Way forward

Try the new NCI Core Components, and get an overview on your code. What is missing in Core, what is just a matter of swapping tokens?

If you're in the unlucky situation where Core Components is not even used heavily we would strongly suggest making that move at the same time as this will greatly reduce development and maintenance costs, as well as greatly increase accessibility.

And, reach out to Team Builders' developers and Discipline Lead front-end on #core-components in Slack!

We're going to try #core-component for discussing components rather than #team-builders on Slack.