sparebank1 / designsystem Goto Github PK

View Code? Open in Web Editor NEW

101.0 24.0 87.0 384.12 MB

SpareBank 1's design system and component library.

Home Page: https://design.sparebank1.no

License: MIT License

JavaScript 16.06% CSS 0.31% HTML 0.46% Less 7.74% Handlebars 0.04% Makefile 0.04% TypeScript 75.34%

designsystem's Introduction

Felles Front End i SpareBank 1

Dette repositoryet inneholder koden til SpareBank 1 sitt designsystem og noe teknisk dokumentasjon.

Designsystemet består av innholdet i dette repoet (ofte referert til som Felles Frontend, forkortet til FFE), designsystem-bibliotekene i Figma og dokumentasjonen som finnes på design.sparebank1.no. Alle disse delene håndteres av designsystem-teamet, som kan nås på vår interne Slack i #ext-designsystem, via mail på [email protected] eller via GitHub issues.

🏃 Kom i gang med å bruke designsystemet

Dokumentasjon på hvordan man kommer i gang med å bruke FFE finner du under kom i gang i dokumentasjonen.

📝 Hvordan gjøre endringer i FFE?

Skal du gjøre endringer i FFE for første gang? Se på dokumentasjonen under Guide til GitHub

Komponentene i FFE er delt opp i to NPM-pakker hver. Pakker med -react i navnet inneholder react-implementasjon og tester, mens øvrige pakker inneholder (Less-basert) styling.

💻 Kjøre opp designsystemet lokalt

Klon ned repoet, og kjør npm install. Dette vil installere alle avhengigheter for alle pakker, og må kjøres før du kan kjøre noen av de andre kommandoene.

npm start              # Starter en lokal server på localhost:1234
npm test               # Kjør alle tester for alle pakker
npm run lint           # Lint alle pakker
npm run build          # Bygg alle pakker
npm run clean          # Fjern node_modules fra pakkene (ikke root)

✨ Bidra!

Vi oppfordrer alle, både rutinerte og ferske, til å opprette en oppgave (issue), sende inn fletteforespørsel (pull request) og kommentere på andres bidrag. Ta en titt på Bidra-seksjonen i dokumentasjonen om hvordan du går frem.

Licenses

Source code is licensed under MIT
The MuseoSans fonts are licensed separately. See LICENSE-fonts.md.

designsystem's People

Contributors

Stargazers

Watchers

Forkers

jhsveli hodoea oskaremil chribran1 torbein eliihen jenmo917 optimuscrime torgeircook paandahl danytrakhtenberg marthall eirikdal sebasso antidecaf tienqt lotorvik pethel simjes geirloken hognej irwansyahrir hdaljord joannae tordensky jafeld julian-sb1 snikanes exoen jarlef jorgenfar kvangaball erlingk hjellek selbekk glemvik eirikrogno lfbergee sgrevling cecilieboe amanej michael1976 erlendellingsen howmuchadollarcost mortenk tutturen thedemodev eivinwi ssandoy steffenz daychopan ksawerysb1 usmanawans em1mn nancybolstad markusra kariannekristiansen abhustoft nordstrand andereld geoals phareim markussn henrikhermansen espehel nghing espkva maylindamartinsen benmatthews gramlar miichu khtufteland grynagel alexrogalskiy frodereinertsen a504aa1 joakimlindquister martin-wahlberg orhels simen-sb1 jberglund tonispb1337 jonaskris frederikgdl henninghalvsb1 bludood hagenek

designsystem's Issues

ffe-buttons: Anchors not vertically aligned with buttons in button group

Which package is this issue related to?

ffe-buttons

Describe your issue (screenshots welcome!)

The primary button is an a element in the picture above. Swapping the primary button to a button element and changing the secondary button to an a reverses the behavior:

If both are buttons they are aligned correctly:

The same if both are anchors, although it seems there is some extra bottom margin. Maybe missing a reset?

