KTH Style React components

https://app-r.referens.sys.kth.se/static/components/

kth-reactstrap

Library of React components based on KTH-style and reactstrap

Getting started

Installation:

npm run install

The following commands should be used:

npm run start (start documentation web server)
npm run test:unit (start unit tests in watch mode)
npm run dev (run start and test:unit above)
npm run test (run unit tests)
npm run build (build the code for npm package)

Checklist for new category (e.g. team/group)

One-time setup, given a new category named 'demo':

• create folder 'src/components/demo'
  • create index file '/components/demo/index.ts'
  • add reference to demo in '/components/index.ts'
• create folder 'src/stories/demo'

And then create components (and stories to document them):

• create component in 'src/components/demo'
  • add import/export of component in 'src/components/demo/index.ts'
• create story in 'src/stories/demo'
  • describe/use component in story

Notes after Upgrading to kth-style version 10

Styles

All the scss styles for the kth-stylea and some fixed for the components are is now loaded inside the index.scss, and it is available at dist/component/index.css after build.

it is recomended to load the index.css in your project, otherwise you need to use the css fixes inside the index.scss and other loaded styles in your project by yourself.

Scripts

All the scripts that you need are now available at dist/js, it is recommended to load the scripts in the index.html of your project. (if you use the KthHeader component now it has a param called loadScipts, the default value is false but if you set true for that param it will load the KPM script by itself and you will have the enterance menu. read more here: https://app.kth.se/style/en/components/kpm)

it is recomended to have the scripts on your project to have functionalities like back-to-top.

Images

you may need kth logotype or icons, they are now available in dist/img now after the build process.

Components

Alert

after upgrading to kth-style version 10 the alert is changed to be aligned with the latest version of kth-style. now you can choose on of these as type of the Alert: 'info' | 'warning' | 'success' | 'danger'. Note that: warning and danger are the same, since the kth style the alert types are only 'info' | 'warning' | 'success'. read more here: https://app.kth.se/style/en/components/alert

LocalNavigation

This is the new component that has been added, it has been used only at this project as the sidebar menu for the stories. You can use it by seeing example usage in the App.tsx file in this project

BackLink

This is now changed to kth-button and use kth-button style in the background as you can see here: https://app.kth.se/style/en/components/button Back Button

Button

All the functionalitie are the same as before, required changes has been made to keep the functionality of this component. you can visit this page to know more about kth-button: https://app.kth.se/style/en/components/button

It needs to be mentioned that, a new decoration has been added to the Button which is "previous" but it will act exactly the same as "back".

now the "back" class is used in Backlink component and in Button component back acts as previous in kth-button.

Application

It is now using the latest classes related to kth-style 10, to be sure that the app is wrapped in correct classes.

KthHeader

The styles is now upgraded to kth-style 10 and two parameter is now added, now you can set true value for "loadScripts" and then you will have the KMP scripts added automatically in the index.html of your project which will add the entrance menu.

Another parameter that has been added is variant, the value can be one of these, 'external' | 'student-web' | 'intranet'. you can read more about variants here: https://app.kth.se/style/en/components/header

KthFooter

The styles is now upgraded to kth-style 10 and onetwo parameter is now added,

The parameter that has been added is variant, the value can be one of these, 'external' | 'student-web' | 'intranet'. you can read more about variants here: https://app.kth.se/style/en/components/header

About cortina.json (notes for maintanence and development)

In KTH we are getting header, footer and some more sections from cortina and we call them cortina blocks. Now this pacakge is used an appraoch to get footer directly from the cortina. the script is inside the generate.js will get the selected blocks by blockID and save them in cortina.json and later you can use the block which is an html string. you can use 'html-react-parser' to insert html inside the jsx.

Testing the package locally

If in further developments you decide to test this package locally you need to fisrt run this command:

• "npm (or yarn) link ../{consuming project name}/node_modules/react (we are assuming that both projects are at the same folder)

Then run this command for this package:

• "npm (or yarn) link"

Finaly in the consuming project run this command:

• "npm (or yarn) link @kth/kth-reactstrap"

Consider that you need to run the build script before link the package to a consuming project.

The reason that we are linking the consuming project react to this project is that we want to use the same react bundler for both pacakge and consuming project (to prevent hooks to be undefiend). read more here: https://react.dev/warnings/invalid-hook-call-warning