{focusedDocumentNodesContextPaths.length} {i18nRegistry.translate('documentsSelected', 'documents selected', {}, 'Neos.Neos.Ui', 'Main')}
- );
+
+ );
}
const augmentedCommit = (propertyId, value, hooks) => {
@@ -412,7 +414,7 @@ export default class Inspector extends PureComponent {
this.handlePanelToggle([$get('id', tab), ...path]);
}}
handleInspectorApply={this.handleApply}
- />);
+ />);
})
}
diff --git a/packages/neos-ui/src/apiExposureMap.js b/packages/neos-ui/src/apiExposureMap.js
index 7b322994c3..5d05d104af 100644
--- a/packages/neos-ui/src/apiExposureMap.js
+++ b/packages/neos-ui/src/apiExposureMap.js
@@ -50,26 +50,26 @@ import ModelWriter from '@ckeditor/ckeditor5-engine/src/model/writer';
import ViewAttributeElement from '@ckeditor/ckeditor5-engine/src/view/attributeelement';
import ViewContainerElement from '@ckeditor/ckeditor5-engine/src/view/containerelement';
-import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document.js';
-import ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment.js';
-import ViewDocumentSelection from '@ckeditor/ckeditor5-engine/src/view/documentselection.js';
-import ViewDOMConverter from '@ckeditor/ckeditor5-engine/src/view/domconverter.js';
-import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement.js';
-import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element.js';
-import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement.js';
-import ViewFiller from '@ckeditor/ckeditor5-engine/src/view/filler.js';
-import ViewMatcher from '@ckeditor/ckeditor5-engine/src/view/matcher.js';
-import ViewNode from '@ckeditor/ckeditor5-engine/src/view/node.js';
-import ViewPlaceholder from '@ckeditor/ckeditor5-engine/src/view/placeholder.js';
-import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position.js';
-import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range.js';
+import ViewDocument from '@ckeditor/ckeditor5-engine/src/view/document';
+import ViewDocumentFragment from '@ckeditor/ckeditor5-engine/src/view/documentfragment';
+import ViewDocumentSelection from '@ckeditor/ckeditor5-engine/src/view/documentselection';
+import ViewDOMConverter from '@ckeditor/ckeditor5-engine/src/view/domconverter';
+import ViewEditableElement from '@ckeditor/ckeditor5-engine/src/view/editableelement';
+import ViewElement from '@ckeditor/ckeditor5-engine/src/view/element';
+import ViewEmptyElement from '@ckeditor/ckeditor5-engine/src/view/emptyelement';
+import * as ViewFiller from '@ckeditor/ckeditor5-engine/src/view/filler';
+import ViewMatcher from '@ckeditor/ckeditor5-engine/src/view/matcher';
+import ViewNode from '@ckeditor/ckeditor5-engine/src/view/node';
+import * as ViewPlaceholder from '@ckeditor/ckeditor5-engine/src/view/placeholder';
+import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
+import ViewRange from '@ckeditor/ckeditor5-engine/src/view/range';
import ViewRenderer from '@ckeditor/ckeditor5-engine/src/view/renderer';
-import ViewSelection from '@ckeditor/ckeditor5-engine/src/view/selection.js';
-import ViewText from '@ckeditor/ckeditor5-engine/src/view/text.js';
-import ViewTextProxy from '@ckeditor/ckeditor5-engine/src/view/textproxy.js';
-import ViewTreeWalker from '@ckeditor/ckeditor5-engine/src/view/treewalker.js';
-import ViewUIElement from '@ckeditor/ckeditor5-engine/src/view/uielement.js';
-import View from '@ckeditor/ckeditor5-engine/src/view/view.js';
+import ViewSelection from '@ckeditor/ckeditor5-engine/src/view/selection';
+import ViewText from '@ckeditor/ckeditor5-engine/src/view/text';
+import ViewTextProxy from '@ckeditor/ckeditor5-engine/src/view/textproxy';
+import ViewTreeWalker from '@ckeditor/ckeditor5-engine/src/view/treewalker';
+import ViewUIElement from '@ckeditor/ckeditor5-engine/src/view/uielement';
+import View from '@ckeditor/ckeditor5-engine/src/view/view';
import DownCastWriter from '@ckeditor/ckeditor5-engine/src/view/downcastwriter';
const CkEditor5 = {
diff --git a/packages/neos-ui/src/index.js b/packages/neos-ui/src/index.js
index 3e4491b15e..ccca7dfd94 100644
--- a/packages/neos-ui/src/index.js
+++ b/packages/neos-ui/src/index.js
@@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import {createStore, applyMiddleware, compose} from 'redux';
import createSagaMiddleware from 'redux-saga';
-import {put, select} from 'redux-saga/effects';
+import {put, select, all} from 'redux-saga/effects';
import merge from 'lodash.merge';
import {$get} from 'plow-js';
@@ -99,7 +99,7 @@ function * application() {
const translationsPromise = getJsonResource(configuration.endpoints.translations);
// Fire multiple async requests in parallel
- const [nodeTypesSchema, translations] = yield [nodeTypesSchemaPromise, translationsPromise];
+ const [nodeTypesSchema, translations] = yield all([nodeTypesSchemaPromise, translationsPromise]);
const nodeTypesRegistry = globalRegistry.get('@neos-project/neos-ui-contentrepository');
Object.keys(nodeTypesSchema.nodeTypes).forEach(nodeTypeName => {
nodeTypesRegistry.set(nodeTypeName, {
diff --git a/packages/neos-ui/src/styleHostOnly.css b/packages/neos-ui/src/styleHostOnly.css
index 39e0046f69..d6c0d6a1dd 100644
--- a/packages/neos-ui/src/styleHostOnly.css
+++ b/packages/neos-ui/src/styleHostOnly.css
@@ -2,27 +2,30 @@
@font-face {
font-family: 'Noto Sans';
- font-style: normal;
+ src: local('Noto Sans Regular'), local('NotoSans-Regular'), url('notosans-fontface/fonts/NotoSans-Regular.woff2') format('woff2');
font-weight: 400;
- src: local('Noto Sans'), local('NotoSans'), url('../../../Resources/Public/Fonts/NotoSans-Regular.ttf') format('truetype');
+ font-style: normal;
}
+
@font-face {
font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 700;
- src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('../../../Resources/Public/Fonts/NotoSans-Bold.ttf') format('truetype');
+ src: local('Noto Sans Italic'), local('NotoSans-Italic'), url('notosans-fontface/fonts/NotoSans-Italic.woff2') format('woff2');
+ font-weight: 400;
+ font-style: italic;
}
+
@font-face {
font-family: 'Noto Sans';
- font-style: italic;
- font-weight: 400;
- src: local('Noto Sans Italic'), local('NotoSans-Italic'), url('../../../Resources/Public/Fonts/NotoSans-Italic.ttf') format('truetype');
+ src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('notosans-fontface/fonts/NotoSans-Bold.woff2') format('woff2');
+ font-weight: 700;
+ font-style: normal;
}
+
@font-face {
font-family: 'Noto Sans';
- font-style: italic;
+ src: local('Noto Sans BoldItalic'), local('NotoSans-BoldItalic'), url('notosans-fontface/fonts/NotoSans-BoldItalic.woff2') format('woff2');
font-weight: 700;
- src: local('Noto Sans Bold Italic'), local('NotoSans-BoldItalic'), url('../../../Resources/Public/Fonts/NotoSans-BoldItalic.ttf') format('truetype');
+ font-style: italic;
}
* {
diff --git a/packages/positional-array-sorter/.babelrc b/packages/positional-array-sorter/.babelrc
new file mode 100644
index 0000000000..0d85423c53
--- /dev/null
+++ b/packages/positional-array-sorter/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["@neos-project/babel-preset-neos-ui"]
+}
diff --git a/packages/positional-array-sorter/package.json b/packages/positional-array-sorter/package.json
index 66882e48a9..2222f0a238 100644
--- a/packages/positional-array-sorter/package.json
+++ b/packages/positional-array-sorter/package.json
@@ -5,7 +5,7 @@
"repository": "neos/neos-ui",
"bugs": "https://github.com/neos/neos-ui/issues",
"homepage": "https://github.com/neos/neos-ui/blob/master/packages/positional-array-sorter/README.md",
- "main": "./dist/positionalArraySorter.js",
+ "module": "./src/positionalArraySorter.js",
"license": "GNU GPLv3",
"scripts": {
"test": "yarn jest -w 2 --coverage",
@@ -13,7 +13,7 @@
"build": "yarn tsc --declaration",
"build:watch": "yarn tsc --watch",
"clean": "rimraf ./lib ./dist",
- "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
+ "lint": "yarn tsc --noemit && eslint src/**/*.{js,jsx,ts,tsx}",
"jest": "NODE_ENV=test jest"
},
"devDependencies": {
diff --git a/packages/react-proptypes/package.json b/packages/react-proptypes/package.json
index 93398d8ec6..cb949f1914 100644
--- a/packages/react-proptypes/package.json
+++ b/packages/react-proptypes/package.json
@@ -8,13 +8,14 @@
"test": "yarn jest -w 2 --coverage",
"test:watch": "yarn jest --watch",
"clean": "rimraf ./lib ./dist",
- "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
+ "lint": "yarn tsc --noemit && eslint src/**/*.{js,jsx,ts,tsx}",
"jest": "NODE_ENV=test jest"
},
"devDependencies": {
"@neos-project/babel-preset-neos-ui": "workspace:*",
"@neos-project/build-essentials": "workspace:*",
- "@neos-project/jest-preset-neos-ui": "workspace:*"
+ "@neos-project/jest-preset-neos-ui": "workspace:*",
+ "typescript": "^4.6.4"
},
"peerDependencies": {
"prop-types": "^15.5.10"
diff --git a/packages/react-ui-components/package.json b/packages/react-ui-components/package.json
index 06fd288dea..f3f180e186 100644
--- a/packages/react-ui-components/package.json
+++ b/packages/react-ui-components/package.json
@@ -49,10 +49,11 @@
"react-textarea-autosize": "^8.3.0"
},
"devDependencies": {
+ "@babel/eslint-parser": "^7.19.1",
"@neos-project/babel-preset-neos-ui": "workspace:*",
"@neos-project/build-essentials": "workspace:*",
"@neos-project/debug-reason-for-rendering": "workspace:*",
- "@neos-project/eslint-config-neos": "^2.3.0",
+ "@neos-project/eslint-config-neos": "^2.6.1",
"@neos-project/jest-preset-neos-ui": "workspace:*",
"@storybook/addon-info": "^3.2.16",
"@storybook/addon-knobs": "3.2.16",
@@ -74,7 +75,6 @@
"@types/react-dom": "^16.9.4",
"@types/react-fontawesome": "^1.6.4",
"@types/react-portal": "^4.0.1",
- "babel-eslint": "^10.0.3",
"enzyme": "^3.8.0",
"enzyme-to-json": "^3.1.3",
"tslint": "^5.20.1",
diff --git a/packages/react-ui-components/src/Badge/index.ts b/packages/react-ui-components/src/Badge/index.ts
index db58eca578..19a516d291 100644
--- a/packages/react-ui-components/src/Badge/index.ts
+++ b/packages/react-ui-components/src/Badge/index.ts
@@ -2,6 +2,6 @@ import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import Badge from './badge';
-import style from './style.css';
+import style from './style.scss';
export default themr(identifiers.badge, style)(Badge);
diff --git a/packages/react-ui-components/src/Badge/style.css b/packages/react-ui-components/src/Badge/style.scss
similarity index 84%
rename from packages/react-ui-components/src/Badge/style.css
rename to packages/react-ui-components/src/Badge/style.scss
index 4bc38c59b5..0972517fd0 100644
--- a/packages/react-ui-components/src/Badge/style.css
+++ b/packages/react-ui-components/src/Badge/style.scss
@@ -1,5 +1,7 @@
+@import "../reset";
+
.badge {
- composes: reset from './../reset.css';
+ @include reset;
display: inline-block;
padding: 2px 4px;
font-size: 12px;
diff --git a/packages/react-ui-components/src/Bar/index.ts b/packages/react-ui-components/src/Bar/index.ts
index 46e956bd77..abf601be6e 100644
--- a/packages/react-ui-components/src/Bar/index.ts
+++ b/packages/react-ui-components/src/Bar/index.ts
@@ -2,6 +2,6 @@ import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import Bar from './bar';
-import style from './style.css';
+import style from './style.scss';
export default themr(identifiers.bar, style)(Bar);
diff --git a/packages/react-ui-components/src/Bar/style.css b/packages/react-ui-components/src/Bar/style.scss
similarity index 87%
rename from packages/react-ui-components/src/Bar/style.css
rename to packages/react-ui-components/src/Bar/style.scss
index e356ee1cbc..6b579a699b 100644
--- a/packages/react-ui-components/src/Bar/style.css
+++ b/packages/react-ui-components/src/Bar/style.scss
@@ -1,5 +1,7 @@
+@import '../reset';
+
.bar {
- composes: reset from './../reset.css';
+ @include reset;
position: fixed;
left: 0;
z-index: var(--zIndex-CheckboxInput-Context);
diff --git a/packages/react-ui-components/src/Button/index.ts b/packages/react-ui-components/src/Button/index.ts
index e17cf68fb4..6f0f2a15e7 100644
--- a/packages/react-ui-components/src/Button/index.ts
+++ b/packages/react-ui-components/src/Button/index.ts
@@ -2,6 +2,6 @@ import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import Button from './button';
-import style from './style.css';
+import style from './style.scss';
export default themr(identifiers.button, style)(Button);
diff --git a/packages/react-ui-components/src/Button/style.css b/packages/react-ui-components/src/Button/style.scss
similarity index 98%
rename from packages/react-ui-components/src/Button/style.css
rename to packages/react-ui-components/src/Button/style.scss
index cba90cd19f..91323ace7d 100644
--- a/packages/react-ui-components/src/Button/style.css
+++ b/packages/react-ui-components/src/Button/style.scss
@@ -1,5 +1,7 @@
+@import "../reset";
+
.btn {
- composes: reset from './../reset.css';
+ @include reset;
position: relative;
display: inline-block;
height: var(--spacing-GoldenUnit);
diff --git a/packages/react-ui-components/src/CheckBox/index.ts b/packages/react-ui-components/src/CheckBox/index.ts
index 85b53d3756..c3b7ab2251 100644
--- a/packages/react-ui-components/src/CheckBox/index.ts
+++ b/packages/react-ui-components/src/CheckBox/index.ts
@@ -2,6 +2,6 @@ import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import CheckBox from './checkBox';
-import style from './style.css';
+import style from './style.scss';
export default themr(identifiers.checkBox, style)(CheckBox);
diff --git a/packages/react-ui-components/src/CheckBox/style.css b/packages/react-ui-components/src/CheckBox/style.scss
similarity index 88%
rename from packages/react-ui-components/src/CheckBox/style.css
rename to packages/react-ui-components/src/CheckBox/style.scss
index e1016c4ac8..9e362d34c3 100644
--- a/packages/react-ui-components/src/CheckBox/style.css
+++ b/packages/react-ui-components/src/CheckBox/style.scss
@@ -1,5 +1,7 @@
+@import "../reset";
+
.checkbox {
- composes: reset from './../reset.css';
+ @include reset;
position: relative;
display: block;
width: 20px;
@@ -8,7 +10,7 @@
vertical-align: middle;
}
.checkbox__input {
- composes: reset from './../reset.css';
+ @include reset;
position: absolute;
top: 50%;
left: 0;
@@ -27,7 +29,7 @@
opacity: 0;
}
.checkbox__inputMirror {
- composes: reset from './../reset.css';
+ @include reset;
display: inline-block;
width: 20px;
height: 20px;
diff --git a/packages/react-ui-components/src/DateInput/index.ts b/packages/react-ui-components/src/DateInput/index.ts
index 7192d0ae1c..135c136bbb 100644
--- a/packages/react-ui-components/src/DateInput/index.ts
+++ b/packages/react-ui-components/src/DateInput/index.ts
@@ -2,6 +2,6 @@ import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import DateInput from './dateInput';
-import style from './style.css';
+import style from './style.scss';
export default themr(identifiers.dateInput, style)(DateInput);
diff --git a/packages/react-ui-components/src/DateInput/style.css b/packages/react-ui-components/src/DateInput/style.scss
similarity index 98%
rename from packages/react-ui-components/src/DateInput/style.css
rename to packages/react-ui-components/src/DateInput/style.scss
index 9d934a3e2c..138021174a 100644
--- a/packages/react-ui-components/src/DateInput/style.css
+++ b/packages/react-ui-components/src/DateInput/style.scss
@@ -1,3 +1,5 @@
+@import "../reset";
+
.calendarInputWrapper {
display: table;
width: 100%;
@@ -11,7 +13,7 @@
}
.closeCalendarIconBtn,
.calendarIconBtn {
- composes: reset from './../reset.css';
+ @include reset;
position: relative;
display: table-cell;
vertical-align: top;
@@ -44,7 +46,7 @@
}
.calendarFakeInputWrapper {
- composes: reset from './../reset.css';
+ @include reset;
display: table-cell;
position: relative;
width: 100%;
@@ -59,7 +61,7 @@
cursor: pointer;
}
.calendarFakeInput {
- composes: reset from './../reset.css';
+ @include reset;
display: inline-block;
vertical-align: top;
width: 100%;
@@ -102,7 +104,7 @@
font-size: var(--fontSize-Base);
}
.wrapper {
- composes: reset from './../reset.css';
+ @include reset;
input[type='text'] {
display: none;
diff --git a/packages/react-ui-components/src/Dialog/index.ts b/packages/react-ui-components/src/Dialog/index.ts
index a66ab6fea7..7d7729b2a1 100644
--- a/packages/react-ui-components/src/Dialog/index.ts
+++ b/packages/react-ui-components/src/Dialog/index.ts
@@ -2,6 +2,6 @@ import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import Dialog from './dialog';
-import style from './style.css';
+import style from './style.scss';
export default themr(identifiers.dialog, style)(Dialog);
diff --git a/packages/react-ui-components/src/Dialog/style.css b/packages/react-ui-components/src/Dialog/style.scss
similarity index 87%
rename from packages/react-ui-components/src/Dialog/style.css
rename to packages/react-ui-components/src/Dialog/style.scss
index 2abf8a9dce..0366a326e6 100644
--- a/packages/react-ui-components/src/Dialog/style.css
+++ b/packages/react-ui-components/src/Dialog/style.scss
@@ -1,3 +1,5 @@
+@import "../reset";
+
@keyframes slideDialogContents {
from {
opacity: 0;
@@ -6,7 +8,7 @@
}
.dialog {
- composes: reset from './../reset.css';
+ @include reset;
position: fixed;
top: 0;
left: 0;
@@ -16,7 +18,7 @@
background: rgba(#000, .8);
}
.dialog__contentsPosition {
- composes: reset from './../reset.css';
+ @include reset;
position: absolute;
top: 20vh;
left: 50%;
@@ -29,7 +31,7 @@
animation: slideDialogContents .3s ease-in-out;
}
.dialog__contents {
- composes: reset from './../reset.css';
+ @include reset;
position: relative;
width: calc(100vw - var(--spacing-GoldenUnit) * 2);
max-width: calc(var(--spacing-GoldenUnit) * 16);
@@ -70,7 +72,7 @@
}
}
.dialog__title {
- composes: reset from './../reset.css';
+ @include reset;
font-size: 20px;
line-height: 1.2;
padding: var(--spacing-Full);
@@ -85,19 +87,19 @@
}
}
.dialog__actions {
- composes: reset from './../reset.css';
+ @include reset;
text-align: right;
margin-top: var(--spacing-Full);
}
.dialog__closeBtn {
- composes: reset from './../reset.css';
+ @include reset;
position: absolute;
top: 0;
right: 0;
background: var(--colors-ContrastDark);
}
.dialog__backDrop {
- composes: reset from './../reset.css';
+ @include reset;
position: absolute;
height: 100%;
width: 100%;
diff --git a/packages/react-ui-components/src/DropDown/index.ts b/packages/react-ui-components/src/DropDown/index.ts
index 96cfdb5e10..4339c942a7 100644
--- a/packages/react-ui-components/src/DropDown/index.ts
+++ b/packages/react-ui-components/src/DropDown/index.ts
@@ -7,7 +7,7 @@ import ContextDropDownWrapper, {
ContextDropDownContents
} from './wrapper';
-import style from './style.css';
+import style from './style.scss';
const DropDown = themr(identifiers.dropDown, style)(ContextDropDownWrapper);
const StatelessDropDown = themr(identifiers.dropDown, style)(StatelessDropDownWrapper);
diff --git a/packages/react-ui-components/src/DropDown/style.css b/packages/react-ui-components/src/DropDown/style.scss
similarity index 59%
rename from packages/react-ui-components/src/DropDown/style.css
rename to packages/react-ui-components/src/DropDown/style.scss
index 88e5479a64..92dc679e3b 100644
--- a/packages/react-ui-components/src/DropDown/style.css
+++ b/packages/react-ui-components/src/DropDown/style.scss
@@ -1,11 +1,13 @@
+@import "../reset";
+
.dropDown {
- composes: reset from './../reset.css';
+ @include reset;
position: relative;
display: inline-block;
width: 100%;
}
.dropDown__btn {
- composes: reset from './../reset.css';
+ @include reset;
display: block;
width: 100%;
height: var(--spacing-GoldenUnit);
@@ -21,31 +23,32 @@
white-space: nowrap;
line-height: var(--spacing-GoldenUnit);
background: var(--colors-ContrastNeutral);
+}
- &:focus{
- outline: 1px solid var(--colors-PrimaryBlue);
- }
+.dropDown__btn:focus{
+ outline: 1px solid var(--colors-PrimaryBlue);
+}
- svg{
- pointer-events: none;
- }
+.dropDown__btn svg{
+ pointer-events: none;
}
+
.dropDown__btn--withChevron {
padding-right: var(--spacing-GoldenUnit);
}
.dropDown__btnLabel {
- composes: reset from './../reset.css';
+ @include reset;
margin-right: .5em;
}
.dropDown__chevron {
- composes: reset from './../reset.css';
+ @include reset;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
}
.dropDown__contents {
- composes: reset from './../reset.css';
+ @include reset;
position: absolute;
top: 100%;
left: 0;
@@ -66,26 +69,22 @@
display: flex;
flex-direction: column;
}
-.dropDown--darker {
- > .dropDown__btn--open {
- background-color: var(--colors-ContrastDarker);
- }
+.dropDown--darker > .dropDown__btn--open {
+ background-color: var(--colors-ContrastDarker);
+}
+
+.dropDown--darker > .dropDown__contents {
+ background-color: var(--colors-ContrastDarker);
+}
- > .dropDown__contents {
- background-color: var(--colors-ContrastDarker);
- }
+.dropDown--darkest > .dropDown__btn--open {
+ background-color: var(--colors-ContrastDarkest);
}
-.dropDown--darkest {
- > .dropDown__btn--open {
- background-color: var(--colors-ContrastDarkest);
- }
- > .dropDown__contents {
- background-color: var(--colors-ContrastDarkest);
- }
+.dropDown--darkest > .dropDown__contents {
+ background-color: var(--colors-ContrastDarkest);
}
-.dropDown--padded {
- > .dropDown__contents {
- padding: var(--spacing-Full);
- }
+
+.dropDown--padded > .dropDown__contents {
+ padding: var(--spacing-Full);
}
diff --git a/packages/react-ui-components/src/Headline/index.ts b/packages/react-ui-components/src/Headline/index.ts
index f3a22f1233..c135705b01 100644
--- a/packages/react-ui-components/src/Headline/index.ts
+++ b/packages/react-ui-components/src/Headline/index.ts
@@ -2,6 +2,6 @@ import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import Headline from './headline';
-import style from './style.css';
+import style from './style.scss';
export default themr(identifiers.headline, style)(Headline);
diff --git a/packages/react-ui-components/src/Headline/style.css b/packages/react-ui-components/src/Headline/style.scss
similarity index 74%
rename from packages/react-ui-components/src/Headline/style.css
rename to packages/react-ui-components/src/Headline/style.scss
index d4433eef9e..98cb16e15a 100644
--- a/packages/react-ui-components/src/Headline/style.css
+++ b/packages/react-ui-components/src/Headline/style.scss
@@ -1,5 +1,7 @@
+@import "../reset";
+
.heading {
- composes: reset from './../reset.css';
+ @include reset;
font-size: var(--fontSize-Base);
text-rendering: optimizelegibility;
}
diff --git a/packages/react-ui-components/src/Icon/fontAwesomeIcon.spec.tsx b/packages/react-ui-components/src/Icon/fontAwesomeIcon.spec.tsx
index cd5ecdae6d..d515b25d6f 100644
--- a/packages/react-ui-components/src/Icon/fontAwesomeIcon.spec.tsx
+++ b/packages/react-ui-components/src/Icon/fontAwesomeIcon.spec.tsx
@@ -1,8 +1,8 @@
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';
import React from 'react';
-
-import {defaultProps, IconProps} from './icon';
+import {defaultProps} from './iconDefaultProps';
+import {IconProps} from './icon';
import FontAwesomeIcon from './fontAwesomeIcon';
describe('