Fds-core is a project that contains components, styling, assets and helping functions for creating a Feelgood unified look and feel application. The project is shipped as a npm-package.
Fds-core use Stencil for generating components as Custom Elements.
Fds-core builds Web Components that run natively or near-natively in all widely used desktop and mobile browsers. For browsers without native support, a small polyfill helps developers use Custom Elements seamlessly and with little performance overhead.
With this polyfill the browser support is Chrome, Safari, Firefox and Edge.
The dist
folder is the public distribution directory where all resources required to create a Feelgood unified look and feel application is located.
In the collection
folder you will find:
- Assets
- Components
- Globals
The assets
folder contains all the fonts you need in your project. Note that you need to copy the fonts into your project folder in order to use them. The correct path should be: <domain>/assets/fonts
.
In the img
folder all Feelgood logotypes are located. They can be accessed in your Vue project by add a require path to the logotype you want.
<img :src="logoPath" alt="Feelgood">
computed: {
logoPath () {
return require('../../../node_modules/fds-core/dist/collection/assets/img/logotypes/logo-feelgood-light.svg')
}
}
Here all the components that are produced in fds-core is located.
The globals
folder contains another folder called styles
. This folder contains 3 important scss
files:
tokens.scss
core.scs
export.scss
The token scss
file contains all variables, functions and mixins that are used in all components and you will be able to use them in your application as well. A guide in how to use the functions to get access to the variables are found in the Feelgood Design System. All variables are in scss maps and need its represent function to access. Example: set-color('blue', 2);
.
The core scss
file is recommended to include in your project. It will sanitize the design and layout of your html
elements and set some base styling.
The export scss
file contains a flattened version of all variables using the ICSS pseudo-selector: :export
in order to access variables through JavaScript. Example: Share scss variables with javascript.
If you are a Feelgood developer you will be able to update the fds-core. Download fds-core from the fds-core github repo if you have not done it already.
From here you can read the documentation about components and functions that are shipped in fds-core.
yarn storybook
When you doing changes in storybook you need to build it. When a build is triggerd a copy of components and global css is put in the docs project in docs/public/
folder.
NOTE: Currently you need to build twice in order the get the changes to work for some reason.
When building you need to be inside the root storybook
folder and then run the command:
npm run build
If you want to create a new component, use the npm script
for generate. Note that all components shall have the prefix fds
.
npm run generate fds-<component-name>
This will generate a folder inside scr/components/
containing the nessecary files for a new component.
NOTE: You might want to change the
*.css
file to*.scss
instead.
FDS components without shadow DOM (shadow:false
) that is using slots that have async data must be updated using :key
on the component in order to trigger an update of the DOM.
After you are done editing the fds-core project you want to publish your changes in order to be able to access the changes in the projects that are using fds-core.
- Bump the version in
package.json
(Use the Semver set of rules for versioning). - Run
npm run build
in order to generate content in thedist
folder. Currently the--es5
flag is added in order to get the polyfills for browsers that needs it. - Push your changes to github.
- Publish the new version to npm:
npm publish --access-public
. (You might need to login:npm login
)
If all went well you can now update your fds-core package in your application to access your changes.
Fds-core components is framework agnostic and will also work without any framework. In order to integrate fds-core with a framework such as Vue, React or Angular, please follow this guide.
In this repo run yarn link
Then go to the repo that will consume fds-core and run yarn link fds-core
After making changes in fds-core you will have to run npm run build
X 2