Repository: marigold-ui/marigold
Pull request #3146 (2023-07-17 08:26:32)

docs: add more spacing between nav and content on large screens

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 310034d347dfdf11340fe58f0439f189d9890fbb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/improve-spacing-nav-content?filename=.changeset/eight-carpets-mate.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A---%0A%0Adocs%3A%20add%20more%20spacing%20between%20nav%20and%20content%20on%20large%20screens%0A)


vercel[bot]: [vc]: #n/S+G/GXUqynAENDNER7IIchNNm10/r35cTF7ZD490M=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYXJpZ29sZC1zdG9yeWJvb2siLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbWFyaWdvbGQvbWFyaWdvbGQtc3Rvcnlib29rL0VaR214bXA5WGpHZ0g4ajVQbmp3TEFyWWttOGoiLCJuZXh0Q29tbWl0U3RhdHVzIjoiUEVORElORyJ9LHsibmFtZSI6Im1hcmlnb2xkLWRvY3MiLCJyb290RGlyZWN0b3J5IjpudWxsLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbWFyaWdvbGQvbWFyaWdvbGQtZG9jcy8yTHNVSHVuZFhSMjNrcTFpd2l4dEs1Vm9OUFJrIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkcifV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **marigold-docs** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold-docs/2LsUHundXR23kq1iwixtK5VoNPRk)) |  | Jul 17, 2023 8:26am |
| **marigold-storybook** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold-storybook/EZGmxmp9XjGgH8j5PnjwLArYkm8j)) |  | Jul 17, 2023 8:26am |




Patch:
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
index d141df32d..73752cc88 100644
--- a/docs/app/layout.tsx
+++ b/docs/app/layout.tsx
@@ -27,7 +27,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
               <aside className="fixed top-14 z-20 -ml-2 hidden w-60 overflow-y-auto md:block">
                 <Navigation />
               </aside>
-              <div className="md:pl-60">
+              <div className="md:pl-60 lg:pl-72">
                 <main className="max-w-3xl">{children}</main>
               </div>
             </div>
diff --git a/docs/next.config.js b/docs/next.config.js
index 7c2b165e6..fb450e3b6 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -13,9 +13,18 @@ const nextConfig = {
   },
   transpilePackages: [
     '@marigold/components',
-    '@marigold/theme-preset',
     '@marigold/system',
+    '@marigold/theme-preset',
   ],
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/introduction/getting-started',
+        permanent: true,
+      },
+    ];
+  },
 };
 
 module.exports = withContentlayer(nextConfig);
diff --git a/packages/components/src/Menu/MenuTrigger.tsx b/packages/components/src/Menu/MenuTrigger.tsx
index d40f32c18..321cb428d 100644
--- a/packages/components/src/Menu/MenuTrigger.tsx
+++ b/packages/components/src/Menu/MenuTrigger.tsx
@@ -3,7 +3,7 @@ import { useMenuTriggerState } from '@react-stately/menu';
 import { PressResponder } from '@react-aria/interactions';
 import { useMenuTrigger } from '@react-aria/menu';
 import { useObjectRef } from '@react-aria/utils';
-import { useResponsiveValue } from '@marigold/system';
+import { useSmallScreen } from '@marigold/system';
 import { MenuContext, MenuContextProps } from './Context';
 import { Popover, Tray } from '../Overlay';
 