What is the expected behavior?

The buttons should align vertically regardless of element type

What is the actual behavior?

a and button get different vertical heights.

Steps to reproduce

<div class="ffe-button-group ffe-button-group--thin">
    <button aria-busy="false" aria-disabled="false" class="ffe-button ffe-button--primary">
        <span class="ffe-button__label">Velg minikasko</span>
        <div aria-hidden="true" aria-label="Vennligst vent" class="ffe-button__spinner"></div>
    </button>
    <a class="ffe-button ffe-button--secondary" href="/privat/forsikring/#/tilbud/bil">
        <span class="ffe-button__label">Tilpass forsikringen selv</span>
        <div aria-hidden="true" aria-label="Vennligst vent" class="ffe-button__spinner"></div>
    </a>
</div>

Don't put constraints on the name of the repo folder

Which package is this issue related to?

ffe-icons and ffe-icons-react

Describe your issue (screenshots welcome!)

#66 describes a problem caused by the ffe-icons --opts=designsystem/packages/ffe-icons-react/svg.sprite.config.json command in ffe-icons-react. It requires the name of the folder containing this repo be designsystem. If someone renames the folder or clones it with a target folder !== designsystem this command will break.

We should strive to not put such a "magic" constraint on developers.

What is the expected behavior?

I should be able to rename the folder containing this repo and still have a working build.

What is the actual behavior?

The build breaks, as demonstrated in #66

Steps to reproduce

See #66

ffe-form: textarea: Text too close to top of input field

Which package is this issue related to?

ffe-form

├── @sb1/[email protected]
├─┬ @sb1/[email protected]
│ ├── UNMET OPTIONAL DEPENDENCY @sb1/ffe-buttons@^5.2.3
│ └── UNMET OPTIONAL DEPENDENCY @sb1/ffe-core@^11.0.3
├── @sb1/[email protected]
└── [email protected] extraneous

Describe your issue (screenshots welcome!)

The text inside a textarea seems too close to top border:

What is the expected behavior?

Similar look to normal input field

What is the actual behavior?

No top padding:

Steps to reproduce

npm init
npm install --save @sb1/ffe-core @sb1/ffe-form @sb1/ffe-webfonts
./node_modules/.bin/lessc --js style.less > style.css

@import './node_modules/@sb1/ffe-core/less/ffe.less';
@import './node_modules/@sb1/ffe-form/less/form.less';
@import (inline) './node_modules/@sb1/ffe-webfonts/fonts.css';

<!DOCTYPE HTML>
<html>
    <head><link rel="stylesheet" href="style.css"></head>
    <body>
    <div class="ffe-input-group">
        <label for="textarea-id" class="ffe-form-label">
            Textarea default
        </label>
        <textarea id="textarea-id" class="ffe-textarea" maxlength="150" aria-invalid="false" rows="5">Innhold i textarea.</textarea>
    </div>
    </body>
</html>

ffe-buttons-react: TertiaryButton only supports rightIcon if there is also a leftIcon

TertiaryButton doesn't support an icon on the right side of the label unless there is also an icon on the left side. This is an unintended effect of the simpleContent prop in Button being set to true (which renders a simpler markup without support for icons.) unless there is a leftIcon.

Quickfix: set simpleContent to false if there is either a leftIcon or a rightIcon (here)

Perhaps better: get rid of the whole simpleContent concept and restructure the components internally to support the different use cases in a simpler way

Stil og tone -forslag

Lurte på om vi kunne endre one-linern til stil og tone siden( akkurat nå er det egentlig one-linern til merkevare siden som vi endret til stil og tone)

Et forslag fra @christerjohnsrud:

Dette forslaget under kan ventes med:

Vi har også en del ressurspersoner som andre på huset kan sparre med på tekstforslag, kan det være en idé å legge ved det i denne siden?

ffe-account-selector: search shows no results after entering the fifth number

