diff --git a/_state.json b/_state.json index 441d37a..be59a37 100644 --- a/_state.json +++ b/_state.json @@ -2,7 +2,7 @@ "config": { "name": "BTCPay Server Design System", "version": "0.1.0", - "update": 1715853812239, + "update": 1715877552933, "logo": "/resources/design-files/btcpay-logo.svg", "source": { "components": [ @@ -114,6 +114,17 @@ "type": "documentation", "content": "

Components

" }, + "development": { + "childIds": [], + "id": "development", + "title": "Development", + "isTitleFromHeading": true, + "path": "development", + "sourcePath": "pages/development", + "readmeFile": "pages/development/README.md", + "type": "documentation", + "content": "

Development

\n

Setup

\n

Dependencies are managed via npm.\nOnce you have cloned this repo, you can setup the packages:

\n
npm install\n
\n

Create a build and rebuild on file change:

\n
npm start\n
\n

This will bring up the dev server and pattern library on localhost:3000.

\n

How to create a component?

\n

To generate the basic files of a component you can use the component command:

\n
npx uiengine component COMPONENT_ID\n
\n

This will also generate a default variant named after the component.\nIn case you want to directly add some variants, you can list them like so:

\n
npx uiengine component COMPONENT_ID VARIANT_1 VARIANT_2 VARIANT_3\n
\n

How to create a variant?

\n

A variant needs at least a file to render.\nYou create a variant by adding a file renderable by one of the configured adapters to the variants directory of a component.

\n

To render a variant, we also need a layout.\nThe npx uiengine init command created a basic html layout file in src/templates/uiengine.html.\nIt includes the <!-- uiengine:content --> comment, which will be replaced with the HTML of the rendered variant.\nYou can go ahead and extend the layout to fit your needs and include the correct HTML and style and script references.

\n

This layout file is just there to get you started.\nFeel free to change its content and use an other adapter to fit your projects needs.

\n

How to create a page?

\n

To generate the basic files and folders of a page you can use the page command:

\n
npx uiengine page PAGE_ID\n
\n

This generate a README.md and a page.config.js file inside the folder matching the page id in you pages source directory.\nIn case you want to directly add some pages, you can list them like so:

\n
npx uiengine page PAGE_1_ID PAGE_2_ID PAGE_3_ID\n
\n

Say you would like to create pages for grouping your components with the Atomic Design Methodology:

\n
npx uiengine page atoms molecules organisms templates pages\n
\n

How to generate the project?

\n

The site can be generated with the following command:

\n
npm start\n
\n

It rebuilds files on change and spawns a server for the generated site.

\n

Under the hood BrowserSync is used to provide serving and watching the files.\nFor information on how to configure the server and pass additional options, see the configuration documentation.

" + }, "design": { "childIds": [ "design/colors", @@ -132,17 +143,6 @@ "type": "documentation", "content": "

Design

" }, - "development": { - "childIds": [], - "id": "development", - "title": "Development", - "isTitleFromHeading": true, - "path": "development", - "sourcePath": "pages/development", - "readmeFile": "pages/development/README.md", - "type": "documentation", - "content": "

Development

\n

Setup

\n

Dependencies are managed via npm.\nOnce you have cloned this repo, you can setup the packages:

\n
npm install\n
\n

Create a build and rebuild on file change:

\n
npm start\n
\n

This will bring up the dev server and pattern library on localhost:3000.

\n

How to create a component?

\n

To generate the basic files of a component you can use the component command:

\n
npx uiengine component COMPONENT_ID\n
\n

This will also generate a default variant named after the component.\nIn case you want to directly add some variants, you can list them like so:

\n
npx uiengine component COMPONENT_ID VARIANT_1 VARIANT_2 VARIANT_3\n
\n

How to create a variant?

\n

A variant needs at least a file to render.\nYou create a variant by adding a file renderable by one of the configured adapters to the variants directory of a component.

\n

To render a variant, we also need a layout.\nThe npx uiengine init command created a basic html layout file in src/templates/uiengine.html.\nIt includes the <!-- uiengine:content --> comment, which will be replaced with the HTML of the rendered variant.\nYou can go ahead and extend the layout to fit your needs and include the correct HTML and style and script references.

\n

This layout file is just there to get you started.\nFeel free to change its content and use an other adapter to fit your projects needs.

\n

How to create a page?

\n

To generate the basic files and folders of a page you can use the page command:

\n
npx uiengine page PAGE_ID\n
\n

This generate a README.md and a page.config.js file inside the folder matching the page id in you pages source directory.\nIn case you want to directly add some pages, you can list them like so:

\n
npx uiengine page PAGE_1_ID PAGE_2_ID PAGE_3_ID\n
\n

Say you would like to create pages for grouping your components with the Atomic Design Methodology:

\n
npx uiengine page atoms molecules organisms templates pages\n
\n

How to generate the project?

\n

The site can be generated with the following command:

\n
npm start\n
\n

It rebuilds files on change and spawns a server for the generated site.

\n

Under the hood BrowserSync is used to provide serving and watching the files.\nFor information on how to configure the server and pass additional options, see the configuration documentation.

" - }, "resources": { "childIds": [ "resources/css", @@ -1577,6 +1577,12 @@ "variable": "actions-drag", "value": "" }, + { + "type": "icon", + "name": "actions-email", + "variable": "actions-email", + "value": "" + }, { "type": "icon", "name": "actions-hide", @@ -1637,6 +1643,12 @@ "variable": "back", "value": "" }, + { + "type": "icon", + "name": "block", + "variable": "block", + "value": "" + }, { "type": "icon", "name": "calendar", @@ -2982,6 +2994,15 @@ null ] }, + "development": { + "prevSiblingId": "resources", + "parentId": "index", + "id": "development", + "itemId": "development", + "path": "/development/", + "type": "documentation", + "title": "Development" + }, "design": { "nextSiblingId": "components", "childIds": [ @@ -2999,15 +3020,6 @@ "type": "documentation", "title": "Design" }, - "development": { - "prevSiblingId": "resources", - "parentId": "index", - "id": "development", - "itemId": "development", - "path": "/development/", - "type": "documentation", - "title": "Development" - }, "resources": { "prevSiblingId": "components", "nextSiblingId": "development", diff --git a/_tokens/_all/design/icons.html b/_tokens/_all/design/icons.html index ebbc9b7..0a2332f 100644 --- a/_tokens/_all/design/icons.html +++ b/_tokens/_all/design/icons.html @@ -63,6 +63,14 @@

actions

actions-drag +
+
+ +
+
+ actions-email +
+
@@ -141,6 +149,14 @@

general

back
+
+
+ +
+
+ block +
+
diff --git a/_tokens/dark/design/icons.html b/_tokens/dark/design/icons.html index 5a69b51..35c6e92 100644 --- a/_tokens/dark/design/icons.html +++ b/_tokens/dark/design/icons.html @@ -63,6 +63,14 @@

actions

actions-drag
+
+
+ +
+
+ actions-email +
+
@@ -141,6 +149,14 @@

general

back
+
+
+ +
+
+ block +
+
diff --git a/_tokens/light/design/icons.html b/_tokens/light/design/icons.html index 2e9e4f9..ed4e539 100644 --- a/_tokens/light/design/icons.html +++ b/_tokens/light/design/icons.html @@ -63,6 +63,14 @@

actions

actions-drag
+
+
+ +
+
+ actions-email +
+
@@ -141,6 +149,14 @@

general

back
+
+
+ +
+
+ block +
+
diff --git a/index.html b/index.html index 400f8e2..4cb25b2 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@