feat: remove ul from bass.css file and update components to use list

[krisxcrash]

Description

This PR migrates from global <ul> styles to using the component adapter's UnorderedList component, improving consistency and customizability across the SDK.

JIRA Ticket: https://gustohq.atlassian.net/browse/GWS-5723

Changes Made

1. Removed Global <ul> Styles (src/styles/_Base.scss)

• Removed global styling for <ul> elements that was applying margin: 0, display: flex, flex-direction: column, gap, and padding
• This global styling is now handled by the UnorderedList component

2. Enhanced UnorderedList Component (src/components/Common/UI/List/List.module.scss)

• Added flex layout properties to unordered lists: display: flex, flex-direction: column
• Added consistent gap between list items: gap: toRem(12)
• Added consistent left padding: padding: 0 0 0 toRem(24)

3. Updated RequirementsList Component

TypeScript (src/components/Common/RequirementsList/RequirementsList.tsx):

• Replaced native <ul> and <li> elements with Components.UnorderedList
• Changed list items from <li> to <div> (since UnorderedList wraps items in <li> automatically)

Styles (src/components/Common/RequirementsList/RequirementsList.module.scss):

• Added overrides to remove default list styling: list-style-type: none !important, padding: 0 !important, gap: 0 !important
• Moved the dotted connector line pseudo-element from .listItem:not(:last-child)::after to :global(li):not(:last-child) .listItem::after to accommodate the new HTML structure
• This ensures the vertical dotted lines still appear between requirement items

4. Updated Employee/Landing Component (src/components/Employee/Landing/Landing.tsx)

• Replaced native <ul> and <li> elements with Components.UnorderedList
• Simplified list rendering by passing an array of translated strings directly to the items prop

5. Updated Welcome Stories (.ladle/Welcome.stories.tsx)

• Migrated list in Introduction story to use Components.UnorderedList
• Maintained existing list item structure and content

Testing

• Verified RequirementsList maintains its visual appearance (numbered icons, checkmarks, dotted connectors)
• Verified Employee/Landing list displays correctly
• No linter errors

Screenshots

[jeffredodd]

Few small things, otherwise its looking good!

[jeffredodd]

So a few things, if you look at the UnorderedList component, you'll see it actually provides the LI's. So we just need to provide the text here since the component will render this on each item.

          <li key={key} className={styles.item}>
            {item}
          </li>
        )```

[krisxcrash]

let me fix that!

[jeffredodd]

So, we're probably not style linting but we sorta have a no important rule on this team (Which we've written down nowhere).

Can we try to tackle these using the module to scope this? Take a look at how we use .root in other modules to achieve specificity.

[krisxcrash]

ohhh! yes, absolutely.

[jeffredodd]

This looks good cause of how its returning an array w/o LIs :)

[krisxcrash]

yay! :)

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.