nordnet / nordnet-ui-kit Goto Github PK

Nordnet UI Kit

Home Page: https://nordnet.github.io/nordnet-ui-kit/

JavaScript 99.81% TypeScript 0.19%

nordnet-ui-kit's Introduction

Nordnet UI Kit

Installation

npm install --save nordnet-ui-kit # or
yarn add nordnet-ui-kit

Usage

// src/root.js
import { ThemeProvider } from 'react-jss';
import { theme } from 'nordnet-ui-kit';
import App from './App'

const Root = (
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
);
ReactDOM.render(Root, document.getElementById('app'));

// src/App.js
import { Button } from 'nordnet-ui-kit';

const App = props => (
  <div>
    <Button variant="primary" modifier="success">
      Success
    </Button>
  </div>
);

export default App;

To see what is exported from nordnet-ui-kit, please see the documentation below or index.js

Compatibility

v1.5.1 and lower depends on jss-theme-reactor and jss@7
v1.6.0+ depends on @iamstarkov/jss-theme-reactor and jss@8, so please update your components to use @iamstarkov/jss-theme-reactor instead of jss-theme-reactor
v1.7.0+ depends on react-jss and jss@8, so please update your components to use react-jss instead of @iamstarkov/jss-theme-reactor. Also, v1.7.0 deprecates exported ThemeProvider, createShallow and createMount. It will be removed in next major release. Read more in v1.7.0 migration docs
v1.7.0 also features react-jss over jss-theme-reactor, please read how to migrate your components.
We can't expect all components to be rewritten to react-jss instantly, so you will need to use both jss-theme-reactor based component and react-jss components at the same time, read in the jss-theme-reactor migration docs how to do it.

Documentation for the latest release is available here.

Documentation about how to write, style and test components is availible in the docs folder

Developing

Developing workflow can be found in the contributing guidelines.

Contributing

Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

License

This open source project released by Nordnet is licensed under the MIT license.