When searching for an account it can seem like the search requires we include the separator to get a match on an account number. We should not force users to do this. Ignore separators when searching.

See attached images.

Linting fails randomly in Travis CI

Some of the linting subprocesses get killed in Travis. We may need to tweak Lerna to do fewer things in parallel during CI.

all: peerDependency warnings due to wrong version of ffe-core, others

Which package is this issue related to?

🌐 All the things

Describe your issue

We get a bunch of peerDependency warnings when installing the new scoped FFE packages. This creates a lot of noise in the logs.

What is the expected behavior?

No warnings should be printed 🎉

What is the actual behavior?

So many warnings 🙈

Steps to reproduce

Run npm install @sb1/ffe-core @sb1/ffe-accordion @sb1/ffe-accordion-react for instance. See warnings in log.

Show active tab on design.sparebank1.no

On our various sites we usually indicate the selected tab by highlighting with a line and/or color. See for instance https://www.sparebank1.no/nb/bank/privat/eiendom.html and notice the underline below PRIVAT and color highlight of Eiendom.

It would be nice to have some indication of the currently active tab on design.sparebank1.no as well.

Today:

Possible active state:

I like indicating active state with a line since seeing the slight shift in color is difficult even for me sometimes 🙈

Add Issue template and Pull Request template

This will make it a bit easier to file issues and PRs
https://github.com/devspace/awesome-github-templates

ffe-message-box(-react): 'action' variant

In ffe-message-box we have a version called action but it's not implemented in the React world. Is it a version we need, or can it perhaps be removed?

Expand button "X" animates in from the top-right corner

When the expand button animates in its "close X" the X comes down from and is animated out to the top right. This animation looks odd and should perhaps be redesigned. Extract the attached ZIP to see a video recording of the issue.

Knapp.zip

Relevant code can be found here: https://github.com/SpareBank1/designsystem/blob/master/packages/ffe-buttons/less/expand-button.less

Set up Travis CI

We've decided to use Travis CI for continuous integration against master and pull requests. This issue is to track progress on setting it up.

Add .travis.yml
Set up service integration
Test a delierately broken PR
Test a successful PR

Set up a dedicated account for automation

Related to #3

To get continuous integration, coverage reporting, vulnerability scanning, and automated deploys up and running we've been using different admins accounts while setting up.

To have better control of things such as Personal Access Tokens and what users are able to change settings for things like Coveralls we'd like to set up a dedicated account controlled by SpareBank 1 to "own" the infrastructure.

Create an account with the design system email, controlled by a maintainer
Set up the Coveralls reporting using said account
Set up Snyk with said account
Generate a Personal access token for Travis CI for automated deploys

Travis CI uses GitHub to control access, so no further action is needed there.

Create an account with the design system email, controlled by a maintainer

We have a common email for the design system which can be used to create an account dedicated to this role. Remember to set up 2FA. Maintainers get to rock-paper-scissors-lizard-spock over who gets the 2FA token ;)

Generate a Personal access token for Travis CI for automated deploys

Create a Personal access token in Settings -> Developer Settings -> Personal access tokens. Give the token the public_repo scope and leave the other checkboxes unchecked. Go to travis-ci.org and replace the GITHUB_TOKEN environment variable in Settings.

Set up Coveralls reporting

Go to coveralls.io and set up coverage reporting for SpareBank1/designsystem. Holler at @wkillerud if you run into trouble.

Set the threshold to 0% decrease and leave the other settings as-is.

Set up Snyk

Go to snyk.io and sign up much as with Coveralls. @selbekk can be of assistance here.

ffe-datepicker navigation with incomplete date in text input field

Which package is this issue related to?

ffe-datepicker

Describe your issue (screenshots welcome!)

The datepicker month/day buttons are locked when the date in the text field is incomplete, for example when we delete a character in a year. It makes it hard to just 'click yourself' to a date in the calendar, change a month etc.

