Merge branch 'main' into husky

* main: fix(deps): update dependency @types/node to v16.11.36 (#2094) fix(deps): update dependency @swc/core to v1.2.189 (#2093) feat: <Stack> can align on x and y axis (#2096) feat: <Inline> can align on x and y axis (#2092) refa: `<Table>` (#2081) refa: Remove "variant" prop from <Box> (#2074) fix: Indeterminate is visual only + correctly render with checkbox only (#2079) fix(deps): update dependency typescript to v4.6.4 (#2087) fix(deps): update dependency @swc/core to v1.2.186 (#2085) fix(deps): update storybook monorepo (#2089) fix(deps): update typescript-eslint monorepo to v5.25.0 (#2090) chore(deps): update dependency tsup to v5.12.8 (#2084) fix(deps): update dependency @swc/jest to v0.2.21 (#2086) chore(deps): update pnpm to v7.1.2 (#2088) chore(deps): update dependency @babel/core to v7.17.12 (#2083) fix(deps): pin dependency jest-environment-jsdom to 28.1.0 (#2082) fix(deps): update jest monorepo (major) (#2078)
marigold-ui · May 23, 2022 · 4126c7e · 4126c7e
2 parents 3a8eacf + 843f457
commit 4126c7e
Show file tree

Hide file tree

Showing 70 changed files with 5,266 additions and 3,937 deletions.
diff --git a/.changeset/cuddly-bikes-reflect.md b/.changeset/cuddly-bikes-reflect.md
@@ -0,0 +1,7 @@
+---
+'@marigold/docs': major
+'@marigold/components': major
+'@marigold/tokens': major
+---
+
+feat: <Stack> can align on x and y axis
diff --git a/.changeset/curly-flowers-impress.md b/.changeset/curly-flowers-impress.md
@@ -0,0 +1,8 @@
+---
+'@marigold/components': major
+'@marigold/theme-b2b': major
+'@marigold/theme-core': major
+'@marigold/theme-unicorn': major
+---
+
+refa: separate selection/regular cell + use <Checkbox>
diff --git a/.changeset/four-squids-act.md b/.changeset/four-squids-act.md
@@ -0,0 +1,5 @@
+---
+'@marigold/jest-config': major
+---
+
+fix(deps): update jest to 28
diff --git a/.changeset/healthy-turtles-appear.md b/.changeset/healthy-turtles-appear.md
@@ -0,0 +1,5 @@
+---
+'@marigold/components': patch
+---
+
+fix: Indeterminate is visual only + correctly render with checkbox only
diff --git a/.changeset/seven-toes-bake.md b/.changeset/seven-toes-bake.md
@@ -0,0 +1,6 @@
+---
+'@marigold/docs': major
+'@marigold/components': major
+---
+
+feat: <Inline> can align on x and y axis
diff --git a/.changeset/stupid-impalas-sell.md b/.changeset/stupid-impalas-sell.md
@@ -0,0 +1,5 @@
+---
+'@marigold/storybook-config': patch
+---
+
+fix(deps): update storybook monorepo to v6.5.0
diff --git a/.changeset/thin-pens-warn.md b/.changeset/thin-pens-warn.md
@@ -0,0 +1,6 @@
+---
+'@marigold/components': major
+'@marigold/system': major
+---
+
+refa: Remove "variant" prop from <Box>, use `useComponentStyles` instead
diff --git a/config/eslint/package.json b/config/eslint/package.json
@@ -19,11 +19,11 @@
     "directory": "config/eslint"
   },
   "dependencies": {
-    "@babel/core": "7.17.10",
+    "@babel/core": "7.17.12",
     "@babel/plugin-syntax-flow": "^7.16.7",
     "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@typescript-eslint/eslint-plugin": "5.22.0",
-    "@typescript-eslint/parser": "5.22.0",
+    "@typescript-eslint/eslint-plugin": "5.25.0",
+    "@typescript-eslint/parser": "5.25.0",
     "babel-eslint": "^10.1.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "7.0.0",
@@ -39,10 +39,10 @@
   },
   "peerDependencies": {
     "eslint": "8.12.0",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   },
   "devDependencies": {
     "eslint": "8.12.0",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   }
 }
