Merge branch 'main' into design-principles-page

marigold-ui · Jun 14, 2024 · 3074291 · 3074291
2 parents b3f5797 + 3f7a4ec
commit 3074291
Show file tree

Hide file tree

Showing 132 changed files with 5,734 additions and 2,971 deletions.
diff --git a/.changeset/heavy-cougars-film.md b/.changeset/heavy-cougars-film.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/icons": patch
+---
+
+[DSTSUP-79]feat: add new icon for download
diff --git a/.changeset/sour-spiders-draw.md b/.changeset/sour-spiders-draw.md
@@ -0,0 +1,5 @@
+---
+"@marigold/system": patch
+---
+
+[DSTSUP-78]fix: fix extendTheme function
diff --git a/.changeset/tidy-sloths-trade.md b/.changeset/tidy-sloths-trade.md
diff --git a/.gitignore b/.gitignore
@@ -22,6 +22,7 @@ slack-notification.json
 out
 .contentlayer
 .registry
+.component-props
 
 ## env
 .env*.local

diff --git a/config/eslint/package.json b/config/eslint/package.json
@@ -19,7 +19,7 @@
     "directory": "config/eslint"
   },
   "dependencies": {
-    "@babel/core": "7.24.4",
+    "@babel/core": "7.24.6",
     "@babel/eslint-parser": "^7.22.10",
     "@babel/plugin-syntax-flow": "^7.16.7",
     "@babel/plugin-transform-react-jsx": "^7.17.3",

diff --git a/config/jest/package.json b/config/jest/package.json
@@ -21,7 +21,7 @@
     "directory": "config/jest"
   },
   "dependencies": {
-    "@babel/core": "7.24.4",
+    "@babel/core": "7.24.6",
     "@swc/core": "1.4.11",
     "@swc/jest": "0.2.36",
     "@types/jest": "29.5.12",

diff --git a/config/storybook/CHANGELOG.md b/config/storybook/CHANGELOG.md
@@ -1,5 +1,23 @@
 # @marigold/storybook-config
 
+## 1.1.43
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @marigold/components@7.8.2
+  - @marigold/theme-b2b@27.1.11
+  - @marigold/theme-core@26.1.11
+
+## 1.1.42
+
+### Patch Changes
+
+- Updated dependencies [[`bc08a48`](https://github.com/marigold-ui/marigold/commit/bc08a48087c31b501b5e4aeb9a992cb97ad9e21d), [`290dc0e`](https://github.com/marigold-ui/marigold/commit/290dc0e8b5b5fc1492d391d8e6156bd849f0b37d)]:
+  - @marigold/theme-core@26.1.10
+  - @marigold/components@7.8.1
+  - @marigold/theme-b2b@27.1.10
+
 ## 1.1.41
 
 ### Patch Changes

diff --git a/config/storybook/package.json b/config/storybook/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@marigold/storybook-config",
   "description": "Marigold's storybook configuration",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "license": "MIT",
   "exports": "./main.js",
   "keywords": [
@@ -28,7 +28,7 @@
     "@storybook/source-loader": "^8.0.6",
     "@storybook/test": "^8.0.6",
     "@types/react": "18.3.3",
-    "@vitejs/plugin-react": "4.2.1",
+    "@vitejs/plugin-react": "4.3.0",
     "vite-tsconfig-paths": "4.3.2"
   },
   "devDependencies": {
@@ -46,10 +46,10 @@
     "storybook": "^8.0.6",
     "tailwindcss": "3.4.1",
     "typescript": "5.3.3",
-    "vite": "5.2.7"
+    "vite": "5.2.12"
   },
   "peerDependencies": {
-    "@storybook/react": "8.0.x",
+    "@storybook/react": "8.0.x || 8.1.x",
     "react": "18.x",
     "react-dom": "18.x",
     "typescript": "5.3.x"

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,35 @@
 # @marigold/docs
 
+## 7.8.2
+
+### Patch Changes
+
+- [#3934](https://github.com/marigold-ui/marigold/pull/3934) [`de73b5a`](https://github.com/marigold-ui/marigold/commit/de73b5af0f1108e1fbe33feaa62a52348f942e1c) Thanks [@sebald](https://github.com/sebald)! - refa: don't use tailwinds color import
+
+- Updated dependencies [[`de73b5a`](https://github.com/marigold-ui/marigold/commit/de73b5af0f1108e1fbe33feaa62a52348f942e1c)]:
+  - @marigold/theme-docs@2.0.1
+  - @marigold/components@7.8.2
+  - @marigold/icons@1.2.51
+  - @marigold/theme-preset@1.3.16
+  - @marigold/theme-b2b@27.1.11
+  - @marigold/theme-core@26.1.11
+
+## 7.8.1
+
+### Patch Changes
+
+- [#3933](https://github.com/marigold-ui/marigold/pull/3933) [`bc08a48`](https://github.com/marigold-ui/marigold/commit/bc08a48087c31b501b5e4aeb9a992cb97ad9e21d) Thanks [@sebald](https://github.com/sebald)! - feat: new package `@marigold/theme-docs`
+
+- [#3924](https://github.com/marigold-ui/marigold/pull/3924) [`290dc0e`](https://github.com/marigold-ui/marigold/commit/290dc0e8b5b5fc1492d391d8e6156bd849f0b37d) Thanks [@sebald](https://github.com/sebald)! - fix: inconsistent naming of `SelectList`
+
+- Updated dependencies [[`bc08a48`](https://github.com/marigold-ui/marigold/commit/bc08a48087c31b501b5e4aeb9a992cb97ad9e21d), [`290dc0e`](https://github.com/marigold-ui/marigold/commit/290dc0e8b5b5fc1492d391d8e6156bd849f0b37d)]:
+  - @marigold/theme-core@26.1.10
+  - @marigold/theme-docs@2.0.0
+  - @marigold/components@7.8.1
+  - @marigold/theme-b2b@27.1.10
+  - @marigold/icons@1.2.50
+  - @marigold/theme-preset@1.3.15
+
 ## 7.8.0
 
 ### Minor Changes

diff --git a/docs/app/[...slug]/page.tsx b/docs/app/[...slug]/page.tsx
@@ -26,6 +26,7 @@ export async function generateMetadata({
   return page
     ? {
         title: page.title,
+        description: page.caption,
       }
     : {};
 }

diff --git a/docs/app/globals.css b/docs/app/globals.css
@@ -17,6 +17,8 @@
 
   --page-main-padding: 5rem;
   --page-main-padding-xl: 5.5rem;
+
+  --pre-padding-x: 1rem;
 }
 
 @tailwind base;

diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -1,5 +1,3 @@
-'use-client';
-
 import { siteConfig } from '@/lib/config';
 import { b2bTheme, coreTheme, theme } from '@/theme';
 import { MarigoldProvider } from '@/ui';

diff --git a/docs/content/components/collection/accordion/accordion.mdx b/docs/content/components/collection/accordion/accordion.mdx
@@ -10,7 +10,7 @@ You can also switch the `selectionMode` for `<Accordion>` by passing its propert
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { Accordion } from '@marigold/components';
 ```
 

diff --git a/docs/content/components/content/body/body.mdx b/docs/content/components/content/body/body.mdx
@@ -11,7 +11,7 @@ You can set `variant` and `size` props to style your `<Body>` element.
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { Body } from '@marigold/components';
 ```
 

diff --git a/docs/content/components/content/svg/svg.mdx b/docs/content/components/content/svg/svg.mdx
@@ -9,7 +9,7 @@ You can use all known properties from the regular `<svg>` element.
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { SVG } from '@marigold/system';
 ```
 

diff --git a/docs/content/components/content/xloader/xloader.mdx b/docs/content/components/content/xloader/xloader.mdx
@@ -10,7 +10,7 @@ You can use all regular attributes of the `<SVG>`.
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { XLoader } from '@marigold/components';
 ```
 

diff --git a/docs/content/components/form/calendar/calendar.mdx b/docs/content/components/form/calendar/calendar.mdx
@@ -9,7 +9,7 @@ A `<Calendar>` consists of a grouping element containing one or more date grids
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { Calendar } from '@marigold/components';
 ```
 

diff --git a/docs/content/components/form/checkbox/checkbox.mdx b/docs/content/components/form/checkbox/checkbox.mdx
@@ -11,7 +11,7 @@ You don't have to click on the `<Checkbox>` itself, you can also just click on t
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { Checkbox, CheckboxGroup } from '@marigold/components';
 ```
 

diff --git a/docs/content/components/form/fieldgroup/field-group.mdx b/docs/content/components/form/fieldgroup/field-group.mdx
@@ -11,7 +11,7 @@ The `<FieldGroup>` is a component to layout the label and the fieldbase itself.
 
 ### Import
 
-```tsx onlyCode
+```tsx
 import { FieldGroup } from '@marigold/components';
 ```
 

diff --git a/docs/content/components/form/radio/radio.mdx b/docs/content/components/form/radio/radio.mdx
@@ -9,7 +9,7 @@ The `<Radio>` should never be used alone, there should always be at least two `<
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { Radio } from '@marigold/components';
 ```
 

diff --git a/docs/content/components/form/search-field/search-field.mdx b/docs/content/components/form/search-field/search-field.mdx
@@ -9,7 +9,7 @@ The `<SearchField>` component is a versatile UI element that enables users to se
 
 ## Import
 
-```tsx onlyCode
+```tsx
 import { SearchField } from '@marigold/components';
 ```
 

diff --git a/docs/content/concepts/icons.mdx b/docs/content/concepts/icons.mdx
@@ -83,6 +83,7 @@ or click on an Icon in the list to copy them as `<svg>` Element.
   icons={[
     'Cancel',
     'Crop',
+    'Download',
     'Edit',
     'ExportFile',
     'FormatBold',

diff --git a/docs/content/introduction/get-in-touch.mdx b/docs/content/introduction/get-in-touch.mdx
@@ -33,9 +33,11 @@ Examples of this type of request include seeking a review of your implementation
 
 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
+## Feature or Design 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.
+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). Design requests, such as improvements or issues with the current design, can also be submitted through the support portal.
+
+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
 

diff --git a/docs/contentlayer.config.ts b/docs/contentlayer.config.ts
@@ -1,4 +1,4 @@
-import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+import { defineDocumentType, makeSource } from 'contentlayer2/source-files';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypePrettyCode, { LineElement } from 'rehype-pretty-code';
 import rehypeSlug from 'rehype-slug';
@@ -71,29 +71,6 @@ export const ContentPage = defineDocumentType(() => ({
         return path.length < 3 ? null : path.at(1);
       },
     },
-
-    /**
-     * flattened Path:
-     *
-     * - pages/concepts/layouts
-     * - components/button/button
-     * - hooks/useTheme/useTheme
-     *
-     * [ 'components', 'footer', 'footer' ] footer footer
-     */
-
-    // section: {
-    //   type: 'string',
-    //   resolve: doc => doc._raw.sourceFileDir.split('/').at(-1),
-    // },
-    // slug: {
-    //   type: 'string',
-    //   resolve: doc => doc._raw.flattenedPath.replace('pages', ''),
-    // },
-    // slugAsParams: {
-    //   type: 'string',
-    //   resolve: doc => doc._raw.flattenedPath.split('/').slice(1).join('/'),
-    // },
   },
 }));
 
@@ -107,24 +84,29 @@ export default makeSource({
   mdx: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [
+      // Code Highliting and Demos
+      // ---------------
       [rehypeComponentDemo, { contentDirPath }],
-      rehypeSlug,
-      // to inject the source code and other stuff inside `pre` element props
-      // needed to copy code
+      /**
+       * Store the raw code text inside the properties of <pre> elements,
+       * so we can later retrieve it and use it for the copy code feature.
+       *
+       * Note that these <pre> elements will be transformed to <figure> elements by
+       * `rehype-pretty-code`.
+       */
       () => tree => {
         visit(tree, node => {
           if (node?.type === 'element' && node?.tagName === 'pre') {
-            const [codeEl] = node.children;
-            if (codeEl.tagName !== 'code') return;
-            node.raw = codeEl.children?.[0].value;
+            const [child] = node.children;
+            if (child.tagName !== 'code') return;
+            node.properties.raw = child.children?.[0].value;
           }
         });
       },
       [
         rehypePrettyCode,
         {
           theme: 'material-theme-palenight',
-          keepBackground: false,
           onVisitLine(node: LineElement) {
             if (node.children.length === 0) {
               node.children = [{ type: 'text', value: ' ' }];
@@ -133,47 +115,25 @@ export default makeSource({
           onVisitHighlightedLine(node: LineElement) {
             node.properties.className = [
               ...(node.properties.className || []),
-              'bg-gray-700 px-2 py-0.5 rounded-sm',
+              'bg-code-800',
+              'px-[--pre-padding-x] -mx-[--pre-padding-x]',
             ];
           },
           onVisitHighlightedChars(node: LineElement) {
-            node.properties.className = ['bg-gray-700 px-2 py-0.5 rounded-sm'];
+            node.properties.className = [
+              'bg-transparent *:underline *:decoration-2 *:underline-offset-2 *:font-bold',
+            ];
           },
         },
       ],
-      // needed to copy code
-      () => tree => {
-        visit(tree, node => {
-          if (node?.type === 'element' && node?.tagName === 'div') {
-            if (!('data-rehype-pretty-code-fragment' in node.properties)) {
-              return;
-            }
-            for (const child of node.children) {
-              if (child.tagName === 'pre') {
-                child.properties['raw'] = node.raw;
-              }
-            }
-          }
-        });
-      },
+
+      // Headings and TOC Plugins
+      // ---------------
+      rehypeSlug,
       [
         rehypeAutolinkHeadings,
         {
           behavior: 'wrap',
-          properties: {
-            class: [
-              'relative',
-              'no-underline',
-              'before:absolute',
-              'before:-left-6',
-              'before:inset-y-0',
-              'before:flex',
-              'before:items-center',
-              'before:text-secondary-400',
-              'before:text-2xl',
-              `hover:before:content-['#']`,
-            ].join(' '),
-          },
         },
       ],
       [rehypeTableOfContents, { selector: '#toc' }],