Merge branch 'main' into semantic-colors-v2

.changeset/calm-boxes-beam.md

@@ -0,0 +1,5 @@
+---
+"@marigold/eslint-config": patch
+---
+
+chore(deps): update eslint

.changeset/happy-rabbits-drive.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": major
+---
+
+chore: rename onSelect to onAction in Menu component

.changeset/seven-moose-guess.md

@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": major
+---
+
+chore: change prop onSelectionChange to onChange for select component

.changeset/smart-mice-relax.md

@@ -0,0 +1,7 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+"@marigold/types": patch
+---
+
+chore(deps): update dependency @types/react to v18.0.27

.changeset/young-shrimps-buy.md

@@ -0,0 +1,5 @@
+---
+"@marigold/theme-b2b": minor
+---
+
+feat: add round radi to b2b-theme

.github/workflows/chromatic.yml

@@ -5,7 +5,6 @@ on:
     paths:
       - '**.tsx?'
       - '!docs/**'
-      - '!docs-next/**'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -32,12 +31,20 @@ jobs:
 
       # Action
       - name: Publish to Chromatic
+        if: github.ref != 'refs/heads/main'
         uses: chromaui/action@v1
         with:
           buildScriptName: build:storybook
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
+          onlyChanged: true
           # Option to prevent the workflow from failing (https://www.chromatic.com/docs/github-actions#command-exit-code-for-required-checks)
           exitZeroOnChanges: true
           exitOnceUploaded: true
           skip: 'renovate/**'
+      - name: Publish to Chromatic and auto accept changes
+        if: github.ref == 'refs/heads/main'
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          autoAcceptChanges: true

config/eslint/package.json

@@ -23,16 +23,16 @@
     "@babel/eslint-parser": "^7.18.9",
     "@babel/plugin-syntax-flow": "^7.16.7",
     "@babel/plugin-transform-react-jsx": "^7.17.3",
-    "@typescript-eslint/eslint-plugin": "5.47.0",
-    "@typescript-eslint/parser": "5.47.0",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jest": "27.1.7",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react": "7.32.1",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-testing-library": "5.9.1",
     "prettier": "2.8.1"
@@ -42,7 +42,7 @@
     "typescript": "4.8.x || 4.9.x"
   },
   "devDependencies": {
-    "eslint": "8.30.0",
+    "eslint": "8.32.0",
     "typescript": "4.9.4"
   }
 }

config/jest/package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@babel/core": "7.20.12",
-    "@swc/core": "1.3.25",
+    "@swc/core": "1.3.32",
     "@swc/jest": "0.2.24",
     "@types/jest": "29.2.4",
     "babel-jest": "29.3.1",

config/storybook/package.json

@@ -54,7 +54,7 @@
     "start": "start-storybook -p 1337 -c .",
     "build": "build-storybook --disable-telemetry -c . -o ../../storybook-static",
     "test": "start-storybook --smoke-test --ci -c .",
-    "chromatic": "pnpm dlx chromatic --force-rebuild --exit-zero-on-changes",
+    "chromatic": "pnpm dlx chromatic --force-rebuild --only-changed --exit-zero-on-changes",
     "ci": "pnpm dlx chromatic"
   }
 }

config/storybook/preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import isChromatic from 'chromatic/isChromatic';
-import type { StoryFn } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 
 import { Box, MarigoldProvider } from '@marigold/components';
 import b2bTheme from '@marigold/theme-b2b';
