refactor(Table): implement all new behaviors

.changeset/strong-pants-invite.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/icons": patch
+---
+
+Fix `sort` system icon to follow correct view box

.changeset/twelve-chairs-film.md

@@ -0,0 +1,12 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactoring on `<Table />`:
+  - Update of sort icons
+  - Added `expandable` on `<Table />` and `<Table.Row />`
+  - Refactoring of grid system
+  - Added `align` and `sentiment` prop on `<Table.Cell />`
+
+Refactoring on `<List />`:
+  - Update of sort icons

packages/icons/src/components/Icon/__generatedIcons__/SortIcon.tsx

@@ -11,8 +11,13 @@ export const SortIcon = ({ ...props }: Omit<IconProps, 'children'>) => (
   <Icon {...props}>
     <path
       fillRule="evenodd"
-      d="M11.72 5.47a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1-1.06 1.06l-2.72-2.72-2.72 2.72a.75.75 0 0 1-1.06-1.06zm-3.25 8.75a.75.75 0 0 1 1.06 0l2.72 2.72 2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0l-3.25-3.25a.75.75 0 0 1 0-1.06"
       clipRule="evenodd"
+      d="M6.28653 13.3952C6.66856 13.0132 7.28796 13.0132 7.67 13.3952L9.91304 15.6383L12.1561 13.3952C12.5381 13.0132 13.1575 13.0132 13.5396 13.3952C13.9216 13.7773 13.9216 14.3967 13.5396 14.7787L10.6048 17.7135C10.2227 18.0955 9.60334 18.0955 9.22131 17.7135L6.28653 14.7787C5.90449 14.3967 5.90449 13.7773 6.28653 13.3952Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.5396 7.60478C13.1575 7.98681 12.5381 7.98681 12.1561 7.60478L9.91304 5.36173L7.67 7.60478C7.28796 7.98681 6.66856 7.98681 6.28653 7.60478C5.90449 7.22274 5.90449 6.60334 6.28653 6.22131L9.22131 3.28653C9.60334 2.90449 10.2227 2.90449 10.6048 3.28653L13.5396 6.22131C13.9216 6.60334 13.9216 7.22274 13.5396 7.60478Z"
     />
   </Icon>
 )

packages/ui/src/components/List/HeaderCell.tsx

@@ -1,26 +1,25 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import {
+  InformationIcon,
+  SortIcon as SortIconUV,
+  SouthShortIcon,
+} from '@ultraviolet/icons'
 import type { ReactNode } from 'react'
-import { Stack } from '../Stack'
 import { Tooltip } from '../Tooltip'
 
-const ArrowDownIcon = styled(Icon)``
-const ArrowUpIcon = styled(Icon)``
-
-const StyledIconContainer = styled(Stack)`
-  color: ${({ theme }) => theme.colors.neutral.text};
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
+const StyledSortIcon = styled(SouthShortIcon, {
+  shouldForwardProp: prop => !['order'].includes(prop),
+})<{ order: 'ascending' | 'descending' }>`
+  transform: ${({ order }) => (order === 'ascending' ? 'rotate(-180deg)' : 'none')};
+  transition: transform 0.2s ease-in-out;
 `
 
-const SortIcon = () => (
-  <StyledIconContainer>
-    <ArrowUpIcon name="arrow-up" size={10} />
-    <ArrowDownIcon name="arrow-down" size={10} />
-  </StyledIconContainer>
-)
+const SortIcon = ({ order }: { order?: 'ascending' | 'descending' }) =>
+  order ? (
+    <StyledSortIcon order={order} sentiment="primary" />
+  ) : (
+    <SortIconUV sentiment="neutral" />
+  )
 
 const StyledHeaderCell = styled.div`
   display: flex;
@@ -41,14 +40,6 @@ const StyledHeaderCell = styled.div`
   &[aria-sort] {
     color: ${({ theme }) => theme.colors.primary.text};
   }
-
-  &[aria-sort='ascending'] ${ArrowUpIcon} {
-    color: ${({ theme }) => theme.colors.primary.text};
-  }
-
-  &[aria-sort='descending'] ${ArrowDownIcon} {
-    color: ${({ theme }) => theme.colors.primary.text};
-  }
 `
 
 type HeaderCellProps = {
@@ -103,16 +94,11 @@ export const HeaderCell = ({
       {children}
       {info ? (
         <Tooltip text={info}>
-          <Icon
-            name="information-outline"
-            size={20}
-            prominence="weak"
-            color="neutral"
-          />
+          <InformationIcon size="large" prominence="weak" sentiment="neutral" />
         </Tooltip>
       ) : null}
       {orderDirection !== undefined && isOrdered !== undefined ? (
-        <SortIcon data-sorted={order !== undefined} />
+        <SortIcon order={order} />
       ) : null}
     </StyledHeaderCell>
   )