diff --git a/config/jest/index.js b/config/jest/index.js
@@ -8,6 +8,7 @@ const { pathsToModuleNameMapper } = require('ts-jest');
  */
 const base = {
   testEnvironment: 'jsdom',
+  testEnvironmentOptions: {},
   testMatch: ['<rootDir>/**/*.test.{ts,tsx}'],
   setupFilesAfterEnv: [path.resolve(__dirname, 'jest.setup.ts')],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

diff --git a/config/jest/package.json b/config/jest/package.json
@@ -21,25 +21,26 @@
     "directory": "config/jest"
   },
   "dependencies": {
-    "@babel/core": "7.17.10",
-    "@swc/core": "1.2.183",
-    "@swc/jest": "0.2.15",
+    "@babel/core": "7.17.12",
+    "@swc/core": "1.2.189",
+    "@swc/jest": "0.2.21",
     "@types/jest": "27.4.1",
-    "babel-jest": "27.5.1",
+    "babel-jest": "28.1.0",
     "find-up": "5.0.0",
     "jest-watch-typeahead": "1.0.0",
     "merge-deep": "3.0.3",
     "react-test-renderer": "17.0.2",
-    "ts-jest": "27.1.4"
+    "ts-jest": "28.0.2"
   },
   "peerDependencies": {
-    "jest": "27.x",
+    "jest": "28.x",
+    "jest-environment-jsdom": "28.x",
     "react": "17.0.2",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   },
   "devDependencies": {
-    "jest": "27.5.1",
+    "jest": "28.1.0",
     "react": "17.0.2",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   }
 }
diff --git a/config/storybook/package.json b/config/storybook/package.json
@@ -19,15 +19,15 @@
     "directory": "config/prettier"
   },
   "dependencies": {
-    "@babel/core": "7.17.10",
+    "@babel/core": "7.17.12",
     "@marigold/components": "workspace:*",
     "@marigold/theme-b2b": "workspace:*",
     "@marigold/theme-core": "workspace:*",
     "@marigold/theme-unicorn": "workspace:*",
     "@mdx-js/react": "1.6.22",
-    "@storybook/addon-a11y": "6.4.22",
-    "@storybook/addon-essentials": "6.4.22",
-    "@storybook/addon-interactions": "6.4.22",
+    "@storybook/addon-a11y": "6.5.2",
+    "@storybook/addon-essentials": "6.5.0",
+    "@storybook/addon-interactions": "6.5.0",
     "@storybook/jest": "0.0.10",
     "@storybook/testing-library": "0.0.11",
     "babel-loader": "8.2.5",
@@ -37,17 +37,17 @@
     "webpack": "4"
   },
   "peerDependencies": {
-    "@storybook/react": "6.4.22",
+    "@storybook/react": "6.5.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   },
   "scripts": {
     "start": "start-storybook -p 1337 -c ."
   },
   "devDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   }
 }
diff --git a/docs/content/components/inline.mdx b/docs/content/components/inline.mdx
@@ -22,7 +22,8 @@ import { Inline } from '@marigold/components';
 | Property | Type                           | Default  |
 | :------- | :----------------------------- | :------- |
 | `space`  | `ResponsiveStyleValue<string>` | `none`   |
-| `align`  | `center, top, bottom`          | `center` |
+| `alignY` | `top, center, bottom`          | `center` |
+| `alignX` | `left, center, right`          | `left`   |
 
 ## Examples
 

diff --git a/docs/content/components/stack.mdx b/docs/content/components/stack.mdx
@@ -22,10 +22,12 @@ import { Stack } from '@marigold/components';
 
 ## Props
 
-| Property | Type                           | Default |
-| :------- | :----------------------------- | :------ |
-| `space`  | `ResponsiveStyleValue<string>` | `none`  |
-| `align`  | `left, right, center`          | `left`  |
+| Property  | Type                           | Default |
+| :-------- | :----------------------------- | :------ |
+| `space`   | `ResponsiveStyleValue<string>` | `none`  |
+| `alignX`  | `left, right, center`          | `left`  |
+| `alignY`  | `top, bottom, center`          | `left`  |
+| `stretch` | `boolean`                      | `false` |
 
 ## Examples
 
@@ -70,18 +72,30 @@ import { Stack } from '@marigold/components';
 </Stack>
 ```
 
-### Alignment
+### Horizontal Alignment
 
 ```tsx
 <>
   <Stack space="medium">
     <Text>Left</Text>
   </Stack>
-  <Stack space="medium" align="center">
+  <Stack space="medium" alignX="center">
     <Text>Center</Text>
   </Stack>
