sui-components / sui-components

SUI Components

SUI React Components

SUI Components is an Open-Source, high quality library of React components that empowers teams to craft any product with ease.

⚙️ Minimum requirements

🖥 Environment Support

• Modern browsers and Internet Explorer 11+ (with polyfills)
• Server-Side Rendering

🧪 Test Coverage

✨ Features

• Well-tested, production ready presentational React components.
• Isolated components. Each component is a package.
• Customizable components using variables.

sui-components's Issues

Deprecate SUI Ad L or just develop it?

Hi mates, since here in Schisbsted Spain we are migrating to a new advertising platform (AppNexus) it's clear that this component https://github.com/SUI-Components/sui-components/tree/master/components/ad/l makes no sense. Should we deprecate it or even develop it in order to make it "AppNexus compliant"?

molecule/select space between tags and arrow is not correct

As you can see in this screenshot, the space between the arrow and tags is not following paper instructions: https://paper.dropbox.com/doc/SUI-Select-field--AdFfGox5wIQYtCb3dXIPPl1nAg-OrlQjuARbK4ZoPdMcSf7p#:uid=941948137847171033783004&h2=Visual

Paper:

Can't specify rel tag to Button of type link

I need to specify a rel different to noopener for a link with a href=mailto , this is because target=_blank in combination with rel=noopener and href=mailto doesn't work on Android browsers, it opens an empty tab instead of the email app
I found that the rel is hardcoded here

sui-components/components/atom/button/src/Button.js

Line 22 in d57c714

rel={target === '_blank' ? 'noopener' : undefined}

Is it possible to update the button to set a custom rel?

atom/input - inconsistency between types

This component is huge and only hasa few Sass variables to fit too many scenarios.

The main issue I'm having is implementing the type='checkbox' - Is tightly coupled to its other input types: 'radio', 'whatever..' regarding layout position, paddings, line-height, etc.. so it doesn't play well with its sibling SuiAtomLabel component.

Proposal:
Should we consider splitting this component into at least 3 others:

• Sui-AtomInput
• Sui-AtomInput-checkbox
• Sui-AtomInput-radio
• Sui-AtomInput- ...

If we do so well be able to create a better and more consistent Molecules to compose Labels and Inputs

Looking forward to get your feedback!

Api's Modal documentation not working

Describe the bug
The api section of the documentation of the Modal components is not working

Steps to reproduce

1. Go to https://sui-components.now.sh/workbench/molecule/modal/documentation/api

Expected behaviour
See the full api documentation of that components

atom/tag class naming convention issue

AtomTag could has two icons:

The icon on the left has "sui-AtomTag-icon" class
The icon on the right has "sui-AtomTag-secondary-icon" class

This class names are wrong. It should be something similar to "sui-AtomTag-iconLeft" and "sui-AtomTag-iconRight"

List Masonry is broken

https://sui-components.now.sh/workbench/list/masonry/demo does not work

Your playground has an error, please check:

ReferenceError: ListMasonry is not defined

molecule/modal onAnimationEnd prop does not work

Function prop onAnimationEnd is not being triggered

atom/input: Non focusable elements

Issue summary

As stated in Accesibility and inclusion guidelines, in its first rule: Every interactive element should be focusable.

The Problem:

• Currenty sui-atom-input component has the pseudoClass :focus with all visuals disabled:

.sui-AtomInput-input[type='radio']:focus,
.sui-AtomInput-input[type='checkbox']:focus {
    border: 0;
    box-shadow: none;
    outline: 0 none;
}

Users are unable no navigate through form elements using tabIndex due to this lack of visual feedback (functionality is not affected)

• Example of selected checkbox:

The solution:

• Define a similar styling as it already has its type=text form:

.sui-AtomInput-input:focus {
    border: 1px solid #30832f;
    box-shadow: 0 0 3px 0 #2b91c1;
    outline: 0 none;
}

Thanks

atom/card Add responsive functionality

AtomCard could be horizontal or vertical but it can't be responsive (vertical in mobile and horizontal in desktop).

