[SPA-310]Updated Icons and missing classname support in css-modules

config/packages/package.dependencies.js

@@ -1,8 +1,5 @@
 module.exports = {
   productionDependencies: {
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
     "@u-wave/react-vimeo": "0.9.5",
     "classnames": "2.3.1",
     "date-fns": "2.24.0",
@@ -25,9 +22,6 @@ module.exports = {
     "react-color": "2.19.3",
   },
   documentationDependencies: {
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
     "@u-wave/react-vimeo": "0.9.5",
     "classnames": "2.3.1",
     "date-fns": "2.24.0",
@@ -52,9 +46,6 @@ module.exports = {
     "react-color": "2.19.3",
   },
   testingDependencies: {
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
     "@u-wave/react-vimeo": "0.9.5",
     "classnames": "2.3.1",
     "date-fns": "2.24.0",

dist/app-uikit.js.LICENSE.txt

@@ -5,14 +5,9 @@
 */
 
 /*!
- * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-
-/*!
- * weakmap-polyfill v2.0.1 - ECMAScript6 WeakMap polyfill
+ * weakmap-polyfill v2.0.4 - ECMAScript6 WeakMap polyfill
  * https://github.com/polygonplanet/weakmap-polyfill
- * Copyright (c) 2015-2020 Polygon Planet <polygon.planet.aqua@gmail.com>
+ * Copyright (c) 2015-2021 polygonplanet <polygon.planet.aqua@gmail.com>
  * @license MIT
  */
 
@@ -48,7 +43,7 @@ and limitations under the License.
 
 /*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
 
-/*! @vimeo/player v2.16.1 | (c) 2021 Vimeo | MIT License | https://github.com/vimeo/player.js */
+/*! @vimeo/player v2.16.2 | (c) 2021 Vimeo | MIT License | https://github.com/vimeo/player.js */
 
 /*! Native Promise Only
     v0.8.1 (c) Kyle Simpson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@landingi/landingi-ui-kit",
-  "version": "1.3.149",
+  "version": "1.3.150",
   "description": "Landingi UI-Kit",
   "main": "dist/app-uikit.js",
   "private": true,
@@ -26,17 +26,16 @@
     "release-it": "yarn version --patch && yarn test:badges && yarn build"
   },
   "devDependencies": {
-    "@babel/core": "7.15.5",
+    "@babel/core": "7.16.7",
     "@babel/eslint-parser": "7.15.7",
     "@babel/eslint-plugin": "7.14.5",
     "@babel/plugin-proposal-class-properties": "7.14.5",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-runtime": "7.15.0",
     "@babel/preset-env": "7.15.6",
     "@babel/preset-react": "7.14.5",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
+    "@babel/runtime": "7.16.7",
+    "@babel/traverse": "7.16.7",
     "@testing-library/jest-dom": "5.16.1",
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
@@ -110,10 +109,7 @@
     "npm": ">=7.0.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.15.4",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@fortawesome/react-fontawesome": "0.1.15",
+    "@babel/runtime": "7.16.7",
     "@u-wave/react-vimeo": "0.9.5",
     "classnames": "2.3.1",
     "date-fns": "2.24.0",
@@ -135,5 +131,8 @@
     "react-uuid": "1.0.2",
     "simple-flexbox": "2.3.3",
     "tiny-emitter": "2.1.0"
+  },
+  "resolutions": {
+    "@babel/traverse": "7.16.7"
   }
 }

src/shared/components/global/Headline/Headline.js

@@ -6,8 +6,9 @@ import scss from './Headline.scss'
 
 const cssClass = styles(scss)
 
+//TODO Headline css, mdx, test
 /**
- * Headline page - stateless presentational component
+ * Headline - stateless presentational component
  * @param {object} props - props
  * @param {string|array} props.className - list of class names, default: page__headline
  * @param {string} props.title - data

src/shared/components/global/Html/Html.js

@@ -1,30 +1,22 @@
-import { styles } from '@helpers/css'
 import PropTypes from 'prop-types'
 import React from 'react'
 import createDOMPurify from 'dompurify'
-import scss from './Html.scss'
 
 const isBrowser = typeof window !== 'undefined'
 
 const DOMPurify = isBrowser && createDOMPurify(window)
 
-const cssClass = styles(scss)
-
-const Html = ({ className, value }) => (
+//TODO Html mdx, test
+const Html = ({ value }) => (
   <span
-    className={cssClass(className)}
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML={{
       __html: DOMPurify.sanitize(value)
     }}
   />
 )
 
-Html.displayName = 'HTML element'
-
-Html.defaultProps = {
-  className: 'html'
-}
+Html.displayName = 'HTML'
 
 Html.propTypes = {
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),

src/shared/components/global/ScrollSpy/MainItem.js

@@ -1,6 +1,6 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { scrollSpyShape } from '@shapes'
 import Button from '@components/ui/Button'
+import Icon from '@components/ui/Icon'
 import Item from './Item'
 import ListItem from '@components/ui/List/Item'
 import PropTypes from 'prop-types'
@@ -22,7 +22,7 @@ const MainItem = ({ item, onClick }) => {
   return (
     <ListItem variant='menu'>
       <Button onClick={onClick}>
-        <FontAwesomeIcon icon={icon} size='1x' />
+        <Icon icon={icon} />
 
         <span>{title}</span>
       </Button>

src/shared/components/global/ScrollSpy/ScrollSpy.js

@@ -6,6 +6,7 @@ import React, { useCallback, useRef } from 'react'
 import useScrollSpy from '@helpers/hooks/useScrollSpy'
 import uuid from 'react-uuid'
 
+//TODO ScrollSpy css, mdx, test
 /**
  * ScrollSpy - stateless presentational component
  * @param {object} props - props

src/shared/components/global/ScrollSpy/ScrollSpy.test.js

@@ -1,9 +1,6 @@
 import React from 'react'
 import ScrollSpy from '@components/global/ScrollSpy'
 import { mount } from 'enzyme'
-import registerIcons from '@helpers/icons'
-
-registerIcons()
 
 const mockedOnClick = jest.fn()
 

src/shared/components/global/Searcher/Searcher.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React, { memo, useCallback } from 'react'
 import Search from '@components/ui/Search'
 
+//TODO Searcher test, mdx
 /**
  * Searcher - stateful presentational component
  * @param {object} props - props

src/shared/components/global/Searcher/Searcher.test.js

@@ -2,9 +2,6 @@ import React from 'react'
 import Searcher from '@components/global/Searcher'
 import Search from '@components/global/Searcher'
 import { mountWithIntl } from '@jestutils'
-import registerIcons from '@helpers/icons'
-
-registerIcons()
 
 const mockedSearchFunction = jest.fn()
 const mockedSetSearchResult = jest.fn()

src/shared/components/global/TimingToast/TimingToast.js

@@ -7,6 +7,7 @@ import styles from './TimingToast.module.scss'
 import { useStyles } from '@helpers/hooks/useStyles'
 import PropTypes from 'prop-types'
 
+//TODO TimingToast replace react-pose with framer-motion library
 /**
  * Toast Animation, exports React-pose animations
  * @see {@link https://popmotion.io/pose/api/} for further information.
@@ -23,6 +24,7 @@ const toastProps = {
 
 const TimingToastAnimation = posed.div(toastProps)
 
+//TODO TimingToast test
 /**
  * TimingToast - stateless presentational component
  * @param {object} props - props
@@ -82,7 +84,7 @@ const TimingToast = ({ className }) => {
   )
 }
 
-TimingToast.displayName = 'Timing Toast'
+TimingToast.displayName = 'TimingToast'
 
 TimingToast.propTypes = {
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array])

src/shared/components/global/TimingToast/TimingToast.test.js

@@ -1,12 +1,9 @@
 import React from 'react'
 import TimingToast from '@components/global/TimingToast'
 import { mount } from 'enzyme'
-import registerIcons from '@helpers/icons'
 import { emitTimingToastToggle } from '@events/toast'
 import { act } from 'react-dom/test-utils'
 
-registerIcons()
-
 const component = <TimingToast />
 
 describe('<TimingToast/> mount', () => {

src/shared/components/global/Toast/Toast.js

@@ -9,6 +9,7 @@ import scss from './Toast.scss'
 
 const cssClass = styles(scss)
 
+//TODO TimingToast replace react-pose with framer-motion library
 /**
  * Toast Animation, exports React-pose animations
  * @see {@link https://popmotion.io/pose/api/} for further information.
@@ -31,6 +32,7 @@ const toastProps = {
 
 const ToastAnimation = posed.div(toastProps)
 
+//TODO Toast test, css, mdx
 /**
  * Toast stateful container component
  * @param {object} props

src/shared/components/global/Toast/Toast.test.js

@@ -2,12 +2,9 @@ import React from 'react'
 import Toast from '@components/global/Toast'
 import Notification from '@components/ui/Notification'
 import { mount } from 'enzyme'
-import registerIcons from '@helpers/icons'
 import { emitToastToggle } from '@events/toast'
 import { act } from 'react-dom/test-utils'
 
-registerIcons()
-
 const props = {
   message: 'jestem tekstem do komponentu Notification'
 }

src/shared/components/ui/Accordion/Accordion.mdx

@@ -1,17 +1,14 @@
 import { Playground, Props } from 'docz'
 import Accordion from '@components/ui/Accordion'
-import RegisterIcons from '@helpers/RegisterIcons'
 
 # Accordion
 
 <Props of={Accordion} />
 
 <Playground>
-  <RegisterIcons>
-    <Accordion>
-      <div label='label 1'>children 1</div>
-      <div label='label 2'>children 2</div>
-      <div label='label 3'>children 3</div>
-    </Accordion>
-  </RegisterIcons>
+  <Accordion>
+    <div label='label 1'>children 1</div>
+    <div label='label 2'>children 2</div>
+    <div label='label 3'>children 3</div>
+  </Accordion>
 </Playground>

src/shared/components/ui/Accordion/Accordion.module.scss

@@ -7,12 +7,14 @@
     font-size: 18px;
     border-bottom: 1px solid $color-5;
     padding: 8px 0;
+    display: flex;
+    justify-content: space-between;
 
     &-arrow {
       margin: 0 5px;
       font-size: 14px;
 
-      svg {
+      i {
         margin-right: 5px;
         font-size: 14px;
       }