MIT (http://www.opensource.org/licenses/mit-license.php)

nordnet-ui-kit's People

Contributors

Stargazers

Watchers

nordnet-ui-kit's Issues

Checkbox </3 redux-form

The <Checkbox/> does not currently work with Redux-Form, I think the problem is the custom onChangeHandler in checkbox somehow. Will look into it and define what I'm exactly missing.

How to handle font?

The designated font is not available out of the box. Please make an instructional of how to include it in our project.

Missing github link

https://www.npmjs.com/package/nordnet-ui-kit Does not link back to the github-project.

FR: Logotype

It would be nice to have a component for Nordnet Logotype. For easy changing in the future.

Add <Flag /> component

SVG flags component (with our supported markets) (support for inline rendering would be nice, see #79)

Main markets:

Sweden
Norway
Finland
Denmark
USA
Canada
Germany

Example use:

Programatically setting numeric value to input

<Input value={12}/>

Gives the following output:

Enable serverside rendering of Icons

Would love to see an option to render icons inline for server side rendering so icons don't pop up after a while.

Translatable Labels etc

It would be nice if we don't have to pass around hardcoded strings to Input's and other elements. We want Intl and translation elements!

FR: Tables

We need Table-components. Please make them look fancy in print aswell.

Would like range selector to take selected range as prop

Hello Gustaf, how are you doing? I'm doing fine thank you.

It would be cool if the range selector could take selected range as prop so that we can keep track of it's state in redux.

Input not listening for programatically changed values

Something like

<Input value={this.state.test}/>
<button onClick={()=>this.setState({test:'Test'})}>Click</button>

Will not update the presented value in the input. (The code is valid for a native <input/>.)

This is of course just a quick gist, it does not matter if the data is incoming from the props.

add getting started

just how to get started using bundle overall and each component separately

<Input type="select" .. /> throws warnings in React > 15.2.1 due to unknown prop `options`

Since props is passed to the DOM node like {...props} it means that it will receive some props only intended for react as attributes (see https://facebook.github.io/react/warnings/unknown-prop.html).

Warning reads:

Warning: Unknown prop `options` on <select> tag. Remove this prop from the element.

There is another one of these issues in react-select that is fixed in the latest beta release so hopefully it will make stable soon (JedWatson/react-select#1063)

Radio not accepting bool.

I have a boolean switch with radiobuttons (this is a legal thing, I would have prefered a checkbox, but I am not allowed that):

<Radio value={true}/>
<Radio value={false}/>

This gives the following warning:

Warning: Failed propType: Invalid prop value of type boolean supplied to Radio, expected string. Check the render method of PersonForm.

Am I supposed to do another way, or is the use case bypassed?

Input type=submit

Doesn't exist :-(

And using a button is not a substitute.

Nordnet style for react-date-picker

I would like a nordnet looking css for the zippy-ui react-date-picker https://github.com/zippyui/react-date-picker

(Discussion) Awkward syntax on Input

The element get kind of bloaty that you have to define both label and placeholder if one would always like to show "First Name".

Collapsible: Content with margin-top gets pushed down below the visible area

If I give the Collapsible a DIV whose first child has a margin-top set, the DIV will be pushed down and the lower part will end up below the bottom edge of the visible area. However, if I apply the following CSS rule:

.collapsible__body > div {
  border: 1px solid rgba(0, 0, 0, 0);
}

things will render fine. There might of course be a more elegant solution/hack for this issue, but this invisible border does the trick for me at least.

button variable type support

import { Button } from 'nordnet-ui-kit';
const randomBoolean = () => Boolean(Math.round(Math.random()));

import 'nordnet-ui-kit/dist/button/button.css';

class Example extends React.Component {
  render() {
    return (<div>
      <div>Current implementation
        randomBoolean()
          ? <Button primary> text </Button>
          : <Button seconday> text </Button>
      </div>
      <div>Proposed implementation
        <Button type={randomBoolean() ? 'primary' : 'seconday'}> text </Button>
      </div>
    </div>)
  }
}

Proposed solution seems to be a bit simpler. what do you think?

Disabled date-picker throws errors onClick

I have a disabled date-input field, when I click on the input, the console start throwing:

Uncaught TypeError: Cannot read property 'focus' of null
onClick @ index.js:391
ReactErrorUtils.invokeGuardedCallback @ vendor.bundle.2.0.1-development.js:6executeDispatch @ vendor.bundle.2.0.1-development.js:2executeDispatchesInOrder @ vendor.bundle.2.0.1-development.js:2executeDispatchesAndRelease @ vendor.bundle.2.0.1-development.js:2executeDispatchesAndReleaseTopLevel @ vendor.bundle.2.0.1-development.js:2forEachAccumulated @ vendor.bundle.2.0.1-development.js:10EventPluginHub.processEventQueue @ vendor.bundle.2.0.1-development.js:2runEventQueueInBatch @ vendor.bundle.2.0.1-development.js:6ReactEventEmitterMixin.handleTopLevel @ vendor.bundle.2.0.1-development.js:6handleTopLevelWithoutPath @ vendor.bundle.2.0.1-development.js:6handleTopLevelImpl @ vendor.bundle.2.0.1-development.js:6Mixin.perform @ vendor.bundle.2.0.1-development.js:9ReactDefaultBatchingStrategy.batchedUpdates @ vendor.bundle.2.0.1-development.js:5batchedUpdates @ vendor.bundle.2.0.1-development.js:8ReactEventListener.dispatchEvent @ vendor.bundle.2.0.1-development.js:6

index.js:391

 if (!_this2.state.hasFocus) document.querySelector('#' + id).focus();

context:

          return _react2.default.createElement(
            'div',
            { className: classes },
            _react2.default.createElement(
              'div',
              {
                className: 'input__date',
                onClick: function onClick() {
                  if (!_this2.state.hasFocus) document.querySelector('#' + id).focus();
                }
              },
              units.map(function (unit, index) {
                return _react2.default.createElement(
                  'span',
...

Autocomplete bug

When autocomplete is active the placeholder text is overlapping.

Flag: Option to get rectangular icon and fix for all browsers

Add possibility to get rectangular or rounded flags
Find a solution to make the rounded flags work in all browsers (currently they use clip-path, which is not well supported)

make it easy to use px instead of rem

To make the UI kit work on the current Nordnet site we can't use rems but on anything new we should.
I added a flag to variables as well as a mixin that makes toggling between rem and px easy.

Needs to be applied everywhere, see here for how it's done.

Difficult to identify disabled input

Visually it is hard to tell that a disabled input is actually disabled. Might give frustration to users.

Erasing after focus is dodgy

Given: Input has a value and is blurred.
When: Focus to input (visually is all the text selected), press backspace to remove text.
Then: Deselect text, no actual change of text.

Styling of all components into new style

List of components:

translate transform on the svg icons causes subpixel aliasing/rendering, that said icons are blurry

Pls add button that contains both icon and text

Could we get a spinner component?

A default spinner with height and width and whatnot....

Change custom replace method to lodash.kebabcase

Can be seen in the input component.

input checkbox is broken without , ::before, *::after { box-sizing: inherit; } in global css scope

nordnet-ui-kit seems to break my phantomjs tests

Tried to test a component that imported nordnet-ui-kit today and when I try to test it karma crashes with this output:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR
  SyntaxError: Parse error
  at /path/to/react-seed-light/tests.webpack.js:66887

Finished in 0.094 secs / 0 secs

SUMMARY:
✔ 0 tests completed

Small working example:

// Component.jsx
import React from 'react';
import kit from 'nordnet-ui-kit';

export default () => <div></div>;

// __tests__/Component.test.js
import Component from '../Component.jsx';

// tests.webpack.js
require('es5-shim');
global.Promise = require('es6-promise-polyfill').Promise;

const context = require.context('./src', true, /\.test.js/);
context.keys().forEach(context);

npm test

"pretest": "npm config set react-seed-light:karma_env=coverage",
"test": "karma start",

Radiobuttons and Checkboxes looks funny

The labels is not aligned properly?
And maybe some padding? Or am I supposed to do that on my own?

FR: Graph component

Spinner not receiving mask

When creating a <Spinner /> it is not receiving the mask property for some reason, i.e. the default one:
mask: url("#spinner__mask--16-2-20");

Here's what the Styles tab is showing:

As opposed to what it should look like, and the way it does on the documentation page:

Pls add Steps Progress

Vertical example:

Input[type=number] not accepting numbers

Similiar problem as #6 but with normal inputs with HTML5 type number.

<Input type="number" value={1}/>

Warning: Failed propType: Invalid prop value of type number supplied to Input, expected string. Check the render method of ValidatedInput.

styles are bouncing while the page is loading

prev gif is not quite well, but you have seen it and got the point

input[type=password]'s height is not equal to input[type=text]

if you have two identical forms and one contains password field, another does not and you want to switch between them this issue is causing glitches

Pls add a combination of select and input

Choosing country code and then entering mobile number.

Password field with error or warning

The "!" cover the "Show" text.

Button breaking native api

Native buttons have type = [button, reset, submit]. I need to be able to set this in my forms.
Please consider changing the current type = [danger, warning, etc]