Edit view styling

assets/js/src/core/components/accordion/accordion.stories.tsx

@@ -18,7 +18,7 @@ import React from 'react'
 import { Button } from '@Pimcore/components/button/button'
 
 const config: Meta = {
-  title: 'Components/Layout/Accordion',
+  title: 'Components/Layout/[Deprecated] Accordion',
   component: Accordion,
   parameters: {
     layout: 'fullscreen'

assets/js/src/core/components/accordion/accordion.styles.ts

@@ -18,9 +18,6 @@ export const useStyles = createStyles(({ token, css }) => {
     highlightBackgroundColor: '#F6FFED',
     highlightBorderColor: '#B7EB8F',
     highlightColor: '#52C41A',
-    signalBackgroundColor: '#E6F4FF',
-    signalBorderColor: '#91CAFF',
-    signalColor: '#1677FF',
     ...token
   }
 
@@ -43,8 +40,8 @@ export const useStyles = createStyles(({ token, css }) => {
 
         .ant-collapse-item.accordion__item--theme-success {
             border: 1px solid ${themeToken.highlightBorderColor};
-            border-radius: ${themeToken.borderRadiusLG}px !important;
             background-color: ${themeToken.highlightBackgroundColor};
+            border-radius: ${themeToken.borderRadiusLG}px !important;
 
             > .ant-collapse-content {
                 border-top: 1px solid ${themeToken.highlightBorderColor};

assets/js/src/core/components/card/card.styles.tsx

@@ -23,6 +23,7 @@ export const useStyles = createStyles(({ token, css }) => {
 
       &.ant-card:not(.ant-card-bordered) {
         box-shadow: none;
+        border: 1px solid transparent;
       }
 
       .ant-card-head-title {
@@ -73,6 +74,29 @@ export const useStyles = createStyles(({ token, css }) => {
           border: none;
         }
       }
+
+      &.card--theme-card-with-highlight {
+        .ant-card-head {
+          border-bottom: 1px solid ${token.colorPrimaryBorder};
+        }
+      }
+
+      &.card--theme-fieldset {
+        border-left: 3px solid #D5CFDA;
+        background: rgba(242, 240, 244, 0.52);
+
+        &, &.ant-card:not(.ant-card-bordered) {
+          border-left: 3px solid #D5CFDA;
+        }
+
+        .ant-card-head {
+          border-bottom: transparent;
+        }
+
+        .ant-card-body {
+          padding-top: ${token.paddingXXS}px;
+        }
+      }
     `
   }
 })

assets/js/src/core/components/card/card.tsx

@@ -27,16 +27,18 @@ export interface CardProps extends AntdCardProps {
   image?: { src: string, alt?: string } | null
   extra?: any[]
   footer?: React.ReactNode
+  theme?: 'default' | 'fieldset' | 'card-with-highlight'
 }
 
-const Component = ({ loading, children, footer, fitContent, className, ...props }: CardProps, ref: RefObject<HTMLElement | null>): React.JSX.Element => {
+const Component = ({ loading, children, footer, fitContent, className, theme = 'default', ...props }: CardProps, ref: RefObject<HTMLElement | null>): React.JSX.Element => {
   const { t } = useTranslation()
   const { styles } = useStyles()
   const classNames = [
     styles.card,
     className,
     footer !== undefined ? 'card-with-footer' : '',
-    fitContent === true ? 'card-fit-content' : ''
+    fitContent === true ? 'card-fit-content' : '',
+    `card--theme-${theme}`
   ].filter(Boolean)
 
   const renderExtraContent = (): React.ReactElement | null => {

assets/js/src/core/components/collapse/item/collapse-item.stories.tsx

@@ -0,0 +1,125 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { CollapseItem, type CollapseItemProps } from './collapse-item'
+import { Icon } from '@Pimcore/components/icon/icon'
+import { IconButton } from '@Pimcore/components/icon-button/icon-button'
+import { Flex } from '@Pimcore/components/flex/flex'
+import { Button } from '@Pimcore/components/button/button'
+
+const config: Meta = {
+  title: 'Components/Layout/Collapse/CollapseItem',
+  component: CollapseItem,
+  tags: ['autodocs']
+}
+
+export default config
+
+export const _default: StoryObj<CollapseItemProps> = {
+  args: {
+    label: <Flex
+      align='center'
+      gap={ 'extra-small' }
+           >
+      <Icon value='camera' />
+      <span>Label</span>
+    </Flex>,
+    children: 'Content'
+  }
+}
+
+export const SubLabel: StoryObj<CollapseItemProps> = {
+  args: {
+    ..._default.args,
+    subLabel: 'Some descriptive sub label'
+  }
+}
+
+export const Extra: StoryObj<CollapseItemProps> = {
+  args: {
+    ...SubLabel.args,
+    extra: <IconButton
+      icon={ { value: 'trash' } }
+      variant='minimal'
+           />
+  }
+}
+
+export const ExtraPosition: StoryObj<CollapseItemProps> = {
+  args: {
+    ..._default.args,
+    extra: <Button>New</Button>,
+    extraPosition: 'start'
+  }
+}
+
+export const Borderless: StoryObj<CollapseItemProps> = {
+  args: {
+    ...Extra.args,
+    bordered: false
+  }
+}
+
+export const ThemeSimple: StoryObj<CollapseItemProps> = {
+  args: {
+    ...Extra.args,
+    theme: 'simple'
+  }
+}
+
+export const ThemeSuccess: StoryObj<CollapseItemProps> = {
+  args: {
+    ...Extra.args,
+    theme: 'success'
+  }
+}
+
+export const ThemePrimary: StoryObj<CollapseItemProps> = {
+  args: {
+    ...Extra.args,
+    theme: 'primary'
+  }
+}
+
+export const ThemeCardWithHighlight: StoryObj<CollapseItemProps> = {
+  args: {
+    ..._default.args,
+    theme: 'card-with-highlight',
+    bordered: false
+  }
+}
+
+export const ThemeFieldset: StoryObj<CollapseItemProps> = {
+  args: {
+    ..._default.args,
+    theme: 'fieldset',
+    hasContentSeparator: false
+  }
+}
+
+export const Nested: StoryObj<CollapseItemProps> = {
+  args: {
+    ..._default.args,
+    children: (
+      <CollapseItem
+        hasContentSeparator={ false }
+        label='Nested item'
+        theme='fieldset'
+      >
+        Nested content
+      </CollapseItem>
+    )
+  }
+}

assets/js/src/core/components/collapse/item/collapse-item.styles.ts

@@ -0,0 +1,112 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { createStyles } from 'antd-style'
+
+export const useStyles = createStyles(({ css, token }) => {
+  const themeToken = {
+    highlightBackgroundColor: '#F6FFED',
+    highlightBorderColor: '#B7EB8F',
+    highlightColor: '#52C41A',
+    headerBgColor: 'rgba(0, 0, 0, 0.04)',
+    ...token
+  }
+
+  return {
+    'collapse-item': css`
+      &.ant-collapse {
+        background: transparent;
+        border: none;
+
+        .collapse-header__title-container {
+          flex-grow: 0;
+        }
+
+        .collapse-header__extra {
+          flex-grow: 1;
+        }
+
+        .ant-collapse-content {
+          border: none;
+          background-color: transparent;
+          padding: 0;
+        }
+
+        .ant-collapse-content>.ant-collapse-content-box {
+          padding: 0;
+        }
+
+        &.collapse-item--theme-card-with-highlight,
+        &.collapse-item--theme-default {
+          background-color: ${themeToken.colorBgContainer};
+
+          &.collapse-item--bordered {
+            border: 1px solid ${token.colorBorderSecondary};
+          }
+
+          &.collapse-item--separator .ant-collapse-content {
+            border-top: 1px solid ${themeToken.colorBorderSecondary};
+          }
+        }
+
+        &.collapse-item--theme-card-with-highlight {          
+          &.collapse-item--separator .ant-collapse-content {
+            border-top: 1px solid ${themeToken.colorPrimaryBorder};
+          }
+        }
+
+        &.collapse-item--theme-success {
+          background-color: ${themeToken.highlightBackgroundColor};
+
+          &.collapse-item--bordered {
+            border: 1px solid ${themeToken.highlightBorderColor};
+          }
+
+          &.collapse-item--separator .ant-collapse-content {
+            border-top: 1px solid ${themeToken.highlightBorderColor};
+          }
+        }
+
+        &.collapse-item--theme-primary {
+          background-color: ${themeToken.colorFillAlter};
+
+          &.collapse-item--bordered {
+            border: 1px solid ${themeToken.colorBorder};
+          }
+
+          &.collapse-item--separator .ant-collapse-content {
+            border-top: 1px solid ${themeToken.colorBorder};
+          }
+        }
+
+        &.collapse-item--theme-simple {
+          background-color: ${themeToken.headerBgColor};
+
+          &.collapse-item--bordered {
+            border: 1px solid ${themeToken.headerBgColor};
+          }
+
+          .ant-collapse-content {
+            background-color: white;
+          }
+        }
+
+        &.collapse-item--theme-fieldset {
+          // @todo check for tokens
+          background-color: rgba(242, 240, 244, 0.52);
+          border-left: 3px solid #D5CFDA;
+        }
+      }
+    `
+  }
+})