In coches.net we need this functionality to create or vehicle component in order to decouple our core page "ads list"

It could be a "responsive" prop that adds a modifier class with a media query. Not compatible with "vertical" prop.

Is it possible to iterate AtomCard to add this functionality?

molecule/textareaField are not passing onChange correctly to textarea

This changes change the way of passing on change prop and breaks the compatibility
584a9b8#diff-e728f65de07b0424f16d0fc3b8cc34fdR40

Errors when `npm start` related to motor theme

I'm getting these errors when starting sui-components w/ npm start

It look likes it has something to do w/ motos & coches theme

/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/spinner/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/rating/icons/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/modal/gallery/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/modal/gallery/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/card/profile/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/card/profile/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/tag/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/tag/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/rating/icons/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/spinner/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/panel/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/panel/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/button/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/button/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/badge/themes/motos.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js
/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo/atom/badge/themes/coches.scss
Module build failed: 
@function image-url($image, $url: $url-statics + 'images/') {
                                 ^
      Undefined variable: "$url-statics".
      in /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/@schibstedspain/sui-theme/lib/utils/_url.scss (line 4, column 35)
 @ /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/demo /Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-content-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/css-loader!/Users/juanmanuelgarrido/PROJECTS/SCHIBSTED/sui-components/node_modules/sass-loader/lib/loader.js ^.*\/themes\/.*\.scss
 @ ./src/components/demo/fetch-styles.js
 @ ./src/components/demo/index.js
 @ ./src/routes.js
 @ ./src/components/root/index.js
 @ ./src/app.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./app.js

Molecule/Notification autoClose is not working

The autoClose is not working. Even thought if we specify or not a time (because it has a defaultProp) it does not work

card/subscription: update readme

Component CardSubscription needs to update the readme after changes on #389.

molecule/collapsible: Align button & text

We need the alignment of the button to be independent of the alignment of the text.

It may be a good time to define 2 props to align both the text and the button in the component and not by inheritance.

<div style={{backgroundColor: '#fff', fontSize: 14, padding: 16, textAlign: 'right'}}>
  <MoleculeCollapsible icon={icon} showText={showText} hideText={hideText} >
    <Text/>
  </MoleculeCollapsible>
</div>

atom/spinner: Is showing literal by default

When we use AtomSpinner component it shows a literal "Loading..." by default. Is it necessary?

AtomSpinner.defaultProps = {
  delayed: false,
  type: TYPES.SECTION,
  loader: <SUILoader text="Loading..." />
}

Source

If we want to remove this literal we must import AtomSpinner with a loader prop value without literal:

<AtomSpinner loader={<SUILoader />} />

Instead of this, it is not better remove this defaultProp and let developer choose?

molecule/photoUploader: file upload button fires onSubmit action form

Describe the bug

When we use the molecule/photoUploader component inside a form and click on File Upload button, this fire a onSubmit form action.

Steps to reproduce

1. Create a form with a submit action.
2. Use the molecule/photoUploader component inside form
3. Click on "Upload foto" button.
4. See how onSubmit form event has been fired

Expected behaviour

When we click on File Upload button, We expect to not fire the onSubmit form action.

Screenshots

Environment / Context

• Desktop & Mobile
• Operating System: macOS Catalina 10.15.4
• Browser and version: Chrome 80 & Firefox 80
• Device: Mac Book Pro

molecule/select doesn't close its dropdown on blur when another molecule/select is clicked

Describe the bug
When multiple Molecule/Select components exist on the same page, and the user clicks on one of them to open its dropdown, and the user clicks on a different Molecule/Select component to open a different dropdown, and clicks again on the former component, the last opened dropdown is not closed by its Molecule/Select.

Steps to reproduce

1. Go to https://sui-components.now.sh/workbench/molecule/select/demo
2. Click on Single Selection / with Placeholder dropdown component
3. Click on With different value and displayed text dropdown component
4. Click again on Single Selection / with Placeholder dropdown component
5. See error

Expected behaviour
The user would expect the dropdown to be closed on blur ie when the dropdown component has lost its focus.

Screenshots

Environment / Context

• Desktop or Mobile? Both
• Operating System: All
• Browser and version All
• Device: All

Additional info
Add any other context about the problem here.

molecule/collapsible: Custom background color

We need a property to define a custom background color.

AtomPopover & AtomTooltip components not compatible with the new React Context API

Description

AtomPopover & AtomTooltip are not working when any other component using the new React Context API inside is being rendered in the content prop.

For example, if you use an AtomPopover and you also set the content prop (https://github.com/SUI-Components/sui-components/blob/master/components/atom/popover/src/index.js#L63) using a component that's wrapped by the SUIContext (https://github.com/SUI-Components/sui/blob/master/packages/sui-react-context/src/index.js), your context props will be undefined.

Posible solution

It seems that the 3rd party library (reactstrap at version 6.3.0) we use for tooltips and popovers makes our components context is lost when used as its children prop. However the same library at 8.2.0 version works fine.

atom/input: readonly prop is not set

When the readOnly prop is sent the atom/input doesn't set a readOnly prop instead it set the disabled one. Is this the expected behavior?

disabled={disabled || readOnly}

atom/label: Only display blocked labels are available

The motivation of this Issue is allow rendering inline labels specially useful when input element is a checkbox. Currently we're creating lots of layout containers to avoid this behaviour.

The solution might be implementing a new prop as inline containing 2 possible string values: left or right. If not present defaulted behaviour will be rendered so current component API won't be affected.

molecule/inputTags Padding left issue

MoleculeInputTags has padding left and right as other inputs

Inside, it has an input with a padding-left, so we are adding an extra unnecessary space.

Molecule/select when selecting a second option when clicking the checkbox, the dropdown is closed

Describe the bug
In multi-selection mode, when a user selects a second option by clicking into the checkbox, the dropdown is closed

Steps to reproduce
1- open the demo of any component using Molecule/Select
2. Click on the dropdown to open the options list
3. Select the first option by clicking into the checkbox not any other part of the rectangle
4. Select a second option by clicking into the checkbox not any other part of the rectangle

Expected behavior
The option should just be selected and the list should remain still open.

Screenshots

Environment / Context

• Mobile and Desktop
• Mac OS
• Chrome and Firefox

Additional info
This bug doesn't happen in the sui-components studio, but we have this bug in our demo and in production`

Switch Modal Basic prop "IconClose" to lowercase

This is the prop to be changed: https://github.com/SUI-Components/sui-components/blob/master/components/modal/basic/src/index.js#L145

molecule/modal - back button does not close modal

Describe the bug
Tapping the system back button or clicking back button in desktop browsers and safari mobile are not closing opened modal. It just navigate back to previous url.

Expected behaviour
As a standard, it back button should close modal if it is open, if not navigate to previous history url.
See Material Design dialog behaviour specs: https://material.io/components/dialogs/#behavior

Environment / Context

• Desktop and Mobile

button / basic displays icon in a new line with firefox

Hi there,
buttons are displayed incorrectly with firefox / mac:

molecule/select dropdown size in multiselection does not work

MoleculeDropdownList can have size prop and MoleculeSelect support it but only works if you set it as a single selection. It does not work for multi selection.

Molecule/Select doesn't open the dropdown when clicking in the box in Firefox

Describe the bug
The expected behavior of the Molecule/Select component is to open the options when clicking the box. It doesn't happen in Firefox, it only opens the options when clicking the down arrow ⬇️ .

Steps to reproduce

1. Using Firefox go to https://sui-components.now.sh/workbench/molecule/select/demo
2. Click on any box
3. See the bug

Expected behaviour
When clicking the box, the dropdown should be opened as it happens in Chrome

Environment / Context

• Desktop or Mobile? Both
• Browser and version Firefox

The headings and Wrappers of all demos are different

Describe the issue
The headings and Wrappers of all demos are different, not only on styles, but sometimes the demos even don't have any Title at all (check buttons for instance)

Steps to reproduce

1. Visit https://sui-components.now.sh/workbench/atom/button/demo
2. Navigate all the demos

Expected behaviour

• There should always be a title
• The Headings should always have the same format
• The wrapper of the demos should have the same spacing and style

Environment / Context

• Desktop and Mobile
• Operating System: All
• Browser and version: all
• Device: All

card/product is broken

Current version in surge throws error:

Uncaught (in promise) TypeError: Cannot read property 'contextTypes' of undefined

atom/button: disabled button of type link still works

When a button is disabled, we expect to avoid following the link if the button is of link type. Instead of this, even when the layout is disabled, it still is a functional link.

molecule/select dropdown list scrollbar closes the list

Click on dropdown list scrollbar closes the list and it shouldn't.

Given this screenshot:

If user clicks on scroll bar, drop down list is going to close. It happens always because we are checking "!isSomeOptionFocused && isOpen" to close and it is wrong

atom/button: Unnecessary justify-content property for full width styles.

Right now we're applying a justify-content property (https://github.com/SUI-Components/sui-components/blob/master/components/atom/button/src/index.scss#L177) to a Atom Button modifier (full width) because it was inherited from the "legacy" mixin that was also using a display: flex property: https://github.com/SUI-Components/sui-theme/blob/master/src/components/_button.scss#L20. However at this moment the Atom Button styles define the component display behaviour as inline-block, so the justify-content I'm pretty sure it's not needed anymore, it's used text-align instead.

Fort sure, it should be properly tested before doing this change.

cookie/banner - Create new component

Based on https://github.com/buildo/react-cookie-banner but simplified and without external dependencies.

molecule/notification deprecated "text" prop

Since we need to include html markup such as links in the molecule/notification content, we decided to move from "text" to "children" prop in this PR https://github.schibsted.io/scmspain/frontend-mt--lib-motor/pull/365

That means we should remove "text" prop in the next major release, delete .sui-MoleculeNotification-text classname, and refactor innerWrapperClassName func.

MoleculeSelect arrow key navigation bug

Describe the bug
Navigating with the arrow keys through the items of a select, when we reach the second item, the select closes unexpectedly

Steps to reproduce

1. Go to https://sui-components.now.sh/workbench/molecule/selectField/demo
2. Click on a SelectField
3. Scroll down with arrow keys
4. See error

Expected behaviour
We need to be able to navigate through the select items using the arrow keys on the keyboard

Screenshots

Environment / Context

• Desktop

Additional info
The error can be identified in the next line of code, by seeing how from the second time we click on the down arrow key, the reference refsMoleculeSelectOptions.current includes the items correctly, but when mapped, it returns a null for each item

sui-components/components/molecule/select/src/index.js

Line 117 in 4a70085

const options = refsMoleculeSelectOptions.current.map(getTarget)

The href prop of Link component should not receive a boolean value.

Describe the bug
href prop of <Link> should not receive a boolean value.

Steps to reproduce
Use a <Button > with next props:

<Button link href="" disabled>Hello</Button>

View the console in the demo: https://codesandbox.io/s/exciting-leavitt-ww5oo

Expected behaviour
Shouldn't show warnings by console

Screenshots

**Bug found
https://github.com/SUI-Components/sui-components/blob/master/components/atom/button/src/Button.js#L20

atom/tooltip: doesn't allow theme colors

Is your iteration request related to a problem?
Nowadays, the AtomTooltip displays only in black color and as a developer I can't use the theme colors.

Describe the solution you'd like
Following the same as AtomButton is developed, I'll create a new property color to use one of the theme colors (primary, accent, neutral, success, alert and error).

Additional context

The @url in the hoster NOW is not working

Looks like something has been broken.

See in https://sui-components.now.sh/

Integrate new styles from deprecated Modal component into new one (SUI Modal Basic)

Changes made by @davecarter here https://github.com/SUI-Components/sui-modal/pull/13/commits/3f165ab67ecf835f7cd1e39ffd188f0371de715e has to be migrated to the following repo https://github.com/SUI-Components/sui-components/tree/master/components/modal/basic.

atom/button Error fullWidth on using atom buttons with fullWidth

We have seen an error on using sui-atom-button in link mode with fullWidth enabled. The error is only show on build version (not linking) and once we use prop link and fullWidth together.

The error is that react says that we are passing a fullWidth property to a DOM element . In fact, we are passing it as we have a default linkFactory on our Button.js file that does a {...rest} passing the whole props to the tag.

sui-components/components/atom/button/src/Button.js

Line 56 in 4f18f58

linkFactory: ({children, ...rest} = {}) => <a {...rest}>{children}</a>

molecule/modal: prevents children scroll

The component molecule/modal is preventing scroll when the content is smaller than the viewport, but in the scenario where the content in fact is smaller than viewport and a subcomponent needs scrolling it prevents it too. For example de districts from Barcelona in the next screenshot:

Could we disable preventing scrolling with a prop? 👍

(molecule/photoUploader): Is not retrieving the fileName

Is your iteration request related to a problem?

As a developer, I would like that MoleculePhotoUploader could return the fileName when a new file is added.

Describe the solution you'd like

Currently, the MoleculePhotoUploader is building an object without the fileName and could be usefull to have it outside the component.

My solution is to expose outside the entire file to allow developers read file data (i.e. fileName, file size...).

Additional context

// Current object
[
  {
    blob: object,
    url: string,
    isNew: boolean, 
    isModified: boolean, 
    hasErrors: boolean
  },
  // ...
]

// New object
[
  {
    blob: object,
    url: string,
    isNew: boolean, 
    isModified: boolean, 
    hasErrors: boolean,
    file: object
  },
  // ...
]

Sass throws error: EISDIR: File is a directory

Describe the bug

To try out the SUI components, I've set up a little demo with create-react-app on Codesandbox.io:

https://codesandbox.io/s/adevinta-sui-0z6qj

So far, it is only supposed to show a couple of action buttons from the package @s-ui/react-atom-action-button.

I'm having trouble integrating the Sass theme in my main stylesheet. I did it like this:

styles.scss

@import '~@s-ui/theme/lib/index';
@import '~@s-ui/react-atom-action-button/lib/index';

.App {
  font-family: sans-serif;
  text-align: center;
}

When create-react-app tries to compile the stylesheet, it throws this error:

I've checked the code in node_modules, lib/utils is indeed a directory.

Steps to reproduce

1. Go to https://codesandbox.io/s/adevinta-sui-0z6qj
2. See error on the “Problems” tab of the browser preview window

Expected behaviour

I expect the import of the Sass theme and the ActionButton atom to work properly, so that the browser preview window shows the buttons.

Screenshots

See above

Environment / Context

• Desktop
• Google Chrome 84

Additional info

Using latest version of node-sass, 4.14.1. My first guess was this may be a compatibility issue with Sass, but version 3 throws the same error.

atom/backToTop doesn't work when container is window

A solution is to set the default container as window instead of document.body
const AtomBackToTop = ({..., refContainer = window})

Sui-Title dinamic classNames

The Sui-Title component has a fixed class declaration and IMHO it should be composed via its className props value. Like:

<h1 className={`${className}-title`}>{title}</h1>

If we do so we'll be able to re-use the same component multiple times in the same page without affecting one each other.

FormTextInput component needs KeyBoard events

Hi guys, terrific job 👍

I think It would be awesome if FormTextInput provides some keyBoard Events like onKeyPress. The only event provided so far is onChange.

Or maybe a way to support all possible events supported by the native input.

Deploy is broken

Travis doesnt deploy the sui-components studio due to the tests is broken

https://travis-ci.org/SUI-Components/sui-components/builds/259742433

molecule/modal Bug in mobile full screen

Given paper "In the modal mobile version you can use a full screen version to take advantage of the screen space."

If the modal has a little of content, it is not full screen. See screenschot: