Merge pull request #485 from vrk-kpa/update-master-to-4.0.0

[Release] Update master to 4.0.0
vrk-kpa · Jun 30, 2021 · 58ae18c · 58ae18c
2 parents 819e365 + 373e16b
commit 58ae18c
Show file tree

Hide file tree

Showing 234 changed files with 17,324 additions and 9,943 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/common.sh b/.husky/common.sh
@@ -0,0 +1,8 @@
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+# Workaround for Windows 10, Git Bash and Yarn
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn pre-commit
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+yarn pre-push
diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js
@@ -12,6 +12,8 @@ const primitiveComponents = [
   ['Form', 'SearchInput'],
   ['Form', 'Checkbox'],
   ['Form', 'Textarea'],
+  ['Form', 'RadioButton'],
+  ['Form', 'MultiSelect'],
 ];
 
 const getComponent = ({ name, underName }) =>
@@ -66,6 +68,13 @@ module.exports = {
           content: './.styleguidist/primitive.md',
           components: getComponents(primitiveComponents),
           sections: [
+            {
+              name: 'Toggle',
+              components: getComponentWithVariants('Form/Toggle')([
+                'ToggleButton/ToggleButton',
+                'ToggleInput/ToggleInput',
+              ]),
+            },
             {
               name: 'Text',
               components: getComponents(['Text', 'Paragraph']),
@@ -84,10 +93,23 @@ module.exports = {
                 'LinkExternal',
               ]),
             },
+            {
+              name: 'Chip',
+              components: getComponentWithVariants('Chip')([
+                'Chip/Chip',
+                'StaticChip/StaticChip',
+              ]),
+            },
             {
               name: 'Icon',
               components: getComponents(['Icon', 'StaticIcon']),
             },
+            // {
+            //   name: 'MultiSelect',
+            //   components: getComponentWithVariants('Form/MultiSelect')([
+            //     'MultiSelect/MultiSelect',
+            //   ]),
+            // },
           ],
           expand: true,
         },
@@ -104,7 +126,8 @@ module.exports = {
             {
               name: 'Dropdown',
               components: getComponentWithVariants('Dropdown')([
-                'DropdownItem',
+                'Dropdown/Dropdown',
+                'DropdownItem/DropdownItem',
               ]),
             },
             {
@@ -124,6 +147,14 @@ module.exports = {
                 'ExpanderContent/ExpanderContent',
               ]),
             },
+            {
+              name: 'Modal',
+              components: getComponentWithVariants('Modal')([
+                'Modal/Modal',
+                'ModalContent/ModalContent',
+                'ModalFooter/ModalFooter',
+              ]),
+            },
           ],
           expand: true,
         },

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
 
 We maintain two branches, `master` and `develop`. Send your pull requests to develop.
 
-Create branches with prefixes `bugfix/`, `feature/` and `hotfix/`.
+Create branches with prefixes such as `fix/` and `feature/`.
 
 If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don’t accidentally duplicate your effort.
 
@@ -20,7 +20,7 @@ We will review your pull request and either merge it, request changes to it, or
 
 4. Ensure the test suite passes (`yarn test`)
 
-- [ ] TODO: 5. Run `yarn test -- -u` to update jest snapshot and commit these changes as well (if has).
+5. Run `yarn test -u` to update jest snapshots. Commit any changes.
 
 6. Make sure your code lints (`yarn test:lint`). Tip: Lint runs automatically when you build.
 
@@ -30,16 +30,14 @@ See [DEVELOPMENT.md](/DEVELOPMENT.md).
 
 ## Releasing
 
