feat: introduce FN components (#2738)

* feat: introduce new fn theme

* feat: add all components

* feat: add all components [ci visual]

* feat: add some minor docs changes [ci visual]

* feat: fix the radio checkmark in Safari

* feat: add a11y improvements [ci visual]

* feat: focus changes

* feat: focus [ci visual]

* feat: fix success input background [ci visual]

* feat: create fn package and split the source into 2 folders

* feat: refactor experimental slider component [ci visual]

* feat: add animation for checkbox and radio

* chore: bring temporary new icons

* feat: update slider storyshot [ci visual]

* chore: revert the custom icons

* feat: new select position fixes [ci visual] (#2776)

* feat: fixes so the select menu functions as a popover

* feat: ci visual [ci visual]

* chore: trigger visual tests [ci visual]

Co-authored-by: InnaAtanasova <i.atanasova@sap.com>
Co-authored-by: Denis Severin <denis.severin@valor-software.com>
Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>

.gitignore

@@ -15,6 +15,7 @@ storybook-static
 stories/docs/
 dist
 dist-theming
+dist-fn
 node_modules
 stories/*/*.visual.js
 *.visual.js

.storybook/custom/themeProvider.js

@@ -37,7 +37,12 @@ export const changeDocumentTheme = (newTheme, forComponents) => {
     };
 
     forComponents.forEach(component => {
-        let stylePath = `${component}-${newTheme}.css`;
+        let stylePath = `${component}`;
+        if(!stylePath.startsWith('fn-')){
+            stylePath = `${stylePath}-${newTheme}.css`;
+        } else {
+            stylePath = `${stylePath}.css`;
+        }
         document.head.appendChild(styleLinkTag(stylePath));
     });
 

.storybook/preview-head.html

@@ -1,6 +1,7 @@
 <link rel="shortcut icon" href="/favicon.ico" />
 <link rel="icon" type="image/svg" href="/logo.svg" sizes="192x192" />
 <script type="text/javascript" src="preview-head.js"></script>
+<script src="https://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js"></script>
 
 <style type="text/css">
     @font-face {

ci-scripts/publish-rc.sh

@@ -3,8 +3,10 @@
 set -e
 
 PACKAGE_THEMING_PREVIEW=theming-preview
+PACKAGE_FN=fn
 PACKAGE_PREFIX=@fundamental-styles
 DIST_THEMING_PREVIEW=dist-theming
+DIST_FN=dist-FN
 
 git config --global user.email "fundamental@sap.com"
 git config --global user.name "fundamental-bot"
@@ -22,10 +24,18 @@ npm run storybook:static
 
 npm publish --tag prerelease
 
+#publish dist-fn package
+echo publish "${PACKAGE_PREFIX}/${PACKAGE_FN}"
+
+cd ${DIST_FN}
+npm publish --tag prerelease
+cd ..
+
 #build dist-theming package
 npm run build:theming-preview
-
 echo publish "${PACKAGE_PREFIX}/${PACKAGE_THEMING_PREVIEW}"
+
 cd ${DIST_THEMING_PREVIEW}
 npm publish --tag prerelease
-cd ..
+cd ..
+

ci-scripts/publish.sh

@@ -8,6 +8,8 @@ git config --global user.name "fundamental-bot"
 PACKAGE_THEMING_PREVIEW=theming-preview
 PACKAGE_PREFIX=@fundamental-styles
 DIST_THEMING_PREVIEW=dist-theming
+PACKAGE_FN=fn
+DIST_FN=dist-FN
 
 # delete temp branch
 git push "https://$GH_TOKEN@github.com/$TRAVIS_REPO_SLUG" ":$TRAVIS_BRANCH" > /dev/null 2>&1;
@@ -32,6 +34,13 @@ npm run build:prod
 
 npm publish
 
+# publish fn package
+echo publish "${PACKAGE_PREFIX}/${PACKAGE_FN}"
+
+cd ${DIST_FN}
+npm publish
+cd ..
+
 # build dist-theming package
 npm run build:theming-preview
 

ci-scripts/sync-version.sh

@@ -8,9 +8,13 @@ set -u -e
 
 NEW_VERSION=$(node -p "require('./package.json').version")
 echo "Updating packages.json under dist-theming/libs with version ${NEW_VERSION}"
-
 cd ./dist-theming
 
 grep -rl 'VERSION_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/VERSION_PLACEHOLDER/${NEW_VERSION}/g"
 
-cd ../
+echo "Updating packages.json under fn/libs with version ${NEW_VERSION}"
+cd ../dist-fn
+
+grep -rl 'VERSION_PLACEHOLDER' . | xargs  perl -X -p -i -e "s/VERSION_PLACEHOLDER/${NEW_VERSION}/g"
+
+cd ..

config/bundlesize.json

@@ -2,7 +2,7 @@
     "files": [
         {
             "path": "./dist/fundamental-styles.css",
-            "maxSize": "120 kB"
+            "maxSize": "130 kB"
         }
     ]
 }

config/fn/README.md

@@ -0,0 +1,3 @@
+#Fundamental Library Next
+
+This package contains Fiori components with new design

config/fn/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@fundamental-styles/fn",
+    "version": "VERSION_PLACEHOLDER",
+    "license": "Apache-2.0",
+    "homepage": "https://sap.github.io/fundamental-styles/",
+    "description": "Fundamental Library Styles Next",
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/SAP/fundamental-styles"
+    },
+    "dependencies": {
+        "fundamental-styles": "VERSION_PLACEHOLDER"
+    }
+  }
+

package.json

@@ -4,10 +4,11 @@
   "description": "Fundamental Library Styles is a Design System and HTML/CSS Component Library used to build modern Product User Experiences with Fiori 3 look and feel with any web technology. Learn more about this project at - http://sap.github.io/fundamental-styles/",
   "main": "dist/fundamental-styles.css",
   "scripts": {
-    "build": "npm run style:remove && npm run build:default && npm run build:theming-preview",
+    "build": "npm run style:remove && npm run build:default && npm run build:fn && npm run build:theming-preview && npm run sync-versions",
     "build:default": "npm run style:compile && npm run style:theme && npm run style:postCSS && npm run style:assets",
+    "build:fn": "npm run style-fn:compile && npm run style-fn:postCSS && cp -R config/fn/ dist-fn",
     "build:prod": "cross-env NODE_ENV=production npm run build",
-    "build:theming-preview": "cp -R theming-preview dist-theming && cp dist/fundamental-styles.css dist-theming/fundamental-styles.css && npm run sync-versions",
+    "build:theming-preview": "cp -R theming-preview dist-theming && cp dist/fundamental-styles.css dist-theming/fundamental-styles.css",
     "deploy": "gh-pages -d storybook-static/",
     "lint:style": "stylelint \"{src,.storybook}/**/*.(sa|sc|c)ss\"",
     "lint:js": "eslint . --ext .js",
@@ -19,19 +20,21 @@
     "size": "bundlesize --config config/bundlesize.json",
     "start": "npm run storybook",
     "style:assets": "babel-node ./scripts/copy-assets.js",
-    "style:compile": "node-sass -q --output-style expanded --precision 5 src/ --output dist/",
+    "style:compile": "node-sass -q --output-style expanded --precision 5 src/styles --output dist/",
     "style:theme": " babel-node scripts/theme-css.js",
     "style:postCSS": "postcss --config config/postcss.config.js --replace dist/*.css",
-    "style:remove": "rimraf dist && rimraf dist-theming",
+    "style:remove": "rimraf dist && rimraf dist-theming && rimraf dist-fn",
+    "style-fn:compile": "node-sass -q --output-style expanded --precision 5 src/fn --output dist-fn/dist",
+    "style-fn:postCSS": "postcss --config config/postcss.config.js --replace dist-fn/dist/*.css",
     "sync-versions": "./ci-scripts/sync-version.sh",
     "test": "npm run test:accessibility && server-test storybook:ci http-get://localhost:6006 \"npm run storybook:visual:setup\"",
     "test:accessibility": "babel-node scripts/build-accessibility-tests.js && jest ---testPathIgnorePatterns=storybook-testing/storyshots.test.js",
     "test:update": "server-test storybook:ci http-get://localhost:6006 \"npm run storybook:visual:setup -- --updateSnapshot\"",
-    "storybook": "npm run storybook:prep && start-storybook -s .storybook/static/,node_modules/@sap-theming,dist/ -p 6006",
+    "storybook": "npm run storybook:prep && start-storybook -s .storybook/static/,node_modules/@sap-theming,dist/,dist-fn/dist/ -p 6006",
     "storybook:ci": "npm run storybook -- --ci --quiet",
     "storybook:prep": "npm run build && babel-node scripts/build-visual-stories.js && babel-node scripts/storybook-prep.js",
-    "storybook:static": "rimraf storybook-static && npm run storybook:prep && STORYBOOK_ENV=docs build-storybook -c .storybook -o storybook-static -s .storybook/static/,node_modules/@sap-theming,dist/ --docs",
-    "storybook:chromatic": "rimraf storybook-chromatic && npm run storybook:prep && STORYBOOK_ENV=chromatic build-storybook -c .storybook -o storybook-chromatic -s .storybook/static/,node_modules/@sap-theming,dist/",
+    "storybook:static": "rimraf storybook-static && npm run storybook:prep && STORYBOOK_ENV=docs build-storybook -c .storybook -o storybook-static -s .storybook/static/,node_modules/@sap-theming,dist/,dist-fn/dist/ --docs",
+    "storybook:chromatic": "rimraf storybook-chromatic && npm run storybook:prep && STORYBOOK_ENV=chromatic build-storybook -c .storybook -o storybook-chromatic -s .storybook/static/,node_modules/@sap-theming,dist/,dist-fn/dist/",
     "storybook:visual:setup": "jest --no-cache --config=./config/jest.config.js",
     "chromatic": "npx storybook:chromatic",
     "prepare": "husky install",