+
diff --git a/packages/assets/css/stories/content/Colors/Main.mdx b/packages/assets/css/stories/content/Colors/Main.mdx
index 1456a5569..16e27c546 100644
--- a/packages/assets/css/stories/content/Colors/Main.mdx
+++ b/packages/assets/css/stories/content/Colors/Main.mdx
@@ -1,4 +1,4 @@
-import { Source } from '@storybook/addon-docs';
+import { Source } from '@storybook/blocks';
import { Page } from '@wpmudev/sui-docs';
import { Unstyled } from '@storybook/blocks';
@@ -7,25 +7,27 @@ import Secondary from './PaletteSecondary.mdx';
import Extended from './PaletteExtended.mdx';
-
This color system guide shows the unified colors used in the plugins
while helping to keep consistent experiences across our products
through helpers and predefined classes.
}
- status="ready"
- >
-
- The extended palettes consist of all the useable hues and shades for
- global actions like warning alerts or accent colors. The usage of
- these colors alters depending on the type of communication. Still,
- they come in handy for global text, backgrounds, and other global
- elements.
-
-
-
-
-
+
+ The extended palettes consist of all the useable hues and shades for
+ global actions like warning alerts or accent colors. The usage of
+ these colors alters depending on the type of communication. Still,
+ they come in handy for global text, backgrounds, and other global
+ elements.
+
- Our primary palette uses five shades of blue to bring boldness to
- our brand. We use it smartly throughout our products to guide the
- eye and highlight the significant bits.
-
-
- We pepper secondary palette colors to soften the experience,
- highlight, and subtly differentiate each product.
-
-
-
+
+ Our primary palette uses five shades of blue to bring boldness to
+ our brand. We use it smartly throughout our products to guide the
+ eye and highlight the significant bits.
+
+
+
+ We pepper secondary palette colors to soften the experience,
+ highlight, and subtly differentiate each product.
+
- These products are not part of the CSS Framework or the Design
- Tokens file. Below you will only see a brief description of what
- these colors are for and find their color codes. To include them in
- your project, you need to do it manually, directly in your project
- stylesheets.
-
-
+
+
+ These products are not part of the CSS Framework or the Design
+ Tokens file. Below you will only see a brief description of what
+ these colors are for and find their color codes. To include them in
+ your project, you need to do it manually, directly in your project
+ stylesheets.
+
+
-
-
- Our secondary palette holds a variety of colors to highlight each of
- our products, keeping them attractive for the users. We rely on
- these colors more frequently when brand attention is excessive or on
- some properties related to that specific product. When we use it in
- conjunction with our primary palette, these colors make every
- product feel on-brand during every user interaction.
-
-
-
-
-
+
+ Our secondary palette holds a variety of colors to highlight each of
+ our products, keeping them attractive for the users. We rely on
+ these colors more frequently when brand attention is excessive or on
+ some properties related to that specific product. When we use it in
+ conjunction with our primary palette, these colors make every
+ product feel on-brand during every user interaction.
+
+
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
-
+
+
+
+
-
-
+ />
+
+
diff --git a/packages/assets/css/stories/content/Grid/Main.mdx b/packages/assets/css/stories/content/Grid/Main.mdx
index efc6f87e3..aad45ca00 100644
--- a/packages/assets/css/stories/content/Grid/Main.mdx
+++ b/packages/assets/css/stories/content/Grid/Main.mdx
@@ -6,25 +6,27 @@ import Row from './TabRows.mdx';
import Column from './TabColumns.mdx';
-
Our robust mobile-first grid system builds layouts of all shapes and
sizes thanks to a twelve-column grid system based on flexbox with
several predefined classes, Sass variables, and mixins.
}
- status="ready"
- >
-
- Column classes organize the columns out of the amount you need per row
- based on the twelve-column grid size; this means if you need to display
- three equal-width columns, you must divide the size of the grid by the
- number of columns, which in this case, is twelve. The result you get is
- the column size.
-
-
- By default, the columns align equally in size to occupy the entire row
- width in case alignment is inline, but if that is not the case, then the
- columns will properly align one below each other in stacked mode.
-
-
- Enable column styles; for that, use the class name as in the sample code
- below:
-
- {codeCol}
-
Remember, columns must go inside a row to work correctly.
+
+ Column classes organize the columns out of the amount you need per row
+ based on the twelve-column grid size; this means if you need to display
+ three equal-width columns, you must divide the size of the grid by the
+ number of columns, which in this case, is twelve. The result you get is
+ the column size.
+
+
+
+ By default, the columns align equally in size to occupy the entire row
+ width in case alignment is inline, but if that is not the case, then the
+ columns will properly align one below each other in stacked mode.
+
+
+
+ Enable column styles; for that, use the class name as in the sample code
+ below:
+
+
+
+ {codeCol}
+
+
+
Remember, columns must go inside a row to work correctly.
-
- When columns are inline aligned, you can use the modifier class to
- specify the column size in a twelve-grid row instead of leaving it for
- auto-sizing. These modifiers won't affect when the row aligns columns in
- stacked mode.
-
-
- Enable column sizing; for that, use the class name as in the sample code
- below, being $size a number between 1 to 12:
-
- {codesize}
-
- Remember, the column's size sum must be at most 12, the limit of columns
- allowed per row.
-
+
+ When columns are inline aligned, you can use the modifier class to
+ specify the column size in a twelve-grid row instead of leaving it for
+ auto-sizing. These modifiers won't affect when the row aligns columns in
+ stacked mode.
+
+
+
+ Enable column sizing; for that, use the class name as in the sample code
+ below, being $size a number between 1 to 12:
+
+
+
+ {codesize}
+
+
+
+ Remember, the column's size sum must be at most 12, the limit of columns
+ allowed per row.
+
- The Shared UI grid system employs a sequence of rows and columns to
- align and organize the content inside the layout. The grid is created
- using{' '}
-
- flexbox
-
- {' '}and is fully responsive.
-
-
-
-
-
-
- {codeDemo}
-
- Above, there's an example of three equal-width columns on small, medium,
- large, and extra-large devices, achieved by using our predefined grid
- classes.
-
+
+ The Shared UI grid system employs a sequence of rows and columns to
+ align and organize the content inside the layout. The grid is created
+ using{' '}
+
+
+ flexbox
+
+
+ {' '}and is fully responsive.
+
+
+
+
+
+
+
+
+
+ {codeDemo}
+
+
+
+ Above, there's an example of three equal-width columns on small, medium,
+ large, and extra-large devices, achieved by using our predefined grid
+ classes.
+
- Rows are wrappers for columns. Each column has some padding (called a
- gutter) to control the space between them. The rows fight back the
- columns' padding with negative margins; this way, all the columns
- visually align down the left side.
-
-
- Enable row styles and align columns properly; for that, use the class
- name as in the sample code below:
-
- {codeRow}
+
+ Rows are wrappers for columns. Each column has some padding (called a
+ gutter) to control the space between them. The rows fight back the
+ columns' padding with negative margins; this way, all the columns
+ visually align down the left side.
+
+
+
+ Enable row styles and align columns properly; for that, use the class
+ name as in the sample code below:
+
+
+
+ {codeRow}
+
-
- Rows can organize columns inline (placing one next to the other) or
- stacked (placing one below the other) based on different breakpoints to
- create a more flexible layout.
-
-
- By default, columns are aligned one below the other in stacked mode. To
- switch them into inline columns for the window starting point (zero),
- you need to:
-
- {codeRowInline}
-
- Since the grid system departs from small to large screens, you need to
- use a modifier class to make the proper variations based on the minimum
- screen size you want to change.
-
-
- For that, you need to use sui-row-$bp--$dir class, where{' '}
- $bp is the breakpoint code (read Breakpoints section for
- more) and $dir for the alignment direction, which could be{' '}
- inline or stacked.
-
- {codeBreakpoints}
+
+ Rows can organize columns inline (placing one next to the other) or
+ stacked (placing one below the other) based on different breakpoints to
+ create a more flexible layout.
+
+
+
+ By default, columns are aligned one below the other in stacked mode. To
+ switch them into inline columns for the window starting point (zero),
+ you need to:
+
+
+
+ {codeRowInline}
+
+
+
+ Since the grid system departs from small to large screens, you need to
+ use a modifier class to make the proper variations based on the minimum
+ screen size you want to change.
+
+
+
+ For that, you need to use sui-row-$bp--$dir class, where{' '}
+ $bp is the breakpoint code (read Breakpoints section for
+ more) and $dir for the alignment direction, which could be{' '}
+ inline or stacked.
+
+
+
+ {codeBreakpoints}
+
-
-
- The breakpoints divide into five different sizes, apart from the
- default or initial size, based on the WordPress admin content area
- sizing changes and elements like the sidebar menu or top menu that
- might interrupt the content area depending on the browser's maximum
- width. We state these breakpoints as follows:
-
-
-
+
+ The breakpoints divide into five different sizes, apart from the
+ default or initial size, based on the WordPress admin content area
+ sizing changes and elements like the sidebar menu or top menu that
+ might interrupt the content area depending on the browser's maximum
+ width. We state these breakpoints as follows:
+
- The modifier classes affect the minimum container width, as stated in
- the table above.
-
+ border={true}
+ />
+
+
+ The modifier classes affect the minimum container width, as stated in
+ the table above.
+
diff --git a/packages/assets/css/stories/content/Layout/Main.mdx b/packages/assets/css/stories/content/Layout/Main.mdx
index 90551d349..2ef2030bb 100644
--- a/packages/assets/css/stories/content/Layout/Main.mdx
+++ b/packages/assets/css/stories/content/Layout/Main.mdx
@@ -22,9 +22,9 @@ export const SnippetSpacing = dedent`
`;
-
The layout is the most basic container required when using our
default{' '}
@@ -35,67 +35,76 @@ export const SnippetSpacing = dedent`
(it has a maximum width) content.
}
- status="ready"
- >
-
-
- It is essential to wrap the plugin's content with a div
- containing the sui-layout class name. This class
- name will justify the content accordingly inside the admin area,
- removing unnecessary spacing and allowing us to occupy the whole
- area more conveniently.
-
-
Below, there's an example of placing the main layout wrapper.
- {SnippetLayout}
-
- While the sui-layout class name allows the content
- to occupy the entire width of the admin area (minus the
- sidebar), using the sui-layout__content class name
- as an inner wrapper will horizontally align content to the
- center and give them a maximum width defined in the Design
- Tokens file.
-
- {SnippetLayoutContent}
-
- Remember skipping the sui-layout--vertical class
- for the Top Navigation component is fine, but it is a must-go
- modifier for other types of content.
-
-
-
-
-
- Modify the sui-layout wrapper spacing in two
- ways: vertical and horizontal, where vertical spacing will
- prevent your content from being glued to the WordPress top
- bar.
-
- {SnippetSpacing}
-
- The spacing respects a base gutter of 8px and relies on the
- three main breakpoints we use in our design system: default
- (or none), medium, and large.
-
-
- When applying any modifier spacing class, these set padding
- to 16px, and it applies to every screen size; Once the
- screen reaches a minimum width of 1024px, the spacing
- overwrites to 24px; Finally, for screens larger than 1200px,
- the spacing would be 32px.
-
-
Peek at the table below for more detailed information.
-
-
+
+
+ It is essential to wrap the plugin's content with a div
+ containing the sui-layout class name. This class
+ name will justify the content accordingly inside the admin area,
+ removing unnecessary spacing and allowing us to occupy the whole
+ area more conveniently.
+
+
+
Below, there's an example of placing the main layout wrapper.
+
+
+ {SnippetLayout}
+
+
+
+ While the sui-layout class name allows the content
+ to occupy the entire width of the admin area (minus the
+ sidebar), using the sui-layout\_\_content class name
+ as an inner wrapper will horizontally align content to the
+ center and give them a maximum width defined in the Design
+ Tokens file.
+
+
+
+ {SnippetLayoutContent}
+
+
+
+ Remember skipping the sui-layout--vertical class
+ for the Top Navigation component is fine, but it is a must-go
+ modifier for other types of content.
+
+
+
+
+
+
+ Modify the sui-layout wrapper spacing in two
+ ways: vertical and horizontal, where vertical spacing will
+ prevent your content from being glued to the WordPress top
+ bar.
+
+
+
+ {SnippetSpacing}
+
+
+
+ The spacing respects a base gutter of 8px and relies on the
+ three main breakpoints we use in our design system: default
+ (or none), medium, and large.
+
+
+
+ When applying any modifier spacing class, these set padding
+ to 16px, and it applies to every screen size; Once the
+ screen reaches a minimum width of 1024px, the spacing
+ overwrites to 24px; Finally, for screens larger than 1200px,
+ the spacing would be 32px.
+
+
+
Peek at the table below for more detailed information.
- This framework's primary purpose is to provide a method of styling
- elements with as little conflict as possible. Our framework allows us to
- use our Design Tokens through memorable CSS-based utility classes. You
- can use this framework alone or with another CSS framework, as our CSS
- selectors are prefixed with .sui- to prevent collisions.
-
-
+
+ This framework's primary purpose is to provide a method of styling
+ elements with as little conflict as possible. Our framework allows us to
+ use our Design Tokens through memorable CSS-based utility classes. You
+ can use this framework alone or with another CSS framework, as our CSS
+ selectors are prefixed with .sui- to prevent collisions.
+
+
+
+
-
- In your project root directory (where the package.json file
- lives), run the following command:
-
- In your project root directory (where the package.json file
- lives), run the following command:
-
- ```js
- yarn add @wpmudev/sui-css
- ```
+
+ In your project root directory (where the package.json file
+ lives), run the following command:
+
+
+ ```js
+ yarn add @wpmudev/sui-css
+ ```
+
-
- We tested the Shared UI's CSS Framework in the latest two versions of
- the following browsers. Our team addresses critical
- bug fixes
- in earlier versions based on their severity and impact. If you need to
- support IE or pre-Chromium Edge, this library isn't for you.
-
-
-
-
-
-
-
+
+ We tested the Shared UI's CSS Framework in the latest two versions of
+ the following browsers. Our team addresses critical
+ bug fixes
+ in earlier versions based on their severity and impact. If you need to
+ support IE or pre-Chromium Edge, this library isn't for you.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/assets/css/stories/content/Overview/Usage.mdx b/packages/assets/css/stories/content/Overview/Usage.mdx
index a89dbfea8..72e1f2c9e 100644
--- a/packages/assets/css/stories/content/Overview/Usage.mdx
+++ b/packages/assets/css/stories/content/Overview/Usage.mdx
@@ -3,27 +3,28 @@ import dedent from 'ts-dedent';
import { Section, Code, Snippet } from '@wpmudev/sui-docs';
-
Once you've installed the CSS Framework package into your plugin, you can import the CSS either all at once or import the core and components separately, depending on your application's needs.
+
Once you've installed the CSS Framework package into your plugin, you can import the CSS either all at once or import the core and components separately, depending on your application's needs.
- ```js
- // Import the following CSS files based on your requirements:
- import "@wpmudev/sui-css/dist/css/sui-css.min.css" // This file contains both core and component styles.
- // OR
- // Import this file for component styles.
- import "@wpmudev/sui-css/dist/css/blocks/sui-components.min.css"
- // Import this file for core styles.
- import "@wpmudev/sui-css/dist/css/blocks/sui-core.min.css"
- ```
+ ```js
+ // Import the following CSS files based on your requirements:
+ import "@wpmudev/sui-css/dist/css/sui-css.min.css" // This file contains both core and component styles.
+ // OR
+ // Import this file for component styles.
+ import "@wpmudev/sui-css/dist/css/blocks/sui-components.min.css"
+ // Import this file for core styles.
+ import "@wpmudev/sui-css/dist/css/blocks/sui-core.min.css"
+ ```
-
- After importing CSS into your application, proceed to enqueue the bundled CSS with your application's styles within your wp-admin.
-
+ After importing CSS into your application, proceed to enqueue the bundled CSS with your application's styles within your wp-admin.
+
-add_action( 'admin_print_styles', myplugin_styles );
-```
+ ```php
+ function myplugin_styles() {
+ $plugin_url = plugin_dir_url( __FILE__ );
+ wp_enqueue_style( 'style', $plugin_url . "/build/your-plugin-bundled.css");
+ }
+
+ add_action( 'admin_print_styles', myplugin_styles );
+ ```
diff --git a/packages/assets/css/stories/content/Typography/Main.mdx b/packages/assets/css/stories/content/Typography/Main.mdx
index 997891af5..d72ed3de3 100644
--- a/packages/assets/css/stories/content/Typography/Main.mdx
+++ b/packages/assets/css/stories/content/Typography/Main.mdx
@@ -5,22 +5,23 @@ import Headings from './TabHeadings.mdx';
import Basics from './TabBasics.mdx';
-
We use Roboto as the primary font for our brand – from marketing to
plugins. It is simple but incredibly versatile, with three main
weight ranges: regular, medium, and bold.
}
- status="ready"
- >
-
-
-
-
-
-
-
+ status="ready"
+ >
+
+
+
+
+
+
+
+
diff --git a/packages/assets/css/stories/content/Typography/TabBasics.mdx b/packages/assets/css/stories/content/Typography/TabBasics.mdx
index 0a205bec9..73638c006 100644
--- a/packages/assets/css/stories/content/Typography/TabBasics.mdx
+++ b/packages/assets/css/stories/content/Typography/TabBasics.mdx
@@ -7,33 +7,38 @@ import Overline from './TabBasics/Overline.mdx';
import Helper from './TabBasics/Helper.mdx';
-
- Apart from headings, we have a list of typography variations that will
- help us style our designs properly, such as body (paragraph), section
- subtitle, or element caption.
-
-
- Please, pick one option from the selector below to read more about its
- usage.
-
+
+ Apart from headings, we have a list of typography variations that will
+ help us style our designs properly, such as body (paragraph), section
+ subtitle, or element caption.
+
+
+
+ Please, pick one option from the selector below to read more about its
+ usage.
+
- Commonly use helper in the form field, adding the{' '}
- sui-helper class name in any tag, but preferably
- following the proper content hierarchy.
-
-
-
- The quick brown fox jumps over the lazy dog.
-
-
- {sampleCode}
+
+ Commonly use helper in the form field, adding the{' '}
+ sui-helper class name in any tag, but preferably
+ following the proper content hierarchy.
+
+
+
+
+ The quick brown fox jumps over the lazy dog.
+
+
+
+
+ {sampleCode}
+
diff --git a/packages/assets/css/stories/content/Typography/TabBasics/Label.mdx b/packages/assets/css/stories/content/Typography/TabBasics/Label.mdx
index 5f11f93ce..3b6abd4c8 100644
--- a/packages/assets/css/stories/content/Typography/TabBasics/Label.mdx
+++ b/packages/assets/css/stories/content/Typography/TabBasics/Label.mdx
@@ -8,15 +8,19 @@ export const sampleCode = dedent`
`;
-
- Commonly use label in the form fields, adding the{' '}
- sui-label class name in any tag, but preferably
- following the proper content hierarchy.
-
-
-
-
- {sampleCode}
+
+ Commonly use label in the form fields, adding the{' '}
+ sui-label class name in any tag, but preferably
+ following the proper content hierarchy.
+
- Another typography variation is the overline, a small uppercase text
- primarily used inside buttons. Add sui-overline class name
- to apply this typography style.
-
-
-
- The quick brown fox jumps over the lazy dog.
-
-
- {sampleCode}
+
+ Another typography variation is the overline, a small uppercase text
+ primarily used inside buttons. Add sui-overline class name
+ to apply this typography style.
+
- Since it is a base styling, we apply it directly to the paragraph{' '}
- <p> tag, which works the same way for the modifiers.
- For bold text, use the <strong> or{' '}
- <b> tags; for italic text, use the{' '}
- <i> tag; while for small text, use the{' '}
- <small> tag, as shown in the example below.
-
-
-
- The quick brown fox jumps over the lazy dog.
-
-
- {sampleCode}
+
+ Since it is a base styling, we apply it directly to the paragraph{' '}
+ \ tag, which works the same way for the modifiers.
+ For bold text, use the \ or{' '}
+ \ tags; for italic text, use the{' '}
+ \ tag; while for small text, use the{' '}
+ \ tag, as shown in the example below.
+
- Tags are used to highlight specific bits of information and warnings.
- To get that, add sui-tag class name as shown in the
- example below.
-
-
-
- The quick brown fox jumps over the lazy dog.
-
-
- {sampleCode}
+
+ Tags are used to highlight specific bits of information and warnings.
+ To get that, add sui-tag class name as shown in the
+ example below.
+
+
+
+
+ The quick brown fox jumps over the lazy dog.
+
+
+
+
+ {sampleCode}
+
diff --git a/packages/assets/css/stories/content/Typography/TabHeadings.mdx b/packages/assets/css/stories/content/Typography/TabHeadings.mdx
index d44d7b20e..742d4f1ce 100644
--- a/packages/assets/css/stories/content/Typography/TabHeadings.mdx
+++ b/packages/assets/css/stories/content/Typography/TabHeadings.mdx
@@ -2,50 +2,56 @@ import { Section, Code, Snippet, Preview, Table } from '@wpmudev/sui-docs';
import dedent from 'dedent';
-
- Instead of applying heading styles directly to the tag name, we do it
- through class names. This method is the safest when styling the content
- correctly without jeopardizing the hierarchy and improving the
- navigation experience of our screen reader users.
-
-
- In other words, a Heading 4 tag can use, without a problem, the Heading
- 2 styles if necessary to maintain the content hierarchy and
- simultaneously respect the design.
-
+
+ Instead of applying heading styles directly to the tag name, we do it
+ through class names. This method is the safest when styling the content
+ correctly without jeopardizing the hierarchy and improving the
+ navigation experience of our screen reader users.
+
+
+
+ In other words, a Heading 4 tag can use, without a problem, the Heading
+ 2 styles if necessary to maintain the content hierarchy and
+ simultaneously respect the design.
+
-
- Add the sui-heading block name to your text to give text
- basic heading styles, such as padding, letter spacing, and more. In
- addition, use a modifier class such as sui-heading--* ,
- being the asterisk (*), any variable from h1 to{' '}
- h5 , to give your element a more specific decoration, like
- font size, line height, and weight.
-
-
-
- The Quick Brown Fox
-
-
- {dedent`
-
The Quick Brown Fox
- `}
+
+ Add the sui-heading block name to your text to give text
+ basic heading styles, such as padding, letter spacing, and more. In
+ addition, use a modifier class such as sui-heading--\* ,
+ being the asterisk (\*), any variable from h1 to{' '}
+ h5 , to give your element a more specific decoration, like
+ font size, line height, and weight.
+
+
+
+
+ The Quick Brown Fox
+
+
+
+
+ {dedent`
+
The Quick Brown Fox
+ `}
+
-
-
- In this section, you can find the list of all headings available
- with a quick preview, their class names, and essential information
- such as font size and weight.
-
-
-
-
+
+ In this section, you can find the list of all headings available
+ with a quick preview, their class names, and essential information
+ such as font size and weight.
+
+
+
+
+
-
+ />
+
diff --git a/packages/assets/icons/stories/IconsPack.mdx b/packages/assets/icons/stories/IconsPack.mdx
index 86a23c413..5919bc2fa 100644
--- a/packages/assets/icons/stories/IconsPack.mdx
+++ b/packages/assets/icons/stories/IconsPack.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
import { Page } from '@wpmudev/sui-docs';
import { Unstyled } from '@storybook/blocks';
@@ -9,19 +9,22 @@ import License from './content/License.mdx';
- SUI Icons Pack provides additional meaning in places where the text label doesn't fit. These icons communicate messages at a glimpse and lure awareness to vital information.
- }>
-
We created the WPMU DEV Design System to build plugins and products for WPMU DEV, not on products outside the company. Please visit the terms of use for full license details.
We created the WPMU DEV Design System to build plugins and products for WPMU DEV, not on products outside the company. Please visit the terms of use for full license details.
-
New icons need to be added to SUI Icons Pack first. Please, visit the Support page for more information on how to request it.
-
We can usually add an icon and release a new version on the same day if there is a hurry. However, remember that if there's a similar icon already available, we suggest you use it instead unless you request a design update.
+ border={ true }
+ contained={ true }
+>
+
New icons need to be added to SUI Icons Pack first. Please, visit the Support page for more information on how to request it.
+
We can usually add an icon and release a new version on the same day if there is a hurry. However, remember that if there's a similar icon already available, we suggest you use it instead unless you request a design update.
-
Need help with SUI Icons Pack? Please, head over to the Support page for more guidelines.
+ contained={ true }
+>
+
Need help with SUI Icons Pack? Please, head over to the Support page for more guidelines.
diff --git a/packages/assets/icons/stories/content/Usage.mdx b/packages/assets/icons/stories/content/Usage.mdx
index 17f08a4fb..2a3a576db 100644
--- a/packages/assets/icons/stories/content/Usage.mdx
+++ b/packages/assets/icons/stories/content/Usage.mdx
@@ -2,101 +2,120 @@ import { Section, Code, Snippet, List, Message } from '@wpmudev/sui-docs';
import dedent from 'ts-dedent';
-
There are many ways/formats to use the Shared UI Icons Package. The fastest and recommended way is via SVG directly. Or use the Webfont version if you want to include all icons at once:
+
There are many ways/formats to use the Shared UI Icons Package. The fastest and recommended way is via SVG directly. Or use the Webfont version if you want to include all icons at once:
-
-
-
-
- { dedent`
-
- `}
-
-
-
+
+
+
+
+
+ { dedent`
+
+ `}
+
+
+
+
Its possible to serve the icons from a CDN such as Unpkg. Use the @wpmudev/sui-icons npm package in the URL like the following:
- } />
-
-
- { dedent`
-
- `}
-
+ }
+ />
+
+
+
+ { dedent`
+
+ `}
+
-
-
+
+
Install the @wpmudev/sui-icons and @wpmudev/react-icon packages then import the icon in component you want in your component, as follow:
- } />
-
-
- { dedent`
-import { ArrowUp } from @wpmudev/sui-icons;
+ }
+ />
+
+
+
+ { dedent`
+ import { ArrowUp } from @wpmudev/sui-icons;
-const TestComponent = () => ;
- `}
-
+ const TestComponent = () => ;
+ `}
+
-
-
+
+
Install the @wpmudev/sui-icons and in the <head> of your HTML file, reference the location to your sui-icons.css stylesheet.
- } />
-
-
- { dedent`
-
- ...
-
- ...
-
- `}
-
-
-
+
+
+
+ { dedent`
+
+ ...
+
+ ...
+
+ `}
+
+
+
+
Use unpkg.com to load the Shared UI Icons Pack directly without installing anything:
- } />
-
-
- { dedent`
-
- ...
-
- ...
-
- `}
-
-
-
Place the suicons class with <span> tag in your HTML file, like this. Then, use the icon name along with the suicons-- class prefix.
Place the suicons class with \ tag in your HTML file, like this. Then, use the icon name along with the suicons-- class prefix.
+
diff --git a/packages/common/stories/Overview.stories.mdx b/packages/common/stories/Overview.mdx
similarity index 56%
rename from packages/common/stories/Overview.stories.mdx
rename to packages/common/stories/Overview.mdx
index a4922beb4..1955950c4 100644
--- a/packages/common/stories/Overview.stories.mdx
+++ b/packages/common/stories/Overview.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
import { Page } from '@wpmudev/sui-docs';
import { Unstyled } from '@storybook/blocks';
@@ -8,19 +8,20 @@ import Usage from './pages/Usage.mdx';
-
These are groups packages which contains packages of common categories
}
- >
-
-
- Below is the general form of the Upsell component
+
+
+
,
]}
- />
-
- {generalCode}
+ />
+
+
+
+ {generalCode}
+
-
Use the prop size=\{lg\} for a larger Upsell
-
- Use the prop size=\{lg} for a larger Upsell
+
+
+
,
]}
- />
-
- {largeCode}
+ />
+
+
+
+ {largeCode}
+
- Use the variation prop to change the Upsell plugin
- variation.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Use the variation prop to change the Upsell plugin
+ variation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/ui/upsell/stories/tabs/TabUsage.mdx b/packages/ui/upsell/stories/tabs/TabUsage.mdx
index 9def4f267..27d5c2f36 100644
--- a/packages/ui/upsell/stories/tabs/TabUsage.mdx
+++ b/packages/ui/upsell/stories/tabs/TabUsage.mdx
@@ -8,60 +8,64 @@ import SpacingTablet from "../images/spacing-tablet.svg"
import SpacingMobile from "../images/spacing-mobile.svg"
+
-
+
1. Product icon + Product name
+
Based upon the plugin the Product icon(40px) will be replaced with the relevant one and the Title with the plugin name along with “Pro” added at suffix Ex: \[plugin’s name] Pro, Smush Pro
-
1. Product icon + Product name
-
Based upon the plugin the Product icon(40px) will be replaced with the relevant one and the Title with the plugin name along with “Pro” added at suffix Ex: [plugin’s name] Pro, Smush Pro
+
2. Description
+
The description body is to show the Purpose of upsell. Line should not be more than 170 Character (3 lines)
-
2. Description
-
The description body is to show the Purpose of upsell. Line should not be more than 170 Character (3 lines)
+
3. Highlighted key-features (Max 5)
+
Depending upon the plugin features these key features can be used to convey the features to free tier user.
-
3. Highlighted key-features (Max 5)
-
Depending upon the plugin features these key features can be used to convey the features to free tier user.
-
-
4. Upgrade now
-
This button will lead user to purchase the Pro tier
-
-
5. Learn more
-
This button will lead user to learn more about what Product has to offer on Pro tier.
+
4. Upgrade now
+
This button will lead user to purchase the Pro tier
+
5. Learn more
+
This button will lead user to learn more about what Product has to offer on Pro tier.
-
- Upsell banners will be shown on the free user’s dashboard, next to the
- summary box. It covers the 1/3 grid (4 col) space on desktop, and moves
- below the summary box covering 100% width in mobile & tablet (whole grid
- under the summary box).
-
-
+
+ Upsell banners will be shown on the free user’s dashboard, next to the
+ summary box. It covers the 1/3 grid (4 col) space on desktop, and moves
+ below the summary box covering 100% width in mobile & tablet (whole grid
+ under the summary box).
+
+
+
-
- For the Desktop screen the Upsell box will take only 4 column from right.
-
-
-
- NOTE: The minimum bottom-padding for the desktop is 32px however it tries to
- flex with the height of the summary box.
-
-
+
+ For the Desktop screen the Upsell box will take only 4 column from right.
+
+
+
+
+
+ NOTE: The minimum bottom-padding for the desktop is 32px however it tries to
+ flex with the height of the summary box.
+
+
+
-
- for the Tablet screen the Upsell box will take only 12 column under the
- summary box.
-
-
+
+ for the Tablet screen the Upsell box will take only 12 column under the
+ summary box.
+
+
+
-
- for the Mobile screen the Upsell box will take only 12 column under the
- summary box.
-
-
+
+ for the Mobile screen the Upsell box will take only 12 column under the
+ summary box.
+
+
+
diff --git a/packages/ui/upsell/stories/upsell.mdx b/packages/ui/upsell/stories/upsell.mdx
deleted file mode 100644
index 5cf3045e5..000000000
--- a/packages/ui/upsell/stories/upsell.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Page } from "@wpmudev/sui-docs"
-import { Unstyled } from "@storybook/blocks"
-
-import TabUsage from "./tabs/TabUsage.mdx"
-import TabCode from "./tabs/TabCode.mdx"
-import TabExamples from "./tabs/TabExamples.mdx"
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/utils/stories/Overview.stories.mdx b/packages/utils/stories/Overview.mdx
similarity index 56%
rename from packages/utils/stories/Overview.stories.mdx
rename to packages/utils/stories/Overview.mdx
index 0d0401694..78042b966 100644
--- a/packages/utils/stories/Overview.stories.mdx
+++ b/packages/utils/stories/Overview.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
import { Page } from '@wpmudev/sui-docs';
import { Unstyled } from '@storybook/blocks';
@@ -8,19 +8,20 @@ import Usage from './pages/Usage.mdx';
-
This package provides utility methods which are helpful in development.
}
- >
-
- This is a utility package offering a collection of methods and functions designed to assist in development tasks. These utilities are tailored to simplify and streamline common development operations in various scenarios.
-
-
+
+ This is a utility package offering a collection of methods and functions designed to assist in development tasks. These utilities are tailored to simplify and streamline common development operations in various scenarios.
+
+
+
+
-
- In your project root directory (where the package.json file
- lives), run the following command:
-
Here is a list of utility methods/variables offered within this library that can be used in the development of your plugin
+
Here is a list of utility methods/variables offered within this library that can be used in the development of your plugin
+
-
The `PluginsIcons` object is a record mapping plugin IDs to Plugin icon object. It defines properties for various plugins, specifying their background color, text color, and associated icon identifier.
The `PluginsIcons` object is a record mapping plugin IDs to Plugin icon object. It defines properties for various plugins, specifying their background color, text color, and associated icon identifier.
+
+
+
Plugin Icon object structure:
+
+
+
bg\[string]: Background color for the plugin icon.
Returns the content if the condition is true, otherwise returns undefined or fallback.
-
-
Parameters:
-
-
condition [any]: The condition to match.
-
content [any]: The content to return if the condition is true.
-
fallback [any][optional]: The fallback to return when condition false.
-
-
-
-
Returns:
-
-
[any|undefined]: flag or undefined.
-
-
-
-
Example
- ```js
- import { condContent } from "@wpmudev/sui-utils";
-
- const status = 'active';
-
- // Get the status text based on "status"
- const statusText = condContent('active' === status, 'Activated', 'Disabled');
- console.log(statusText);
- ```
-
+
Returns the content if the condition is true, otherwise returns undefined or fallback.
+
+
+
Parameters:
+
+
+
condition \[any]: The condition to match.
+
content \[any]: The content to return if the condition is true.
+
fallback \[any]\[optional]: The fallback to return when condition false.
+
+
+
+
+
Returns:
+
+
+
\[any|undefined]: flag or undefined.
+
+
+
+
+
Example
+
+ ```js
+ import { condContent } from "@wpmudev/sui-utils";
+
+ const status = 'active';
+
+ // Get the status text based on "status"
+ const statusText = condContent('active' === status, 'Activated', 'Disabled');
+ console.log(statusText);
+ ```
+
+
-
This function breaks an array into chunks of a specified size.
-
-
Parameters:
-
-
arr [any[]]: The array to be chunked.
-
size [number]: The size of each chunk.
-
-
-
-
Returns:
-
-
[any[][]]: An array of arrays containing the chunks.
- `}
- 
- `}
-