@47nordmedia/k2-systems-ui-library v0.6.49

K2 Systems library

Description

This library is used as a single source for UI elements throughout the K2 Systems' digital services.

Setup

Prerequisites

• Tailwind.css >= 3

Add package

npm install --save @47nordmedia/k2-systems-ui-library

or

yarn add @47nordmedia/k2-systems-ui-library

tailwind.config.js

Add the config file of the ui-library to your tailwind.config.js

module.exports = {
  presets: [require('@47nordmedia/k2-systems-ui-library/dist/tailwind.config.js')],
  // config specific to this project would go here
  // ...
};

HTML / PHP

Add the custom classes to your existing css files.

@import 'tailwindcss/base';
@import '@47nordmedia/k2-systems-ui-library/dist/customBase.css';

@import 'tailwindcss/components';
@import '@47nordmedia/k2-systems-ui-library/dist/customComponents.css';
@import '@47nordmedia/k2-systems-ui-library/dist/main.css';

@import 'tailwindcss/utilities';
@import '@47nordmedia/k2-systems-ui-library/dist/customUtilities.css';

HTML / PHP LEGACY Styles

To use the legacy styles (pre web-components) use the following snippet to add the styles to your project.

@import 'tailwindcss/base';
@import '@47nordmedia/k2-systems-ui-library/dist/customBase.css';

@import 'tailwindcss/components';
@import '@47nordmedia/k2-systems-ui-library/dist/customComponents.css';
@import '@47nordmedia/k2-systems-ui-library/dist/main.css';

@import 'tailwindcss/utilities';
@import '@47nordmedia/k2-systems-ui-library/dist/customUtilities.css';

@import '@47nordmedia/k2-systems-ui-library/dist/legacyStyles.css';

Usage

Style-Guide

use npx serve dist -l 8081 to see the style-guide in the browser.

Icon Library

ICON LIBRARY

Example (HTML, PHP)

<div class="button ...">Hello World!</div>

JS Framework

todo ...

Example (react.js)

import uiClasses from '@47nordmedia/k2-systems-ui-library';

export default function Button() {
  return <div className={`${uiClasses.button} ...`}>Hello World!</div>;
}

Workflow for adding new components

• Open new issue via 'new ui component' template.
• Set the issue to 'approved' once its tested and reviewed.
• Open new pull request and link the created issue.
• Merge pull request to main.
• Check build workflow for potential errors.
• Update ui library in you project to latest version.

Multiple issues for nested components

• to do...

Examples

To structure nested related components we use an adapted BEM naming convention. The CSS part will be the standard BEM convention.

The JS part however will replace the dash-case naming convention and replace it with the camelCase naming convention.

All the CSS classes will be generated out of the JavaScript files. Below you can see how the classnames are being converted.

navMenu (js) --> nav-menu (css)
navMenu__item (js) --> nav-menu__item (css)

<nav class="nav-menu">
  <li class="nav-menu__item"></li>
  <li class="nav-menu__item"></li>
  <li class="nav-menu__item active"></li>
</nav>

// navMenu.ts
export default 'flex align-center justify-between';

// navMenu__item.ts
export default 'p-2 bg-gray-100 rounded-xl hover:bg-gray-200';

// index.ts
import navMenu from './classes/navMenu';
import navMenu__item from './classes/navMenu__item';

export default {
  navMenu: navMenu,
  navMenu__item: navMenu__item,
};

CLI Interface & CI/CD usage

CLI

To add a new class to the classes list, simply run:

yarn run build:js -c '<new-class-name>' -l '<tailwind classes>'

e.g.

yarn run build:js -c 'button' -l 'bg-gray-100 rounded-xl hover:bg-gray-200'

To generate a corresponding CSS file run:

yarn run build:css

CI/CD

fully automated process coming soon...

• Creation of a new branch based on the component name.
• Fetching of the ui-component issue content.
• Execution of the CLI with the content of the issue.
• Creation of an pull request.
• Publishing the updated code to a private NPM package.