diff --git a/.gitignore b/.gitignore index fefacf16e..bcb45321b 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,7 @@ .angular master.zip packages/beeq/.stencil -packages/beeq/.storybook/css/** +packages/beeq/.storybook/assets/css/stories.css packages/beeq/custom-elements.json packages/beeq/src/components/icon/svg/** packages/beeq-angular/**/directives diff --git a/packages/beeq/.storybook/assets/css/font.css b/packages/beeq/.storybook/assets/css/font.css new file mode 100644 index 000000000..14a826bc9 --- /dev/null +++ b/packages/beeq/.storybook/assets/css/font.css @@ -0,0 +1,65 @@ +/* Thin */ +@font-face { + font-family: '"Outfit"'; + font-style: normal; + font-weight: 100; + font-display: swap; + src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Light */ +@font-face { + font-family: '"Outfit"'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Regular */ +@font-face { + font-family: '"Outfit"'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Medium */ +@font-face { + font-family: '"Outfit"'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Semibold */ +@font-face { + font-family: '"Outfit"'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* Bold */ +@font-face { + font-family: '"Outfit"'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/packages/beeq/.storybook/assets/css/preview.css b/packages/beeq/.storybook/assets/css/preview.css new file mode 100644 index 000000000..8af060cf5 --- /dev/null +++ b/packages/beeq/.storybook/assets/css/preview.css @@ -0,0 +1,125 @@ +/* stylelint-disable media-feature-range-notation */ +/* stylelint-disable custom-property-pattern */ + +.sbdocs-wrapper { + padding: 0 !important; +} + +.sbdocs-wrapper .sbdocs-content { + max-width: 100% !important; + min-height: 100vh; +} + +.sbdocs-content a, +.sbdocs-content blockquote, +.sbdocs-content h1, +.sbdocs-content h2, +.sbdocs-content li, +.sbdocs-content ol, +.sbdocs-content p, +.sbdocs-content table, +.sbdocs-content td, +.sbdocs-content th, +.sbdocs-content tr, +.sbdocs-content ul { + font-family: var(--bq-font-family--outfit); + font-size: var(--bq-font-size--m); + font-weight: var(--bq-font-weight--regular); + color: var(--bq-text--primary); +} + +.sbdocs-content a { + color: var(--bq-text--brand); +} + +.sbdocs-content h1, +.sbdocs-content h2 { + line-height: var(--bq-font-line-height--small); +} + +.sbdocs-content h1 { + font-size: var(--bq-font-size--xxl2); +} + +.sbdocs-content h2 { + font-size: var(--bq-font-size--xxl); + border-bottom: none; +} + +.docblock-typeset { + background-color: var(--bq-background--primary) !important; +} + +.docblock-argstable .docblock-argstable-body { + box-shadow: var(--bq-box-shadow--m); + filter: none !important; +} + +.docblock-argstable .docblock-argstable-body > tr:first-of-type > td:first-of-type { + border-top-left-radius: var(--bq-radius--m) !important; +} + +.docblock-argstable .docblock-argstable-body > tr:first-of-type > td:last-of-type { + border-top-right-radius: var(--bq-radius--m) !important; +} + +.docblock-argstable .docblock-argstable-body > tr:last-of-type > td:first-of-type { + border-bottom-left-radius: var(--bq-radius--m) !important; +} + +.docblock-argstable .docblock-argstable-body > tr:last-of-type > td:last-of-type { + border-bottom-right-radius: var(--bq-radius--m) !important; +} + +.docblock-argstable .docblock-argstable-body > tr >td[colspan="1"], +.docblock-argstable .docblock-argstable-body > tr >td[colspan="2"] { + background-color: var(--bq-ui--primary-alt) !important; +} + +.docs-story > div:first-child { + min-height: 250px; +} + +.bq-doc__wrapper { + display: flex; + justify-content: center; + background-color: var(--bq-background--primary); + padding-top: var(--bq-spacing-xl); + min-height: 100vh; + width: 100%; +} + + +.bq-doc__container { + font-family: '"Outfit"', sans-serif; + color: var(--bq-text--primary); + margin-left: auto; + margin-right: auto; + padding-left: var(--bq-spacing-l); + padding-right: var(--bq-spacing-l); + width: 100%px; +} + +@media (min-width: 640px) { + .bq-doc__container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .bq-doc__container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .bq-doc__container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .bq-doc__container { + max-width: 1280px; + } +} diff --git a/packages/beeq/.storybook/assets/css/storybook.css b/packages/beeq/.storybook/assets/css/storybook.css new file mode 100644 index 000000000..8fc7da517 --- /dev/null +++ b/packages/beeq/.storybook/assets/css/storybook.css @@ -0,0 +1,76 @@ +html, +body { + font-family: '"Outfit"', sans-serif; + font-size: 1rem; +} + +.search-field input { + border-color: #6b7280; + border-radius: 0.5rem; + border-width: 1px; + font-size: 16px; + min-height: 32px; +} + +.search-field input:active, +.search-field input:focus { + border-color: #4f46e5; + box-shadow: none; +} + +.sidebar-item, +.sidebar-item a { + display: flex !important; + align-items: center !important; + font-family: '"Outfit"', sans-serif; + font-size: 1rem !important; + font-weight: 400; + line-height: 1.2; +} + +.sidebar-item > span { + margin-top: initial !important; +} + +.sidebar-item > svg, +.sidebar-item a > svg { + height: 16px !important; + width: 16px !important; + margin-top: 0; +} + +.sidebar-item > svg[color='primary'] { + color: #4f46e5; +} + +.sidebar-item > svg[color='secondary'] { + color: #4f46e5; +} + +.sidebar-subheading { + margin-top: 16px !important; + margin-bottom: 6px !important; + font-weight: 600 !important; + font-size: 1.125rem !important; + line-height: 20px !important; + min-height: 20px !important; + letter-spacing: 0.05rem !important; + text-transform: none !important; +} + +.sidebar-subheading > button { + color: #a6aab3; + font-family: '"Outfit"', sans-serif; + font-size: 1.125rem; +} + +.sidebar-subheading > button:not(.sidebar-subheading-action) > span { + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-left: 6px solid; +} + +.sidebar-subheading > button.sidebar-subheading-action > span > svg { + height: 16px !important; + width: 16px !important; +} diff --git a/packages/beeq/.storybook/main.ts b/packages/beeq/.storybook/main.ts index 195dfc4aa..2eb96eadf 100644 --- a/packages/beeq/.storybook/main.ts +++ b/packages/beeq/.storybook/main.ts @@ -25,13 +25,34 @@ const config: StorybookConfig = { }, framework: '@storybook/web-components-vite', stories: ['../src/_storybook/**/*.mdx', '../src/**/*.stories.@(mdx|ts|tsx)'], - staticDirs: ['../../../dist/beeq/www', { from: '../../../dist/beeq/dist/bee-q', to: '/beeq' }], + staticDirs: [ + '../../../dist/beeq/www', + { from: '../../../dist/beeq/dist/bee-q', to: '/beeq' }, + { from: './assets/css', to: '/css' }, + ], viteFinal: async (config: InlineConfig, { configType }) => { // Add your own config tweaks if needed and return the modified config return mergeConfig(config, { plugins: [configType === 'PRODUCTION' && turbosnap({ rootDir: config.root ?? process.cwd() })].filter(Boolean), }); }, + managerHead: (head) => ` + ${head} + + + + `, + previewHead: (head) => ` + ${head} + + + + + + + `, }; export default config; diff --git a/packages/beeq/.storybook/manager.ts b/packages/beeq/.storybook/manager.ts index a7f5e5f0d..6827c6647 100644 --- a/packages/beeq/.storybook/manager.ts +++ b/packages/beeq/.storybook/manager.ts @@ -4,7 +4,7 @@ import { create } from '@storybook/theming'; const theme = create({ base: 'light', - colorPrimary: '#f0f1f2', + colorPrimary: '#f7f8f9', colorSecondary: '#4f46e5', // BRAND @@ -13,20 +13,22 @@ const theme = create({ brandImage: './assets/beeq-logo.svg', // UI - appBg: '#f0f1f2', + appBg: '#f7f8f9', appContentBg: '#fff', + appBorderRadius: 12, // Typography fontBase: '"Outfit", sans-serif', + fontCode: 'monospace', // Text colors - textColor: '#2b2e33', + textColor: '#25282d', textInverseColor: '#fff', // Toolbar default and active colors - barTextColor: '#2b2e33', - barSelectedColor: '#6366F1', - barBg: '#f0f1f2', + barTextColor: '#25282d', + barSelectedColor: '#4f46e5', + barBg: '#f7f8f9', }); addons.setConfig({ diff --git a/packages/beeq/.storybook/preview-head.html b/packages/beeq/.storybook/preview-head.html deleted file mode 100644 index 8b4aeaee1..000000000 --- a/packages/beeq/.storybook/preview-head.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - diff --git a/packages/beeq/.storybook/preview.ts b/packages/beeq/.storybook/preview.ts index ee3fa44f6..e6f191b52 100644 --- a/packages/beeq/.storybook/preview.ts +++ b/packages/beeq/.storybook/preview.ts @@ -1,4 +1,4 @@ -import './css/sb-styles.css'; +import './assets/css/stories.css'; import type { DecoratorFunction } from '@storybook/types'; import type { Preview, WebComponentsRenderer } from '@storybook/web-components'; diff --git a/packages/beeq/project.json b/packages/beeq/project.json index f9a3b7943..430032cc7 100644 --- a/packages/beeq/project.json +++ b/packages/beeq/project.json @@ -95,16 +95,16 @@ }, "storybook-start-css": { "executor": "nx:run-commands", - "outputs": ["{projectRoot}/.storybook/css"], + "outputs": ["{projectRoot}/.storybook/assets/css"], "options": { - "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/css/sb-styles.css --postcss ./postcss.config.js --watch" + "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/assets/css/stories.css --postcss ./postcss.config.js --watch" } }, "storybook-build-css": { "executor": "nx:run-commands", - "outputs": ["{projectRoot}/.storybook/css"], + "outputs": ["{projectRoot}/.storybook/assets/css"], "options": { - "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/css/sb-styles.css --postcss ./postcss.config.js --minify" + "command": "npx tailwindcss -i packages/beeq/src/global/styles/tailwind.pcss -o packages/beeq/.storybook/assets/css/stories.css --postcss ./postcss.config.js --minify" } }, "generate-icons": { diff --git a/packages/beeq/src/_storybook/foundation/typography.mdx b/packages/beeq/src/_storybook/foundation/typography.mdx deleted file mode 100644 index 35e6ce2b4..000000000 --- a/packages/beeq/src/_storybook/foundation/typography.mdx +++ /dev/null @@ -1,342 +0,0 @@ -import { Meta, Source, Typeset } from '@storybook/blocks'; - - - -export const typography = { - type: { - primary: '"Outfit", sans-serif', - }, - weight: { - regular: '400', - semibold: '500', - bold: '700', - }, - size: { - xs: 12, - s: 14, - m: 16, - l: 20, - xl: 24, - xxl: 32, - xxl2: 40, - xxl3: 48, - xxl4: 56, - xxl5: 64, - }, -}; - -export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; - -# Typography - -Typography is an essential part of any design system, and it's important to understand the different types of typography and how to use them effectively. - -BEEQ uses the Outfit font, a versatile and modern typeface that caters to a wide range of typographical needs. - -**Font:** [Outfit](https://fonts.google.com/specimen/Outfit) - -The Outfit font is carefully selected for its excellent legibility, adaptability, and aesthetic appeal, ensuring a cohesive and visually pleasing user experience. - -# Built-in typography classes - -- [Display](#display) -- [H1](#h1) -- [H2](#h2) -- [H3](#h3) -- [H4](#h4) -- [H5](#h5) -- [H6](#h6) -- [Body](#body) -- [Caption](#caption) -- [Overline](#overline) - -## Display - -Display typography is used for headlines, titles, and other large text elements that are meant to grab the reader's attention. -It is often used for special announcements, promotions, or other important messages that need to stand out from the rest of the content on the page. -To use the display font, add the `display` class to the element (recommended to be a `

` HTML element). - -${SampleText}

`} /> - -
- **💡 NOTE:** - - In addition to the `.display` class, you can also add the `.semibold` or `.bold` classes to change the font weight of the text. - The `.semibold` class is a lighter weight than the `.bold` class, but still provides a noticeable difference in weight. - **It applies to all headings, not just the display heading.** -
- - - - - - - -## H1 - -The H1 heading is typically used as the main heading of a page or section, and should be visually distinct from other headings on the page. -It is usually the largest and most prominent heading on the page, and is often used to introduce the main topic or purpose of the page. - -To set a H1 heading, you can use the native `h1` HTML tag: - -${SampleText}`} /> -or the `.h1` class: -${SampleText}

`} /> - - - - - - - -## H2 - -The H2 heading is often used to introduce a new topic or section, and can be used to break up long blocks of text into more manageable sections. -It should be visually distinct from other headings on the page, and is usually the second largest and most prominent heading on the page. - -To set a H1 heading, you can use the native `h2` HTML tag: - -${SampleText}`} /> -or the `.h2` class: -${SampleText}

`} /> - - - - - -## H3 - -The H3 heading is used to introduce subtopics or sections within a larger topic. -It should be visually distinct from other headings on the page, and is usually smaller than the H2 heading. - -To set a H1 heading, you can use the native `h3` HTML tag: - -${SampleText}`} /> -or the `.h3` class: -${SampleText}

`} /> - - - - - -## H4 - -The H4 heading is used to introduce subtopics or sections within a larger topic. -It should be visually distinct from other headings on the page, and is usually smaller than the H3 heading. - -To set a H1 heading, you can use the native `h4` HTML tag: - -${SampleText}`} /> -or the `.h4` class: -${SampleText}

`} /> - - - - - -## H5 - -The H5 heading is used to introduce subtopics or sections within a larger topic. -It should be visually distinct from other headings on the page, and is usually smaller than the H4 heading. - -To set a H1 heading, you can use the native `h5` HTML tag: - -${SampleText}`} /> -or the `.h5` class: -${SampleText}

`} /> - - - - - -## H6 - -The H6 heading is used to introduce subtopics or sections within a larger topic. -It should be visually distinct from other headings on the page, and is usually smaller than the H5 heading. - -To set a H1 heading, you can use the native `h6` HTML tag: - -${SampleText}`} /> -or the `.h6` class: -${SampleText}

`} /> - - - - - -## Body - -The body text is used for the main content of a page, and should be visually distinct from other headings on the page. - -
- ❗️ BEEQ set by default the body styles in the global CSS, so **you don't need to add any class to use it**. -
- -${SampleText}

`} /> - - - -## Caption - -The caption element is used to provide a short description or explanation about an image or other visual element. -It is typically used in conjunction with the figure element, which contains the visual element being described. - -To set a caption, you can use the native `figcaption` HTML tag: - -${SampleText}`} /> -or the `.caption` class: -${SampleText}