What is the expected behavior?

Might be easier to just let the user click on a date instead of forcing the user to use a keyboard to fix a mistake. If the month switcher is clicked with an incomplete date, the datepicker shoud asume the relative date we are changing from is the first day in the currently displayed month so we may proceed with using the mouse for navigation.

What is the actual behavior?

The datepicker doesn't let the user change the month when an incomplete date is in the text input.

Steps to reproduce

Provide a valid date, remove last character in the year, try to change the month.

Make <RadioSwitch /> more reusable

Which package is this issue related to?

ffe-radio-button-react

Describe your issue (screenshots welcome!)

I'm implementing the following design:

The challenge here is that I want to use ffe-form-react's <InputGroup /> component, so that I can pass in a <Tooltip /> component (the question mark to the right). Unfortunately, <RadioSwitch /> (or more precisely <RadioButtonGroup /> provides its own input group implementation, which doesn't support stuff like error messages etc.

I don't want to nest ffe-input-groups either, so I'm kind of stuck in a place where I have to re-implement the <RadioSwitch /> component to fit the needs of my design. Not a good developer experience.

The way I see it, <RadioButtonGroup /> does too much. <RadioSwitch /> could benefit from a simplified API as well. The entire package is honestly up for a good ol' rewrite.

What is the expected behavior?

I'd like the <RadioButtonGroup /> to only handle the logic of which radio button is selected, and let me compose the rest.

My end goal is to put a <RadioSwitch /> inside of a <InputGroup /> component, and have it work nicely together.

What is the actual behavior?

What I require is not possible. I cannot easily insert a tooltip into the label of a <RadioSwitch />

Add visual regression tests

We need some way of regression testing our CSS. There is prior art on this in SB1, but we need it to work in our new CI world.

Readme: navn på fagledere :)

Kan vi legge til navnet på faglederne i Readme: Anne Gundersen og Hans Huseklepp?

Link to github from github pages site

I suggest to add a link to this github repository to the top navigation of the design system site, because the packages READMEs are the main source of information for developers on how to actually install FFE-packages. Also, a github-logo up there is a great show-off.

ffe-account-selector-react selectedAccounts default verdi

Ettersom selectedAccounts ikke er en required prop i account-selector-multi, bør den støtte at selectedAccounts er undefined, og da vise teksten om at man ikke har valgt noen konti. ~ Martin Akre Midtsund

Styleguide: Flexbox related IE-bugs in top menu

The top menu is not rendered properly in IE(11). Possibly caused by IE's interpretation of flex: 1.

Should our main README.md be in English?

Although most of our documentation is in Norwegian, our Github and code language is English. Should we therefore consider translating the README.md and CONTRIBUTING.md documents to English?

Add Code of Conduct

Explicitly drop support for React 15, and other React questions

We have React 15.x listed as a valid peerDependency for two packages:

@sb1/ffe-accordion-react
@sb1/ffe-tabs-react

We use Fragment, a React 16.2.0 feature in two packages:

@sb1/ffe-details-list-react
@sb1/ffe-file-uploader-react

In neither of the latter two packages do we list React as a peerDependency (at all, nevermind 16.2.0).

There is also an inconsistency in whether we list React as a devDependency in the individual packages or if we defer this to the repo root.

There are multiple issues that should be resolved, but the most important one I think is in the issue title:

Should we explicitly drop support for React 15?
- If no, then should we remove the usage of Fragment and roll back our devDependencies?
Should we list React as a peerDependency in all -react packages?
Should we list React as a devDependency in all -react packages?

Cannot find module ffe-icons-react/svg.sprite.config.json

Which package is this issue related to?

ffe-icons-react

Describe your issue (screenshots welcome!)

> @sb1/[email protected] build /mnt/c/Workspace/sparebank1-designsystem/packages/ffe-details-list-react
> babel -d lib/. --ignore=*.spec.js src/.

