amsterdam / vergunningcheck Goto Github PK

Check it out on BrowserStack: https://amsterdam.github.io/amsterdam-styled-components

How to fix: has something to do with Babel

Add global import/export for all asc-ui components we need in our project

A global import/export would prevent a lot of duplicate importing/exporting and would also make an improvement for minor theme styling like margin-bottom on the same asc-ui components. Right now we got too many mixed component imports from either asc-ui or *Styled.js files that also import from asc-ui.

For example:LocationFinder uses two kinds of component imports

import { Paragraph, Select } from "@datapunt/asc-ui";

import { StyledTextField, StyledAlert } from "./LocationFinderStyles";

LocationFinderStyles also has imports from asc-ui and adds some minor styling

import { AlertMessage as Alert, TextField } from "@datapunt/asc-ui";

export const StyledTextField = styled(TextField)`
  margin-bottom: 25px;
`;

export const StyledAlert = styled(Alert)`
  margin-bottom: 25px;
`;

Add new component "Step by step navigation" to Amsterdam Styled Components

Replace the current MenuItem components (in Header) with the new Step by step navigation.

Design System Link

UX Specs by Igor (Still Draft and might need some updates/tweaks):

Component as-in-draft for desktop (L&XL)

Component as-in-draft for desktop (L&XL) -

Component for mobile (S)

Component for desktop (L&XL) - horizontal

import-js/eslint-plugin-import#1772

The grid is broken in Safari 9/10.

Check it out on BrowserStack.

Possible fix

Useful info

Fix it in Amsterdam Styled Components

Problem

Should be

test

Please see the video in #frontend slack channel.