`} /> - - - - - -## Overline - -To set a overline, you can use the `.overline` CSS class: - -${SampleText}`} /> - - - - diff --git a/packages/beeq/src/_storybook/foundation/typography.stories.mdx b/packages/beeq/src/_storybook/foundation/typography.stories.mdx new file mode 100644 index 000000000..db66d82b2 --- /dev/null +++ b/packages/beeq/src/_storybook/foundation/typography.stories.mdx @@ -0,0 +1,364 @@ +import { DocsContainer, Meta, Source, Typeset } from '@storybook/blocks'; + + { + const { globals} = context.store.globals; + + const typography = { + type: { + primary: '"Outfit", sans-serif', + }, + weight: { + regular: '400', + semibold: '500', + bold: '700', + }, + size: { + xs: 12, + s: 14, + m: 16, + l: 20, + xl: 24, + xxl: 32, + xxl2: 40, + xxl3: 48, + xxl4: 56, + xxl5: 64, + }, + }; + + const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; + + return ( + +
+
+

Typography

+ +

+ Typography is an essential part of any design system, and it's important to understand the different types of typography and how to use them effectively. + BEEQ uses the Outfit font, a versatile and modern typeface that caters to a wide range of typographical needs. +

+ +

Font: Outfit

+ +

The Outfit font is carefully selected for its excellent legibility, adaptability, and aesthetic appeal, ensuring a cohesive and visually pleasing user experience.

+ +

Display

+ +

+ Display typography is used for headlines, titles, and other large text elements that are meant to grab the reader's attention. + It is often used for special announcements, promotions, or other important messages that need to stand out from the rest of the content on the page. + To use the display font, add the `display` class to the element (recommended to be a h1 HTML element). +

+ + ${SampleText}`} /> + +
+ 💡 NOTE: +

+ In addition to the `.display` class, you can also add the `.semibold` or `.bold` classes to change the font weight of the text. + The `.semibold` class is a lighter weight than the `.bold` class, but still provides a noticeable difference in weight. + **It applies to all headings, not just the display heading.** +

+
+ + + + + + + +

H1

+ +

+ The H1 heading is typically used as the main heading of a page or section, and should be visually distinct from other headings on the page. + It is usually the largest and most prominent heading on the page, and is often used to introduce the main topic or purpose of the page. +

+ +

To set a H1 heading, you can use the native h1 HTML tag:

+ + ${SampleText}`} /> +

or the .h1 class:

+ ${SampleText}

`} /> + + + + + + + +

H2

+ +

+ The H2 heading is often used to introduce a new topic or section, and can be used to break up long blocks of text into more manageable sections. + It should be visually distinct from other headings on the page, and is usually the second largest and most prominent heading on the page. +

+ +

To set a H1 heading, you can use the native h2 HTML tag:

+ + ${SampleText}`} /> +

or the .h2 class:

+ ${SampleText}

`} /> + + + + + +

H3

+ +

+ The H3 heading is used to introduce subtopics or sections within a larger topic. + It should be visually distinct from other headings on the page, and is usually smaller than the H2 heading. +

+ +

To set a H1 heading, you can use the native h3 HTML tag:

+ + ${SampleText}`} /> +

or the .h3 class:

+ ${SampleText}

`} /> + + + + + +

H4

+ +

+ The H4 heading is used to introduce subtopics or sections within a larger topic. + It should be visually distinct from other headings on the page, and is usually smaller than the H3 heading. +

+ +

To set a H1 heading, you can use the native h4 HTML tag:

+ + ${SampleText}`} /> +

or the .h4 class:

+ ${SampleText}

`} /> + + + + + +

H5

+ +

+ The H5 heading is used to introduce subtopics or sections within a larger topic. + It should be visually distinct from other headings on the page, and is usually smaller than the H4 heading. +

+ +

To set a H1 heading, you can use the native h5 HTML tag:

+ + ${SampleText}`} /> +

or the .h5 class:

+ ${SampleText}

`} /> + + + + + +

H6

+ +

+ The H6 heading is used to introduce subtopics or sections within a larger topic. + It should be visually distinct from other headings on the page, and is usually smaller than the H5 heading. +

+ +

To set a H1 heading, you can use the native h6 HTML tag:

+ + ${SampleText}`} /> +

or the .h6 class:

+ ${SampleText}

`} /> + + + + + +

Body

+ +

The body text is used for the main content of a page, and should be visually distinct from other headings on the page.

+ +
+ ❗️ BEEQ set by default the body styles in the global CSS, so **you don't need to add any class to use it**. +
+ + ${SampleText}

`} /> + + + +

Caption

+ +

+ The caption element is used to provide a short description or explanation about an image or other visual element. + It is typically used in conjunction with the figure element, which contains the visual element being described. +

+ +

To set a caption, you can use the native figcaption HTML tag:

+ + ${SampleText}`} /> +

or the .caption class:

+ ${SampleText}

`} /> + + + + + +

Overline

+ +

To set a overline, you can use the .overline CSS class:

