Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@springernature/elements
Advanced tools
We are changing the way we release Elements from the existing individual packages in the frontend-toolkits
repository to a single package release in a new elements
repository.
This will make it easier for you to install and use the components and themes of the Design System. It will also make it easier for us to maintain and scale.
This is a Node-based repository, so you will need to have Node and NPM (Node Package Manager) installed.
To use Elements components and themes you need:
You will get all of the components and themes by installing the single package.
To install the Elements themes and components, enter the following command in your Terminal:
npm install @springernature/elements
The package contains components
, themes
and utilities
.
The brand-context
will now be known as themes
. At first, we’ll support the springer-nature
and nature
themes.
For now, the utilities
will be empty. We will develop their functionality in future releases.
At the moment you can find the utilitiy classes inside the themes
.
For any component you want to use, import the relevant sass file from the component scss
folder path.
If you are working on a project with the Springer Nature theme then include the theme like this:
core
theme into your core styles@import '../../node_modules/@springernature/elements/themes/springernature/scss/core.scss';
enhanced
theme into your enhanced styles@import '../../node_modules/@springernature/elements/themes/springernature/scss/enhanced.scss';
utilities
of the theme into your styles as a single import for all of them@import '../../node_modules/@springernature/elements/themes/springernature/scss/utilities.scss';
If you are working on a project with the Nature theme then include the theme like this:
core
theme into your core styles@import '../../node_modules/@springernature/elements/themes/nature/scss/core.scss';
enhanced
theme into your enhanced styles@import '../../node_modules/@springernature/elements/themes/nature/scss/enhanced.scss';
utilities
of the theme into your styles as a single import for all of them@import '../../node_modules/@springernature/elements/themes/nature/scss/utilities.scss';
For the Springer Nature theme, import the scss
by adding this to your component sass file:
@import '../../node_modules/@springernature/elements/components/card/';
This imports the index.scss
file that includes springernature
theme and the styles for the component.
If you want to use the nature
theme, import the nature
scss file:
@import '../../node_modules/@springernature/elements/components/card/nature';
This imports the nature.scss
file that includes springernature
theme, the nature
theme and the styles for the component.
The location of the template has moved. It used to be in the view
folder. Now it is in the root
folder of the component.
Consume the .hbs
file that you find inside the component folder.
Example of a file path:
'../../node_modules/@springernature/elements/component/template.hbs’
In Elements we use Design Tokens.
Currently, the Elements team generates the json
for the design tokens. We are working on a process to allow you to do this yourself.
If you want to create a new component, you can still follow this guideline and hardcode the variables inside the component-name.token.scss
. Then, a member of the Elements team will create the json
for the design tokens as part of the review of the pull request or at a later point in time.
Import the script from elements
and then execute it.
For example:
import {header} from '@springernature/elements/nature-header/js/header';
header();
data
folderIn the single release package, components will now have a data
folder.
Here you will find:
schema.json
fileexample.json
fileThere is now a command you can run to help you to create new components.
Enter the following command in your Terminal, in the root folder:
npm run create
You will be prompted with the question:
What is the name of the new component?
The system then creates a new folder in the components folder based on your answer.
For example, if you enter my-component
as the component name, the system will create the following files automatically:
my-component.hbs
, a handlebars template for the componentmy-component.schema.json
, a schema for the data that will be used to compile the my-component.hbs
templatemy-component.example.json
, some example data to fit the schema and compile the templateindex.scss
, component-name.token.scss
and component-name.scss
.In the sass folder there is a component-name.token.scss
file. This file contains the variables used inside the component-name.scss
.
Import component-name.token.scss
and component-name.scss
into index.scss
.
The system will also create a test file, my-component.test.js
, using Jest.
To test your component you can run:
npm run create:test
This test will check that the:
To author your component, adapt the given files to create a data structure and template that work together correctly and continue to pass these tests.
The documentation site for Elements also lives in this repository. It uses a static site generator called Eleventy.
To run the docs site locally:
cd site
)npm i
to install the dependenciesnpm start
to start a local serverDepending on the developmental state of the docs site, you may not see much (or any) content. See what Eleventy is generating by exploring the /site/build folder.
FAQs
Springernature’s documented design system
We found that @springernature/elements demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.