src/Detail.js -> lib/Detail.js
src/DetailContent.js -> lib/DetailContent.js
src/DetailList.js -> lib/DetailList.js
src/index.js -> lib/index.js

> @sb1/[email protected] build /mnt/c/Workspace/sparebank1-designsystem/packages/ffe-header
> lessc less/ffe-header-nodeps.less examples/ffe-header.css --autoprefix && lessc examples/examples.less examples/examples.css

lerna ERR! build Errored while running script in '@sb1/ffe-icons-react'
lerna ERR! execute callback with error
lerna ERR! Error: Command failed: npm run build
lerna ERR! module.js:549
lerna ERR!     throw err;
lerna ERR!     ^
lerna ERR!
lerna ERR! Error: Cannot find module '../../../../designsystem/packages/ffe-icons-react/svg.sprite.config.json'
lerna ERR!     at Function.Module._resolveFilename (module.js:547:15)
lerna ERR!     at Function.Module._load (module.js:474:25)
lerna ERR!     at Module.require (module.js:596:17)
lerna ERR!     at require (internal/module.js:11:18)
lerna ERR!     at Object.<anonymous> (/mnt/c/Workspace/sparebank1-designsystem/packages/ffe-icons/bin/build.js:42:18)
lerna ERR!     at Module._compile (module.js:652:30)
lerna ERR!     at Object.Module._extensions..js (module.js:663:10)
lerna ERR!     at Module.load (module.js:565:32)
lerna ERR!     at tryModuleLoad (module.js:505:12)
lerna ERR!     at Function.Module._load (module.js:497:3)
lerna ERR! npm ERR! code ELIFECYCLE
lerna ERR! npm ERR! errno 1
lerna ERR! npm ERR! @sb1/[email protected] ffe:icons: `ffe-icons --opts=designsystem/packages/ffe-icons-react/svg.sprite.config.json`
lerna ERR! npm ERR! Exit status 1
lerna ERR! npm ERR!
lerna ERR! npm ERR! Failed at the @sb1/[email protected] ffe:icons script.
lerna ERR! npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
lerna ERR!
lerna ERR! npm ERR! A complete log of this run can be found in:
lerna ERR! npm ERR!     /home/oes/.npm/_logs/2018-03-08T09_48_10_381Z-debug.log
lerna ERR! npm ERR! code ELIFECYCLE
lerna ERR! npm ERR! errno 1
lerna ERR! npm ERR! @sb1/[email protected] build: `npm run ffe:icons && npm run build:jsx-components && npm run build:babel`
lerna ERR! npm ERR! Exit status 1
lerna ERR! npm ERR!
lerna ERR! npm ERR! Failed at the @sb1/[email protected] build script.
lerna ERR! npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
lerna ERR!
lerna ERR! npm ERR! A complete log of this run can be found in:
lerna ERR! npm ERR!     /home/oes/.npm/_logs/2018-03-08T09_48_10_403Z-debug.log
lerna ERR!
lerna ERR! > @sb1/[email protected] build /mnt/c/Workspace/sparebank1-designsystem/packages/ffe-icons-react
lerna ERR! > npm run ffe:icons && npm run build:jsx-components && npm run build:babel
lerna ERR!
lerna ERR!
lerna ERR! > @sb1/[email protected] ffe:icons /mnt/c/Workspace/sparebank1-designsystem/packages/ffe-icons-react
lerna ERR! > ffe-icons --opts=designsystem/packages/ffe-icons-react/svg.sprite.config.json
lerna ERR!
lerna ERR!
lerna ERR!     at Promise.all.then.arr (/mnt/c/Workspace/sparebank1-designsystem/node_modules/lerna/node_modules/execa/index.js:236:11)
lerna ERR!     at <anonymous>
{ Error: Command failed: npm run build
module.js:549
    throw err;
    ^

What is the expected behavior?

Packages are built and development server is started

What is the actual behavior?

npm error message on build

Steps to reproduce

Fresh clone from master (commit 29bb1cf0cb4795a11cbcb8cd917b10560b56d5eb)
Using node v8.10.0
Using npm 5.7.1

Run npm install
Run npm start at root to build all packages and start local development server

Contributing.md references HipChat

HipChat and our channel is referenced both in the top and the bottom sections of CONTRIBUTING.md.

Should this be replaced or removed?
Do we have some way for externals to contact us?

Clean up unnecessary files

There are still quite a few files that are left from our multi-repo days, that now can be deleted.

These include per-package .gitignore files, .gitattributes files etc etc.

Clean up!

Meta: should we have labels for FFE and the design system?

We're starting to see some open issues for design.sparebank1.no as well as FFE. Would it be helpful to add an 🚀 ffe and a 💫 design system label (emojis pending) to help see at a glance which of the two the issue is about?

Improve mobile navigation

Layout on mobile screens is pretty crude at the moment, especially navigation. Consider introducing a hamburger for toggling, similar to ffe-header.

Automate deployment of GitHub pages

The process of building the html documentation and pushing it to the gh-pages-branch needs to be automated. Preferably our CI should be setup to do this. Travis has a write up, that might help: https://docs.travis-ci.com/user/deployment/pages/

npm run build:htdocs builds the documentation, which ends up in dist.

Contributing: Hjelp designere bidra til designsystemet

Contributing-guiden er veldig utviklersenteret. Hvordan hjelper vi designerne komme i gang som bidragsytere? Hva er de oftest stilte spørsmålene? Hvordan er workflowen?

Vi har gjort noen undersøkelser internt, men vi må få dokumentert det her på Github ✍️

"Hva er nytt" (changelog)

Jeg har et forslag om å legge til en changelog på forsiden av design.sparebank1.no. Se screen under (plassering og layout er kun en skisse)

Kanskje det kan hjelpe oss med å vise at designsystemet er levende og at vi unngår forvirring fra andre om siden er oppdatert eller ikke.....

Consider replacing handlebars with gatsby for static styleguide contents

We use Handlebars and a custom setup to generate static content around React Styleguidist for content that is not React component demos and documentation. Gatsby was raised as a suggestion to replace the custom setup.

Use this issue to discuss this suggestion.

Contrast on focus ring is low for certain elements, backgrounds

See attached images. Can we change what color we use for the focus ring?

Consider using pretty-quick for running prettier

Prettier tends to create mangled diffs every once in a while. While researching how to fix this, I noticed that the updated prettier website suggests using pretty-quick instead.

Should we change out precise-commit for pretty-quick in order to improve the commit experience? It does not support patch-wise formatting, but I think that's what's ruining prettier's output in the first place.

ffe-icons: Consider creating a separate package for the SVG assets

Some consumers would only like the SVGs and use them directly in their app. Today we force these users to download PhantomJS as part of svg-sprite. This is a requirement to generate an SVG sprite of multiple icons at build-time. However, not all consumers want or need this feature.

Proposed solution:

Create a new package ffe-icons-assets that only holds the SVGs
Release a version of ffe-icons that uses ffe-icons-assets as its source for SVGs. If it is set as a devDependency and the SVG assets are copied and bundled in the same place as before when publishing we can avoid a breaking change.
ffe-icons-react carries on, business as usual

This way we support these three use cases:

I use React
I don't use React and I just need one or two SVGs and don't want or need sprites
I don't use React and I need several SVGs and should probably bundle them in a sprite

Consider removing all `peerDependencies`

Which package is this issue related to?

🌐 All the things

Describe your issue

When using packages with a React and Less version we have a peerDependency on the Less version from the React version. A lot of Less packages also have a peerDependency on @sb1/ffe-core (even some React packages, like accordion do this). These tend to get out of sync, as it seems Lerna ignores them. This again creates a whole set of warnings on npm install that this and that peer dependency is missing. Some of these peerDependency requirements may also conflict for absolutely no reason.

The peerDependencies were originally added to give some kind of hint that you need this other package for the package to work as intended. For React and Less pairs I feel this is a given, and the peerDependencies just add noise.

What I'm suggesting is that we remove it all.

@sb1/ffe-core is a bit tricky. Maybe now that we use Lerna we could instead make @sb1/ffe-core a direct dependency? This way we:

Can remove peerDependencies (:+1:)
A breaking change in core also triggers a major release of all dependencies, regardless of feature use (:+1: / :-1: )

Mulig å fjerne "røkla" som fargekategori og bytte ut med følgende forslag?

Noen av fargene under "røkla"( som vi må finne en ordentlig kategorinavn for btw) er WCAG farger. @Heilysto nevnte dette sammen med Julia T(grafiske designere).

Jeg har et forslag her(se kategorinavn på screen under) @Heilysto :)