+ + ${SampleText}`} /> + + + + +
+
+ + ) + }, + }, +}} /> diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts index f0e33f11b..af32fcc8e 100644 --- a/packages/beeq/src/components.d.ts +++ b/packages/beeq/src/components.d.ts @@ -42,9 +42,6 @@ export { TTabSize } from "./components/tab/bq-tab.types"; export { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types"; export { TToastPlacement, TToastType } from "./components/toast/bq-toast.types"; export namespace Components { - /** - * An avatar represents an object made of different pieces of information, in a way that is understandable at a glance. - */ interface BqAvatar { /** * Alternate text for the avatar image if the image cannot be displayed @@ -498,7 +495,7 @@ export namespace Components { } interface BqOptionList { /** - * If true, the option is selected and active. + * Aria label for the list. */ "ariaLabel": string; } @@ -1120,9 +1117,6 @@ export interface BqToastCustomEvent extends CustomEvent { target: HTMLBqToastElement; } declare global { - /** - * An avatar represents an object made of different pieces of information, in a way that is understandable at a glance. - */ interface HTMLBqAvatarElement extends Components.BqAvatar, HTMLStencilElement { } var HTMLBqAvatarElement: { @@ -1350,9 +1344,6 @@ declare global { } } declare namespace LocalJSX { - /** - * An avatar represents an object made of different pieces of information, in a way that is understandable at a glance. - */ interface BqAvatar { /** * Alternate text for the avatar image if the image cannot be displayed @@ -1890,7 +1881,7 @@ declare namespace LocalJSX { } interface BqOptionList { /** - * If true, the option is selected and active. + * Aria label for the list. */ "ariaLabel"?: string; /** @@ -2527,9 +2518,6 @@ export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { - /** - * An avatar represents an object made of different pieces of information, in a way that is understandable at a glance. - */ "bq-avatar": LocalJSX.BqAvatar & JSXBase.HTMLAttributes; "bq-badge": LocalJSX.BqBadge & JSXBase.HTMLAttributes; "bq-breadcrumb": LocalJSX.BqBreadcrumb & JSXBase.HTMLAttributes; diff --git a/packages/beeq/src/components/avatar/_storybook/bq-avatar.mdx b/packages/beeq/src/components/avatar/_storybook/bq-avatar.mdx index 6f1dc9a5c..2eaf506c9 100644 --- a/packages/beeq/src/components/avatar/_storybook/bq-avatar.mdx +++ b/packages/beeq/src/components/avatar/_storybook/bq-avatar.mdx @@ -1,27 +1,31 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Avatar +
+
+ Avatar -The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape. -This component is useful for displaying user profile pictures or any other image that represents a person or an entity. + The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape. + This component is useful for displaying user profile pictures or any other image that represents a person or an entity. -Usage + Usage -Here are some best practices to ensure a positive user experience with the Avatar component: + Here are some best practices to ensure a positive user experience with the Avatar component: -- **Make it identifiable:** The avatar should be easily recognizable and should represent the user or entity accurately. It should be appropriate and relevant to the context in which it is used. -- **Keep it simple:** The size and complexity of the avatar should be appropriate to the context in which it is used. A simple, clear design is usually better than a complex one that can be difficult to understand. -- **Ensure consistency:** Use the same avatar across all instances of the user or entity to ensure consistency and familiarity. -- **Provide alternative text:** Always provide alternative text for the avatar for users who cannot see the image. This can be achieved by using the `alt` attribute. + - **Make it identifiable:** The avatar should be easily recognizable and should represent the user or entity accurately. It should be appropriate and relevant to the context in which it is used. + - **Keep it simple:** The size and complexity of the avatar should be appropriate to the context in which it is used. A simple, clear design is usually better than a complex one that can be difficult to understand. + - **Ensure consistency:** Use the same avatar across all instances of the user or entity to ensure consistency and familiarity. + - **Provide alternative text:** Always provide alternative text for the avatar for users who cannot see the image. This can be achieved by using the `alt` attribute. -👍 When to use + 👍 When to use -The Avatar component is commonly used in the following scenarios: + The Avatar component is commonly used in the following scenarios: -- **Profile pictures:** The Avatar is commonly used to display a user's profile picture. -- **Comment sections:** The Avatar is also commonly used in comment sections to display the picture of the user who made the comment. -- **List views:** The Avatar can also be used in list views to provide a visual representation of the user or entity associated with an item in the list. + - **Profile pictures:** The Avatar is commonly used to display a user's profile picture. + - **Comment sections:** The Avatar is also commonly used in comment sections to display the picture of the user who made the comment. + - **List views:** The Avatar can also be used in list views to provide a visual representation of the user or entity associated with an item in the list. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/avatar/bq-avatar.tsx b/packages/beeq/src/components/avatar/bq-avatar.tsx index f7a66789b..2d67ba053 100644 --- a/packages/beeq/src/components/avatar/bq-avatar.tsx +++ b/packages/beeq/src/components/avatar/bq-avatar.tsx @@ -4,8 +4,6 @@ import { TAvatarShape, TAvatarSize, AVATAR_SHAPE, AVATAR_SIZE } from './bq-avata import { validatePropValue } from '../../shared/utils'; /** - * An avatar represents an object made of different pieces of information, in a way that is understandable at a glance. - * * @part base - The component's internal wrapper. * @part img - The `` tag element that load the image source. * @part text - The `` tag element that renderd the `Initials` text string. diff --git a/packages/beeq/src/components/avatar/readme.md b/packages/beeq/src/components/avatar/readme.md index 9a2d1afd8..1bde16bc0 100644 --- a/packages/beeq/src/components/avatar/readme.md +++ b/packages/beeq/src/components/avatar/readme.md @@ -5,10 +5,6 @@ -## Overview - -An avatar represents an object made of different pieces of information, in a way that is understandable at a glance. - ## Properties | Property | Attribute | Description | Type | Default | diff --git a/packages/beeq/src/components/badge/_storybook/bq-badge.mdx b/packages/beeq/src/components/badge/_storybook/bq-badge.mdx index 9c6f309fc..3d34bbd5c 100644 --- a/packages/beeq/src/components/badge/_storybook/bq-badge.mdx +++ b/packages/beeq/src/components/badge/_storybook/bq-badge.mdx @@ -1,28 +1,32 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Badge +
+
+ Badge -The Badge component is a visual indicator that can be added to various elements within a user interface. -It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses. + The Badge component is a visual indicator that can be added to various elements within a user interface. + It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses. -Usage + Usage -When using the Badge component, it is important to follow these user experience best practices: + When using the Badge component, it is important to follow these user experience best practices: -- **Use sparingly:** While the Badge component can be effective in drawing attention to important information, it should not be overused. Overuse of the Badge component can lead to a cluttered and confusing user interface. -- **Be consistent:** When using the Badge component, ensure that it is used consistently throughout the user interface. This includes the placement, size, and color of the Badge component. -- **Keep it simple:** The Badge component should be simple and easy to understand. Avoid using overly complicated designs or messaging. -- **Avoid using too many colors:** While the Badge component can be colored to draw attention, it is important to avoid using too many colors. This can lead to a visually overwhelming user interface. -- **Make it accessible:** Ensure that the Badge component is accessible to all users, including those with visual impairments. This can be achieved by using appropriate color contrast and providing alternative text descriptions. + - **Use sparingly:** While the Badge component can be effective in drawing attention to important information, it should not be overused. Overuse of the Badge component can lead to a cluttered and confusing user interface. + - **Be consistent:** When using the Badge component, ensure that it is used consistently throughout the user interface. This includes the placement, size, and color of the Badge component. + - **Keep it simple:** The Badge component should be simple and easy to understand. Avoid using overly complicated designs or messaging. + - **Avoid using too many colors:** While the Badge component can be colored to draw attention, it is important to avoid using too many colors. This can lead to a visually overwhelming user interface. + - **Make it accessible:** Ensure that the Badge component is accessible to all users, including those with visual impairments. This can be achieved by using appropriate color contrast and providing alternative text descriptions. -👍 When to use + 👍 When to use -The Badge component can be used in a variety of situations, including: + The Badge component can be used in a variety of situations, including: -- **Alerts and notifications:** Use the Badge component to draw attention to important alerts or notifications, such as new messages or updates. -- **Status indicators:** Use the Badge component to indicate the status of an item, such as whether it is new, in progress, or completed. -- **Counters:** Use the Badge component to display a count of items, such as the number of unread messages or pending tasks. + - **Alerts and notifications:** Use the Badge component to draw attention to important alerts or notifications, such as new messages or updates. + - **Status indicators:** Use the Badge component to indicate the status of an item, such as whether it is new, in progress, or completed. + - **Counters:** Use the Badge component to display a count of items, such as the number of unread messages or pending tasks. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/breadcrumb/_storybook/bq-breadcrumb.mdx b/packages/beeq/src/components/breadcrumb/_storybook/bq-breadcrumb.mdx index 559859a04..615e1478b 100644 --- a/packages/beeq/src/components/breadcrumb/_storybook/bq-breadcrumb.mdx +++ b/packages/beeq/src/components/breadcrumb/_storybook/bq-breadcrumb.mdx @@ -1,39 +1,43 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Breadcrumb +
+
+ Breadcrumb -The Breadcrumb Component helps users understand their current location within a website or application's hierarchical structure. -It is a list of links or buttons that provides context and helps users understand where they are within the overall information architecture and provides a sense of orientation and control. -Each item in the Breadcrumb Component represents a level in the hierarchy of the application. + The Breadcrumb Component helps users understand their current location within a website or application's hierarchical structure. + It is a list of links or buttons that provides context and helps users understand where they are within the overall information architecture and provides a sense of orientation and control. + Each item in the Breadcrumb Component represents a level in the hierarchy of the application. -Usage + Usage -- Provide context: Breadcrumbs give users an overview of the page hierarchy they're currently in, providing them with a sense of context and helping them understand where they are in relation to the rest of the site. -- Improve navigation: Breadcrumbs make it easier for users to move up and down the page hierarchy, quickly returning to previously visited pages or exploring new sections of the site. -- Enhance discoverability: By highlighting the path to the current page, breadcrumbs can also help users discover new content and features within the site. + - Provide context: Breadcrumbs give users an overview of the page hierarchy they're currently in, providing them with a sense of context and helping them understand where they are in relation to the rest of the site. + - Improve navigation: Breadcrumbs make it easier for users to move up and down the page hierarchy, quickly returning to previously visited pages or exploring new sections of the site. + - Enhance discoverability: By highlighting the path to the current page, breadcrumbs can also help users discover new content and features within the site. -👍 When to use + 👍 When to use -Do's: + Do's: -- Use clear and concise labels for each breadcrumb, describing the content of the page or section it represents. -- Make sure the breadcrumb labels accurately reflect the page hierarchy, with the most general sections at the beginning and the most specific sections at the end. -- Keep breadcrumbs visible and accessible, either by placing them at the top of the page or by having them fixed to the top of the screen as the user scrolls. -- Make breadcrumbs clickable, allowing users to easily navigate back to previously visited pages. + - Use clear and concise labels for each breadcrumb, describing the content of the page or section it represents. + - Make sure the breadcrumb labels accurately reflect the page hierarchy, with the most general sections at the beginning and the most specific sections at the end. + - Keep breadcrumbs visible and accessible, either by placing them at the top of the page or by having them fixed to the top of the screen as the user scrolls. + - Make breadcrumbs clickable, allowing users to easily navigate back to previously visited pages. -Don'ts: + Don'ts: -- Overuse breadcrumbs, or use them in situations where they don't provide any meaningful context or benefit to the user. -- Use breadcrumbs as a substitute for proper navigation, as they should complement, not replace, other navigation elements such as menus and links. -- Make breadcrumbs too small or hard to read, as this can make it difficult for users to understand the context and navigate the site effectively. -- Use breadcrumbs as a way to display too much information, as this can make the navigation overwhelming and confusing for users. + - Overuse breadcrumbs, or use them in situations where they don't provide any meaningful context or benefit to the user. + - Use breadcrumbs as a substitute for proper navigation, as they should complement, not replace, other navigation elements such as menus and links. + - Make breadcrumbs too small or hard to read, as this can make it difficult for users to understand the context and navigate the site effectively. + - Use breadcrumbs as a way to display too much information, as this can make the navigation overwhelming and confusing for users. -Properties + Properties -`` + bq-readcrumb - + -`` + bq-readcrumb-item - + +
+
diff --git a/packages/beeq/src/components/button/_storybook/bq-button.mdx b/packages/beeq/src/components/button/_storybook/bq-button.mdx index c3f7dbb94..2b5a4dd2e 100644 --- a/packages/beeq/src/components/button/_storybook/bq-button.mdx +++ b/packages/beeq/src/components/button/_storybook/bq-button.mdx @@ -1,24 +1,28 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Button +
+
+ Button -Buttons are a crucial element of user interface design. -They allow users to interact with the system and perform actions such as submitting a form, navigating to a new page, or confirming a selection. + Buttons are a crucial element of user interface design. + They allow users to interact with the system and perform actions such as submitting a form, navigating to a new page, or confirming a selection. -Usage + Usage -When using buttons in your user interface design, it's important to follow some best practices to ensure they are effective and user-friendly. Here are some guidelines to keep in mind: + When using buttons in your user interface design, it's important to follow some best practices to ensure they are effective and user-friendly. Here are some guidelines to keep in mind: -- Use buttons sparingly to avoid cluttering the interface. -- Use contrasting colors for the button and text to make them stand out. -- Use appropriate button types, such as primary, secondary, and tertiary, to indicate the importance of the action. -- Use icons in addition to text to convey the action of the button. + - Use buttons sparingly to avoid cluttering the interface. + - Use contrasting colors for the button and text to make them stand out. + - Use appropriate button types, such as primary, secondary, and tertiary, to indicate the importance of the action. + - Use icons in addition to text to convey the action of the button. - 👍 When to use + 👍 When to use -Buttons should be used for actions that are important for the user to perform, such as submitting a form, navigating to a new page, or confirming a selection. -**They should not be used for actions that can be performed through other means, such as clicking on a link.** + Buttons should be used for actions that are important for the user to perform, such as submitting a form, navigating to a new page, or confirming a selection. + **They should not be used for actions that can be performed through other means, such as clicking on a link.** -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/checkbox/_storybook/bq-checkbox.mdx b/packages/beeq/src/components/checkbox/_storybook/bq-checkbox.mdx index 8abd44f60..508122b46 100644 --- a/packages/beeq/src/components/checkbox/_storybook/bq-checkbox.mdx +++ b/packages/beeq/src/components/checkbox/_storybook/bq-checkbox.mdx @@ -1,30 +1,34 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Checkbox +
+
+ Checkbox -The checkbox is a UI component that allows users to select one or more options from a list of choices. -It is commonly used in forms, surveys, and settings pages. + The checkbox is a UI component that allows users to select one or more options from a list of choices. + It is commonly used in forms, surveys, and settings pages. -Usage + Usage -When using checkboxes, it's important to keep in mind the following best practices: + When using checkboxes, it's important to keep in mind the following best practices: -1. Use checkboxes for selecting multiple options from a list. This is helpful when options are not mutually exclusive. -2. Use clear and concise labels for each checkbox option. Avoid jargon or ambiguous language. -3. Group related checkbox options together and label them appropriately. This helps users understand option relationships and make a decision. -4. Minimize cognitive load by using sensible default values. Ensure default values make sense for users or they may become confused. -5. Use a single column layout for a list of checkboxes for easy reading and selection. This ensures checkboxes are large enough to be clicked. + 1. Use checkboxes for selecting multiple options from a list. This is helpful when options are not mutually exclusive. + 2. Use clear and concise labels for each checkbox option. Avoid jargon or ambiguous language. + 3. Group related checkbox options together and label them appropriately. This helps users understand option relationships and make a decision. + 4. Minimize cognitive load by using sensible default values. Ensure default values make sense for users or they may become confused. + 5. Use a single column layout for a list of checkboxes for easy reading and selection. This ensures checkboxes are large enough to be clicked. -By following these best practices, you can ensure that your checkboxes are effective and user-friendly. + By following these best practices, you can ensure that your checkboxes are effective and user-friendly. -👍 When to use + 👍 When to use -Checkboxes should be used when: + Checkboxes should be used when: -- The user needs to select one or more options from a list of choices. -- The options are independent of each other. -- The user needs to see all the options at once. + - The user needs to select one or more options from a list of choices. + - The options are independent of each other. + - The user needs to see all the options at once. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/dialog/_storybook/bq-dialog.mdx b/packages/beeq/src/components/dialog/_storybook/bq-dialog.mdx index 41875bbd6..0b07d077e 100644 --- a/packages/beeq/src/components/dialog/_storybook/bq-dialog.mdx +++ b/packages/beeq/src/components/dialog/_storybook/bq-dialog.mdx @@ -1,24 +1,28 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Dialog +
+
+ Dialog -Description A Dialog is a UI component used to display additional content or prompt a user for action. -It provides a way to display additional information, options, or controls in a separate, non-obstructive interface element. + Description A Dialog is a UI component used to display additional content or prompt a user for action. + It provides a way to display additional information, options, or controls in a separate, non-obstructive interface element. -Usage + Usage -To ensure a seamless user experience and maximize the effectiveness of the Dialog Modal component, it is recommended to follow these best practices: + To ensure a seamless user experience and maximize the effectiveness of the Dialog Modal component, it is recommended to follow these best practices: -- Keep it simple: Avoid overwhelming the user with excessive content within the Dialog Modal. Strive for simplicity and present only the essential information or options necessary to complete the intended action or convey the message. -- Use a clear and concise title: Provide a descriptive title that clearly communicates the purpose or content of the Dialog Modal. This helps users quickly understand the context and relevance of the dialog. -- Prioritize actions: If there are multiple actions within the Dialog Modal, make sure to present them in an order that helps users easily identify and choose the appropriate action. Consider using clear call-to-action buttons with descriptive labels to guide the user. + - Keep it simple: Avoid overwhelming the user with excessive content within the Dialog Modal. Strive for simplicity and present only the essential information or options necessary to complete the intended action or convey the message. + - Use a clear and concise title: Provide a descriptive title that clearly communicates the purpose or content of the Dialog Modal. This helps users quickly understand the context and relevance of the dialog. + - Prioritize actions: If there are multiple actions within the Dialog Modal, make sure to present them in an order that helps users easily identify and choose the appropriate action. Consider using clear call-to-action buttons with descriptive labels to guide the user. -👍 When to use + 👍 When to use -- Displaying additional information, options, or controls that are relevant to a specific task or action. -- Prompting a user for confirmation or input, such as when performing a potentially destructive action or making changes to a critical setting. -- Providing a way for users to access related content or features without navigating away from the current interface. + - Displaying additional information, options, or controls that are relevant to a specific task or action. + - Prompting a user for confirmation or input, such as when performing a potentially destructive action or making changes to a critical setting. + - Providing a way for users to access related content or features without navigating away from the current interface. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/divider/_storybook/bq-divider.mdx b/packages/beeq/src/components/divider/_storybook/bq-divider.mdx index 4a805848d..0103c5fdd 100644 --- a/packages/beeq/src/components/divider/_storybook/bq-divider.mdx +++ b/packages/beeq/src/components/divider/_storybook/bq-divider.mdx @@ -1,26 +1,30 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Divider +
+
+ Divider -A Divider is a UI component that visually separates or divides different sections or elements of a user interface. -This can be helpful in creating a clear and organized layout, improving the overall readability of the interface. + A Divider is a UI component that visually separates or divides different sections or elements of a user interface. + This can be helpful in creating a clear and organized layout, improving the overall readability of the interface. -Usage + Usage -- Use dividers consistently throughout the interface to maintain a clear and consistent look and feel. -- Consider using different styles or colors for dividers to indicate different types of sections or elements. -- Use dividers to create a sense of hierarchy or order within the interface. -- Avoid overusing dividers, as this can create a cluttered and busy appearance. -- Avoid using dividers in a way that creates confusion, such as by separating elements that should be considered together. -- Avoid using dividers in a way that blocks or hides other parts of the interface, reducing visibility and usability. + - Use dividers consistently throughout the interface to maintain a clear and consistent look and feel. + - Consider using different styles or colors for dividers to indicate different types of sections or elements. + - Use dividers to create a sense of hierarchy or order within the interface. + - Avoid overusing dividers, as this can create a cluttered and busy appearance. + - Avoid using dividers in a way that creates confusion, such as by separating elements that should be considered together. + - Avoid using dividers in a way that blocks or hides other parts of the interface, reducing visibility and usability. -👍 When to use + 👍 When to use -- Use a divider component to visually separate or divide different sections or elements of a user interface. -- Use a divider component to create clear boundaries between different sections or elements, such as between different sections of content or different groups of related items. -- Use a divider component to group similar items, such as a list of related links or buttons. -- Use a divider component to create a sense of hierarchy or order within the interface. + - Use a divider component to visually separate or divide different sections or elements of a user interface. + - Use a divider component to create clear boundaries between different sections or elements, such as between different sections of content or different groups of related items. + - Use a divider component to group similar items, such as a list of related links or buttons. + - Use a divider component to create a sense of hierarchy or order within the interface. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.mdx b/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.mdx index a4906d4d1..f4f99e36d 100644 --- a/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.mdx +++ b/packages/beeq/src/components/dropdown/_storybook/bq-dropdown.mdx @@ -1,37 +1,41 @@ import { ArgTypes, Stories, Title, Subtitle } from '@storybook/addon-docs'; -Dropdown +
+
+ Dropdown -The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen. They provide an efficient way to save space and present a long list of options in a compact and organized manner. -Dropdowns are commonly used in navigation menus, forms, and other interactive elements where users need to select from a list of options. + The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen. They provide an efficient way to save space and present a long list of options in a compact and organized manner. + Dropdowns are commonly used in navigation menus, forms, and other interactive elements where users need to select from a list of options. -Usage + Usage -- Providing users with a list of options in a compact and organized manner, such as by displaying a dropdown menu, a select box, or a list of options. -- Allowing users to quickly and easily select one or multiple options from the list, so that they can complete a task or make a choice. -- Providing a clear and concise way to display options, so that users can easily see and understand the content. -- Allowing users to type or search for specific options within the dropdown, so that they can quickly find the options that they need. + - Providing users with a list of options in a compact and organized manner, such as by displaying a dropdown menu, a select box, or a list of options. + - Allowing users to quickly and easily select one or multiple options from the list, so that they can complete a task or make a choice. + - Providing a clear and concise way to display options, so that users can easily see and understand the content. + - Allowing users to type or search for specific options within the dropdown, so that they can quickly find the options that they need. -To display a dropdown you need to have a trigger element (e.g.: `bq-button`, `bq-avatar`, etc) and all the elements insinde the panel (e.g.: `bq-option`). -The Dropdown Component has as dependency the `bq-panel` utility component. + To display a dropdown you need to have a trigger element (e.g.: `bq-button`, `bq-avatar`, etc) and all the elements insinde the panel (e.g.: `bq-option`). + The Dropdown Component has as dependency the `bq-panel` utility component. -👍 When to use + 👍 When to use -Do's + Do's -- Use clear and concise language for the options in the dropdown, so that users can easily understand the context and meaning of the content. -- Use visually distinct styles and colors for the options in the dropdown, so that users can easily see and understand the type and importance of the content. -- Ensure that the dropdown component is responsive and easy to use, with a smooth and intuitive interaction that is accessible to users with different abilities and needs. -- Provide clear and concise instructions or actions for users to select options or close the dropdown, so that they can complete their task or interaction. -- Consider the use of keyboard navigation, so that users can easily navigate and select options within the dropdown using their keyboard. + - Use clear and concise language for the options in the dropdown, so that users can easily understand the context and meaning of the content. + - Use visually distinct styles and colors for the options in the dropdown, so that users can easily see and understand the type and importance of the content. + - Ensure that the dropdown component is responsive and easy to use, with a smooth and intuitive interaction that is accessible to users with different abilities and needs. + - Provide clear and concise instructions or actions for users to select options or close the dropdown, so that they can complete their task or interaction. + - Consider the use of keyboard navigation, so that users can easily navigate and select options within the dropdown using their keyboard. -Don'ts + Don'ts -- Use dropdowns in a way that interferes with other elements on the page or with other interactions, such as covering important content or blocking links or buttons. -- Use dropdowns for options that are not important or relevant, as this can lead to confusion or frustration for users. -- Use dropdowns in a way that is misleading or inaccurate, as this can erode trust and credibility with users. -- Use dropdowns in a way that makes it difficult for users to see or understand the options, such as by using small or unclear text or by displaying too many options at once. + - Use dropdowns in a way that interferes with other elements on the page or with other interactions, such as covering important content or blocking links or buttons. + - Use dropdowns for options that are not important or relevant, as this can lead to confusion or frustration for users. + - Use dropdowns in a way that is misleading or inaccurate, as this can erode trust and credibility with users. + - Use dropdowns in a way that makes it difficult for users to see or understand the options, such as by using small or unclear text or by displaying too many options at once. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/icon/_storybook/bq-icon.mdx b/packages/beeq/src/components/icon/_storybook/bq-icon.mdx index f43e63b20..dde7bfeda 100644 --- a/packages/beeq/src/components/icon/_storybook/bq-icon.mdx +++ b/packages/beeq/src/components/icon/_storybook/bq-icon.mdx @@ -1,30 +1,34 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Icons +
+
+ Icons -The Icon component is a visual representation of an object, action, or concept. -It is a small graphical element that is used to enhance the user interface and improve user experience. -The Icon component can be used in various ways, such as navigation bars, toolbars, buttons, menus, and so on. -Bee-Q icons are based on [Phosphor icons library](https://phosphoricons.com/), is a flexible icon family for interfaces, diagrams, presentations — whatever, really, is free and open-source, licensed under MIT. + The Icon component is a visual representation of an object, action, or concept. + It is a small graphical element that is used to enhance the user interface and improve user experience. + The Icon component can be used in various ways, such as navigation bars, toolbars, buttons, menus, and so on. + Bee-Q icons are based on [Phosphor icons library](https://phosphoricons.com/), is a flexible icon family for interfaces, diagrams, presentations — whatever, really, is free and open-source, licensed under MIT. -Usage + Usage -The Icon component should adhere to the following user experience best practices: + The Icon component should adhere to the following user experience best practices: -- Use meaningful and recognizable icons that are easily recognizable and convey the intended meaning without any explanation. -- Keep the icons simple and easy to understand, avoiding complex icons that may confuse users. -- Use consistent icons throughout the application to improve users' ability to recognize them. -- Adjust the size and spacing of the icons appropriately for their intended use, as icons that are too small or too large can be difficult to see and use. -- Use color to enhance the visual appeal of the icons, but ensure that the colors are consistent with the overall design of the application. + - Use meaningful and recognizable icons that are easily recognizable and convey the intended meaning without any explanation. + - Keep the icons simple and easy to understand, avoiding complex icons that may confuse users. + - Use consistent icons throughout the application to improve users' ability to recognize them. + - Adjust the size and spacing of the icons appropriately for their intended use, as icons that are too small or too large can be difficult to see and use. + - Use color to enhance the visual appeal of the icons, but ensure that the colors are consistent with the overall design of the application. -👍 When to use + 👍 When to use -The Icon component can be used in various ways, such as: + The Icon component can be used in various ways, such as: -- Navigation - Use icons to represent different sections of the application, such as home, settings, profile, and so on. -- Action buttons - Use icons to represent different actions, such as save, delete, edit, and so on. -- Status indicators - Use icons to indicate the status of an object, such as success, error, warning, and so on. + - Navigation - Use icons to represent different sections of the application, such as home, settings, profile, and so on. + - Action buttons - Use icons to represent different actions, such as save, delete, edit, and so on. + - Status indicators - Use icons to indicate the status of an object, such as success, error, warning, and so on. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/input/_storybook/bq-input.mdx b/packages/beeq/src/components/input/_storybook/bq-input.mdx index 2f5c199ba..0942550fa 100644 --- a/packages/beeq/src/components/input/_storybook/bq-input.mdx +++ b/packages/beeq/src/components/input/_storybook/bq-input.mdx @@ -1,25 +1,29 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Input +
+
+ Input -The Input component is a fundamental user interface element that allows users to input data by typing it into a text field. It is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms. + The Input component is a fundamental user interface element that allows users to input data by typing it into a text field. It is commonly used in web and mobile applications for various purposes, such as collecting user information, search inputs, and login forms. -Usage + Usage -- Do use the Input component to provide a visual and interactive way for users to input data. -- Do make the Input component accessible by providing appropriate labels and helpful hints. -- Do provide appropriate input validation to enhance data integrity and prevent errors. -- Do test the Input component across different browsers and devices for compatibility and responsiveness. + - Do use the Input component to provide a visual and interactive way for users to input data. + - Do make the Input component accessible by providing appropriate labels and helpful hints. + - Do provide appropriate input validation to enhance data integrity and prevent errors. + - Do test the Input component across different browsers and devices for compatibility and responsiveness. -👍 When to use + 👍 When to use -The Input component should be used when you need to collect user input, such as: + The Input component should be used when you need to collect user input, such as: -- Capturing personal information in registration or signup forms. -- Implementing search functionality for filtering data. -- Entering login credentials. -- Allowing users to submit comments, messages, or feedback. + - Capturing personal information in registration or signup forms. + - Implementing search functionality for filtering data. + - Entering login credentials. + - Allowing users to submit comments, messages, or feedback. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/notification/_storybook/bq-notification.mdx b/packages/beeq/src/components/notification/_storybook/bq-notification.mdx index f3250a2c3..4074fc685 100644 --- a/packages/beeq/src/components/notification/_storybook/bq-notification.mdx +++ b/packages/beeq/src/components/notification/_storybook/bq-notification.mdx @@ -1,23 +1,27 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Notification +
+
+ Notification -The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner. -It is a valuable tool in web development for notifying users about specific actions or events that are important for them to know, -such as displaying system messages, error messages, success messages, and other types of alerts. + The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner. + It is a valuable tool in web development for notifying users about specific actions or events that are important for them to know, + such as displaying system messages, error messages, success messages, and other types of alerts. -Usage + Usage -- Use notifications to inform users about important events or actions such as successful login, account creation, and password reset. -- Use notifications to inform users about errors or warnings such as incorrect login credentials, network errors, or session timeouts. -- Use notifications to provide users with feedback about their actions such as a successful submission of a form or a message that a file has been uploaded successfully. -- Use notifications to inform users about system status such as maintenance downtime or system upgrades. + - Use notifications to inform users about important events or actions such as successful login, account creation, and password reset. + - Use notifications to inform users about errors or warnings such as incorrect login credentials, network errors, or session timeouts. + - Use notifications to provide users with feedback about their actions such as a successful submission of a form or a message that a file has been uploaded successfully. + - Use notifications to inform users about system status such as maintenance downtime or system upgrades. -👍 When to use + 👍 When to use -- When you need to inform users about important events, actions, errors, warnings, or system status. -- When you need to provide users with feedback about their actions or submissions. + - When you need to inform users about important events, actions, errors, warnings, or system status. + - When you need to provide users with feedback about their actions or submissions. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/option-list/bq-option-list.tsx b/packages/beeq/src/components/option-list/bq-option-list.tsx index 41af24143..b0ca2cf70 100644 --- a/packages/beeq/src/components/option-list/bq-option-list.tsx +++ b/packages/beeq/src/components/option-list/bq-option-list.tsx @@ -29,7 +29,7 @@ export class BqOptionList { // Prop lifecycle events // ======================= - /** If true, the option is selected and active. */ + /** Aria label for the list. */ @Prop({ reflect: true }) ariaLabel: string = 'Options'; // Events section diff --git a/packages/beeq/src/components/option-list/readme.md b/packages/beeq/src/components/option-list/readme.md index d46e310c6..e2a259752 100644 --- a/packages/beeq/src/components/option-list/readme.md +++ b/packages/beeq/src/components/option-list/readme.md @@ -7,9 +7,9 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | ------------------------------------------- | -------- | ----------- | -| `ariaLabel` | `aria-label` | If true, the option is selected and active. | `string` | `'Options'` | +| Property | Attribute | Description | Type | Default | +| ----------- | ------------ | ------------------------ | -------- | ----------- | +| `ariaLabel` | `aria-label` | Aria label for the list. | `string` | `'Options'` | ## Events diff --git a/packages/beeq/src/components/option/_storybook/bq-option.mdx b/packages/beeq/src/components/option/_storybook/bq-option.mdx index 6d8f1ecef..11a711e5c 100644 --- a/packages/beeq/src/components/option/_storybook/bq-option.mdx +++ b/packages/beeq/src/components/option/_storybook/bq-option.mdx @@ -1,25 +1,39 @@ import { ArgTypes, Stories, Title, Subtitle } from '@storybook/addon-docs'; -Option +
+
+ Option -An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user. -It can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list. + An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user. + It can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list. -Usage + Usage -It is used with the `` component and `` component, typically to display a dropdown list. + It is used with the `` component and `` component, typically to display a dropdown list. -👍 When to use + 👍 When to use -Dropdown lists of options are used when presenting a list of selectable options that are too numerous to fit comfortably on the screen. -They provide an efficient way to save space and present a long list of options in a compact and organized manner. -Some of the use cases where dropdown components can be used: + Dropdown lists of options are used when presenting a list of selectable options that are too numerous to fit comfortably on the screen. + They provide an efficient way to save space and present a long list of options in a compact and organized manner. + Some of the use cases where dropdown components can be used: -- Navigation -- Filtering and sorting -- Configuring settings -- Selecting from a large list of options + - Navigation + - Filtering and sorting + - Configuring settings + - Selecting from a large list of options -Properties + Properties - + bq-option + + + + bq-option-list + + + + bq-option-group + + +
+
diff --git a/packages/beeq/src/components/radio-group/_storybook/bq-radio-group.mdx b/packages/beeq/src/components/radio-group/_storybook/bq-radio-group.mdx index 06fc75ad9..29dadcf88 100644 --- a/packages/beeq/src/components/radio-group/_storybook/bq-radio-group.mdx +++ b/packages/beeq/src/components/radio-group/_storybook/bq-radio-group.mdx @@ -1,39 +1,43 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Radio group +
+
+ Radio group -Radio buttons are a type of form element that allows users to select a single option from a list of two or more options. -They are commonly used in forms, surveys, and quizzes. + Radio buttons are a type of form element that allows users to select a single option from a list of two or more options. + They are commonly used in forms, surveys, and quizzes. -Usage + Usage -When using radio button components in your forms or surveys, it is important to follow certain best practices to ensure a positive user experience. Here are some additional usage best practices to consider: + When using radio button components in your forms or surveys, it is important to follow certain best practices to ensure a positive user experience. Here are some additional usage best practices to consider: -- Use radio buttons consistently throughout the form or survey to create a clear and predictable user experience. Inconsistency can lead to confusion and frustration for users. -- Use radio buttons sparingly to avoid overwhelming the user with too many options. Too many options can lead to decision paralysis and deter users from completing the form or survey. -- Use radio buttons to provide the user with a limited set of options that are relevant to the task at hand. Offering too many irrelevant options can be distracting and frustrating for users. -- Use radio buttons in conjunction with other form elements, such as text inputs and drop-down menus, to provide a more flexible and user-friendly interface. This can help accommodate a variety of user preferences and needs. + - Use radio buttons consistently throughout the form or survey to create a clear and predictable user experience. Inconsistency can lead to confusion and frustration for users. + - Use radio buttons sparingly to avoid overwhelming the user with too many options. Too many options can lead to decision paralysis and deter users from completing the form or survey. + - Use radio buttons to provide the user with a limited set of options that are relevant to the task at hand. Offering too many irrelevant options can be distracting and frustrating for users. + - Use radio buttons in conjunction with other form elements, such as text inputs and drop-down menus, to provide a more flexible and user-friendly interface. This can help accommodate a variety of user preferences and needs. -**Points to Consider** + **Points to Consider** -- Consider the order of the options. Arrange the options in a logical and meaningful order that makes sense to the user. -- Consider the language and tone of the labels. Use language that is familiar to the user and matches the tone of the overall form or survey. -- Consider the visual design of the radio buttons. Ensure that the radio buttons are easy to see and use, and that they are consistent with the overall design of the form or survey. -- Consider the accessibility of the radio buttons. Ensure that the radio buttons can be easily used by users with disabilities, including those who use assistive technology. + - Consider the order of the options. Arrange the options in a logical and meaningful order that makes sense to the user. + - Consider the language and tone of the labels. Use language that is familiar to the user and matches the tone of the overall form or survey. + - Consider the visual design of the radio buttons. Ensure that the radio buttons are easy to see and use, and that they are consistent with the overall design of the form or survey. + - Consider the accessibility of the radio buttons. Ensure that the radio buttons can be easily used by users with disabilities, including those who use assistive technology. -👍 When to use + 👍 When to use -Radio buttons are best used when: + Radio buttons are best used when: -- Users need to select only one option from a list of options -- Users need to compare their options + - Users need to select only one option from a list of options + - Users need to compare their options -Properties + Properties -Radio group (`bq-radio-group`) + bq-radio-group - + -Radio(`bq-radio`) + bq-radio - + +
+
diff --git a/packages/beeq/src/components/select/_storybook/bq-select.mdx b/packages/beeq/src/components/select/_storybook/bq-select.mdx index ef0b6f63e..a5dbdb3fc 100644 --- a/packages/beeq/src/components/select/_storybook/bq-select.mdx +++ b/packages/beeq/src/components/select/_storybook/bq-select.mdx @@ -1,24 +1,28 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Select +
+
+ Select -The Select Component is a UI element used to allow users to select from a list of options. -Select components are commonly used in forms and other applications to provide a convenient way for users to select a value from a list of options. + The Select Component is a UI element used to allow users to select from a list of options. + Select components are commonly used in forms and other applications to provide a convenient way for users to select a value from a list of options. -Usage + Usage -- Allowing users to select from a list of options, such as a list of countries, a list of colors, or a list of dates. -- Filtering or narrowing down a list of options, such as by searching or selecting a category, to make it easier for users to find the option they need. -- Providing a compact and efficient way to select a value from a large list of options, without taking up too much space on the screen. + - Allowing users to select from a list of options, such as a list of countries, a list of colors, or a list of dates. + - Filtering or narrowing down a list of options, such as by searching or selecting a category, to make it easier for users to find the option they need. + - Providing a compact and efficient way to select a value from a large list of options, without taking up too much space on the screen. -👍 When to use + 👍 When to use -Use the Select component when: + Use the Select component when: -- Choosing from a predefined list: Select components are ideal for situations where users need to choose a single option from a predetermined list of options. -- Consistent option selection: If the options available are consistent across users or use cases, a select component provides a standardized and familiar interface for users to make their selections. -- Limited screen space: If screen real estate is limited, a select component can be a space-efficient way of presenting a list of options without cluttering the interface. + - Choosing from a predefined list: Select components are ideal for situations where users need to choose a single option from a predetermined list of options. + - Consistent option selection: If the options available are consistent across users or use cases, a select component provides a standardized and familiar interface for users to make their selections. + - Limited screen space: If screen real estate is limited, a select component can be a space-efficient way of presenting a list of options without cluttering the interface. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/side-menu-item/_storybook/bq-side-menu-item.mdx b/packages/beeq/src/components/side-menu-item/_storybook/bq-side-menu-item.mdx index 5e4223b8c..391c45ddd 100644 --- a/packages/beeq/src/components/side-menu-item/_storybook/bq-side-menu-item.mdx +++ b/packages/beeq/src/components/side-menu-item/_storybook/bq-side-menu-item.mdx @@ -1,23 +1,27 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Side menu item +
+
+ Side menu item -A side menu item is a navigation element typically placed on the side or left-hand side of a web page or application. -It serves as a hierarchical or categorical navigation option, allowing users to access different sections or pages within the application. + A side menu item is a navigation element typically placed on the side or left-hand side of a web page or application. + It serves as a hierarchical or categorical navigation option, allowing users to access different sections or pages within the application. -> The Side menu item component must be used inside the [Side menu component](?path=/docs/components-side-menu--overview) to function properly. + > The Side menu item component must be used inside the [Side menu component](?path=/docs/components-side-menu--overview) to function properly. -Usage + Usage -Use icons and labels: Users often rely on both visual cues and text labels to understand the purpose of each menu item. Use distinct icons or symbols to represent different sections or actions, and accompany them with clear text labels for better accessibility. + Use icons and labels: Users often rely on both visual cues and text labels to understand the purpose of each menu item. Use distinct icons or symbols to represent different sections or actions, and accompany them with clear text labels for better accessibility. -👍 When to use + 👍 When to use -Side menu items are commonly used in web and mobile applications that require a hierarchical or multi-level navigation structure. They are particularly useful when: + Side menu items are commonly used in web and mobile applications that require a hierarchical or multi-level navigation structure. They are particularly useful when: -- Navigating different sections: If your application has multiple sections or modules that need to be accessed frequently, a side menu item can provide quick and easy navigation between these sections. -- Organizing content: Side menu items are beneficial when you have a large amount of content or options that need to be organized in a hierarchical manner. By displaying submenus or nested items, users can easily navigate through different levels of content. + - Navigating different sections: If your application has multiple sections or modules that need to be accessed frequently, a side menu item can provide quick and easy navigation between these sections. + - Organizing content: Side menu items are beneficial when you have a large amount of content or options that need to be organized in a hierarchical manner. By displaying submenus or nested items, users can easily navigate through different levels of content. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/side-menu/_storybook/bq-side-menu.mdx b/packages/beeq/src/components/side-menu/_storybook/bq-side-menu.mdx index 19ae734ad..585f4bc9e 100644 --- a/packages/beeq/src/components/side-menu/_storybook/bq-side-menu.mdx +++ b/packages/beeq/src/components/side-menu/_storybook/bq-side-menu.mdx @@ -1,26 +1,30 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Side Menu +
+
+ Side Menu -Menus are commonly used in user interfaces to provide a hierarchical navigation structure, providing users with a clear and intuitive way to navigate and interact with their application. -The Side Menu Component typically consists of a list of links or icons that allow users to access various sections, pages, or functionalities of an application. It remains collapsed by default and can be triggered to expand or slide in by clicking the footer button. + Menus are commonly used in user interfaces to provide a hierarchical navigation structure, providing users with a clear and intuitive way to navigate and interact with their application. + The Side Menu Component typically consists of a list of links or icons that allow users to access various sections, pages, or functionalities of an application. It remains collapsed by default and can be triggered to expand or slide in by clicking the footer button. -Usage + Usage -The purpose of a Side Menu Component is to offer a consistent and accessible way for users to navigate through an application's content or perform specific actions. It allows users to quickly switch between different sections or views without cluttering the main screen or disrupting the workflow. -Side menus are commonly used in applications with complex hierarchies or a large number of features, such as dashboards, admin panels, or content-heavy applications. -It can be used as the main navigation for the application or as a secondary navigation for specific sections of the application. + The purpose of a Side Menu Component is to offer a consistent and accessible way for users to navigate through an application's content or perform specific actions. It allows users to quickly switch between different sections or views without cluttering the main screen or disrupting the workflow. + Side menus are commonly used in applications with complex hierarchies or a large number of features, such as dashboards, admin panels, or content-heavy applications. + It can be used as the main navigation for the application or as a secondary navigation for specific sections of the application. -Accessibility + Accessibility -The Side Menu Component is accessible to all users, including those with disabilities or who use assistive technologies. It's navigable using the keyboard and includes appropriate ARIA attributes to indicate the menu's role and state. + The Side Menu Component is accessible to all users, including those with disabilities or who use assistive technologies. It's navigable using the keyboard and includes appropriate ARIA attributes to indicate the menu's role and state. -Properties + Properties -Side menu + bq-side-menu - + -Side menu item + bq-side-menu-item - + +
+
diff --git a/packages/beeq/src/components/slider/_storybook/bq-slider.mdx b/packages/beeq/src/components/slider/_storybook/bq-slider.mdx index e16a398ab..9456753e5 100644 --- a/packages/beeq/src/components/slider/_storybook/bq-slider.mdx +++ b/packages/beeq/src/components/slider/_storybook/bq-slider.mdx @@ -1,27 +1,31 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Slider +
+
+ Slider -The Slider component is a UI element that allows users to select a value from a range of values by sliding a thumb along a track. -It is a widely used component in user interfaces and is commonly used to adjust settings, input numerical values, or filter content. + The Slider component is a UI element that allows users to select a value from a range of values by sliding a thumb along a track. + It is a widely used component in user interfaces and is commonly used to adjust settings, input numerical values, or filter content. -Usage + Usage -When designing a user interface, it is important to use Slider components in a way that is intuitive and enhances the user experience. Here are some best practices for using Slider components: + When designing a user interface, it is important to use Slider components in a way that is intuitive and enhances the user experience. Here are some best practices for using Slider components: -- Use a Slider when there is a need to adjust values within a specific range. Sliders are a great choice when you want users to be able to adjust something, but within a predetermined range. -- Use a Slider when the range of values is continuous. Sliders are best suited for continuous data ranges, rather than discrete values. -- Use a Slider when the range of values is small and easy to comprehend. Sliders are most effective when the range of values is small enough to be easily understood by the user. -- Use a Slider when there is a need to provide visual feedback to the user. Sliders provide visual feedback that can be very helpful to users, especially when used in combination with other UI elements such as charts or graphs. + - Use a Slider when there is a need to adjust values within a specific range. Sliders are a great choice when you want users to be able to adjust something, but within a predetermined range. + - Use a Slider when the range of values is continuous. Sliders are best suited for continuous data ranges, rather than discrete values. + - Use a Slider when the range of values is small and easy to comprehend. Sliders are most effective when the range of values is small enough to be easily understood by the user. + - Use a Slider when there is a need to provide visual feedback to the user. Sliders provide visual feedback that can be very helpful to users, especially when used in combination with other UI elements such as charts or graphs. -👍 When to use + 👍 When to use -Sliders are a versatile UI element that can be used in a variety of situations. Here are some situations where using a Slider is a good choice: + Sliders are a versatile UI element that can be used in a variety of situations. Here are some situations where using a Slider is a good choice: -- When there is a need to adjust settings or input numerical values. Sliders are a great way to allow users to adjust settings such as volume, brightness, or font size. -- When the range of values is continuous and easy to comprehend. Sliders are best suited for continuous data ranges, rather than discrete values. -- When there is a need to provide visual feedback to the user. Sliders provide visual feedback that can be very helpful to users, especially when used in combination with other UI elements such as charts or graphs. + - When there is a need to adjust settings or input numerical values. Sliders are a great way to allow users to adjust settings such as volume, brightness, or font size. + - When the range of values is continuous and easy to comprehend. Sliders are best suited for continuous data ranges, rather than discrete values. + - When there is a need to provide visual feedback to the user. Sliders provide visual feedback that can be very helpful to users, especially when used in combination with other UI elements such as charts or graphs. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/spinner/_storybook/bq-spinner.mdx b/packages/beeq/src/components/spinner/_storybook/bq-spinner.mdx index d778f8fd1..af9959822 100644 --- a/packages/beeq/src/components/spinner/_storybook/bq-spinner.mdx +++ b/packages/beeq/src/components/spinner/_storybook/bq-spinner.mdx @@ -1,25 +1,29 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Spinner +
+
+ Spinner -The Spinner Component is a UI element used to indicate that an application is loading or processing data. -Spinners are commonly used to provide feedback to the user when an action or request is being processed. -This allows the user to know that the application is still working and that they should wait for the result. + The Spinner Component is a UI element used to indicate that an application is loading or processing data. + Spinners are commonly used to provide feedback to the user when an action or request is being processed. + This allows the user to know that the application is still working and that they should wait for the result. -Usage + Usage -- Use the Spinner component to indicate to the user that something is happening behind the scenes, such as a long-running process or data retrieval. -- Use the Spinner component to indicate to the user that something is happening behind the scenes, such as a long-running process or data retrieval. -- Use the Spinner component when the user has initiated an action that will take some time to complete, such as submitting a form or retrieving large amounts of data. -- Use the Spinner component sparingly and only when necessary. Overuse of the Spinner component can be distracting and frustrating to the user. -- Use a clear and concise message to accompany the Spinner component, such as "Loading" or "Please wait". + - Use the Spinner component to indicate to the user that something is happening behind the scenes, such as a long-running process or data retrieval. + - Use the Spinner component to indicate to the user that something is happening behind the scenes, such as a long-running process or data retrieval. + - Use the Spinner component when the user has initiated an action that will take some time to complete, such as submitting a form or retrieving large amounts of data. + - Use the Spinner component sparingly and only when necessary. Overuse of the Spinner component can be distracting and frustrating to the user. + - Use a clear and concise message to accompany the Spinner component, such as "Loading" or "Please wait". -👍 When to use + 👍 When to use -- When the user initiates an action that will take some time to complete. -- When data is being retrieved or processed in the background. -- When there is a delay in the application's response time. + - When the user initiates an action that will take some time to complete. + - When data is being retrieved or processed in the background. + - When there is a delay in the application's response time. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/status/_storybook/bq-status.mdx b/packages/beeq/src/components/status/_storybook/bq-status.mdx index ab23a9055..7e2fe5913 100644 --- a/packages/beeq/src/components/status/_storybook/bq-status.mdx +++ b/packages/beeq/src/components/status/_storybook/bq-status.mdx @@ -1,24 +1,28 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Status +
+
+ Status -The Status Component is a UI element that communicates the status of an item, task, or process to the user. -Statuses are commonly used to indicate the current state of an item, such as "completed" or "pending", or to provide updates on the progress of a task or process. + The Status Component is a UI element that communicates the status of an item, task, or process to the user. + Statuses are commonly used to indicate the current state of an item, such as "completed" or "pending", or to provide updates on the progress of a task or process. -Usage + Usage -When using a Status Component, it's important to maintain clear and consistent language to describe the status of an item, task, or process across the entire application. -This helps to avoid confusion or misunderstanding among users, as they will be able to easily understand the meaning of different statuses regardless of where they encounter them. -By maintaining consistency, you can also establish a clear pattern for users to follow, which can help them to navigate and use your application more effectively. + When using a Status Component, it's important to maintain clear and consistent language to describe the status of an item, task, or process across the entire application. + This helps to avoid confusion or misunderstanding among users, as they will be able to easily understand the meaning of different statuses regardless of where they encounter them. + By maintaining consistency, you can also establish a clear pattern for users to follow, which can help them to navigate and use your application more effectively. -👍 When to use + 👍 When to use -The Status Component is used for: + The Status Component is used for: -- Communicating the status of an item, task, or process, such as indicating whether a task is complete or pending, or the progress of a task or process. -- Providing updates and notifications about changes in the status of an item, task, or process, such as when a task has been completed or a process has been initiated. -- Indicating the outcome of an action, such as whether a task was successful or failed. + - Communicating the status of an item, task, or process, such as indicating whether a task is complete or pending, or the progress of a task or process. + - Providing updates and notifications about changes in the status of an item, task, or process, such as when a task has been completed or a process has been initiated. + - Indicating the outcome of an action, such as whether a task was successful or failed. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/switch/_storybook/bq-switch.mdx b/packages/beeq/src/components/switch/_storybook/bq-switch.mdx index 6a25538a5..e4572184b 100644 --- a/packages/beeq/src/components/switch/_storybook/bq-switch.mdx +++ b/packages/beeq/src/components/switch/_storybook/bq-switch.mdx @@ -1,27 +1,31 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Switch +
+
+ Switch -The Switch component is a UI element that provides a switch-like interface to toggle a specific setting or option. -It consists of a button or a switch that can be turned on or off, depending on the user's preference. + The Switch component is a UI element that provides a switch-like interface to toggle a specific setting or option. + It consists of a button or a switch that can be turned on or off, depending on the user's preference. -Usage + Usage -Here are some best practices to follow when using the Switch component: + Here are some best practices to follow when using the Switch component: -- Use the Switch component when you want to allow users to turn a setting or option on or off quickly and easily. -- Use clear and descriptive labels that accurately describe the function of the Switch component. -- Always provide visual feedback when the Switch component is switched on or off. -- Use Switch components only for simple on/off settings. If you have more complex settings, use a different interface element such as a checkbox or dropdown menu. + - Use the Switch component when you want to allow users to turn a setting or option on or off quickly and easily. + - Use clear and descriptive labels that accurately describe the function of the Switch component. + - Always provide visual feedback when the Switch component is switched on or off. + - Use Switch components only for simple on/off settings. If you have more complex settings, use a different interface element such as a checkbox or dropdown menu. -👍 When to use + 👍 When to use -The Switch component is ideal for use in the following scenarios: + The Switch component is ideal for use in the following scenarios: -- When the user needs to turn a setting on or off quickly and easily. -- When the setting is simple and requires only two options. -- When the setting is frequently toggled on and off. + - When the user needs to turn a setting on or off quickly and easily. + - When the setting is simple and requires only two options. + - When the setting is frequently toggled on and off. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/tab-group/_storybook/bq-tab-group.mdx b/packages/beeq/src/components/tab-group/_storybook/bq-tab-group.mdx index dc0cd7cba..eabc3ec84 100644 --- a/packages/beeq/src/components/tab-group/_storybook/bq-tab-group.mdx +++ b/packages/beeq/src/components/tab-group/_storybook/bq-tab-group.mdx @@ -1,32 +1,36 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Tabs or Tab Group +
+
+ Tabs or Tab Group -The Tabs component is a user interface (UI) element that you can use to display content in multiple sections, allowing only one section to be visible at a time. -Tabs are typically placed in a horizontal bar that displays clickable buttons with labels for each section. -Tabs provide a clean and organized display of content, making it easier for users to navigate and understand the information presented. + The Tabs component is a user interface (UI) element that you can use to display content in multiple sections, allowing only one section to be visible at a time. + Tabs are typically placed in a horizontal bar that displays clickable buttons with labels for each section. + Tabs provide a clean and organized display of content, making it easier for users to navigate and understand the information presented. -Usage + Usage -- Use a clear and consistent visual hierarchy to indicate which sections are most important or relevant to the user. -- Consider using icons or images in addition to text labels to make the purpose of each section more clear and visually appealing. -- Ensure that the tab bar is visible and easily accessible at all times, even when the user scrolls through the page or interface. -- Consider providing a default tab selection to avoid confusion for users who may not know which section to select first. -- Avoid using too many colors or visual effects, as this can distract from the content and make the interface appear cluttered or overwhelming. -- Consider using animations or transitions to provide visual feedback when the user selects a new tab or section. -- Test the Tabs component with real users to ensure that it is intuitive and meets their needs and expectations. + - Use a clear and consistent visual hierarchy to indicate which sections are most important or relevant to the user. + - Consider using icons or images in addition to text labels to make the purpose of each section more clear and visually appealing. + - Ensure that the tab bar is visible and easily accessible at all times, even when the user scrolls through the page or interface. + - Consider providing a default tab selection to avoid confusion for users who may not know which section to select first. + - Avoid using too many colors or visual effects, as this can distract from the content and make the interface appear cluttered or overwhelming. + - Consider using animations or transitions to provide visual feedback when the user selects a new tab or section. + - Test the Tabs component with real users to ensure that it is intuitive and meets their needs and expectations. -👍 When to use + 👍 When to use -- Use the Tabs component when you have a large amount of content that can be divided into distinct, related sections. -- Use the Tabs component when you want to simplify the navigation of a complex interface, by dividing it into smaller, more manageable sections. + - Use the Tabs component when you have a large amount of content that can be divided into distinct, related sections. + - Use the Tabs component when you want to simplify the navigation of a complex interface, by dividing it into smaller, more manageable sections. -Properties + Properties -Tab group (`bq-tab-group`) + bq-tab-group - + -Tab (`bq-tab`) + bq-tab - + +
+
diff --git a/packages/beeq/src/components/tab/_storybook/bq-tab.mdx b/packages/beeq/src/components/tab/_storybook/bq-tab.mdx index 97e87827b..94328b03c 100644 --- a/packages/beeq/src/components/tab/_storybook/bq-tab.mdx +++ b/packages/beeq/src/components/tab/_storybook/bq-tab.mdx @@ -1,9 +1,13 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Tab +
+
+ Tab -The Tab component must be used inside the [Tab group component](?path=/docs/components-tabs--overview) (`bq-tab-group`) to function properly. + The Tab component must be used inside the [Tab group component](?path=/docs/components-tabs--overview) (`bq-tab-group`) to function properly. -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/textarea/_storybook/bq-textarea.mdx b/packages/beeq/src/components/textarea/_storybook/bq-textarea.mdx index f9d633222..d419db281 100644 --- a/packages/beeq/src/components/textarea/_storybook/bq-textarea.mdx +++ b/packages/beeq/src/components/textarea/_storybook/bq-textarea.mdx @@ -1,31 +1,35 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Textarea +
+
+ Textarea -The Textarea component is a multi-line text input control that is often used in a form to collect user inputs like comments or reviews. + The Textarea component is a multi-line text input control that is often used in a form to collect user inputs like comments or reviews. -Usage + Usage -Some of the best practices for using the Textarea component are: + Some of the best practices for using the Textarea component are: -- **Use a label**: Always associate a `
+
diff --git a/packages/beeq/src/components/toast/_storybook/bq-toast.mdx b/packages/beeq/src/components/toast/_storybook/bq-toast.mdx index 6145319b9..3342439f0 100644 --- a/packages/beeq/src/components/toast/_storybook/bq-toast.mdx +++ b/packages/beeq/src/components/toast/_storybook/bq-toast.mdx @@ -1,19 +1,23 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -Toast +
+
+ Toast -The Toast Component is a UI element used to provide short, non-interruptive notifications to users. + The Toast Component is a UI element used to provide short, non-interruptive notifications to users. -Usage + Usage -Toasts are typically displayed briefly at the bottom of the screen and disappear after a short amount of time. Toasts are commonly used to provide confirmation messages, error messages, or progress updates. + Toasts are typically displayed briefly at the bottom of the screen and disappear after a short amount of time. Toasts are commonly used to provide confirmation messages, error messages, or progress updates. -👍 When to use + 👍 When to use -- Providing confirmation messages for actions, such as confirming the successful submission of a form or successful completion of a task. -- Displaying error messages for issues or problems, such as indicating a required field is missing or a network error has occurred. -- Presenting progress updates for long-running actions, such as indicating the status of a download or the progress of a task + - Providing confirmation messages for actions, such as confirming the successful submission of a form or successful completion of a task. + - Displaying error messages for issues or problems, such as indicating a required field is missing or a network error has occurred. + - Presenting progress updates for long-running actions, such as indicating the status of a download or the progress of a task -Properties + Properties - + +
+
diff --git a/packages/beeq/src/components/tooltip/_storybook/bq-tooltip.mdx b/packages/beeq/src/components/tooltip/_storybook/bq-tooltip.mdx index 30b6fef70..5461e72d5 100644 --- a/packages/beeq/src/components/tooltip/_storybook/bq-tooltip.mdx +++ b/packages/beeq/src/components/tooltip/_storybook/bq-tooltip.mdx @@ -1,24 +1,28 @@ import { ArgTypes, Subtitle, Title } from '@storybook/addon-docs'; -Tooltip +
+
+ Tooltip -A tooltip component is a user interface element that displays additional information about a particular element when the user hovers or clicks on it. -It is usually displayed as a small pop-up box that appears near the element in question. + A tooltip component is a user interface element that displays additional information about a particular element when the user hovers or clicks on it. + It is usually displayed as a small pop-up box that appears near the element in question. -Best Practices + Best Practices -To ensure that tooltips effectively provide additional information without hindering user experience, consider the following best practices: + To ensure that tooltips effectively provide additional information without hindering user experience, consider the following best practices: -- Provide definitions for technical terms or jargon, especially in scientific or financial applications, to make complex information more accessible to users who may not be familiar with the terminology. -- Display additional information about interactive elements, such as buttons, links, or other elements, to help users understand their purpose or function and how to interact with them effectively. -- Present additional context or data about specific elements, such as charts, tables, or images, to help users better understand the content and make more informed decisions. + - Provide definitions for technical terms or jargon, especially in scientific or financial applications, to make complex information more accessible to users who may not be familiar with the terminology. + - Display additional information about interactive elements, such as buttons, links, or other elements, to help users understand their purpose or function and how to interact with them effectively. + - Present additional context or data about specific elements, such as charts, tables, or images, to help users better understand the content and make more informed decisions. -👍 When to use + 👍 When to use -- When you want to provide additional information about an element without cluttering the UI. -- When you want to provide context-specific help or guidance to the user. -- When you want to clarify the meaning of a particular element. + - When you want to provide additional information about an element without cluttering the UI. + - When you want to provide context-specific help or guidance to the user. + - When you want to clarify the meaning of a particular element. -Properties + Properties - + +
+
diff --git a/tools/generators/plop/scss-variables.hbs b/tools/generators/plop/scss-variables.hbs index d995b0433..e17aa7229 100644 --- a/tools/generators/plop/scss-variables.hbs +++ b/tools/generators/plop/scss-variables.hbs @@ -3,5 +3,8 @@ /* -------------------------------------------------------------------------- */ :host { + /** + * @prop --bq-{{kebabCase name}}--margin - {{sentenceCase name}} margin + */ --bq-{{kebabCase name}}--margin: theme('spacing.m'); } diff --git a/tools/generators/plop/storybook-docs.hbs b/tools/generators/plop/storybook-docs.hbs index d651efa51..03f6451a5 100644 --- a/tools/generators/plop/storybook-docs.hbs +++ b/tools/generators/plop/storybook-docs.hbs @@ -1,11 +1,15 @@ import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs'; -{{sentenceCase name}} +
+
+ {{sentenceCase name}} -Usage + Usage -👍 When to use + 👍 When to use -Properties + Properties - + +
+