@@ -48,7 +48,7 @@ export const parameters = {
 export const decorators = [
   (Story: StoryFn, { globals, parameters }: any) => {
     const theme = isChromatic()
-      ? 'stacked'
+      ? parameters.theme || 'stacked'
       : globals.theme || parameters.theme || 'b2b';
 
     switch (theme) {
@@ -68,7 +68,9 @@ export const decorators = [
       default: {
         return (
           <MarigoldProvider theme={THEME[theme as ThemeNames]}>
-            <Story />
+            <div style={{ height: '900px' }}>
+              <Story />
+            </div>
           </MarigoldProvider>
         );
       }

docs/package.json

@@ -21,14 +21,14 @@
     "@mdx-js/loader": "2.2.1",
     "@mdx-js/react": "1.6.22",
     "@next/mdx": "12.3.4",
-    "estree-util-visit": "1.2.0",
+    "estree-util-visit": "1.2.1",
     "fs-extra": "10.1.0",
-    "globby": "13.1.2",
+    "globby": "13.1.3",
     "mdast-util-from-markdown": "1.2.0",
     "mdast-util-mdx": "2.0.0",
     "mdast-util-toc": "6.1.0",
     "micromark-extension-mdxjs": "1.0.0",
-    "next": "12.3.3",
+    "next": "12.3.4",
     "prism-react-renderer": "1.3.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "@types/mdx-js__react": "1.5.5",
     "@types/node": "18.0.0",
-    "@types/react": "18.0.25",
+    "@types/react": "18.0.27",
     "typescript": "4.9.4"
   }
 }

docs/src/components/ThemeMenu.tsx

@@ -9,7 +9,7 @@ export const ThemeMenu = () => {
       <Button variant="outline">
         {current} <ChevronDown />
       </Button>
-      <Menu onSelect={current => setTheme(current)}>
+      <Menu onAction={current => setTheme(current)}>
         {Object.keys(themes).map(name => (
           <Menu.Item key={name}>{name}</Menu.Item>
         ))}

docs/src/demos/components/Menu/index.ts

@@ -1,3 +1,3 @@
-export * from './menu-selected.demo';
+export * from './menu-action.demo';
 export * from './menu-disabled.demo';
 export * from './menu-kebab-icon.demo';

docs/src/demos/components/Menu/menu-action.demo.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, Menu } from '@marigold/components';
+
+export const ActionMenu = () => {
+  return (
+    <Menu.Trigger>
+      <Button variant="menu" size="small">
+        Menu
+      </Button>
+      <Menu onAction={action => alert(`Your action: ${action}`)}>
+        <Menu.Item key="edit">Open in editor</Menu.Item>
+        <Menu.Item key="settings">Settings</Menu.Item>
+        <Menu.Item key="delete">Delete</Menu.Item>
+      </Menu>
+    </Menu.Trigger>
+  );
+};

docs/src/demos/components/Table/core-table-print.demo.tsx

@@ -177,7 +177,7 @@ export const CorePrintTable = () => {
             label="Sammelaktion"
             placeholder="Bitte wählen"
             width="unset"
-            onSelectionChange={handleSelect}
+            onChange={handleSelect}
           >
             <Select.Option key="choose">Bitte wählen</Select.Option>
             <Select.Option key="ticketprint">Ticket drucken</Select.Option>

docs/src/pages/components/menu.mdx

@@ -38,9 +38,9 @@ If you want create a variant, you can style different parts of the `<Menu>` sepa
 <PropsTable
   props={[
     {
-      property: 'onSelect',
+      property: 'onAction',
       type: '(key: Key) => void',
-      description: 'Handler that is called when the selection changes.',
+      description: 'Handler that should call an action.',
       default: 'none',
     },
   ]}
@@ -61,11 +61,11 @@ If you want create a variant, you can style different parts of the `<Menu>` sepa
 
 ## Examples
 
-### Simple Menu
+### Simple Menu with Action
 
-In this example you can see a simple `<Menu>` with some items to select.
+In this example you can see a simple `<Menu>` with some items to select. After selection an action can be applied.
 
-```tsx preview file=components/Menu/menu-selected.demo.tsx
+```tsx preview file=components/Menu/menu-action.demo.tsx
 
 ```
 

docs/src/pages/components/select.mdx

@@ -95,7 +95,7 @@ import { Select } from '@marigold/components';
       default: '100%',
     },
     {
-      property: 'onSelectionChange',
+      property: 'onChange',
       type: '(key: Key) => any',
       description: 'Handler that is called when the selection changes.',
       default: 'none',

package.json

@@ -23,10 +23,11 @@
     "@testing-library/react": "13.4.0",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
-    "@types/node": "16.18.3",
+    "@types/node": "16.18.11",
     "all-contributors-cli": "6.24.0",
     "async-retry": "1.3.3",
-    "eslint": "8.30.0",
+    "chromatic": "6.6.3",
+    "eslint": "8.32.0",
     "husky": "8.0.2",
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
@@ -36,7 +37,7 @@
     "react-dom": "18.2.0",
     "typescript": "4.9.4",
     "workspaces-run": "1.0.1",
-    "zx": "7.0.8"
+    "zx": "7.1.1"
   },
   "scripts": {
     "start": "pnpm --filter @marigold/docs dev",

packages/components/package.json

@@ -79,7 +79,7 @@
   },
   "devDependencies": {
     "@marigold/tsconfig": "workspace:*",
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.27",
     "@types/react-transition-group": "4.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/components/src/Aside/Aside.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, ComponentStory } from '@storybook/react';
 import { Box } from '../Box';
 
 import { Aside } from './Aside';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Aside',
@@ -85,3 +86,9 @@ export const InheritWidth: ComponentStory<typeof Aside> = () => (
     </Box>
   </Aside>
 );
+
+Basic.parameters = {
+  // Set the viewports in Chromatic at a story level.
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};

packages/components/src/Aspect/Aspect.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, ComponentStory } from '@storybook/react';
 
 import { Aspect } from './Aspect';
 import { Image } from '../Image';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Aspect',
@@ -49,3 +50,8 @@ export const CutImage: ComponentStory<typeof Aspect> = args => (
     />
   </Aspect>
 );
+
+CutImage.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};

packages/components/src/Breakout/Breakout.stories.tsx

@@ -8,6 +8,7 @@ import { Image } from '../Image';
 import { Text } from '../Text';
 
 import { Breakout } from './Breakout';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Breakout',
@@ -127,3 +128,8 @@ export const ExampleFrame: ComponentStory<typeof Breakout> = args => (
     </Text>
   </Container>
 );
+
+ExampleFrame.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};

packages/components/src/Button/Button.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 import { Facebook } from '@marigold/icons';
 import { Button } from './Button';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Button',
@@ -82,3 +83,8 @@ export const PassThroughProps: ComponentStory<typeof Button> = args => {
     </>
   );
 };
+
+WithIcon.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};

packages/components/src/Card/Card.stories.tsx

@@ -9,6 +9,7 @@ import { Close, ExternalLink } from '@marigold/icons';
 import { Inline } from '../Inline';
 import { Split } from '../Split';
 import { Tiles } from '../Tiles';
+import isChromatic from 'chromatic';
 
 export default {
   title: 'Components/Card',
@@ -85,3 +86,8 @@ export const CoreCard: ComponentStory<typeof Card> = args => (
     </Card>
   </Tiles>
 );
+
+CoreCard.parameters = {
+  chromatic: { viewports: [320, 1200] },
+  theme: isChromatic() ? 'b2b' : 'stacked',
+};