-  <Stack space="medium" align="right">
+  <Stack space="medium" alignX="right">
     <Text>Right</Text>
   </Stack>
 </>
 ```
+
+### Vertical Alignment
+
+```tsx
+<Box css={{ height: 200, bg: '#f1f3f5', p: 8 }}>
+  <Stack space="medium" stretch alignY="bottom">
+    <Text>Lirum</Text>
+    <Text>Larum</Text>
+    <Text>Löffelstiel!</Text>
+  </Stack>
+</Box>
+```
diff --git a/docs/content/components/table.mdx b/docs/content/components/table.mdx
@@ -115,25 +115,25 @@ import { Table } from '@marigold/components';
     <Table.Column>Year of birth</Table.Column>
   </Table.Header>
   <Table.Body>
-    <Table.Row key={1}>
+    <Table.Row>
       <Table.Cell>Potter</Table.Cell>
       <Table.Cell>Harry</Table.Cell>
       <Table.Cell>Gryffindor</Table.Cell>
       <Table.Cell>1980</Table.Cell>
     </Table.Row>
-    <Table.Row key={2}>
+    <Table.Row>
       <Table.Cell>Malfoy</Table.Cell>
       <Table.Cell>Draco</Table.Cell>
       <Table.Cell>Slytherin</Table.Cell>
       <Table.Cell>1980</Table.Cell>
     </Table.Row>
-    <Table.Row key={3}>
+    <Table.Row>
       <Table.Cell>Diggory</Table.Cell>
       <Table.Cell>Cedric</Table.Cell>
       <Table.Cell>Hufflepuff</Table.Cell>
       <Table.Cell>1977</Table.Cell>
     </Table.Row>
-    <Table.Row key={4}>
+    <Table.Row>
       <Table.Cell>Lovegood</Table.Cell>
       <Table.Cell>Luna</Table.Cell>
       <Table.Cell>Ravenclaw</Table.Cell>
@@ -207,3 +207,91 @@ import { Table } from '@marigold/components';
   );
 };
 ```
+
+### Disabled Rows
+
+```tsx
+<Table
+  aria-label="Table with multiple selection"
+  selectionMode="multiple"
+  disabledKeys={['Malfoy']}
+>
+  <Table.Header>
+    <Table.Column>Name</Table.Column>
+    <Table.Column>Firstname</Table.Column>
+    <Table.Column>House</Table.Column>
+    <Table.Column>Year of birth</Table.Column>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row key="Potter">
+      <Table.Cell>Potter</Table.Cell>
+      <Table.Cell>Harry</Table.Cell>
+      <Table.Cell>Gryffindor</Table.Cell>
+      <Table.Cell>1980</Table.Cell>
+    </Table.Row>
+    <Table.Row key="Malfoy">
+      <Table.Cell>Malfoy</Table.Cell>
+      <Table.Cell>Draco</Table.Cell>
+      <Table.Cell>Slytherin</Table.Cell>
+      <Table.Cell>1980</Table.Cell>
+    </Table.Row>
+    <Table.Row key="Diggory">
+      <Table.Cell>Diggory</Table.Cell>
+      <Table.Cell>Cedric</Table.Cell>
+      <Table.Cell>Hufflepuff</Table.Cell>
+      <Table.Cell>1977</Table.Cell>
+    </Table.Row>
+    <Table.Row key="Lovegood">
+      <Table.Cell>Lovegood</Table.Cell>
+      <Table.Cell>Luna</Table.Cell>
+      <Table.Cell>Ravenclaw</Table.Cell>
+      <Table.Cell>1981</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>
+```
+
+### Nested Columns
+
+Columns can be nested, which will result in more than one header row to be created. Note the usage of `isRowHeader` in the example below. By default, only the first column is included in the accessibility name for each row.
+
+```tsx
+<Table aria-label="Example table for nested columns">
+  <Table.Header>
+    <Table.Column title="Name">
+      <Table.Column isRowHeader>First Name</Table.Column>
+      <Table.Column isRowHeader>Last Name</Table.Column>
+    </Table.Column>
+    <Table.Column title="Information">
+      <Table.Column>Age</Table.Column>
+      <Table.Column>Birthday</Table.Column>
+    </Table.Column>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>Sam</Table.Cell>
+      <Table.Cell>Smith</Table.Cell>
+      <Table.Cell>36</Table.Cell>
+      <Table.Cell>May 3</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Julia</Table.Cell>
+      <Table.Cell>Jones</Table.Cell>
+      <Table.Cell>24</Table.Cell>
+      <Table.Cell>February 10</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Peter</Table.Cell>
+      <Table.Cell>Parker</Table.Cell>
+      <Table.Cell>28</Table.Cell>
+      <Table.Cell>September 7</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>Bruce</Table.Cell>
+      <Table.Cell>Wayne</Table.Cell>
+      <Table.Cell>32</Table.Cell>
+      <Table.Cell>December 18</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>
+```
diff --git a/docs/package.json b/docs/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "description": "docs",
   "dependencies": {
-    "@babel/core": "7.17.10",
+    "@babel/core": "7.17.12",
     "@marigold/components": "workspace:*",
     "@marigold/icons": "workspace:*",
     "@marigold/system": "workspace:*",
@@ -45,7 +45,7 @@
     "react-helmet": "6.1.0",
     "react-live": "2.4.1",
     "react-simple-code-editor": "0.11.0",
-    "typescript": "4.6.3"
+    "typescript": "4.6.4"
   },
   "devDependencies": {
     "@types/mdx-js__react": "1.5.5",