DescriptionList feature enhancements

.prettierignore

@@ -1,5 +1,4 @@
 *.hbs
-*.md
 *.yml
 .github
 package.json

CONTRIBUTING.md

@@ -2,7 +2,7 @@ This is a guide for Nulogy employees who wish to contribute to the Design System
 
 ### Before Starting Development
 
-Before you begin working on a feature or a new component, ensure that the proposed changes align with the design system's vision by having a discussion with the design system team. 
+Before you begin working on a feature or a new component, ensure that the proposed changes align with the design system's vision by having a discussion with the design system team.
 Additionally, verify that the new component has already been added to the design system's Figma library before opening a pull request.
 
 ### Prerequisites

LICENSE.md

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

MIGRATION.md

@@ -2,18 +2,18 @@
 
 ## Migrating from v5 to v6:
 
-### Remove deprecated props and components 
+### Remove deprecated props and components
 
-* `Title`, `SectionTitle`, and `SubsectionTitle`  should be replaced with  `Heading1`, `Heading2`, and `Heading3`
-* The `showTraining` prop has been removed from `BrandedNavBar`. Use `environment="training"` instead. 
+- `Title`, `SectionTitle`, and `SubsectionTitle` should be replaced with `Heading1`, `Heading2`, and `Heading3`
+- The `showTraining` prop has been removed from `BrandedNavBar`. Use `environment="training"` instead.
 
-### Replace theme.zindex with theme.zindices 
+### Replace theme.zindex with theme.zindices
 
-This shouldn't cause an issue if you're interacting with zIndex via properties, but if you were directly importing the theme then any reference to theme.zIndex should be replaced with theme.zIndices. 
+This shouldn't cause an issue if you're interacting with zIndex via properties, but if you were directly importing the theme then any reference to theme.zIndex should be replaced with theme.zIndices.
 
-### Install @nulogy/icons as a peerDependency 
+### Install @nulogy/icons as a peerDependency
 
-The upgrade in v5 didn't take due to a rollup setting, so if you still haven't added @nulogy/icons with `yarn add @nulogy/icons` then now is the time. 
+The upgrade in v5 didn't take due to a rollup setting, so if you still haven't added @nulogy/icons with `yarn add @nulogy/icons` then now is the time.
 
 ## Migrating from v4 to v5:
 
@@ -30,14 +30,16 @@ This was done to support using new icons without having to upgrade @nulogy/compo
 ### 2. AsyncSelect onChange handler
 
 If you are using the AsyncSelect component in your project, please update the onChange handler if you are using it. `onChange` now returns the complete option object that is selected rather than just the string value.
-    ```
-    onChange = (value) => {}
-
+
+`````
+onChange = (value) => {}
+
     //becomes
-    
+
     onChange = ({value, label}). => {}
     ````
-If you needed to use the AsyncSelect as a controlled component, this was broken in previous verisons but now you can do so  by using the `onChange` and `value` prop.
+
+If you needed to use the AsyncSelect as a controlled component, this was broken in previous verisons but now you can do so by using the `onChange` and `value` prop.
 
 ### 3. MonthPicker and MonthRange components
 