@@ -44,8 +44,7 @@ export const MenuTrigger = ({
     autoFocus: state.focusStrategy,
   };
 
-  const isSmallScreen = useResponsiveValue([true, false, false], 2);
-
+  const isSmallScreen = useSmallScreen();
   return (
     <MenuContext.Provider value={menuContext}>
       <PressResponder
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index 6c04752c0..9559c6933 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -16,7 +16,7 @@ import { mergeProps, useObjectRef } from '@react-aria/utils';
 import {
   cn,
   useClassNames,
-  useResponsiveValue,
+  useSmallScreen,
   useStateProps,
 } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
@@ -130,7 +130,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
     const { focusProps, isFocusVisible } = useFocusRing();
 
     const classNames = useClassNames({ component: 'Select', variant, size });
-    const isSmallScreen = useResponsiveValue([true, false, false], 2);
+    const isSmallScreen = useSmallScreen();
     const stateProps = useStateProps({
       disabled,
       error,
diff --git a/packages/system/src/hooks/index.ts b/packages/system/src/hooks/index.ts
index aed40fa99..c7bc82584 100644
--- a/packages/system/src/hooks/index.ts
+++ b/packages/system/src/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useClassNames';
 export * from './useResponsiveValue';
 export * from './useStateProps';
 export * from './useTheme';
+export * from './useSmallScreen';
diff --git a/packages/system/src/hooks/useSmallScreen.ts b/packages/system/src/hooks/useSmallScreen.ts
new file mode 100644
index 000000000..58f113053
--- /dev/null
+++ b/packages/system/src/hooks/useSmallScreen.ts
@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export const useSmallScreen = (): boolean => {
+  const getMatches = (): boolean => {
+    if (typeof window == 'undefined') {
+      return false;
+    }
+    return window.matchMedia('(max-width: 600px)').matches;
+  };
+
+  const [matches, setMatches] = useState<boolean>(getMatches());
+
+  const handleResize = useCallback(() => {
+    setMatches(getMatches());
+  }, []);
+  useEffect(() => {
+    // Triggered at the first client-side load and if query changes
+    handleResize();
+    if (typeof window == 'undefined') return;
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleResize]);
+
+  return matches;
+};
diff --git a/packages/theme-preset/package.json b/packages/theme-preset/package.json
index 8637ed1c6..155219215 100644
--- a/packages/theme-preset/package.json
+++ b/packages/theme-preset/package.json
@@ -20,13 +20,16 @@
     "directory": "packages/theme-preset"
   },
   "dependencies": {
+    "@marigold/system": "workspace:*",
     "deepmerge": "^4.2.2",
     "find-up": "5.0.0"
   },
+  "peerDependencies": {
+    "postcss": "8.4.24",
+    "tailwindcss": "3.3.2"
+  },
   "devDependencies": {
-    "@marigold/system": "workspace:*",
     "@marigold/tsconfig": "workspace:*",
-    "@marigold/types": "workspace:*",
     "postcss": "8.4.24",
     "tailwindcss": "3.3.2",
     "tsup": "6.7.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 14db31000..a8c7cca90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -678,6 +678,9 @@ importers:
 
   packages/theme-preset:
     dependencies:
+      '@marigold/system':
+        specifier: workspace:*
+        version: link:../system
       deepmerge:
         specifier: ^4.2.2
         version: 4.2.2
@@ -685,15 +688,9 @@ importers:
         specifier: 5.0.0
         version: 5.0.0
     devDependencies:
-      '@marigold/system':
-        specifier: workspace:*
-        version: link:../system
       '@marigold/tsconfig':
         specifier: workspace:*
         version: link:../../config/tsconfig
-      '@marigold/types':
-        specifier: workspace:*
-        version: link:../types
       postcss:
         specifier: 8.4.24
         version: 8.4.24
diff --git a/themes/theme-b2b/src/components/NumberField.styles.ts b/themes/theme-b2b/src/components/NumberField.styles.ts
index 50eb3921b..f76a3ae34 100644
--- a/themes/theme-b2b/src/components/NumberField.styles.ts
+++ b/themes/theme-b2b/src/components/NumberField.styles.ts
@@ -3,18 +3,15 @@ import { ThemeComponent, cva } from '@marigold/system';
 export const NumberField: ThemeComponent<'NumberField'> = {
   group: cva([
     'border-border-light rounded-sm border border-solid',
-    'data-[hover]:border-border-hover',
+    'hover:border-border-hover',
     'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:shadow-none',
-    'data-[focus]:border-border-focus data-[focus]:shadow-shadow-focus data-[focus]:shadow-[0_0_0_1px]',
-    'data-[disabled]:bg-bg-disabled data-[disabled]:text-text-disabled data-[disabled]:cursor-not-allowed ',
-    'data-[error]:border-border-error data-[error]:shadow-shadow-error data-[error]:shadow-[0_0_0_1px]',
+    'group-focus/field:border-border-focus ',
+    'group-disabled/field:bg-bg-disabled group-disabled/field:text-text-disabled group-disabled/field:cursor-not-allowed ',
+    'group-error/field:border-border-error',
   ]),
   stepper: cva([
     'text-text-body w-7',
     'border-border-light border-solid first-of-type:border-r',
     'border-border-light border-solid last-of-type:border-l ',
-    'data-[disabled]:text-text-disabled',
-    'group-hover/field:border-border-hover',
-    'group-error/field:border-border-error',
   ]),
 };
diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts
index 5d4d92222..a3cbad015 100644
--- a/themes/theme-b2b/src/tokens.ts
+++ b/themes/theme-b2b/src/tokens.ts
@@ -83,7 +83,8 @@ const blue = {
   '900': '#1f455a',
   '950': '#0f2c3d',
 };
-
+const white = '#ffff';
+const black = '#000000';
 export const colors = {
   // Brand
   // ---------------
@@ -92,6 +93,8 @@ export const colors = {
   yellow,
   green,
   red,
+  white,
+  black,
 
   // Text
   // ---------------
@@ -117,7 +120,7 @@ export const colors = {
     /**
      * Should be set to either html or body element.
      */
-    body: brand.secondary[50],
+    body: white,
     neutral: brand.secondary[200],
 
     primary: {
@@ -135,7 +138,7 @@ export const colors = {
       /**
        * Use this for e.g. card backgrounds.
        */
-      DEFAULT: brand.secondary[50],
+      DEFAULT: white,
       /**
        * Use this when you need to separate a specific layer from
        * the surface color, e.g. table headers.


Test patch:
diff --git a/packages/components/src/Menu/Menu.test.tsx b/packages/components/src/Menu/Menu.test.tsx
index 05aa147f7..940fab1b9 100644
--- a/packages/components/src/Menu/Menu.test.tsx
+++ b/packages/components/src/Menu/Menu.test.tsx
@@ -9,12 +9,7 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OverlayProvider } from '@react-aria/overlays';
-import {
-  Theme,
-  ThemeProvider,
-  useResponsiveValue,
-  cva,
-} from '@marigold/system';
+import { Theme, ThemeProvider, cva, useSmallScreen } from '@marigold/system';
 
 import { Button } from '../Button';
 import { Menu } from './Menu';
@@ -72,11 +67,7 @@ const mockMatchMedia = (matches: string[]) =>
     matches: matches.includes(query),
   }));
 
-window.matchMedia = mockMatchMedia([
-  'screen and (min-width: 40em)',
-  'screen and (min-width: 52em)',
-  'screen and (min-width: 64em)',
-]);
+window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
 
 afterEach(cleanup);
 
@@ -342,13 +333,10 @@ test('renders as tray', () => {
     if (event === 'resize') resize = cb;
   });
 
-  const { result } = renderHook(() =>
-    useResponsiveValue(['one', 'two', 'three', 'four'])
-  );
-  window.matchMedia = mockMatchMedia([]);
+  const { result } = renderHook(() => useSmallScreen());
+  window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
   act(() => resize());
-
-  expect(result.current).toEqual('one');
+  expect(result.current).toBeTruthy();
 
   render(
     <OverlayProvider>
diff --git a/packages/components/src/Select/Select.test.tsx b/packages/components/src/Select/Select.test.tsx
index a040e0bb0..c9458aadf 100644
--- a/packages/components/src/Select/Select.test.tsx
+++ b/packages/components/src/Select/Select.test.tsx
@@ -10,7 +10,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import { cleanup } from '@testing-library/react';
 
-import { Theme, useResponsiveValue, cva } from '@marigold/system';
+import { Theme, cva, useSmallScreen } from '@marigold/system';
 import { setup } from '../test.utils';
 
 import { Select } from './Select';
@@ -213,11 +213,7 @@ test('option list closes when button is clicked', () => {
 });
 
 test('supports to select an option and closes listbox afterwards', () => {
-  window.matchMedia = mockMatchMedia([
-    'screen and (min-width: 40em)',
-    'screen and (min-width: 52em)',
-    'screen and (min-width: 64em)',
-  ]);
+  window.matchMedia = mockMatchMedia(['screen and (min-width: 600px)']);
   render(
     <OverlayProvider>
       <Select label="Label" data-testid="select">
@@ -468,13 +464,11 @@ test('renders as tray', () => {
     if (event === 'resize') resize = cb;
   });
 
-  const { result } = renderHook(() =>
-    useResponsiveValue(['one', 'two', 'three', 'four'])
-  );
-  window.matchMedia = mockMatchMedia([]);
+  const { result } = renderHook(() => useSmallScreen());
+  window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
   act(() => resize());
 
-  expect(result.current).toEqual('one');
+  expect(result.current).toBeTruthy();
 
   render(
     <OverlayProvider>
diff --git a/packages/system/src/hooks/useSmallScreen.test.tsx b/packages/system/src/hooks/useSmallScreen.test.tsx
new file mode 100644
index 000000000..504b2e1ea
--- /dev/null
+++ b/packages/system/src/hooks/useSmallScreen.test.tsx
@@ -0,0 +1,33 @@
+import { cleanup } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useSmallScreen } from './useSmallScreen';
+
+/**
+ * We need to mock `matchMedia` because JSON does not
+ * implements it.
+ */
+const mockMatchMedia = (matches: string[]) =>
+  jest.fn().mockImplementation(query => {
+    return {
+      matches: matches.includes(query),
+    };
+  });
+
+afterEach(cleanup);
+
+test('check of the value is truthy', () => {
+  window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
+
+  const { result } = renderHook(() => useSmallScreen());
+  expect(result.current).toBeTruthy();
+});
+
+it('should verify if window exist', () => {
+  // mocking if there's no window
+  Object.defineProperty(global, 'window', {
+    value: undefined,
+  });
+  const { result } = renderHook(() => useSmallScreen());
+  expect(result.current).toBeFalsy();
+});
diff --git a/packages/theme-preset/src/create-preset.test.tsx b/packages/theme-preset/src/create-preset.test.tsx
index 94ac51ecb..4bdc5ccfc 100644
--- a/packages/theme-preset/src/create-preset.test.tsx
+++ b/packages/theme-preset/src/create-preset.test.tsx
@@ -1,6 +1,7 @@
+import path from 'node:path';
 import { defaultTheme } from '@marigold/system';
+
 import { createPreset } from './create-preset';
-import path from 'path';
 
 test('create preset and merge it with defaultTheme', () => {
   const preset = createPreset('test', {