-On release `develop` is merged to `master` and tagged with version. Releasenotes can be added to version via Github.
+On release `develop` is merged to `master` and tagged with version. Release notes can be added to version via GitHub. We are mostly following [git flow](https://nvie.com/posts/a-successful-git-branching-model/).
 
-If API changes are approved to `develop`, release deprecation warning to `master` and rebase `master` to `develop`.
+If API changes are approved to `develop`, rebase `master` to `develop`. Use semantic versioning to communicate the changes.
 
-## Bugs
+Minor versions and patches are only applied to the latest major version.
 
-We are using GitHub Issues for bug tracing.
+## Feature requests and bug reports
 
-Before you reporting a bug, please make sure you've searched exists issues.
+We are using GitHub Issues for bug tracking and feature request.
 
-## Proposing a change
-
-If you intend to change the public API or introduce new feature, contact [VRK organization](https://github.com/vrk-kpa) design processes or create a feature request issue.
+Before reporting a bug, please make sure you've searched exists issues to see if it has already been reported.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
@@ -1,5 +1,11 @@
 # ⌨️ Development
 
+[Styleguidist](https://github.com/styleguidist/react-styleguidist) for presenting components.
+
+[tsdx](https://github.com/jaredpalmer/tsdx) and [eslint](https://eslint.org/).
+
+For testing: [React-testing-library](https://github.com/kentcdodds/react-testing-library) run by [Jest](https://github.com/facebook/jest) with [ts-jest](https://github.com/kulshekhar/ts-jest) (code coverage with built-in [Istanbul](https://github.com/istanbuljs)). Code style with [Prettier](https://github.com/prettier/prettier).
+
 After cloning suomifi-ui-components, run `yarn` to fetch its dependencies. Then, you can run several commands:
 
 1. `yarn start` runs Styleguidist for displaying components stories.
@@ -20,34 +26,30 @@ After cloning suomifi-ui-components, run `yarn` to fetch its dependencies. Then,
 
 9. `yarn bundle-analyzer` shows analyzation of bundle size.
 
-
-
 ❗️After you pull changes from the repo, remember to run `yarn` to make sure that you have all the needed dependencies installed on your setup.
 
 ## Source
 
-[![suomifi-ui-components architecture diagram](suomifi-ui-components.png 'suomifi-ui-components architecture')](suomifi-ui-components.png)
-
 Source contains 3 stages of components:
 
 1. `reset` is for resetting html tags (don't do too opinionated stuff here).
-2. `components` are accessible/a11y version of components and HTML-semantics without Suomi.fi related.
+2. `components` are bare bones accessibility implementations without Suomi.fi styles. This abstraction is being removed and will not be used in the future.
 3. `core` contains Suomi.fi-styleguide as theme, components and CSS exports.
 
 - _Export `src/core`-components at `src/core/index` and `src/index`._
 - Export `src/components`-components at `src/components/index`.
 
 **Don't do relative imports from `src/index`, use those 3-levels export locations.**
 
-**Do not create duplication of source or styles for component, use syntax that can be used in exports.**
+**Do not create duplication of source or styles for component.**
 
 Export interfaces for exported functions/components. Typescript will generate declaration files from exported interfaces (.d.ts). Write comments/documentatiion to all properties that need to be shown at styleguide.
 
 ### Props that are passed on to another component
 
 ```jsx
-// put rest of the props to passProps, but takeAwayProp and takeAanother
-const { takeAwayProp, takeAanother: renamedAsProp, ...passprops } = withSuomifiDefaultProps(this.props);
+// destructure takeAway and takeAnother props and put rest of the props to passProps.
+const { takeAwayProp, takeAnother: renamedAsProp, ...passprops } = withSuomifiDefaultProps(this.props);
 const customProps = {
   takeAwayProp: !!takeAwayProp ? takeAwayProp : renamedAsProp,
   basedOnCondition: passProps.notTakenAwayProp ? 'one' : 'two',¨
@@ -64,20 +66,11 @@ return <Component {...passProps}>
 
 ```jsx
 const StyledButton = styled(
-  ({
-    tokens,
-    className,
-    ...passProps
-  }: ButtonProps & InternalTokensProp) => (
-    <CompButton
-      {...passProps}
-      className={classnames(className, {
-        [`${baseClassName}--${variant}`]: variant !== 'default'
-      })}
-    />
+  ({ ...passProps }: ButtonProps & InnerRef) => (
+    <BaseButton {...passProps} />
   )
 )`
-  ${props => baseStyles(props)}
+  ${baseStyles}
 `;
 ```
 
@@ -89,32 +82,23 @@ styled(Component)`
 `;
 ```
 
-Then with arrow-function to:
-
-```jsx
-styled(props => <Component {...props} />)`
-  ${props => baseStyles(props)}
-`;
-```
-
 ## Styling
 
-`src/components` will provide 'fi-' -prefixed classNames to all components - and then at `src/core` styling is based on those base classNames.
+components will have `fi-` -prefixed class names and styling is based on those class names.
 
 Use BEM naming convention with `fi-`-prefix:
 
 ```css
 .fi-block
-.fi-block--modifier
-.fi-block_element
-.fi-block_element--modifier
+  .fi-block--modifier
+  .fi-block_element
+  .fi-block_element--modifier;
 ```
 
 and/or atom-classes:
 
 ```css
-.fi-block.fi-rounded
-.fi-block_element.fi-highlight
+.fi-block.fi-rounded .fi-block_element.fi-highlight;
 ```
 
 - All colors, typography and spacing must come from tokens (suomifi-design-tokens) and all tokens not defined in suomifi-design-tokens must be defined at internal tokens
@@ -142,8 +126,6 @@ and with CSS-ClassName:
 
 Don't use ~~!important~~, if really needed - for specificity hack you can use `.fi-button.button--custom.button--custom {...}`
 
-- TBD: CSS-exports (tested to be working , not implemented for all components)
-
 ## Git
 
 Pull requests can be submitted from fork. [Read more from here.](https://guides.github.com/activities/forking/)
@@ -156,7 +138,7 @@ git add <file1> <file2> ...
 git commit -m "My commit message"
 ```
 
-### Pushing your feature to Github:
+### Pushing your feature to GitHub:
 
 ```bash
 git checkout develop
@@ -180,4 +162,4 @@ git push --force-with-lease
 
 (If your remote does not accept your local new branch: `git push -u origin HEAD`)
 
-- Make a Pull Request at Github website.
+- Make a Pull Request at GitHub website.
diff --git a/FAQ.md b/FAQ.md
@@ -28,9 +28,9 @@ If you are using TypeScript, make sure you have the latest version of `@types/we
 
 Also notice that `__webpack_nonce__` does not work with hot reload in local development environment by default.
 
-## 3. Some components won't work on old browsers (e.g. IE) at all
+## 3. Some components won't work on old browsers (e.g. IE) at all.
 
-Add polyfills to your application.
+Add polyfills to your application. Internet Explorer is not officially supported.
 
 ## 4. Do you support server side rendering?
 

diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
-# [<img src="https://avatars0.githubusercontent.com/u/11345641?s=88&v=4" alt="VRK" width="18"/> suomifi-ui-components](https://vrk-kpa.github.io/suomifi-ui-components/)
+# [<img src="https://avatars0.githubusercontent.com/u/11345641?s=88&v=4" alt="DVV" width="18"/> suomifi-ui-components](https://vrk-kpa.github.io/suomifi-ui-components/)
+
+![npm](https://img.shields.io/npm/v/suomifi-ui-components) ![NPM](https://img.shields.io/npm/l/suomifi-ui-components) ![WCAG](https://img.shields.io/badge/WCAG%202.1-AA-green) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](http://makeapullrequest.com)
 
 Suomi.fi-styleguide in React components. [Living styleguide](https://vrk-kpa.github.io/suomifi-ui-components/) (latest release/master-branch).
 
 ## ✨ Features
 
+- Accessibility WCAG 2.1 level AA
 - React-components with TypeScript support
-- Highly modular - all browser/app CSS-resets without global styles
-- Should work on all different existing React apps (>=16.3, >=16.8 recommended)
+- Suomi.fi brand styles
 - Highly customizable (CSS, CSS-in-JS)
 
-Uses [React 16.13.0](https://github.com/facebook/react) with [Styled Components](https://github.com/styled-components/styled-components) and written in [TypeScript](https://github.com/Microsoft/TypeScript). [Styleguidist](https://github.com/styleguidist/react-styleguidist) for presenting components.
-
-[tsdx](https://github.com/jaredpalmer/tsdx) and [eslint](https://eslint.org/).
+Works with [React >= 16.8.0](https://github.com/facebook/react) and [Styled Components >= 5.2.1](https://github.com/styled-components/styled-components). Supports [TypeScript](https://github.com/Microsoft/TypeScript). CJS and ESM builds provided via the npm package.
 
-For testing: [React-testing-library](https://github.com/kentcdodds/react-testing-library) run by [Jest](https://github.com/facebook/jest) with [ts-jest](https://github.com/kulshekhar/ts-jest) (code coverage with built-in [Istanbul](https://github.com/istanbuljs)). Code style with [Prettier](https://github.com/prettier/prettier).
+Supports and tested on latest versions of Chrome, Firefox, Safari and Edge. Also tested with NVDA, VoiceOver and TalkBack screen readers.
 
 ## 📦 Install
 
@@ -29,21 +29,14 @@ And include **required** styles and fonts from `dist/main.css` as best suited fo
 import 'suomifi-ui-components/dist/main.css';
 ```
 
-This stylesheet contains the default fonts for the library as well as Reach UI peer dependency styles.
-
-If you already use Reach UI in your project or cannot import the CSS file for some reason (e.g. CSP for fonts), you can also import the styles directly from Reach UI by following [their instructions](https://reach.tech/styling/). In this case you need to import the font separately e.g. by adding the following entry to your application's CSS.
-
-```javascript
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300:400,600&display=swap');
-```
+This stylesheet contains the default fonts for the library, some global styles and Reach UI peer dependency styles.
 
 ### Peer dependencies
 
-You should also install the following dependencies, if your project does not already have them.
+You should also install the following peer dependencies.
 
-- suomifi-ui-components is a component library for React, it requires [react](https://www.npmjs.com/package/react) version >=16.8.0 and related dependencies and typings.
-
-- suomifi-ui-components requires [styled-components](https://www.npmjs.com/package/styled-components) version >=5.0.1.
+- [React](https://www.npmjs.com/package/react) version >=16.8.0 and related dependencies and typings.
+- [styled-components](https://www.npmjs.com/package/styled-components) version >=5.2.1 and related dependencies and typings.
 
 - The aim is to keep dependencies up to date and use the latest available versions. We encourage you to use the latest available versions of peer dependencies.
 
@@ -59,22 +52,20 @@ yarn add styled-components
 yarn add @types/styled-components @types/warning
 ```
 
-Types for styled-components has a known issue with including conflicting typings for react-native. Therefore, some some additional steps are required to allow skipLibCheck true compiler option. If using yarn, add a .yarnclean file next to your package.json file with `@types/react-native` as contents. If using npm, add `"postinstall": "rm -rf node_modules/@types/react-native"` to your package.json scripts.
-
 ## 🔨 Usage
 
 ```jsx
 import { Button } from 'suomifi-ui-components';
 ReactDOM.render(<Button />, mountNode);
 ```
 
-### 🌊 `Component.variant`
+### 🌊 Component variants
 
-Components have variant-property for different versions of the current component. Easiest way to use variant-prop is with (static method) `Component.variant`.
+Components have variant-property for different versions of the current component. Some components might also have static variants e.g. `Component.variant`, but using these is discouraged as they are being removed in future releases.
 
 ```jsx
 import { Button } from 'suomifi-ui-components';
-<Button.secondary>This is seconday button</Button.secondary>;
+<Button variant=”secondary”>This is a seconday button</Button>;
 ```
 
 ### ⛱ Extending styles
@@ -85,7 +76,7 @@ Components' styles can be customized with [Styled Components](https://github.com
 styled(Button)...
 ```
 
-_HOX!!! If you use Styled Components you cannot use Component.variant (static methods) and you need to use variant-property to get variants from the styled(Component)._
+_HOX!!! If you use Styled Components you cannot use Component.variant (static methods) and you need to use variant-property to get variants from the styled(Component)._ Partly for this reason we are getting rid of the static variants in the future releases.
 
 **or** using CSS-ClassName:
 
@@ -109,7 +100,7 @@ See [FAQ.md](/FAQ.md).
 
 See [DEVELOPMENT.md](/DEVELOPMENT.md).
 
-## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+## 🤝 Contributing
 
 We welcome all contributions. Please read our [CONTRIBUTING.md](/CONTRIBUTING.md) first.