@@ -65,3 +67,4 @@ All components must be wrapped in an <NDSProvider> component. This was already a
 All tests using NDS components must be wrapped in the NDSProvider as well. You can make a custom helper that can be reused throughout your app to wrap components in the Providers you need.
 
 You can use the [render](https://github.com/nulogy/design-system/blob/master/components/src/NDSProvider/render.spec-utils.js) we use as a guide to write your own
+`````

README.md

@@ -1,11 +1,11 @@
 # @nulogy/components
+
 ![npm (scoped)](https://img.shields.io/npm/v/@nulogy/components.svg?style=flat-square)
 ![Build](https://img.shields.io/github/workflow/status/nulogy/design-system/Release?style=flat-square)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/nulogy/design-system/blob/master/CONTRIBUTING.md)
 
 > Built with React, components make it easy to create interfaces that conform to the principles of the Nulogy Design System.
 
-
 ## 📦 Installation
 
 ### 1. Add the package
@@ -83,6 +83,7 @@ Component documentation and usage guides are stored in the [github.com/nulogy/nu
 ## 👋 Work requests
 
 If you encounter a bug, need a new component or new capability of an existing component, or need any other type of support please file a work request in [GitHub Issues](https://github.com/nulogy/design-system/issues). To learn more about how to file a request and what to expect please read [How to file NDS work request](https://github.com/nulogy/design-system/wiki/How-to-file-NDS-work-request).
+
 - [#design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)
 
 ## 🙌 Contributing
@@ -93,13 +94,12 @@ Please see [Contributing.MD](https://github.com/nulogy/design-system/blob/master
 
 - [#design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)
 
-
 ## 📦 Related Packages
 
 The design-system is a collection of related packages. If you're looking for more packages, see below.
 
-| Package                                                                                       | Description                                                                        |                                                                                                                                             |
-| --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| [@nulogy/css](https://github.com/nulogy/nds-css)               | CSS components and utility classes for adding new styles to non-React applications | [![CSS on NPM](https://img.shields.io/npm/v/@nulogy/css?style=flat-square)](https://www.npmjs.com/package/@nulogy/css)                      |
-| [@nulogy/icons](https://github.com/nulogy/nds-icons)           | A selection of Material Icon `svgs` used by Nulogy applications                    | [![Icons on NPM](https://img.shields.io/npm/v/@nulogy/icons?style=flat-square)](https://www.npmjs.com/package/@nulogy/icons)                |
-| [@nulogy/tokens](https://github.com/nulogy/nds-tokens)         | Design language styles (e.g colours, type, spacing, shadows, etc.)                 | [![Tokens on NPM](https://img.shields.io/npm/v/@nulogy/tokens?style=flat-square)](https://www.npmjs.com/package/@nulogy/tokens)             |
+| Package                                                | Description                                                                        |                                                                                                                                 |
+| ------------------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| [@nulogy/css](https://github.com/nulogy/nds-css)       | CSS components and utility classes for adding new styles to non-React applications | [![CSS on NPM](https://img.shields.io/npm/v/@nulogy/css?style=flat-square)](https://www.npmjs.com/package/@nulogy/css)          |
+| [@nulogy/icons](https://github.com/nulogy/nds-icons)   | A selection of Material Icon `svgs` used by Nulogy applications                    | [![Icons on NPM](https://img.shields.io/npm/v/@nulogy/icons?style=flat-square)](https://www.npmjs.com/package/@nulogy/icons)    |
+| [@nulogy/tokens](https://github.com/nulogy/nds-tokens) | Design language styles (e.g colours, type, spacing, shadows, etc.)                 | [![Tokens on NPM](https://img.shields.io/npm/v/@nulogy/tokens?style=flat-square)](https://www.npmjs.com/package/@nulogy/tokens) |

TESTING.md

@@ -2,7 +2,7 @@
 
 ## Component API Testing
 
-All parts of the component API should be tested. If the prop only results in a visual change it may be covered with visual tests only. If there are functional differences make sure to test capture these in written tests. 
+All parts of the component API should be tested. If the prop only results in a visual change it may be covered with visual tests only. If there are functional differences make sure to test capture these in written tests.
 
 ### Visual Testing
 
@@ -41,8 +41,8 @@ And we avoid using:
 - Most HTML tags
 
 Test IDs are added when other options are hard to use.
-Test IDs should be maintained while refactoring to avoid breaking changes that could cause tests to fail in consuming applications. 
+Test IDs should be maintained while refactoring to avoid breaking changes that could cause tests to fail in consuming applications.
 
 ## Utilities Testing
 
-All .util files should have a corresponding Jest .spec file that tests a variety of arguments with each utility function.
+All .util files should have a corresponding Jest .spec file that tests a variety of arguments with each utility function.

cypress/readme.MD

@@ -23,11 +23,14 @@ Stories within any component folder can be tested and additional stories just fo
 # How do I run e2e specs?
 
 To test in the cypress runner (to see the tests run):
+
 - `yarn cypress:open`
   - Then run whichever file you want.
 
 CLI:
+
 - `yarn e2e:test`
 
 IN BROWSER:
+
 - `yarn e2e:start`

package.json

@@ -129,6 +129,7 @@
     "plop": "^2.4.0",
     "prettier": "^3.4.2",
     "react": "17.0.2",
+    "re-resizable": "^6.10.3",
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
     "react-router-dom": "^5.2.0",

src/BottomSheet/README.md

@@ -1,28 +1,25 @@
-# BottomSheet 
+# BottomSheet
 
 The BottomSheet component is a modal interface element that slides up from the bottom of the screen, providing additional content or actions while maintaining context with the main view.
 
 ## Purpose
 
 The BottomSheet is ideal for:
+
 - Displaying detailed information without navigating away from the current page
 - Creating a focused interaction space on mobile devices
 - Progressive disclosure of complex features or content
 
 ## Basic Usage
 
 ```tsx
-import { BottomSheet } from '@nulogy/components';
+import { BottomSheet } from "@nulogy/components";
 
 function MyComponent() {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
-    <BottomSheet 
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      title="Sheet Title"
-    >
+    <BottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} title="Sheet Title">
       {/* Content goes here */}
     </BottomSheet>
   );
