diff --git a/src/ActionRow/README.md b/src/ActionRow/README.md index 7ad955b1e7..a9ecfdb7d4 100644 --- a/src/ActionRow/README.md +++ b/src/ActionRow/README.md @@ -6,6 +6,7 @@ components: - ActionRowSpacer categories: - Buttonlike +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/ActionRow/design-guidelines.md b/src/ActionRow/design-guidelines.md new file mode 100644 index 0000000000..280948fe9b --- /dev/null +++ b/src/ActionRow/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ActionRow' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ActionRow component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ActionRow even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Alert/README.md b/src/Alert/README.md index 6a19bae3e6..703bac7041 100644 --- a/src/Alert/README.md +++ b/src/Alert/README.md @@ -7,6 +7,7 @@ components: - AlertLink categories: - Status & metadata +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Alert/design-guidelines.md b/src/Alert/design-guidelines.md new file mode 100644 index 0000000000..91d8fd7a9a --- /dev/null +++ b/src/Alert/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Alert' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Alert component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Alert even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Annotation/README.md b/src/Annotation/README.md index 4a5c64ab04..b8f9e48947 100644 --- a/src/Annotation/README.md +++ b/src/Annotation/README.md @@ -5,6 +5,7 @@ components: - Annotation categories: - Status & metadata +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' diff --git a/src/Annotation/design-guidelines.md b/src/Annotation/design-guidelines.md new file mode 100644 index 0000000000..e21a8705f7 --- /dev/null +++ b/src/Annotation/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Annotation' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Annotation component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Annotation even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Avatar/README.md b/src/Avatar/README.md index b2262509bb..3e6d60bba5 100644 --- a/src/Avatar/README.md +++ b/src/Avatar/README.md @@ -5,6 +5,7 @@ components: - Avatar categories: - Imagery & Iconography +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Avatar/design-guidelines.md b/src/Avatar/design-guidelines.md new file mode 100644 index 0000000000..8490078216 --- /dev/null +++ b/src/Avatar/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Avatar' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Avatar component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Avatar even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/AvatarButton/README.md b/src/AvatarButton/README.md index 6b29bbad13..e6f141f10c 100644 --- a/src/AvatarButton/README.md +++ b/src/AvatarButton/README.md @@ -4,6 +4,7 @@ components: - AvatarButton categories: - Buttonlike +tabName: 'implementation' type: 'component' status: 'New' designStatus: 'Done' diff --git a/src/AvatarButton/design-guidelines.md b/src/AvatarButton/design-guidelines.md new file mode 100644 index 0000000000..8df098302b --- /dev/null +++ b/src/AvatarButton/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'AvatarButton' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the AvatarButton component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of AvatarButton even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Badge/README.md b/src/Badge/README.md index 2d7b608914..9db1513598 100644 --- a/src/Badge/README.md +++ b/src/Badge/README.md @@ -5,6 +5,7 @@ components: - Badge categories: - Status & metadata +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Badge/design-guidelines.md b/src/Badge/design-guidelines.md new file mode 100644 index 0000000000..1a23d4445c --- /dev/null +++ b/src/Badge/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Badge' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Badge component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Badge even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Breadcrumb/README.md b/src/Breadcrumb/README.md index 08e5790cba..23e098c959 100644 --- a/src/Breadcrumb/README.md +++ b/src/Breadcrumb/README.md @@ -5,6 +5,7 @@ components: - Breadcrumb categories: - Navigation +tabName: 'implementation' status: 'Needs Work' designStatus: 'DONE' devStatus: 'To Do' diff --git a/src/Breadcrumb/design-guidelines.md b/src/Breadcrumb/design-guidelines.md new file mode 100644 index 0000000000..154dfb86f0 --- /dev/null +++ b/src/Breadcrumb/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Breadcrumbs' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Breadcrumbs component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Breadcrumbs even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Bubble/README.md b/src/Bubble/README.md index 3d93020f0f..d372cd0024 100644 --- a/src/Bubble/README.md +++ b/src/Bubble/README.md @@ -6,6 +6,7 @@ components: status: 'New' categories: - Status & metadata +tabName: 'implementation' designStatus: 'Done' devStatus: 'Done' notes: | diff --git a/src/Bubble/design-guidelines.md b/src/Bubble/design-guidelines.md new file mode 100644 index 0000000000..163aebf01a --- /dev/null +++ b/src/Bubble/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Bubble' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Bubble component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Bubble even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Button/README.md b/src/Button/README.md index 88585c78dc..0df7c52a8d 100644 --- a/src/Button/README.md +++ b/src/Button/README.md @@ -5,6 +5,7 @@ components: - Button categories: - Buttonlike +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Button/button-group.mdx b/src/Button/button-group/README.md similarity index 98% rename from src/Button/button-group.mdx rename to src/Button/button-group/README.md index 9ea7218d81..fa872b984b 100644 --- a/src/Button/button-group.mdx +++ b/src/Button/button-group/README.md @@ -6,6 +6,7 @@ components: - ButtonToolbar categories: - Buttonlike +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Button/button-group/design-guidelines.md b/src/Button/button-group/design-guidelines.md new file mode 100644 index 0000000000..4b878c254f --- /dev/null +++ b/src/Button/button-group/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ButtonGroup' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ButtonGroup component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ButtonGroup even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Button/design-guidelines.md b/src/Button/design-guidelines.md new file mode 100644 index 0000000000..498ad0d7df --- /dev/null +++ b/src/Button/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Button' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Button component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Button even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Card/README.md b/src/Card/README.md index c8c23c7546..5b53d0744f 100644 --- a/src/Card/README.md +++ b/src/Card/README.md @@ -15,6 +15,7 @@ components: - CardCarousel categories: - Content +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Card/design-guidelines.md b/src/Card/design-guidelines.md new file mode 100644 index 0000000000..791e496da3 --- /dev/null +++ b/src/Card/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Card' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Card component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Card even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Carousel/README.md b/src/Carousel/README.md index b1b0f43136..ef9ec9011d 100644 --- a/src/Carousel/README.md +++ b/src/Carousel/README.md @@ -7,6 +7,7 @@ components: - CarouselCaption categories: - Content +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Carousel/design-guidelines.md b/src/Carousel/design-guidelines.md new file mode 100644 index 0000000000..eeddc4e28d --- /dev/null +++ b/src/Carousel/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Carousel' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Carousel component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Carousel even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/CheckBox/README.md b/src/CheckBox/README.md index f225fe431c..e6c5d85f4a 100644 --- a/src/CheckBox/README.md +++ b/src/CheckBox/README.md @@ -5,6 +5,7 @@ components: - Check categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'TBD' devStatus: 'Done' diff --git a/src/CheckBoxGroup/README.md b/src/CheckBoxGroup/README.md index 5f14c5ee81..63f4380b98 100644 --- a/src/CheckBoxGroup/README.md +++ b/src/CheckBoxGroup/README.md @@ -5,6 +5,7 @@ components: - CheckBoxGroup categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'To Do' devStatus: 'To Do' diff --git a/src/Chip/README.md b/src/Chip/README.md index 6497f9e7d3..ab87fcdc51 100644 --- a/src/Chip/README.md +++ b/src/Chip/README.md @@ -5,6 +5,7 @@ components: - Chip categories: - Buttonlike +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Chip/design-guidelines.md b/src/Chip/design-guidelines.md new file mode 100644 index 0000000000..3b7c4c1e4c --- /dev/null +++ b/src/Chip/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Chip' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Chip component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Chip even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/ChipCarousel/README.md b/src/ChipCarousel/README.md index 2c07f59828..a67c1593c4 100644 --- a/src/ChipCarousel/README.md +++ b/src/ChipCarousel/README.md @@ -5,6 +5,7 @@ components: - ChipCarousel categories: - Content +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/ChipCarousel/design-guidelines.md b/src/ChipCarousel/design-guidelines.md new file mode 100644 index 0000000000..bf0798aa5d --- /dev/null +++ b/src/ChipCarousel/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ChipCarousel' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ChipCarousel component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ChipCarousel even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Collapsible/README.md b/src/Collapsible/README.md index 46ada68a1f..4c64f3b993 100644 --- a/src/Collapsible/README.md +++ b/src/Collapsible/README.md @@ -9,6 +9,7 @@ components: - CollapsibleVisible categories: - Content +tabName: 'implementation' status: "Stable" designStatus: "Needs Review" devStatus: "Done" diff --git a/src/Collapsible/design-guidelines.md b/src/Collapsible/design-guidelines.md new file mode 100644 index 0000000000..f6fe9b8279 --- /dev/null +++ b/src/Collapsible/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Collapsible' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Collapsible component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Collapsible even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/ColorPicker/README.md b/src/ColorPicker/README.md index 484d9620d8..2b0dc60e8f 100644 --- a/src/ColorPicker/README.md +++ b/src/ColorPicker/README.md @@ -5,6 +5,7 @@ components: - ColorPicker categories: - Imagery & Iconography +tabName: 'implementation' status: 'In progress' designStatus: 'In progress' devStatus: 'In progress' diff --git a/src/ColorPicker/design-guidelines.md b/src/ColorPicker/design-guidelines.md new file mode 100644 index 0000000000..3d1091709a --- /dev/null +++ b/src/ColorPicker/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ColorPicker' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ColorPicker component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ColorPicker even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Container/README.md b/src/Container/README.md index de2bdab76c..fd7b1d5f76 100644 --- a/src/Container/README.md +++ b/src/Container/README.md @@ -5,6 +5,7 @@ components: - Container categories: - Layout +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Container/design-guidelines.md b/src/Container/design-guidelines.md new file mode 100644 index 0000000000..d728a162dc --- /dev/null +++ b/src/Container/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Container' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Container component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Container even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/DataTable/README.md b/src/DataTable/README.md index bfa6e99018..ba7fbba8ba 100644 --- a/src/DataTable/README.md +++ b/src/DataTable/README.md @@ -23,6 +23,7 @@ components: - DataTableEmptyTable categories: - Table +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' diff --git a/src/DataTable/dataviews.mdx b/src/DataTable/dataviews/README.md similarity index 99% rename from src/DataTable/dataviews.mdx rename to src/DataTable/dataviews/README.md index a1cbe98ab7..d9e2fb819c 100644 --- a/src/DataTable/dataviews.mdx +++ b/src/DataTable/dataviews/README.md @@ -14,6 +14,7 @@ components: - CardView categories: - Table +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' diff --git a/src/DataTable/dataviews/design-guidelines.md b/src/DataTable/dataviews/design-guidelines.md new file mode 100644 index 0000000000..175ef8362a --- /dev/null +++ b/src/DataTable/dataviews/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Data views' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Data views component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Data views even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/DataTable/design-guidelines.md b/src/DataTable/design-guidelines.md new file mode 100644 index 0000000000..b1b6dca87b --- /dev/null +++ b/src/DataTable/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'DataTable' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the DataTable component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of DataTable even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/DataTable/tablecontrolbar.mdx b/src/DataTable/tablecontrolbar/README.md similarity index 99% rename from src/DataTable/tablecontrolbar.mdx rename to src/DataTable/tablecontrolbar/README.md index 9ec989d42d..f14a65dc9c 100644 --- a/src/DataTable/tablecontrolbar.mdx +++ b/src/DataTable/tablecontrolbar/README.md @@ -11,6 +11,7 @@ components: - RowStatus categories: - Table +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' diff --git a/src/DataTable/tablecontrolbar/design-guidelines.md b/src/DataTable/tablecontrolbar/design-guidelines.md new file mode 100644 index 0000000000..d6a4e4c13d --- /dev/null +++ b/src/DataTable/tablecontrolbar/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'TableControlBar' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the TableControlBar component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of TableControlBar even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/DataTable/tablefilters.mdx b/src/DataTable/tablefilters/README.md similarity index 99% rename from src/DataTable/tablefilters.mdx rename to src/DataTable/tablefilters/README.md index 2b8547aa7f..8662e3ed72 100644 --- a/src/DataTable/tablefilters.mdx +++ b/src/DataTable/tablefilters/README.md @@ -8,6 +8,7 @@ components: - MultiSelectDropdownFilter categories: - Table +tabName: 'implementation' status: 'New' designStatus: 'In progress' devStatus: 'In progress' diff --git a/src/DataTable/tablefilters/design-guidelines.md b/src/DataTable/tablefilters/design-guidelines.md new file mode 100644 index 0000000000..aaf0ded8c1 --- /dev/null +++ b/src/DataTable/tablefilters/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'TableFilters' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the TableFilters component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of TableFilters even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/DataTable/tablefooter.mdx b/src/DataTable/tablefooter/README.md similarity index 99% rename from src/DataTable/tablefooter.mdx rename to src/DataTable/tablefooter/README.md index 7f10930d17..0a7a7a968e 100644 --- a/src/DataTable/tablefooter.mdx +++ b/src/DataTable/tablefooter/README.md @@ -8,6 +8,7 @@ components: - TablePaginationMinimal categories: - Table +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' diff --git a/src/DataTable/tablefooter/design-guidelines.md b/src/DataTable/tablefooter/design-guidelines.md new file mode 100644 index 0000000000..e0885c61ea --- /dev/null +++ b/src/DataTable/tablefooter/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'TableFooter' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the TableFooter component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of TableFooter even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Dropdown/README.md b/src/Dropdown/README.md index 2968939888..5a7d4e7a61 100644 --- a/src/Dropdown/README.md +++ b/src/Dropdown/README.md @@ -11,6 +11,7 @@ components: - DropdownDivider categories: - Navigation +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Dropdown/design-guidelines.md b/src/Dropdown/design-guidelines.md new file mode 100644 index 0000000000..6df6e2a342 --- /dev/null +++ b/src/Dropdown/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Dropdown' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Dropdown component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Dropdown even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Dropzone/README.md b/src/Dropzone/README.md index 04f4d3bb06..6559c90743 100644 --- a/src/Dropzone/README.md +++ b/src/Dropzone/README.md @@ -5,6 +5,7 @@ components: - Dropzone categories: - Forms +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Dropzone/design-guidelines.md b/src/Dropzone/design-guidelines.md new file mode 100644 index 0000000000..57a782c3b2 --- /dev/null +++ b/src/Dropzone/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Dropzone' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Dropzone component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Dropzone even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Fieldset/README.md b/src/Fieldset/README.md index e180bf1e64..30f423d73a 100644 --- a/src/Fieldset/README.md +++ b/src/Fieldset/README.md @@ -5,6 +5,7 @@ components: - Fieldset categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'TBD' devStatus: 'To Do' diff --git a/src/Figure/README.md b/src/Figure/README.md index 9e33fe284c..757e2aa84c 100644 --- a/src/Figure/README.md +++ b/src/Figure/README.md @@ -5,6 +5,7 @@ categories: - Content components: - Figure +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Figure/design-guidelines.md b/src/Figure/design-guidelines.md new file mode 100644 index 0000000000..dbc3b4cef0 --- /dev/null +++ b/src/Figure/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Figure' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Figure component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Figure even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/README.md b/src/Form/README.md index f295d3ef53..991d1cc27b 100644 --- a/src/Form/README.md +++ b/src/Form/README.md @@ -11,6 +11,7 @@ components: - FormRow categories: - Forms +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/design-guidelines.md b/src/Form/design-guidelines.md new file mode 100644 index 0000000000..b2872464b4 --- /dev/null +++ b/src/Form/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-autosuggest.mdx b/src/Form/form-autosuggest/README.md similarity index 99% rename from src/Form/form-autosuggest.mdx rename to src/Form/form-autosuggest/README.md index 1a474e21e5..acbd6d1f69 100644 --- a/src/Form/form-autosuggest.mdx +++ b/src/Form/form-autosuggest/README.md @@ -6,6 +6,7 @@ components: - FormAutosuggestOption categories: - Forms +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' diff --git a/src/Form/form-autosuggest/design-guidelines.md b/src/Form/form-autosuggest/design-guidelines.md new file mode 100644 index 0000000000..51b5945048 --- /dev/null +++ b/src/Form/form-autosuggest/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Autosuggest' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Autosuggest component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form.Autosuggest even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-checkbox.mdx b/src/Form/form-checkbox/README.md similarity index 99% rename from src/Form/form-checkbox.mdx rename to src/Form/form-checkbox/README.md index eddec319fc..4306b4fcfe 100644 --- a/src/Form/form-checkbox.mdx +++ b/src/Form/form-checkbox/README.md @@ -7,6 +7,7 @@ components: - FormCheckboxSet categories: - Forms +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/form-checkbox/design-guidelines.md b/src/Form/form-checkbox/design-guidelines.md new file mode 100644 index 0000000000..0a950b7280 --- /dev/null +++ b/src/Form/form-checkbox/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Checkbox' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Checkbox component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form.Checkbox even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-control-feedback.mdx b/src/Form/form-control-feedback/README.md similarity index 98% rename from src/Form/form-control-feedback.mdx rename to src/Form/form-control-feedback/README.md index 1bc50109ae..2dc2861b98 100644 --- a/src/Form/form-control-feedback.mdx +++ b/src/Form/form-control-feedback/README.md @@ -5,6 +5,7 @@ components: - FormControlFeedback categories: - Forms +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/form-control-feedback/design-guidelines.md b/src/Form/form-control-feedback/design-guidelines.md new file mode 100644 index 0000000000..0314532b79 --- /dev/null +++ b/src/Form/form-control-feedback/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Control.Feedback' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Control.Feedback component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form.Control.Feedback even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-control.mdx b/src/Form/form-control/README.md similarity index 99% rename from src/Form/form-control.mdx rename to src/Form/form-control/README.md index 47c4d8b7a2..612517987a 100644 --- a/src/Form/form-control.mdx +++ b/src/Form/form-control/README.md @@ -5,6 +5,7 @@ components: - FormControl categories: - Forms +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/form-control/design-guidelines.md b/src/Form/form-control/design-guidelines.md new file mode 100644 index 0000000000..b4f538628b --- /dev/null +++ b/src/Form/form-control/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Control' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Control component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of v even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-group.mdx b/src/Form/form-group/README.md similarity index 98% rename from src/Form/form-group.mdx rename to src/Form/form-group/README.md index 697b3fe035..a2a97ddaaf 100644 --- a/src/Form/form-group.mdx +++ b/src/Form/form-group/README.md @@ -5,6 +5,7 @@ components: - FormGroup categories: - Forms +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/form-group/design-guidelines.md b/src/Form/form-group/design-guidelines.md new file mode 100644 index 0000000000..5df1a28b8c --- /dev/null +++ b/src/Form/form-group/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Group' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Group component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form.Group even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-label.mdx b/src/Form/form-label/README.md similarity index 98% rename from src/Form/form-label.mdx rename to src/Form/form-label/README.md index a5cc89b4df..b3a09ffa45 100644 --- a/src/Form/form-label.mdx +++ b/src/Form/form-label/README.md @@ -5,6 +5,7 @@ components: - FormLabel categories: - Forms +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/form-label/design-guidelines.md b/src/Form/form-label/design-guidelines.md new file mode 100644 index 0000000000..bf977d350e --- /dev/null +++ b/src/Form/form-label/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Label' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Label component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form.Label even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-radio.mdx b/src/Form/form-radio/README.md similarity index 99% rename from src/Form/form-radio.mdx rename to src/Form/form-radio/README.md index 03ca2625fc..a64ceae55c 100644 --- a/src/Form/form-radio.mdx +++ b/src/Form/form-radio/README.md @@ -6,6 +6,7 @@ components: - FormRadioSet categories: - Forms +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/form-radio/design-guidelines.md b/src/Form/form-radio/design-guidelines.md new file mode 100644 index 0000000000..f94d241a1e --- /dev/null +++ b/src/Form/form-radio/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Radio' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Radio component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form.Radio even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/form-switch.mdx b/src/Form/form-switch/README.md similarity index 99% rename from src/Form/form-switch.mdx rename to src/Form/form-switch/README.md index 69c3cea395..6ae8b221a4 100644 --- a/src/Form/form-switch.mdx +++ b/src/Form/form-switch/README.md @@ -6,6 +6,7 @@ components: - SwitchControl categories: - Forms +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/form-switch/design-guidelines.md b/src/Form/form-switch/design-guidelines.md new file mode 100644 index 0000000000..d0d78e1002 --- /dev/null +++ b/src/Form/form-switch/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Form.Switch' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Form.Switch component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Form.Switch even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Form/input-group.mdx b/src/Form/input-group/README.md similarity index 98% rename from src/Form/input-group.mdx rename to src/Form/input-group/README.md index b19fd28b25..6f1c98c964 100644 --- a/src/Form/input-group.mdx +++ b/src/Form/input-group/README.md @@ -5,6 +5,7 @@ categories: - Forms components: - InputGroup +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Form/input-group/design-guidelines.md b/src/Form/input-group/design-guidelines.md new file mode 100644 index 0000000000..600fa99318 --- /dev/null +++ b/src/Form/input-group/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'InputGroup' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the InputGroup component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of InputGroup even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Hyperlink/README.md b/src/Hyperlink/README.md index d3ef064f1e..6d15224f58 100644 --- a/src/Hyperlink/README.md +++ b/src/Hyperlink/README.md @@ -5,6 +5,7 @@ components: - Hyperlink categories: - Buttonlike +tabName: 'implementation' status: 'Needs Work' designStatus: 'Done' devStatus: 'To Do' diff --git a/src/Hyperlink/design-guidelines.md b/src/Hyperlink/design-guidelines.md new file mode 100644 index 0000000000..6fca9d01a3 --- /dev/null +++ b/src/Hyperlink/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Hyperlink' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Hyperlink component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Hyperlink even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Icon/README.md b/src/Icon/README.md index 75177f386a..7eca7ce069 100644 --- a/src/Icon/README.md +++ b/src/Icon/README.md @@ -5,6 +5,7 @@ components: - Icon categories: - Imagery & Iconography +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Icon/design-guidelines.md b/src/Icon/design-guidelines.md new file mode 100644 index 0000000000..453edf412e --- /dev/null +++ b/src/Icon/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Icon' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Icon component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Icon even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/IconButton/README.md b/src/IconButton/README.md index 12b4d9d465..a06120bd0d 100644 --- a/src/IconButton/README.md +++ b/src/IconButton/README.md @@ -6,6 +6,7 @@ components: - IconButtonWithTooltip categories: - Buttonlike +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/IconButton/design-guidelines.md b/src/IconButton/design-guidelines.md new file mode 100644 index 0000000000..123f742a23 --- /dev/null +++ b/src/IconButton/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'IconButton' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the IconButton component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of IconButton even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/IconButtonToggle/README.md b/src/IconButtonToggle/README.md index 5b9c4ba39f..6658e29651 100644 --- a/src/IconButtonToggle/README.md +++ b/src/IconButtonToggle/README.md @@ -5,6 +5,7 @@ components: - IconButtonToggle categories: - Buttonlike +tabName: 'implementation' status: 'Stable' designStatus: 'In Progress' devStatus: 'Done' diff --git a/src/IconButtonToggle/design-guidelines.md b/src/IconButtonToggle/design-guidelines.md new file mode 100644 index 0000000000..ac8726a9c8 --- /dev/null +++ b/src/IconButtonToggle/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'IconButtonToggle' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the IconButtonToggle component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of IconButtonToggle even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Image/README.md b/src/Image/README.md index 4fc65aab20..a5733e89e4 100644 --- a/src/Image/README.md +++ b/src/Image/README.md @@ -5,6 +5,7 @@ categories: - Imagery & Iconography components: - Image +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Image/design-guidelines.md b/src/Image/design-guidelines.md new file mode 100644 index 0000000000..4fd28a0703 --- /dev/null +++ b/src/Image/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Image' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Image component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Image even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Input/README.md b/src/Input/README.md index 1d0205d63b..313355b67c 100644 --- a/src/Input/README.md +++ b/src/Input/README.md @@ -5,6 +5,7 @@ components: - Input categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'Done' devStatus: 'Done' diff --git a/src/InputSelect/README.md b/src/InputSelect/README.md index 1e2f60706f..7b061aee21 100644 --- a/src/InputSelect/README.md +++ b/src/InputSelect/README.md @@ -5,6 +5,7 @@ components: - InputSelect categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'TBD' devStatus: 'To Do' diff --git a/src/InputText/README.md b/src/InputText/README.md index 1d917cb980..3330ba7743 100644 --- a/src/InputText/README.md +++ b/src/InputText/README.md @@ -5,6 +5,7 @@ components: - InputText categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'TBD' devStatus: 'To Do' diff --git a/src/Layout/README.md b/src/Layout/README.md index a9337bf56e..8e8aaeb717 100644 --- a/src/Layout/README.md +++ b/src/Layout/README.md @@ -5,6 +5,7 @@ components: - Layout categories: - Layout +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Layout/design-guidelines.md b/src/Layout/design-guidelines.md new file mode 100644 index 0000000000..361f1d4122 --- /dev/null +++ b/src/Layout/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Layout' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Layout component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Figure even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/MailtoLink/README.md b/src/MailtoLink/README.md index f5041bb1f7..bb09369e9e 100644 --- a/src/MailtoLink/README.md +++ b/src/MailtoLink/README.md @@ -5,6 +5,7 @@ components: - MailtoLink categories: - Buttonlike +tabName: 'implementation' status: 'Needs Work' designStatus: 'Done' devStatus: 'To Do' diff --git a/src/MailtoLink/design-guidelines.md b/src/MailtoLink/design-guidelines.md new file mode 100644 index 0000000000..133db7091a --- /dev/null +++ b/src/MailtoLink/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'MailtoLink' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the MailtoLink component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of MailtoLink even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Menu/README.md b/src/Menu/README.md index 8170475439..5d166a68cc 100644 --- a/src/Menu/README.md +++ b/src/Menu/README.md @@ -6,6 +6,7 @@ components: - MenuItem categories: - Navigation +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Menu/design-guidelines.md b/src/Menu/design-guidelines.md new file mode 100644 index 0000000000..6df30693b7 --- /dev/null +++ b/src/Menu/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Menu' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Menu component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Menu even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Menu/select-menu.md b/src/Menu/select-menu/README.md similarity index 98% rename from src/Menu/select-menu.md rename to src/Menu/select-menu/README.md index 0aa7ad33fc..292fc74a6b 100644 --- a/src/Menu/select-menu.md +++ b/src/Menu/select-menu/README.md @@ -6,6 +6,7 @@ components: - MenuItem categories: - Navigation +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Menu/select-menu/design-guidelines.md b/src/Menu/select-menu/design-guidelines.md new file mode 100644 index 0000000000..7560fdf067 --- /dev/null +++ b/src/Menu/select-menu/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'SelectMenu' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the SelectMenu component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of SelectMenu even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/README.md b/src/Modal/README.md index 5bb1f607aa..c5716ae2af 100644 --- a/src/Modal/README.md +++ b/src/Modal/README.md @@ -5,6 +5,7 @@ components: - Modal categories: - Overlays +tabName: 'implementation' status: 'Deprecate soon' designStatus: 'Done' devStatus: 'To Do' @@ -145,4 +146,4 @@ class ModalWrapper extends React.Component { } onClose={() => {}} /> -``` \ No newline at end of file +``` diff --git a/src/Modal/alert-modal.mdx b/src/Modal/alert-modal/README.md similarity index 99% rename from src/Modal/alert-modal.mdx rename to src/Modal/alert-modal/README.md index 2823249d3e..a3584f79c7 100644 --- a/src/Modal/alert-modal.mdx +++ b/src/Modal/alert-modal/README.md @@ -6,6 +6,7 @@ components: - ModalDialog categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Modal/alert-modal/design-guidelines.md b/src/Modal/alert-modal/design-guidelines.md new file mode 100644 index 0000000000..44938cad20 --- /dev/null +++ b/src/Modal/alert-modal/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'AlertModal' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the AlertModal component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of AlertModal even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/design-guidelines.md b/src/Modal/design-guidelines.md new file mode 100644 index 0000000000..a4507a84b1 --- /dev/null +++ b/src/Modal/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Modal' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Modal component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Modal even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/fullscreen-modal.mdx b/src/Modal/fullscreen-modal/README.md similarity index 98% rename from src/Modal/fullscreen-modal.mdx rename to src/Modal/fullscreen-modal/README.md index 2b3a6effe6..f0fec56c9c 100644 --- a/src/Modal/fullscreen-modal.mdx +++ b/src/Modal/fullscreen-modal/README.md @@ -6,6 +6,7 @@ components: - ModalDialog categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Modal/fullscreen-modal/design-guidelines.md b/src/Modal/fullscreen-modal/design-guidelines.md new file mode 100644 index 0000000000..331de654bb --- /dev/null +++ b/src/Modal/fullscreen-modal/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'FullscreenModal' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the FullscreenModal component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of FullscreenModal even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/marketing-modal.mdx b/src/Modal/marketing-modal/README.md similarity index 98% rename from src/Modal/marketing-modal.mdx rename to src/Modal/marketing-modal/README.md index f08657d708..7742689923 100644 --- a/src/Modal/marketing-modal.mdx +++ b/src/Modal/marketing-modal/README.md @@ -6,6 +6,7 @@ components: - ModalDialog categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Modal/marketing-modal/design-guidelines.md b/src/Modal/marketing-modal/design-guidelines.md new file mode 100644 index 0000000000..659801f6f9 --- /dev/null +++ b/src/Modal/marketing-modal/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'MarketingModal' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the MarketingModal component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of MarketingModal even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/modal-dialog.mdx b/src/Modal/modal-dialog/README.md similarity index 99% rename from src/Modal/modal-dialog.mdx rename to src/Modal/modal-dialog/README.md index 7e2ad4b153..641bdbed5a 100644 --- a/src/Modal/modal-dialog.mdx +++ b/src/Modal/modal-dialog/README.md @@ -11,6 +11,7 @@ components: - ModalDialogCloseButton categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Modal/modal-dialog/design-guidelines.md b/src/Modal/modal-dialog/design-guidelines.md new file mode 100644 index 0000000000..fa135f59f0 --- /dev/null +++ b/src/Modal/modal-dialog/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ModalDialog' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ModalDialog component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ModalDialog even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/modal-layer.mdx b/src/Modal/modal-layer/README.md similarity index 99% rename from src/Modal/modal-layer.mdx rename to src/Modal/modal-layer/README.md index 65871643f1..75491e0bc7 100644 --- a/src/Modal/modal-layer.mdx +++ b/src/Modal/modal-layer/README.md @@ -6,6 +6,7 @@ components: - ModalCloseButton categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Modal/modal-layer/design-guidelines.md b/src/Modal/modal-layer/design-guidelines.md new file mode 100644 index 0000000000..b94e872cfd --- /dev/null +++ b/src/Modal/modal-layer/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ModalLayer' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ModalLayer component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ModalLayer even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/modal-popup.mdx b/src/Modal/modal-popup/README.md similarity index 98% rename from src/Modal/modal-popup.mdx rename to src/Modal/modal-popup/README.md index 0a6c3bafce..800c4d360e 100644 --- a/src/Modal/modal-popup.mdx +++ b/src/Modal/modal-popup/README.md @@ -6,6 +6,7 @@ components: - ModalCloseButton categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Modal/modal-popup/design-guidelines.md b/src/Modal/modal-popup/design-guidelines.md new file mode 100644 index 0000000000..4332c167c6 --- /dev/null +++ b/src/Modal/modal-popup/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ModalPopup' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ModalPopup component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ModalPopup even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Modal/standard-modal.mdx b/src/Modal/standard-modal/README.md similarity index 98% rename from src/Modal/standard-modal.mdx rename to src/Modal/standard-modal/README.md index 3f9ef69360..e9b8e7c3bf 100644 --- a/src/Modal/standard-modal.mdx +++ b/src/Modal/standard-modal/README.md @@ -6,6 +6,7 @@ components: - ModalDialog categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Modal/standard-modal/design-guidelines.md b/src/Modal/standard-modal/design-guidelines.md new file mode 100644 index 0000000000..019f29026e --- /dev/null +++ b/src/Modal/standard-modal/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'StandardModal' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the StandardModal component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of StandardModal even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Nav/README.md b/src/Nav/README.md index c9f0e71770..a6be877161 100644 --- a/src/Nav/README.md +++ b/src/Nav/README.md @@ -8,6 +8,7 @@ components: - NavDropdown categories: - Navigation +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Nav/design-guidelines.md b/src/Nav/design-guidelines.md new file mode 100644 index 0000000000..29aa173288 --- /dev/null +++ b/src/Nav/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Nav' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Nav component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Nav even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Navbar/README.md b/src/Navbar/README.md index 5f85ba35d4..967b6a3568 100644 --- a/src/Navbar/README.md +++ b/src/Navbar/README.md @@ -8,6 +8,7 @@ components: - NavbarCollapse categories: - Navigation +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Navbar/design-guidelines.md b/src/Navbar/design-guidelines.md new file mode 100644 index 0000000000..24939cc589 --- /dev/null +++ b/src/Navbar/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Navbar' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Navbar component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Navbar even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/OverflowScroll/OverflowScroll.mdx b/src/OverflowScroll/README.md similarity index 98% rename from src/OverflowScroll/OverflowScroll.mdx rename to src/OverflowScroll/README.md index a453973e5e..af5c378a78 100644 --- a/src/OverflowScroll/OverflowScroll.mdx +++ b/src/OverflowScroll/README.md @@ -5,6 +5,7 @@ components: - OverflowScroll categories: - Content +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/OverflowScroll/design-guidelines.md b/src/OverflowScroll/design-guidelines.md new file mode 100644 index 0000000000..6c8138bc5a --- /dev/null +++ b/src/OverflowScroll/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'OverflowScroll' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the OverflowScroll component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of OverflowScroll even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/OverflowScroll/useOverflowScroll.mdx b/src/OverflowScroll/useOverflowScroll/README.md similarity index 99% rename from src/OverflowScroll/useOverflowScroll.mdx rename to src/OverflowScroll/useOverflowScroll/README.md index ebaf85c59d..b91f579383 100644 --- a/src/OverflowScroll/useOverflowScroll.mdx +++ b/src/OverflowScroll/useOverflowScroll/README.md @@ -3,6 +3,7 @@ title: 'useOverflowScroll' type: 'hook' categories: - Hooks +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/OverflowScroll/useOverflowScroll/design-guidelines.md b/src/OverflowScroll/useOverflowScroll/design-guidelines.md new file mode 100644 index 0000000000..54296233bb --- /dev/null +++ b/src/OverflowScroll/useOverflowScroll/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'useOverflowScroll' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the useOverflowScroll component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of useOverflowScroll even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Overlay/README.md b/src/Overlay/README.md index da86dc330c..1715d6d996 100644 --- a/src/Overlay/README.md +++ b/src/Overlay/README.md @@ -6,6 +6,7 @@ components: - OverlayTrigger categories: - Overlays +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Overlay/design-guidelines.md b/src/Overlay/design-guidelines.md new file mode 100644 index 0000000000..2aa6f5d260 --- /dev/null +++ b/src/Overlay/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Overlay' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Overlay component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Overlay even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/PageBanner/README.md b/src/PageBanner/README.md index b73325108e..257048e728 100644 --- a/src/PageBanner/README.md +++ b/src/PageBanner/README.md @@ -5,6 +5,7 @@ components: - PageBanner categories: - Status & metadata +tabName: 'implementation' status: 'New' designStatus: 'Complete' devStatus: 'In Progress' diff --git a/src/PageBanner/design-guidelines.md b/src/PageBanner/design-guidelines.md new file mode 100644 index 0000000000..34c45bb225 --- /dev/null +++ b/src/PageBanner/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'PageBanner' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the PageBanner component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of PageBanner even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Pagination/README.md b/src/Pagination/README.md index 3db95e620f..a97353fe76 100644 --- a/src/Pagination/README.md +++ b/src/Pagination/README.md @@ -6,6 +6,7 @@ components: - PaginationReduced categories: - Navigation +tabName: 'implementation' status: 'Needs Work' designStatus: 'Done' devStatus: 'To Do' diff --git a/src/Pagination/design-guidelines.md b/src/Pagination/design-guidelines.md new file mode 100644 index 0000000000..136848af94 --- /dev/null +++ b/src/Pagination/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Pagination' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Pagination component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Pagination even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Popover/README.md b/src/Popover/README.md index 5f3036531b..c80911d2c3 100644 --- a/src/Popover/README.md +++ b/src/Popover/README.md @@ -7,6 +7,7 @@ components: - PopoverContent categories: - Overlays +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Popover/design-guidelines.md b/src/Popover/design-guidelines.md new file mode 100644 index 0000000000..6776bce98b --- /dev/null +++ b/src/Popover/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Popover' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Popover component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Pagination even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/ProductTour/README.md b/src/ProductTour/README.md index ca4f38ddd4..1e533b3283 100644 --- a/src/ProductTour/README.md +++ b/src/ProductTour/README.md @@ -5,6 +5,7 @@ components: - ProductTour categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/ProductTour/design-guidelines.md b/src/ProductTour/design-guidelines.md new file mode 100644 index 0000000000..ea067232b2 --- /dev/null +++ b/src/ProductTour/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ProductTour' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ProductTour component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ProductTour even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/ProgressBar/README.md b/src/ProgressBar/README.md index d2697a4c18..8834ecd3e5 100644 --- a/src/ProgressBar/README.md +++ b/src/ProgressBar/README.md @@ -6,6 +6,7 @@ components: - ProgressBarAnnotated categories: - Status & metadata +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/ProgressBar/design-guidelines.md b/src/ProgressBar/design-guidelines.md new file mode 100644 index 0000000000..1f7ab170eb --- /dev/null +++ b/src/ProgressBar/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'ProgressBar' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the ProgressBar component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of ProgressBar even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/RadioButtonGroup/README.md b/src/RadioButtonGroup/README.md index 6cbfe7e696..fd401f703d 100644 --- a/src/RadioButtonGroup/README.md +++ b/src/RadioButtonGroup/README.md @@ -5,6 +5,7 @@ components: - RadioButtonGroup categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'To Do' devStatus: 'To Do' diff --git a/src/Scrollable/README.md b/src/Scrollable/README.md index 76657227f5..37954bb132 100644 --- a/src/Scrollable/README.md +++ b/src/Scrollable/README.md @@ -6,6 +6,7 @@ components: - Scrollable categories: - Content +tabName: 'implementation' status: 'New' designStatus: 'In Progress' devStatus: 'In Progress' diff --git a/src/Scrollable/design-guidelines.md b/src/Scrollable/design-guidelines.md new file mode 100644 index 0000000000..2ca9662b5c --- /dev/null +++ b/src/Scrollable/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Scrollable' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Scrollable component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Scrollable even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/SearchField/README.md b/src/SearchField/README.md index a5bc9f381b..a993afd94b 100644 --- a/src/SearchField/README.md +++ b/src/SearchField/README.md @@ -10,6 +10,7 @@ components: - SearchFieldSubmitButton categories: - Forms +tabName: 'implementation' status: 'Stable' designStatus: 'Needs Review' devStatus: 'Done' diff --git a/src/SearchField/design-guidelines.md b/src/SearchField/design-guidelines.md new file mode 100644 index 0000000000..91947f8153 --- /dev/null +++ b/src/SearchField/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'SearchField' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the SearchField component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of SearchField even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/SelectableBox/README.md b/src/SelectableBox/README.md index 871bbb9ff4..f7dd558275 100644 --- a/src/SelectableBox/README.md +++ b/src/SelectableBox/README.md @@ -6,6 +6,7 @@ components: - SelectableBoxSet categories: - Forms +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/SelectableBox/design-guidelines.md b/src/SelectableBox/design-guidelines.md new file mode 100644 index 0000000000..a6879f70d1 --- /dev/null +++ b/src/SelectableBox/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'SelectableBox' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the SelectableBox component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of SelectableBox even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Sheet/README.md b/src/Sheet/README.md index c7c99bf183..1faad2ee34 100644 --- a/src/Sheet/README.md +++ b/src/Sheet/README.md @@ -5,6 +5,7 @@ components: - Sheet categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'In Progress' devStatus: 'In Progress' diff --git a/src/Sheet/design-guidelines.md b/src/Sheet/design-guidelines.md new file mode 100644 index 0000000000..dc5e44c1f3 --- /dev/null +++ b/src/Sheet/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Sheet' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Sheet component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Sheet even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Skeleton/README.md b/src/Skeleton/README.md index 4114178891..200c4bc38e 100644 --- a/src/Skeleton/README.md +++ b/src/Skeleton/README.md @@ -5,6 +5,7 @@ components: - Skeleton categories: - Status & metadata +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Skeleton/design-guidelines.md b/src/Skeleton/design-guidelines.md new file mode 100644 index 0000000000..4903382bf2 --- /dev/null +++ b/src/Skeleton/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Skeleton' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Skeleton component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Skeleton even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Spinner/README.md b/src/Spinner/README.md index 3187de4b2e..cc6b6f4c8f 100644 --- a/src/Spinner/README.md +++ b/src/Spinner/README.md @@ -6,6 +6,7 @@ components: - Spinner categories: - Status & metadata +tabName: 'implementation' designStatus: 'Done' devStatus: 'Done' notes: | diff --git a/src/Spinner/design-guidelines.md b/src/Spinner/design-guidelines.md new file mode 100644 index 0000000000..e3ff92816e --- /dev/null +++ b/src/Spinner/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Spinner' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Spinner component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Spinner even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Stack/README.md b/src/Stack/README.md index 58e929383d..21050feda8 100644 --- a/src/Stack/README.md +++ b/src/Stack/README.md @@ -5,6 +5,7 @@ components: - Stack categories: - Layout +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' @@ -54,4 +55,4 @@ Stacks are vertical by default and stacked items are full-width by default. Watc
second block
third block
-``` \ No newline at end of file +``` diff --git a/src/Stack/design-guidelines.md b/src/Stack/design-guidelines.md new file mode 100644 index 0000000000..ef21f2303a --- /dev/null +++ b/src/Stack/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Stack' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Stack component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Stack even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/StatefulButton/README.md b/src/StatefulButton/README.md index 2c7e7f8918..46e027b68d 100644 --- a/src/StatefulButton/README.md +++ b/src/StatefulButton/README.md @@ -5,6 +5,7 @@ components: - StatefulButton categories: - Buttonlike +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/StatefulButton/design-guidelines.md b/src/StatefulButton/design-guidelines.md new file mode 100644 index 0000000000..2123e799e1 --- /dev/null +++ b/src/StatefulButton/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'StatefulButton' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the StatefulButton component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of StatefulButton even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/StatusAlert/README.md b/src/StatusAlert/README.md index 81f0d7b590..58eed4232a 100644 --- a/src/StatusAlert/README.md +++ b/src/StatusAlert/README.md @@ -5,6 +5,7 @@ components: - StatusAlert categories: - Status & metadata +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'Done' devStatus: 'Done' diff --git a/src/StatusAlert/design-guidelines.md b/src/StatusAlert/design-guidelines.md new file mode 100644 index 0000000000..29bc9b4cfc --- /dev/null +++ b/src/StatusAlert/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'StatusAlert' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the StatusAlert component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of StatusAlert even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Stepper/README.md b/src/Stepper/README.md index ba2e9df47f..83899fe12c 100644 --- a/src/Stepper/README.md +++ b/src/Stepper/README.md @@ -10,6 +10,7 @@ components: - StepperHeaderStep categories: - Navigation +tabName: 'implementation' designStatus: 'Done' devStatus: 'Done' notes: | diff --git a/src/Stepper/design-guidelines.md b/src/Stepper/design-guidelines.md new file mode 100644 index 0000000000..25a2a84116 --- /dev/null +++ b/src/Stepper/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Stepper' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Stepper component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Stepper even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Sticky/README.md b/src/Sticky/README.md index e6307e6908..6ff45a4648 100644 --- a/src/Sticky/README.md +++ b/src/Sticky/README.md @@ -5,6 +5,7 @@ components: - Sticky categories: - Content +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'In progress' @@ -51,4 +52,4 @@ Valid `offset` values are the same as for [the spacing classes](/foundations/spa -``` \ No newline at end of file +``` diff --git a/src/Sticky/design-guidelines.md b/src/Sticky/design-guidelines.md new file mode 100644 index 0000000000..0dcbb8b030 --- /dev/null +++ b/src/Sticky/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Sticky' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Sticky component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Sticky even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Table/README.md b/src/Table/README.md index 6976156db0..69179625b9 100644 --- a/src/Table/README.md +++ b/src/Table/README.md @@ -5,6 +5,7 @@ components: - TableDeprecated categories: - Table +tabName: 'implementation' status: 'Deprecate soon' designStatus: 'TBD' devStatus: 'TBD' diff --git a/src/Tabs/README.md b/src/Tabs/README.md index 0e7e5676bf..55d1d0aff1 100644 --- a/src/Tabs/README.md +++ b/src/Tabs/README.md @@ -6,6 +6,7 @@ components: - Tab categories: - Navigation +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'TO DO' diff --git a/src/Tabs/design-guidelines.md b/src/Tabs/design-guidelines.md new file mode 100644 index 0000000000..f31d03aae7 --- /dev/null +++ b/src/Tabs/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Tabs' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Tabs component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Tabs even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/TextArea/README.md b/src/TextArea/README.md index e8fcb671ee..1c63194e7d 100644 --- a/src/TextArea/README.md +++ b/src/TextArea/README.md @@ -5,6 +5,7 @@ components: - TextArea categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'TBD' devStatus: 'To Do' diff --git a/src/Toast/README.md b/src/Toast/README.md index 9b36e17520..2a6ce36916 100644 --- a/src/Toast/README.md +++ b/src/Toast/README.md @@ -5,6 +5,7 @@ components: - Toast categories: - Overlays +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Toast/design-guidelines.md b/src/Toast/design-guidelines.md new file mode 100644 index 0000000000..45984590da --- /dev/null +++ b/src/Toast/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Toast' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Toast component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Toast even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Tooltip/README.md b/src/Tooltip/README.md index d7eadc7aea..621e2cdb1d 100644 --- a/src/Tooltip/README.md +++ b/src/Tooltip/README.md @@ -5,6 +5,7 @@ components: - Tooltip categories: - Overlays +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Tooltip/design-guidelines.md b/src/Tooltip/design-guidelines.md new file mode 100644 index 0000000000..e77d567c89 --- /dev/null +++ b/src/Tooltip/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Tooltip' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Tooltip component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Tooltip even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/TransitionReplace/README.md b/src/TransitionReplace/README.md index c021393456..a2498317ab 100644 --- a/src/TransitionReplace/README.md +++ b/src/TransitionReplace/README.md @@ -5,6 +5,7 @@ components: - TransitionReplace categories: - Choreography +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/TransitionReplace/design-guidelines.md b/src/TransitionReplace/design-guidelines.md new file mode 100644 index 0000000000..ab72ed393f --- /dev/null +++ b/src/TransitionReplace/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'TransitionReplace' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the TransitionReplace component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of TransitionReplace even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/Truncate/README.md b/src/Truncate/README.md index 2e36a562cc..7cd690ecc0 100644 --- a/src/Truncate/README.md +++ b/src/Truncate/README.md @@ -5,6 +5,7 @@ components: - Truncate categories: - Content +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/Truncate/design-guidelines.md b/src/Truncate/design-guidelines.md new file mode 100644 index 0000000000..2bf3ae0572 --- /dev/null +++ b/src/Truncate/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'Truncate' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the Truncate component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of Truncate even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/ValidationFormGroup/README.md b/src/ValidationFormGroup/README.md index 8875c0dec7..5964d66034 100644 --- a/src/ValidationFormGroup/README.md +++ b/src/ValidationFormGroup/README.md @@ -5,6 +5,7 @@ components: - ValidationFormGroup categories: - Forms (deprecated) +tabName: 'implementation' status: 'Deprecate Soon' designStatus: 'Done' devStatus: 'Done' diff --git a/src/hooks/useArrowKeyNavigation.mdx b/src/hooks/useArrowKeyNavigation/README.md similarity index 98% rename from src/hooks/useArrowKeyNavigation.mdx rename to src/hooks/useArrowKeyNavigation/README.md index d6629f7bde..e0c9f45b2e 100644 --- a/src/hooks/useArrowKeyNavigation.mdx +++ b/src/hooks/useArrowKeyNavigation/README.md @@ -5,6 +5,7 @@ categories: - Hooks components: - useArrowKeyNavigation +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/hooks/useArrowKeyNavigation/design-guidelines.md b/src/hooks/useArrowKeyNavigation/design-guidelines.md new file mode 100644 index 0000000000..779c7bdcd7 --- /dev/null +++ b/src/hooks/useArrowKeyNavigation/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'useArrowKeyNavigation' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the useArrowKeyNavigation component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of useArrowKeyNavigation even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/hooks/useIndexOfLastVisibleChild.mdx b/src/hooks/useIndexOfLastVisibleChild/README.md similarity index 98% rename from src/hooks/useIndexOfLastVisibleChild.mdx rename to src/hooks/useIndexOfLastVisibleChild/README.md index 59a9fc417c..3d3474b20d 100644 --- a/src/hooks/useIndexOfLastVisibleChild.mdx +++ b/src/hooks/useIndexOfLastVisibleChild/README.md @@ -5,6 +5,7 @@ categories: - Hooks components: - useIndexOfLastVisibleChild +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/hooks/useIndexOfLastVisibleChild/design-guidelines.md b/src/hooks/useIndexOfLastVisibleChild/design-guidelines.md new file mode 100644 index 0000000000..1b7556c4c8 --- /dev/null +++ b/src/hooks/useIndexOfLastVisibleChild/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'useIndexOfLastVisibleChild' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the useIndexOfLastVisibleChild component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of useIndexOfLastVisibleChild even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/hooks/useIsVisible.mdx b/src/hooks/useIsVisible/README.md similarity index 98% rename from src/hooks/useIsVisible.mdx rename to src/hooks/useIsVisible/README.md index dd933e399c..a7d7f671ac 100644 --- a/src/hooks/useIsVisible.mdx +++ b/src/hooks/useIsVisible/README.md @@ -5,6 +5,7 @@ categories: - Hooks components: - useIsVisible +tabName: 'implementation' status: 'Stable' designStatus: 'Done' devStatus: 'Done' diff --git a/src/hooks/useIsVisible/design-guidelines.md b/src/hooks/useIsVisible/design-guidelines.md new file mode 100644 index 0000000000..4b19fbdc5a --- /dev/null +++ b/src/hooks/useIsVisible/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'useIsVisible' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the useIsVisible component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of useIsVisible even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/hooks/useToggle.mdx b/src/hooks/useToggle/README.md similarity index 98% rename from src/hooks/useToggle.mdx rename to src/hooks/useToggle/README.md index 79a116135b..50495b0a9c 100644 --- a/src/hooks/useToggle.mdx +++ b/src/hooks/useToggle/README.md @@ -5,6 +5,7 @@ categories: - Hooks components: - useToggle +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/hooks/useToggle/design-guidelines.md b/src/hooks/useToggle/design-guidelines.md new file mode 100644 index 0000000000..c98bd39fad --- /dev/null +++ b/src/hooks/useToggle/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'useToggle' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the useToggle component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of useToggle even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/src/hooks/useWindowSize.mdx b/src/hooks/useWindowSize/README.md similarity index 93% rename from src/hooks/useWindowSize.mdx rename to src/hooks/useWindowSize/README.md index c7e4807701..1df58c8381 100644 --- a/src/hooks/useWindowSize.mdx +++ b/src/hooks/useWindowSize/README.md @@ -5,6 +5,7 @@ categories: - Hooks components: - useWindowSize +tabName: 'implementation' status: 'New' designStatus: 'Done' devStatus: 'Done' diff --git a/src/hooks/useWindowSize/design-guidelines.md b/src/hooks/useWindowSize/design-guidelines.md new file mode 100644 index 0000000000..dd0add8d2c --- /dev/null +++ b/src/hooks/useWindowSize/design-guidelines.md @@ -0,0 +1,24 @@ +--- +title: 'useWindowSize' +tabName: 'design-guidelines' +--- + +

We are excited to announce upcoming improvements to the Design Guidelines section for the useWindowSize component. +These updates aim to enhance the ease and effectiveness of utilizing the component in your projects. +Please review the preliminary list of changes that will soon be available:

+ +

What to Expect:

+ +
    +
  1. Expanded Usage Examples: We will be adding more detailed and diverse usage examples for the component, allowing you to seamlessly integrate it into various scenarios.
    2. + +
  2. Optimized Code: We are working on optimizing the component's code for improved performance and readability.
    3. + +
  3. Interactive Demonstrations: Providing interactive demonstrations that allow you to interact with the component in real-time and assess its capabilities.
    4. + +
  4. Best Design Practices: Additional tips on using the component in line with best design practices.
    5. + +
  5. Extra Resources: Delivering supplementary resources such as graphics, templates, and guides to facilitate the integration process.
    6. +
+ +

Stay tuned for updates, as we strive to make the use of useWindowSize even more convenient and productive! If you have specific requests or suggestions, feel free to share them with us.

diff --git a/www/utils/createCssUtilityClassNodes.js b/www/gatsby-node-functions/createCssUtilityClassNodes.js similarity index 100% rename from www/utils/createCssUtilityClassNodes.js rename to www/gatsby-node-functions/createCssUtilityClassNodes.js diff --git a/www/utils/createPages.js b/www/gatsby-node-functions/createPages.js similarity index 86% rename from www/utils/createPages.js rename to www/gatsby-node-functions/createPages.js index cbca6919f4..5a602dc6b1 100644 --- a/www/utils/createPages.js +++ b/www/gatsby-node-functions/createPages.js @@ -1,7 +1,7 @@ const path = require('path'); const fs = require('fs'); +const { getThemesSCSSVariables, processComponentSCSSVariables, retrieveRootFiles } = require('./utils'); const { INSIGHTS_PAGES } = require('../src/config'); -const { getThemesSCSSVariables, processComponentSCSSVariables } = require('../theme-utils'); const componentsUsage = require('../src/utils/componentsUsage'); async function createPages(graphql, actions, reporter) { @@ -27,6 +27,7 @@ async function createPages(graphql, actions, reporter) { } frontmatter { components + tabName } slug fileAbsolutePath @@ -40,19 +41,20 @@ async function createPages(graphql, actions, reporter) { } // Create component detail pages. const components = result.data.allMdx.edges; - const themesSCSSVariables = await getThemesSCSSVariables(); // you'll call `createPage` for each result // eslint-disable-next-line no-restricted-syntax for (const { node } of components) { + /* eslint-disable no-await-in-loop */ const componentDir = node.slug.split('/')[0]; const variablesPath = path.resolve(__dirname, `../../src/${componentDir}/_variables.scss`); + const componentPath = path.resolve(__dirname, `../../src/${componentDir}`); const githubEditPath = `https://github.com/openedx/paragon/edit/master/src${node.fileAbsolutePath.split('src')[1]}`; + const componentTabsData = await retrieveRootFiles(componentPath, componentDir, node.slug); let scssVariablesData = {}; if (fs.existsSync(variablesPath)) { - // eslint-disable-next-line no-await-in-loop scssVariablesData = await processComponentSCSSVariables(variablesPath, themesSCSSVariables); } @@ -70,6 +72,9 @@ async function createPages(graphql, actions, reporter) { scssVariablesData, componentsUsageInsights: Object.keys(componentsUsage), githubEditPath, + componentUrl: node.fields.slug, + tabName: node.frontmatter.tabName, + componentTabsData, }, }); } diff --git a/www/gatsby-node-functions/index.js b/www/gatsby-node-functions/index.js new file mode 100644 index 0000000000..3a2ba839dd --- /dev/null +++ b/www/gatsby-node-functions/index.js @@ -0,0 +1,9 @@ +const createPages = require('./createPages'); +const onCreateNode = require('./onCreateNode'); +const onCreateWebpackConfig = require('./onCreateWebpackConfig'); +const createCssUtilityClassNodes = require('./createCssUtilityClassNodes'); +const onCreatePage = require('./onCreatePage'); + +module.exports = { + createPages, onCreateNode, onCreateWebpackConfig, createCssUtilityClassNodes, onCreatePage, +}; diff --git a/www/utils/onCreateNode.js b/www/gatsby-node-functions/onCreateNode.js similarity index 100% rename from www/utils/onCreateNode.js rename to www/gatsby-node-functions/onCreateNode.js diff --git a/www/utils/onCreatePage.js b/www/gatsby-node-functions/onCreatePage.js similarity index 100% rename from www/utils/onCreatePage.js rename to www/gatsby-node-functions/onCreatePage.js diff --git a/www/utils/onCreateWebpackConfig.js b/www/gatsby-node-functions/onCreateWebpackConfig.js similarity index 100% rename from www/utils/onCreateWebpackConfig.js rename to www/gatsby-node-functions/onCreateWebpackConfig.js diff --git a/www/gatsby-node-functions/utils/component-page-tabs.js b/www/gatsby-node-functions/utils/component-page-tabs.js new file mode 100644 index 0000000000..dde1adcfe5 --- /dev/null +++ b/www/gatsby-node-functions/utils/component-page-tabs.js @@ -0,0 +1,49 @@ +const fsp = require('fs').promises; +const path = require('path'); + +async function exploreComponentDirectory(directoryPath, componentStructure) { + try { + const files = await fsp.readdir(directoryPath); + + const componentData = { + rootFiles: [], + subdirectories: {}, + }; + + await Promise.all(files.map(async (fileName) => { + const filePath = path.join(directoryPath, fileName); + const fileStats = await fsp.stat(filePath); + + if (fileStats.isDirectory()) { + componentData.subdirectories[fileName] = await exploreComponentDirectory(filePath, componentStructure); + } else if (path.extname(fileName) === '.md' && !fileName.includes('README')) { + const fileNameWithoutExtension = path.parse(fileName).name; + componentData.rootFiles.push(fileNameWithoutExtension); + } + })); + + componentStructure[path.basename(directoryPath)] = componentData; + return componentData; + } catch (error) { + // eslint-disable-next-line no-console + console.error(`Error exploring component directory: ${directoryPath}`, error); + throw error; + } +} + +async function retrieveRootFiles(componentPath, componentDir, nodeSlug) { + const [subComponentName] = nodeSlug.split('/').slice(1); + const componentStructure = {}; + await exploreComponentDirectory(componentPath, componentStructure); + + const componentSubDirectories = componentStructure[componentDir]?.subdirectories; + + if (componentSubDirectories !== undefined) { + const selectedComponent = componentSubDirectories[subComponentName] || componentStructure[componentDir]; + return selectedComponent.rootFiles || []; + } + + return []; +} + +module.exports = { retrieveRootFiles }; diff --git a/www/gatsby-node-functions/utils/index.js b/www/gatsby-node-functions/utils/index.js new file mode 100644 index 0000000000..44887eb630 --- /dev/null +++ b/www/gatsby-node-functions/utils/index.js @@ -0,0 +1,6 @@ +const { retrieveRootFiles } = require('./component-page-tabs'); +const { getThemesSCSSVariables, processComponentSCSSVariables } = require('./theme-variables'); + +module.exports = { + retrieveRootFiles, getThemesSCSSVariables, processComponentSCSSVariables, +}; diff --git a/www/theme-utils.js b/www/gatsby-node-functions/utils/theme-variables.js similarity index 93% rename from www/theme-utils.js rename to www/gatsby-node-functions/utils/theme-variables.js index 249784e145..520c3a7087 100644 --- a/www/theme-utils.js +++ b/www/gatsby-node-functions/utils/theme-variables.js @@ -1,3 +1,4 @@ +/* eslint-disable no-restricted-syntax */ /** * This module contains utilities functions * which deal with displaying multiple themes on docs site. @@ -6,7 +7,7 @@ const path = require('path'); const fs = require('fs'); const readline = require('readline'); -const { THEMES } = require('./theme-config'); +const { THEMES } = require('../../theme-config'); /** * Parses SCSS variables stylesheet into JS object of the form {variable: value} @@ -30,7 +31,6 @@ async function parseSCSSIntoObject(pathToVariables) { let currentVariable = ''; let currentValue = ''; - // eslint-disable-next-line no-restricted-syntax for await (const line of rl) { // we encountered new variable if (line.startsWith('$')) { @@ -64,11 +64,10 @@ async function parseSCSSIntoObject(pathToVariables) { async function getThemesSCSSVariables() { const themeSCSSVariables = {}; - // eslint-disable-next-line no-restricted-syntax for (const { id, pathToVariables } of THEMES) { if (pathToVariables) { // eslint-disable-next-line no-await-in-loop - themeSCSSVariables[id] = await parseSCSSIntoObject(path.resolve(__dirname, '../node_modules', pathToVariables)); + themeSCSSVariables[id] = await parseSCSSIntoObject(path.resolve(__dirname, '../../../node_modules', pathToVariables)); } else { themeSCSSVariables[id] = {}; } @@ -110,7 +109,6 @@ async function processComponentSCSSVariables(pathToStylesheet, themesData) { }); } - // eslint-disable-next-line no-restricted-syntax for await (const line of rl) { if (line.startsWith('$')) { if (currentVar && currentValue) { diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 3400d41792..9b702126b4 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -4,11 +4,13 @@ * See: https://www.gatsbyjs.com/docs/node-apis/ */ -const createPages = require('./utils/createPages'); -const onCreateNode = require('./utils/onCreateNode'); -const onCreateWebpackConfig = require('./utils/onCreateWebpackConfig'); -const createCssUtilityClassNodes = require('./utils/createCssUtilityClassNodes'); -const onCreatePage = require('./utils/onCreatePage'); +const { + createPages, + onCreateNode, + onCreateWebpackConfig, + createCssUtilityClassNodes, + onCreatePage, +} = require('./gatsby-node-functions'); exports.onCreateWebpackConfig = ({ actions }) => onCreateWebpackConfig(actions); diff --git a/www/src/components/ComponentsList.tsx b/www/src/components/ComponentsList.tsx index f0a20f0b8e..235829d6dc 100644 --- a/www/src/components/ComponentsList.tsx +++ b/www/src/components/ComponentsList.tsx @@ -11,6 +11,7 @@ const componentsQuery = graphql` internal: { owner: { nin: "gatsby-transformer-react-docgen" } } } frontmatter: { type: {} } + fields: { slug: { regex: "/^((?!guidelines).)*$/" } } } sort: { fields: frontmatter___title } ) { diff --git a/www/src/components/Menu.tsx b/www/src/components/Menu.tsx index e80eade226..76f4d43c61 100644 --- a/www/src/components/Menu.tsx +++ b/www/src/components/Menu.tsx @@ -34,6 +34,7 @@ const menuQuery = graphql` internal: { owner: { nin: "gatsby-transformer-react-docgen" } } } frontmatter: { type: {} } + fields: { slug: { regex: "/^((?!guidelines).)*$/" } } } sort: { fields: frontmatter___title } ) { @@ -167,7 +168,11 @@ interface IMenuQueryComponents { all: Array } -function Menu() { +export type MenuProps = { + tabName?: string, +}; + +function Menu({ tabName }: MenuProps) { const { settings, handleSettingsChange, @@ -286,14 +291,14 @@ function Menu() { key={fieldValue} styling="basic" title={fieldValue} - defaultOpen={nodes.some(({ fields }) => fields.slug === pathname)} + defaultOpen={nodes.some(({ fields }) => pathname.includes(fields.slug))} > @@ -319,4 +324,12 @@ function Menu() { ); } +Menu.propTypes = { + tabName: PropTypes.string, +}; + +Menu.defaultProps = { + tabName: undefined, +}; + export default Menu; diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index b2bd452395..e85a9e13ce 100644 --- a/www/src/components/PageLayout.tsx +++ b/www/src/components/PageLayout.tsx @@ -43,6 +43,7 @@ export interface ILayout { tab?: string, isAutoToc?: boolean, githubEditPath?: string, + tabName?: string, } function Layout({ @@ -54,6 +55,7 @@ function Layout({ isAutoToc, tab, githubEditPath, + tabName, }: ILayout) { const isMobile = useMediaQuery({ maxWidth: breakpoints.extraLarge.minWidth }); const { settings } = useContext(SettingsContext); @@ -72,6 +74,7 @@ function Layout({
{isMdx || !hideFooterComponentMenu ? ( @@ -79,7 +82,7 @@ function Layout({ - +
- +
) : ( @@ -61,7 +62,7 @@ function Header({ siteTitle, showMinimizedTitle }: IHeaderProps) { onEscapeKey={close} >
- +
)} @@ -73,11 +74,13 @@ function Header({ siteTitle, showMinimizedTitle }: IHeaderProps) { Header.propTypes = { siteTitle: PropTypes.string, showMinimizedTitle: PropTypes.bool, + tabName: PropTypes.string, }; Header.defaultProps = { siteTitle: '', showMinimizedTitle: false, + tabName: undefined, }; export default Header; diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.jsx index 0b696ed65d..6d54ccf9c5 100644 --- a/www/src/pages/foundations/elevation.jsx +++ b/www/src/pages/foundations/elevation.jsx @@ -14,6 +14,7 @@ import SEO from '../../components/SEO'; import Layout from '../../components/PageLayout'; import { SettingsContext } from '../../context/SettingsContext'; import { sendUserAnalyticsEvent, SHADOW_GENERATOR_LAYER_EVENTS } from '../../../segment-events'; +import upperFirstLetter from '../../utils/helpers'; const boxShadowSides = ['down', 'up', 'right', 'left', 'centered']; const boxShadowLevels = [1, 2, 3, 4, 5]; @@ -280,7 +281,7 @@ export default function ElevationPage({ pageContext }) { const sideTitle = boxShadowSides.map(side => (

- {side.charAt(0).toUpperCase() + side.substring(1)} + {upperFirstLetter(side)}

)); diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx index 3cb17c6930..0319d2986a 100644 --- a/www/src/templates/component-page-template.tsx +++ b/www/src/templates/component-page-template.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/no-unstable-nested-components */ import React, { useContext, useEffect, useState } from 'react'; import PropTypes from 'prop-types'; -import { graphql, Link } from 'gatsby'; +import { graphql, Link, navigate } from 'gatsby'; import { MDXProvider } from '@mdx-js/react'; import { MDXRenderer } from 'gatsby-plugin-mdx'; import classNames from 'classnames'; @@ -11,6 +11,8 @@ import { breakpoints, useMediaQuery, Stack, + Tabs, + Tab, } from '~paragon-react'; import { SettingsContext } from '../context/SettingsContext'; import { DEFAULT_THEME } from '../../theme-config'; @@ -22,6 +24,7 @@ import LinkedHeading from '../components/LinkedHeading'; import ComponentsUsage from '../components/insights/ComponentsUsage'; import LeaveFeedback from '../components/LeaveFeedback'; import PageEditBtn from '../components/PageEditBtn'; +import upperFirstLetter from '../utils/helpers'; export interface IPageTemplate { data: { @@ -31,6 +34,7 @@ export interface IPageTemplate { status: string, components: string, notes: string, + tabName: string, }, tableOfContents: { items: Array<{}>, @@ -45,6 +49,9 @@ export interface IPageTemplate { scssVariablesData: Record, componentsUsageInsights: string[], githubEditPath: string, + componentTabsData: string[], + componentUrl: string, + tabName: string, } } @@ -54,7 +61,9 @@ export type ShortCodesTypes = { export default function PageTemplate({ data: { mdx, components: componentNodes }, - pageContext: { scssVariablesData, componentsUsageInsights, githubEditPath }, + pageContext: { + scssVariablesData, componentsUsageInsights, githubEditPath, componentTabsData, componentUrl, tabName, + }, }: IPageTemplate) { const isMobile = useMediaQuery({ maxWidth: breakpoints.large.maxWidth }); const [showMinimizedTitle, setShowMinimizedTitle] = useState(false); @@ -126,10 +135,26 @@ export default function PageTemplate({ useEffect(() => setShowMinimizedTitle(!!isMobile), [isMobile]); + const handleOnSelect = (selectedTab: string) => { + const isCurrentTab = selectedTab === mdx.frontmatter.tabName; + const hasSelectedTab = componentTabsData + .some((availableTabs) => ( + Array.isArray(availableTabs) + ? availableTabs.includes(selectedTab) : availableTabs === selectedTab)); + + const componentBaseUrl = componentUrl.replace(`/${tabName}`, ''); + + if (!isCurrentTab) { + const newUrl = hasSelectedTab ? `${componentBaseUrl}${selectedTab}` : componentBaseUrl; + navigate(newUrl); + } + }; + return ( @@ -160,46 +185,69 @@ export default function PageTemplate({ - - {mdx.body} - - {scssVariables && ( -
-

- {scssVariablesTitle} - - # - -

- {scssVariables} -
- )} - {components[sortedComponentNames[0]]?.props && ( -

- {propsAPITitle} - - # - -

- )} - {typeof sortedComponentNames !== 'string' && sortedComponentNames?.map((componentName: string | number) => { - const node: { displayName: string } = components[componentName]; - if (!node) { - return null; - } - return ; - })} - {isUsageInsights && ( - <> -

- {usageInsightsTitle} - - # - -

- - - )} + + +
+ + {mdx.body} + + {scssVariables && ( +
+

+ {scssVariablesTitle} + + # + +

+ {scssVariables} +
+ )} + {components[sortedComponentNames[0]]?.props && ( +

+ {propsAPITitle} + + # + +

+ )} + {typeof sortedComponentNames !== 'string' && sortedComponentNames?.map((componentName: string | number) => { + const node: { displayName: string } = components[componentName]; + if (!node) { + return null; + } + return ; + })} + {isUsageInsights && ( + <> +

+ {usageInsightsTitle} + + # + +

+ + + )} +
+ + {componentTabsData.map((tabTitle: string) => { + const prettyTabTitle = upperFirstLetter(tabTitle.replace('-', ' ')); + return ( + +
+ + {mdx.body} + +
+ + ); + })} + ); @@ -243,6 +291,7 @@ export const pageQuery = graphql` status notes components + tabName } tableOfContents } diff --git a/www/src/utils/helpers.ts b/www/src/utils/helpers.ts new file mode 100644 index 0000000000..e43578be1f --- /dev/null +++ b/www/src/utils/helpers.ts @@ -0,0 +1,3 @@ +export default function upperFirstLetter(str: string) { + return str.charAt(0).toUpperCase() + str.slice(1); +}