@debijenkorf/core-assets v24.9.3

core-assets 🌽 🍑

Holds the common CSS code for the de Bijenkorf website and code for the styleguide.

See it in action: https://styleguide.dev-debijenkorf.nl/ 🚀

Table of contents

• Getting Started
• Technologies
  • Prerequisites
  • Installing
  • Local development with another repository
• Styleguide
• Build
  • Icons
• Tests and Risk Assessment
• Making a release
  • Two steps process
    • 1. Create a branch
    • 2. NPM publish
• Versioning
• Guidelines
• Ownership

Getting Started

To copy the repository locally run:

git clone git@github.com:deBijenkorf/core-assets.git

Technologies

• SASS - CSS is compiled from SASS files. All styling is written in SASS.

Prerequisites

To run the code in this repository you need to have the following installed on your machine:

• git - Git is a free and open source distributed version control system.
• npm & node - Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. npm is a package manager for the JavaScript programming language.

You should have access to the following:

• Jira & Confluence (tickets & issues)
• Jenkins (BAU & PROD jobs)
• Jenkins (branches and SIT test jobs)
• NPM de Bijenkorf private packages

Installing

npm install

Local development with another repository

The easiest way is to create npm-link for that.

1. Create link in core-assets

   npm link

2. Connect link to core-assets in your repository in a folder where package.json is.

   npm link @debijenkorf/core-assets

Styleguide

De Bijenkorf's Design System is called Propolis, which contains all the design patterns to be used across de Bijenkorf's digital touch points. The styling in this project must be kept up to date with any evolution in design documented in Propolis.

Build

You can create the bundles with:

# build production bundles → /dist
npm run build
# build dev bundles (source-map & un-minified) → /dist
npm run build:watch

Icons

Icon (.svg) files can be found in:

./src/icons/...

To manage icons in the spritesheet output, modify the imports in the file /src/entry.js Building the project with npm run build will make a _build directory. You can check _build/dbk-sprite.svg in a text editor to see if it was added. If the name/path is wrong, you will see an error in the cli.

If your icon is appearing in the spritesheet then a normal release is safe to do.

Tests and Risk Assessment

This repository does not require testing as it contains mostly styling.

Making a release

Depending on the type of changes that need to be released, a patch-, minor- or major release can be issued.

As a general rule of thumb:

• patch release (0.0.X): fixes or non-breaking updates
• minor release (0.X.0): non-breaking changes or feature additions
• major release (X.0.0): breaking changes

Refer to https://semver.org/ for the semantic versioning specification.

Two steps process

After your PR has been approved and merged to master then follow these steps.

1. Create a branch

# make sure you start clean
git checkout master
git fetch origin master
git pull origin master

# check expected changes are in your local master branch
git log --oneline --decorate --color

# create your release branch
git checkout -b prerelease/v{my release tag}

# use the appropriate npm script `release:*`, here we are going for a minor release
# it will:
# - build the /dist folder
# - update package.json
# - create the tag
# - push changes to github
npm run release:minor

Make sure the proposed changes are in master before proceeding to step 2.

2. NPM publish

# make sure you start clean
git checkout master
git fetch origin master
git pull origin master

# publish to npm
npm run release:publish

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Guidelines

• Prettier is used for style consistencies in .js files
• ESlint is used for linting the .js files
• Stylelint is used for linting the .scss files
• EditorConfig is used to enforce correct spacings on all files
• The above is enforced when you try to commit
• Pull request branches should be the Jira issue, e.g. WD-8025
• Commits should be in the form of:

<type>(<scope>): <subject>

<type>: feat, fix, docs, style, refactor, perf, test or chore
<scope>: the scope of the commit
<subject>: a short imperative subject

feat(search): Add focus to input field
chore(webpack): Migrate to webpack 2
test(react): Add carousel unit tests

For ease of use you can use the template provided above. The following command will add it as default for this repo only:

git config commit.template .gitmessage

Taken from angular contrib guidelines.

Ownership

This project is not owned by a specific squad

See also the list of contributors who participated in this project.