Merge branch 'main' into layout-component-grid

.github/renovate.json

@@ -54,6 +54,16 @@
     {
       "matchPackagePatterns": ["postcss", "tailwind"],
       "groupName": "tailwind"
+    },
+    {
+      "packageRules": [
+        {
+          "description": "Automerge non-major updates",
+          "matchUpdateTypes": ["minor", "patch"],
+          "matchCurrentVersion": "!/^0/",
+          "automerge": true
+        }
+      ]
     }
   ],
   "timezone": "Europe/Berlin"

.github/workflows/release.yml

@@ -42,7 +42,7 @@ jobs:
         run: pnpm release:notification --packages '${{ steps.changesets.outputs.publishedPackages }}'
       - name: Slack Notification
         if: steps.changesets.outputs.published == 'true'
-        uses: slackapi/slack-github-action@v1.25.0
+        uses: slackapi/slack-github-action@v1.26.0
         with:
           payload-file-path: './slack-notification.json'
         env:

.github/workflows/test.yml

@@ -28,4 +28,4 @@ jobs:
       - name: Run Test Coverage
         run: pnpm test:ci
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4

.npmrc

@@ -2,6 +2,7 @@ public-hoist-pattern[]=*@types*
 public-hoist-pattern[]=*@react-types*
 public-hoist-pattern[]=*storybook*
 
+package-manager-strict=false
 strict-peer-dependencies=false
 save-prefix=''
 save-exact=true

config/storybook/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @marigold/storybook-config
 