Tests for formatPercentage in ffe-formatters fail under certain conditions

Two test cases of ffe-formatter fail on certain yet to be discovered conditions on two machines in my possession (Linux + Mac). It seems Number.toLocaleString prefixes negative numbers with either an hyphen minus (char code 45) or a minus sign (char code 8722), whereas the later causes the test to break.

designsystem/packages/ffe-formatters/src/formatPercentage.spec.js

Line 17 in 209c8f5

expect(formatPercentage(-73.2)).toBe(`-73,2${NON_BREAKING_SPACE}%`);

designsystem/packages/ffe-formatters/src/formatPercentage.spec.js

Lines 33 to 35 in 3e3cff9

 expect(formatPercentage(12.3456, { maxDecimals: 1 })).toBe( 

 `12,3${NON_BREAKING_SPACE}%`, 

 );

designsystem/packages/ffe-formatters/src/formatPercentage.js

Lines 12 to 15 in 209c8f5

 const percentage = amount.toLocaleString('nb-NO', { 

 minimumFractionDigits: 0, 

 maximumFractionDigits: opts.maxDecimals, 

 });

Endre ikoner i komponent biblioteket

Fikk en forespørsel fra en utvikler i Åpne Sider om ikoner i komponent biblioteket på design.sparebank1.no. som ikke stemte helt med det hun fikk i Invision. Dette bør vi endre slik at andre ikke blir forvirret :)