@@ -31,21 +28,21 @@ function MyComponent() {
 
 ## Props
 
-| Prop | Type | Description | Default | 
-|------|------|-------------|---------|
-| `isOpen` | boolean | Controls the visibility of the bottom sheet | `false` | 
-| `onClose` | function | Callback function when the sheet is closed using either the close action or an overlay | `noop` |  
-| `title` | string | Main heading of the sheet. Used as an `aria-label` when an `aria-label` it is not passed | - |  
-| `helpText` | ReactNode | Optional explanatory content below the title | - |  
-| `disableCloseOnOverlayClick` | boolean | Enables closing the sheet by clicking the overlay | `false` |  
-| `hideCloseButton` | boolean | Hides the close button | `false` |  
-| `aria-label` | string | Accessibility label for the sheet | - |  
-| `sheetWidth` | ResponsiveWidth | Controls the width of the entire sheet | `"100%"` |  
-| `contentWidth` | ResponsiveWidth | Controls the width of the content container inside the sheet | `{ small: "100%", medium: 704 }` |  
-| `closeButtonLabel` | string | Label for close action. Internationalized `Close` is used if no value is supplied | `t("close")` |  
-| `primaryAction` | Function | Renders primary action | - |  
-| `secondaryAction` | Function | Renders secondary action | - |  
-| `children` | ReactNode | Content to be displayed inside the sheet | - |  
+| Prop                         | Type            | Description                                                                              | Default                          |
+| ---------------------------- | --------------- | ---------------------------------------------------------------------------------------- | -------------------------------- |
+| `isOpen`                     | boolean         | Controls the visibility of the bottom sheet                                              | `false`                          |
+| `onClose`                    | function        | Callback function when the sheet is closed using either the close action or an overlay   | `noop`                           |
+| `title`                      | string          | Main heading of the sheet. Used as an `aria-label` when an `aria-label` it is not passed | -                                |
+| `helpText`                   | ReactNode       | Optional explanatory content below the title                                             | -                                |
+| `disableCloseOnOverlayClick` | boolean         | Enables closing the sheet by clicking the overlay                                        | `false`                          |
+| `hideCloseButton`            | boolean         | Hides the close button                                                                   | `false`                          |
+| `aria-label`                 | string          | Accessibility label for the sheet                                                        | -                                |
+| `sheetWidth`                 | ResponsiveWidth | Controls the width of the entire sheet                                                   | `"100%"`                         |
+| `contentWidth`               | ResponsiveWidth | Controls the width of the content container inside the sheet                             | `{ small: "100%", medium: 704 }` |
+| `closeButtonLabel`           | string          | Label for close action. Internationalized `Close` is used if no value is supplied        | `t("close")`                     |
+| `primaryAction`              | Function        | Renders primary action                                                                   | -                                |
+| `secondaryAction`            | Function        | Renders secondary action                                                                 | -                                |
+| `children`                   | ReactNode       | Content to be displayed inside the sheet                                                 | -                                |
 
 ## Compositional API
 
@@ -71,6 +68,7 @@ import { BottomSheetParts as BottomSheet } from '@nulogy/components';
   </BottomSheet.Overlay>
 </BottomSheet.Root>
 ```
+
 ## Accessibility
 
 - Automatically focuses on the first focusable element inside the Sheet, the focus is then returned to the last focused element when the sheet is closed

src/BottomSheet/stories/BottomSheet.parts.story.tsx

@@ -38,7 +38,7 @@ export const RenderedUsingCompositionalAPI = () => {
                   <BottomSheet.Title>Title</BottomSheet.Title>
                   <BottomSheet.HelpText>
                     <>
-                      Help text can further explains the purpose and content of the BottomSheet{" "}
+                      Help text can further explain the purpose and content of the BottomSheet{" "}
                       <Link href="#story">Learn more</Link>
                     </>
                   </BottomSheet.HelpText>

src/Button/CloseButton.tsx

@@ -13,7 +13,7 @@ const WrapperButton = styled.button(({ disabled, theme }) => ({
   color: theme.colors.black,
   cursor: disabled ? "arrow" : "pointer",
   [`${Icon}`]: {
-    borderRadius: theme.radii.pill,
+    borderRadius: theme.radii.rounded,
     transition: ".2s",
   },
   "&:hover": {

src/Button/ControlIcon.tsx

@@ -34,7 +34,7 @@ const StyledButton = styled.button<{
     display: "flex",
     alignItems: "center",
     padding: theme.space.half,
-    borderRadius: theme.radii.pill,
+    borderRadius: theme.radii.rounded,
     color: getIconColorByState({ toggled, disabled, theme }),
     "&:focus": {
       outline: "none",

src/Button/IconicButton.tsx

@@ -7,7 +7,6 @@ import icons from "@nulogy/icons";
 import { IconName } from "@nulogy/icons";
 import { Icon } from "../Icon";
 import { Text } from "../Type";
-import { DefaultNDSThemeType } from "../theme";
 import { ComponentVariant, useComponentVariant } from "../NDSProvider/ComponentVariantContext";
 
 interface BaseProps {
@@ -31,7 +30,7 @@ const IconWrapper = styled.span<{ size: string }>(({ theme, size }) => ({
   flexShrink: 0,
   alignItems: "center",
   justifyContent: "center",
-  borderRadius: theme.radii.pill,
+  borderRadius: theme.radii.rounded,
   height: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,
   width: `calc(${theme.sizes[size] ?? size} + ${theme.sizes.x1})`,
   transition: ".2s",