+## 1.1.40
+
+### Patch Changes
+
+- Updated dependencies [[`3e448ed`](https://github.com/marigold-ui/marigold/commit/3e448ede593cc4e4070366a1e6ac1ac8870dc102), [`bdd23ec`](https://github.com/marigold-ui/marigold/commit/bdd23ec48895543b9a4bd3d925c47dd02da8aefd), [`f0c0bc1`](https://github.com/marigold-ui/marigold/commit/f0c0bc18b0ad22984ad344e99222a7119c47ed36)]:
+  - @marigold/theme-core@26.1.8
+  - @marigold/theme-b2b@27.1.8
+  - @marigold/components@7.7.2
+
 ## 1.1.39
 
 ### Patch Changes

config/storybook/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@marigold/storybook-config",
   "description": "Marigold's storybook configuration",
-  "version": "1.1.39",
+  "version": "1.1.40",
   "license": "MIT",
   "exports": "./main.js",
   "keywords": [

docs/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @marigold/docs
 
+## 7.7.2
+
+### Patch Changes
+
+- [#3908](https://github.com/marigold-ui/marigold/pull/3908) [`20fb4f4`](https://github.com/marigold-ui/marigold/commit/20fb4f4868747b3a965688aebe48f3247d397d57) Thanks [@OsamaAbdellateef](https://github.com/OsamaAbdellateef)! - Fixing icons into docs to be copied in the right way
+
+- [#3865](https://github.com/marigold-ui/marigold/pull/3865) [`5eafe50`](https://github.com/marigold-ui/marigold/commit/5eafe50e4f03ab782b6dcb03bed82ec9b9460fc2) Thanks [@OsamaAbdellateef](https://github.com/OsamaAbdellateef)! - [DST-379]: Docs: The selected theme on marigold docs is now persisted in the local storage.
+
+- Updated dependencies [[`3e448ed`](https://github.com/marigold-ui/marigold/commit/3e448ede593cc4e4070366a1e6ac1ac8870dc102), [`bdd23ec`](https://github.com/marigold-ui/marigold/commit/bdd23ec48895543b9a4bd3d925c47dd02da8aefd), [`f0c0bc1`](https://github.com/marigold-ui/marigold/commit/f0c0bc18b0ad22984ad344e99222a7119c47ed36)]:
+  - @marigold/theme-core@26.1.8
+  - @marigold/theme-b2b@27.1.8
+  - @marigold/components@7.7.2
+  - @marigold/icons@1.2.48
+  - @marigold/theme-preset@1.3.13
+
 ## 7.7.1
 
 ### Patch Changes

docs/app/_components/NavLink.tsx

@@ -4,6 +4,8 @@ import Link, { LinkProps } from 'next/link';
 
 import { type VariantProps, cn, cva } from '@marigold/system';
 
+import { useThemeSwitch } from '@/ui/ThemeSwitch';
+
 const styles = cva([], {
   variants: {
     variant: {
@@ -54,13 +56,18 @@ export const NavLink = ({
   current,
   className,
   children,
+  href,
   ...props
-}: NavLinkProps) => (
-  <Link
-    {...props}
-    className={cn(styles({ variant, current, className }))}
-    aria-current={current ? 'page' : undefined}
-  >
-    {children}
-  </Link>
-);
+}: NavLinkProps) => {
+  const { current: currentTheme } = useThemeSwitch();
+  return (
+    <Link
+      {...props}
+      className={cn(styles({ variant, current, className }))}
+      aria-current={current ? 'page' : undefined}
+      href={`${href}${currentTheme ? `?theme=${currentTheme}` : ''}`}
+    >
+      {children}
+    </Link>
+  );
+};

docs/app/_components/ThemeMenu.tsx

@@ -6,12 +6,12 @@ import { useThemeSwitch } from '@/ui/ThemeSwitch';
 import { Theme } from '@/ui/icons/Theme';
 
 export const ThemeMenu = () => {
-  const { themes, setTheme } = useThemeSwitch();
+  const { themes, updateTheme } = useThemeSwitch();
 
   return (
     <Menu
       label={<Theme className="text-secondary-600" />}
-      onAction={current => setTheme(current)}
+      onAction={current => updateTheme(current)}
       placement="bottom end"
     >
       {Object.keys(themes).map(name => (

docs/app/layout.tsx

@@ -3,6 +3,7 @@
 import { siteConfig } from '@/lib/config';
 import { b2bTheme, coreTheme, theme } from '@/theme';
 import { MarigoldProvider } from '@/ui';
+import { Suspense } from 'react';
 
 import '@marigold/theme-b2b/styles.css';
 import '@marigold/theme-core/styles.css';
@@ -47,35 +48,40 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="en">
       <body className={`${fontSans.className} min-h-screen`}>
-        <MarigoldThemeSwitch themes={themes} initial={siteConfig.defaultTheme}>
-          <MarigoldProvider theme={theme}>
-            <SiteHeader />
-            <aside
-              className={[
-                'top-[--page-header-height]',
-                'py-[--page-sub-nav-padding] xl:py-[--page-sub-nav-padding-xl]',
-                'pl-[--page-padding-md] xl:pl-[--page-padding-xl]',
-                'h-[calc(100vh-var(--page-header-height))] w-[--page-sub-nav-width] xl:w-[--page-sub-nav-width-xl]',
-                'fixed z-10 hidden overflow-hidden hover:overflow-y-auto md:block',
-                'scrollbar-thin scrollbar-thumb-secondary-400 scrollbar-thumb-rounded-full scrollbar-track-transparent',
-                'border-secondary-200 border-r',
-              ].join(' ')}
-            >
-              {/* current section navigation sidebar */}
-              <SectionNavigation />
-            </aside>
-            <main
-              className={[
-                'pt-[--page-main-padding] xl:pt-[--page-main-padding-xl]',
-                'px-[--page-padding] md:px-[--page-padding-md] xl:pr-[--page-padding-xl]',
-                'md:pl-[calc(var(--page-sub-nav-width)+var(--page-main-padding))] xl:pl-[calc(var(--page-sub-nav-width-xl)+var(--page-main-padding-xl))]',
-              ].join(' ')}
-            >
-              {children}
-              <SiteFooter />
-            </main>
-          </MarigoldProvider>
-        </MarigoldThemeSwitch>
+        <Suspense>
+          <MarigoldThemeSwitch
+            themes={themes}
+            initial={siteConfig.defaultTheme}
+          >
+            <MarigoldProvider theme={theme}>
+              <SiteHeader />
+              <aside
+                className={[
+                  'top-[--page-header-height]',
+                  'py-[--page-sub-nav-padding] xl:py-[--page-sub-nav-padding-xl]',
+                  'pl-[--page-padding-md] xl:pl-[--page-padding-xl]',
+                  'h-[calc(100vh-var(--page-header-height))] w-[--page-sub-nav-width] xl:w-[--page-sub-nav-width-xl]',
+                  'fixed z-10 hidden overflow-hidden hover:overflow-y-auto md:block',
+                  'scrollbar-thin scrollbar-thumb-secondary-400 scrollbar-thumb-rounded-full scrollbar-track-transparent',
+                  'border-secondary-200 border-r',
+                ].join(' ')}
+              >
+                {/* current section navigation sidebar */}
+                <SectionNavigation />
+              </aside>
+              <main
+                className={[
+                  'pt-[--page-main-padding] xl:pt-[--page-main-padding-xl]',
+                  'px-[--page-padding] md:px-[--page-padding-md] xl:pr-[--page-padding-xl]',
+                  'md:pl-[calc(var(--page-sub-nav-width)+var(--page-main-padding))] xl:pl-[calc(var(--page-sub-nav-width-xl)+var(--page-main-padding-xl))]',
+                ].join(' ')}
+              >
+                {children}
+                <SiteFooter />
+              </main>
+            </MarigoldProvider>
+          </MarigoldThemeSwitch>
+        </Suspense>
         <Analytics />
       </body>
     </html>

docs/content/concepts/elevation.mdx

@@ -2,6 +2,7 @@
 title: Elevation
 caption: Learn how to use elevation with Marigold.
 order: 2
+badge: updated
 ---
 
 Elevations serve as the foundational layers of the UI, providing a clean slate upon which various UI elements can be placed. It is important for creating visual hierarchy, depth, and clarity within a user interface. It guides user attention, improves usability, and enhances the overall user experience by providing feedback, organizing elements, and maintaining consistency in branding.

docs/content/introduction/get-in-touch.mdx

@@ -0,0 +1,46 @@
+---
+title: Get in touch
+caption: Here you can find out how to reach us, report bugs and ask for support!
+order: 5
+badge: new
+---
+
+We receive many questions and inquiries regarding Marigold and our design system,and we're here to help. Whether you're stuck or seeking information, our aim is to support you every step of the way.
+
+Before reaching out, we kindly ask you to check our existing documentation. Exploring our website might already provide the solution you need. It's a great resource to help you with a lot of issues you might encounter.
+
+If you can't find what you're looking for there, don't hesitate to get in touch.
+
+<Message messageTitle="Most importantly!" variant="info">
+  If there's anything on your mind, please don't hesitate to reach out to us or
+  drop by our office. We're committed to being here for you whenever you need
+  assistance!
+</Message>
+
+## General Questions
+
+If you have a general question that's not about a specific topic and likely has a quick answer, use our Slack channel [#design-system (internal only)](https://reservix.slack.com/archives/C02727BNZ3J). This could be something like "Where can I find the [UI kit](https://www.figma.com/design/NbTUW9zk15nN8idlfsEttS/%F0%9F%8C%BC-Marigold-CORE?node-id=1618%3A14089&t=XeVjosBqiOPFslb9-1)?" or "What does the `allowSorting` prop on the `<Table>` do?".
+
+We want foster a community around our design system in our Slack channel. Your assistance in helping each other out is greatly appreciated! 🙂
+
+## Specific Questions
+
+If you have a question that needs more explanation, feel free to ask for a meeting or a pairing session in [our channel (internal only)](https://reservix.slack.com/archives/C02727BNZ3J). It helps us grasp your issue better when we have enough time and focus. Your questions matter to us, and we want to give them the attention they deserve.
+
+Examples of this type of request include seeking a review of your implementation or consulting on specific or complex logic within your application to determine the best approach with Marigold.
+
+## Design-related Questions
+
+For design-related questions, if you're a developer, it's best to ask the designer on your team or in your area. Designers can use the [UX/UI CoP channel (internal only)](https://reservix.slack.com/archives/CC1KW68KZ) or post in the [#design-system channel (internal only)](https://reservix.slack.com/archives/C02727BNZ3J).
+
+## Feature Requests
+
+If there's a specific component or feature missing in Marigold that you need for your application, please submit a request in our [support portal (internal only)](https://reservix.atlassian.net/servicedesk/customer/portal/77). If you're unsure about this process, you can also reach out to the Design System PO (@Katharina Ochmann). We're here to assist you with your request.
+
+## Introduction to Marigold
+
+If you're new to Marigold and want to get started, please reach out to the Design System PO (@Katharina Ochmann) or post in the [#design-system channel (internal only)](https://reservix.slack.com/archives/C02727BNZ3J) to schedule a meeting. We'll provide you with an introduction and assist with the setup process to help you get up and running smoothly.
+
+## Report Bugs
+
+If you notice something isn't working correctly or seems broken, please submit a bug with our [support portal (internal only)](https://reservix.atlassian.net/servicedesk/customer/portal/77). Ideally, you can create an example in [StackBlitz](https://stackblitz.com/github/marigold-ui/starter) that reproduces the issue. This will enable us to assist you even more swiftly. In any case, we'll do our utmost to promptly address your concern.

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/docs",
-  "version": "7.7.1",
+  "version": "7.7.2",
   "private": true,
   "scripts": {
     "dev": "pnpm registry && next dev",

docs/ui/IconList.tsx

@@ -52,21 +52,16 @@ const IconListItem = ({ icon }: IconListItemProps) => {
         onMouseEnter={() => setHovered(true)}
         onMouseLeave={() => setHovered(false)}
       >
-        <div className="grid h-24 place-items-center">
+        <div className="relative grid h-24 place-items-center">
           <div
             className={cn(
-              isCopied || isHovered ? 'block' : 'hidden',
-              'select-none whitespace-nowrap font-medium tracking-wider'
+              isCopied || isHovered ? 'opacity-1' : 'opacity-0',
+              'bg-bg-surface absolute flex size-full select-none items-center justify-center whitespace-nowrap font-medium tracking-wider'
             )}
           >
             {isCopied ? 'COPIED!' : 'COPY SVG'}
           </div>
-          <Component
-            width={48}
-            height={48}
-            ref={svgRef as any}
-            className={cn(isHovered || isCopied ? 'hidden' : 'block')}
-          />
+          <Component width={48} height={48} ref={svgRef as any} />
         </div>
       </Card>
       <Text size="small" align="center">