Denne har feil størrelse og farge

Feil form og farge

Riktig versjon:

ffe-datepicker-react: Date is rendered with a border for all months

Steps to reproduce:

Select a date in the calendar widget
Use the next or previous button to change month

Expected behavior: the date should be rendered as selected only for the actual month I selected
Actual behavior: the date is rendered as selected for all months

Stil og tone - one ordered list rendered per item

It seems the Markdown to HTML transformation isn't working properly for Stil og tone. Each item is rendered as its own ol with the result that each item is given the 1. listing.

Styleguide: Flash of unstyled content when opening components page

When navigating to components from a different page in the styleguide, there is a flash of unstyled content before the styling kicks in and saves the day. The problem is not present in other pages.

ffe-buttons: Text is aligned left in block level buttons

The text in block level buttons is aligned to the left, should be center. This bug is present despite both text-align: center; and align-items: center; (on the label element) being set.

Add Coveralls to the build

Coveralls is a really nice thing for monitoring test coverage and is relatively easy to integrate with Travis. It's also free for opensource projects. It will find and comment on pull requests indicating if the coverage has gone up or down, an example of what that looks like can be seen here.

Clarify comment about an IE11-issue in ffe-account-selector-react

This code comment mentions an issue with IE11, which is supposed to be fixed in React 16. As React 16 is out by now, the comment might need an update.

designsystem/packages/ffe-account-selector-react/src/subcomponents/input-field/InputField.js

Lines 14 to 21 in d5bb1f7

 /* 

  IE11 can drop characters when typing fast. 

  This is a known issue with React 15 and IE11 and will be fixed in React 16 

  See bugreport: https://github.com/facebook/react/issues/7027 

  As discussed in the React bugreport, a workaround for this is to use "onInput" instead of "onChange" in IE11. 

  In order to achieve this we use a very dirty, but workable, browser testing regex: 

  https://github.com/faisalman/ua-parser-js/blob/master/src/ua-parser.js#L261 

  */

Lint errors should break the build, but doesn't

Which package is this issue related to?

All of them!

Describe your issue

The CI is not running npm run lint - but it should.

What is the expected behavior?

When npm run lint fails, the CI fails.

What is the actual behavior?

When npm run lint fails, the CI passes.

Steps to reproduce

Introduce a lint error. Observe.

ffe-datepicker-react: pressing Enter while focusing the input field with a valid date should close the calendar

If I edit a date in the input field with my keyboard and hit Enter I expect the calendar to close so I can tab to the next input field, given the date is valid.

ffe-account-selector-react: Multiselect scroll in IE hopper til toppen av tabellen

AccountSelectorMulti i ffe-account-selector-react.

Ved valg av konto (avhuking av checkbox) etter å ha scrollet nedover i dropdownlisten hopper listen tilbake til toppen dersom du er på IE.

Dette blir fort veldig frustrerende dersom du skal velge flere et stykke ned i listen.

	expect(formatPercentage(12.3456, { maxDecimals: 1 })).toBe(
	`12,3${NON_BREAKING_SPACE}%`,
	);

	const percentage = amount.toLocaleString('nb-NO', {
	minimumFractionDigits: 0,
	maximumFractionDigits: opts.maxDecimals,
	});

	/*
	IE11 can drop characters when typing fast.
	This is a known issue with React 15 and IE11 and will be fixed in React 16
	See bugreport: https://github.com/facebook/react/issues/7027
	As discussed in the React bugreport, a workaround for this is to use "onInput" instead of "onChange" in IE11.
	In order to achieve this we use a very dirty, but workable, browser testing regex:
	https://github.com/faisalman/ua-parser-js/blob/master/src/ua-parser.js#L261
	*/

sparebank1 / designsystem Goto Github PK

designsystem's Introduction

Felles Front End i SpareBank 1

🏃 Kom i gang med å bruke designsystemet

📝 Hvordan gjøre endringer i FFE?

💻 Kjøre opp designsystemet lokalt

✨ Bidra!

Licenses

designsystem's People

Contributors

Stargazers

Watchers

Forkers

designsystem's Issues

Which package is this issue related to?

Describe your issue (screenshots welcome!)

What is the expected behavior?

What is the actual behavior?

Steps to reproduce

Which package is this issue related to?

Describe your issue (screenshots welcome!)

What is the expected behavior?

What is the actual behavior?

Steps to reproduce

Which package is this issue related to?

Describe your issue (screenshots welcome!)

What is the expected behavior?

What is the actual behavior?

Steps to reproduce

Which package is this issue related to?

Describe your issue

What is the expected behavior?

What is the actual behavior?

Steps to reproduce

Create an account with the design system email, controlled by a maintainer

Generate a Personal access token for Travis CI for automated deploys

Set up Coveralls reporting

Set up Snyk

Which package is this issue related to?

Describe your issue (screenshots welcome!)

What is the expected behavior?

What is the actual behavior?

Steps to reproduce

Which package is this issue related to?

Describe your issue (screenshots welcome!)

What is the expected behavior?

What is the actual behavior?

Which package is this issue related to?

Describe your issue (screenshots welcome!)

What is the expected behavior?

What is the actual behavior?

Steps to reproduce

Which package is this issue related to?

Describe your issue

Which package is this issue related to?

Describe your issue

What is the expected behavior?

What is the actual behavior?

Steps to reproduce

Recommend Projects

Recommend Topics

Recommend Org