[UIK-5669][accordion] rebranding

playground/components/ControlPanel.tsx

@@ -44,7 +44,7 @@ function GroupControl({ groupName, controls, groupPropName, onControlChange, isO
       <Accordion.Item value={0}>
         <Accordion.Item.Toggle className={styles.fullWidthItem}>
           <Accordion.Item.ToggleButton>
-            <Accordion.Item.Chevron mr={2} color='var(--intergalactic-icon-secondary-neutral)' />
+            <Accordion.Item.Chevron color='var(--intergalactic-icon-secondary-neutral)' />
             <Text size={200} fontWeight={500}>
               {groupName}
             </Text>

semcore/accordion/src/Accordion.tsx

@@ -1,4 +1,4 @@
-import { Collapse as CollapseAnimate, Flex } from '@semcore/base-components';
+import { Collapse as CollapseAnimate, Flex, Box } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
@@ -70,8 +70,10 @@ class RootAccordion extends Component<
   }
 
   render() {
-    const { Children } = this.asProps;
-    return <Children />;
+    const SAccordion = Root;
+    const { styles } = this.asProps;
+
+    return sstyled(styles)(<SAccordion render={Flex} />);
   }
 }
 export class RootItem extends Component<
@@ -131,8 +133,10 @@ export class RootItem extends Component<
   }
 
   render() {
-    const { Children } = this.asProps;
-    return <Children />;
+    const SAccordionItem = Root;
+    const { styles } = this.asProps;
+
+    return sstyled(styles)(<SAccordionItem render={Box} />);
   }
 }
 
@@ -198,17 +202,23 @@ function Collapse(
     'Collapse'
   >,
 ) {
-  const { selected } = props;
+  const SItemCollapse = Root;
+  const SItemCollapseContainer = Box;
+  const { selected, styles, Children } = props;
   const visible = selected;
 
-  return (
-    <Root
+  return sstyled(styles)(
+    <SItemCollapse
       render={CollapseAnimate}
       visible={visible}
       interactive
       inert={!visible ? '' : undefined}
       aria-hidden={!visible}
-    />
+    >
+      <SItemCollapseContainer>
+        <Children />
+      </SItemCollapseContainer>
+    </SItemCollapse>,
   );
 }
 

semcore/accordion/src/style/accordion.shadow.css

@@ -1,41 +1,122 @@
+SAccordion {
+  flex-direction: column;
+  gap: var(--intergalactic-spacing-content-gap-xsmall);
+}
+
 SItemToggle {
   display: flex;
   align-items: center;
   position: relative;
   cursor: pointer;
-}
-
-SItemToggle[use][use] {
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   font-weight: var(--intergalactic-regular, 400);
-}
-SItemToggle[use][use='primary'] {
-  background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
-  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-3x, 12px);
-  margin-bottom: var(--intergalactic-spacing-05x, 2px);
-}
-SItemToggle[use][use='primary']:hover {
-  background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180));
-}
 
-SItemToggle[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.4);
-  cursor: default;
+  &[use='primary'] {
+    background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
+    border-radius: var(--intergalactic-surface-rounded, 8px);
+    padding: var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-large, 16px)
+      var(--intergalactic-spacing-content-padding-small, 8px)
+      var(--intergalactic-spacing-content-padding-xlarge, 20px);
+
+    &:has(SItemChevron[selected]) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:hover {
+      background-color: var(--intergalactic-bg-secondary-neutral-hover, oklch(0.97 0.001 180));
+    }
+
+    SItemChevron {
+      position: absolute;
+      top: 50%;
+      right: var(--intergalactic-spacing-content-padding-large, 16px);
+      flex-shrink: 0;
+      transform: translateY(-50%) rotate(0deg);
+
+      &[selected] {
+        transform: translateY(-50%) rotate(90deg);
+      }
+    }
+  }
+
+  &[use='secondary'] {
+    padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-xxsmall, 2px);
+
+    SItemChevron {
+      margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
+    }
+  }
+
+  &[disabled] {
+    opacity: var(--intergalactic-disabled-opacity, 0.4);
+    cursor: default;
+  }
 }
 
 SItemChevron {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
   transform: rotate(0deg);
-  transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
-  fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
+  transition: transform calc(var(--intergalactic-duration-fast, 200) * 1ms) var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+  fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
   &[selected] {
     transform: rotate(90deg);
   }
 }
 
+SAccordionItem {
+  &[use='primary'] {
+    position: relative;
+    overflow: clip;
+    border-radius: var(--intergalactic-surface-rounded, 8px);
+    background-color: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 2px;
+      z-index: 1;
+      opacity: 0;
+      background-color: var(--intergalactic-border-accent, oklch(0.23 0.01 140));
+      transition-property: opacity;
+      transition-timing-function: var(--intergalactic-easings-fast, cubic-bezier(0.5, 0, 0, 1.12));
+    }
+
+    &[selected] {
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &[duration] {
+      &::before {
+        transition-duration: calc(var(--duration) * 1ms);
+      }
+    }
+  }
+}
+
+
+SItemCollapse {
+  &[visible] {
+    border-left: 2px solid var(--intergalactic-border-accent, oklch(0.23 0.01 140));
+  }
+}
+
+SItemCollapseContainer {
+  padding: var(--intergalactic-spacing-content-padding-medium) var(--intergalactic-spacing-content-padding-xlarge);
+}
+
 @media (prefers-reduced-motion) {
   SItemChevron {
     transition: none;
   }
+
+  SItemToggle[use='primary']::before {
+    transition: none;
+  }
 }

stories/components/accordion/docs/Accordion.stories.tsx

@@ -3,10 +3,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { BasicUsageTest } from './__tests__/basic-usage.test';
 import BasicExample, { defaultProps as BasicExampleProps } from './examples/basic_usage';
-import CustomStylesExample from './examples/custom_styles';
 import HeadingTagExample from './examples/heading_tag';
-import NonCompactExample from './examples/non_compact';
 import OneSectionOpeningExample from './examples/one_section_opening';
+import PrimaryAccordionExample from './examples/primary_accordion';
 import SeoExample from './examples/seo';
 import { playWrapper } from '../../../utils/playWrapper';
 
@@ -46,16 +45,13 @@ export const Basic: StoryObj<typeof BasicExampleProps> = {
   play: playWrapper(BasicUsageTest),
 };
 
-export const CustomStyles: Story = {
-  render: CustomStylesExample,
-};
-
 export const HeadingTag: Story = {
   render: HeadingTagExample,
 };
 
-export const NonCompact: Story = {
-  render: NonCompactExample,
+export const PrimaryAccordion: Story = {
+  name: 'Primary accordion',
+  render: PrimaryAccordionExample,
 };
 
 export const OneSectionOpening: Story = {

stories/components/accordion/docs/examples/basic_usage.tsx

@@ -1,6 +1,5 @@
 import Accordion from '@semcore/ui/accordion';
 import type { NSAccordion } from '@semcore/ui/accordion';
-import { Box } from '@semcore/ui/base-components';
 import type { NSBox } from '@semcore/ui/base-components';
 import React from 'react';
 
@@ -13,16 +12,16 @@ const Demo = (props: ExampleAccordionProps) => {
     <Accordion value={value} onChange={(value: any) => onChange(value)} duration={props.duration} use={props.use}>
       {[...new Array(3)].map((_, index) => (
         <Accordion.Item value={index} key={index} disabled={index === 2}>
-          <Accordion.Item.Toggle pb={2} w={props.w} h={props.h}>
+          <Accordion.Item.Toggle w={props.w} h={props.h}>
             <Accordion.Item.ToggleButton>
-              <Accordion.Item.Chevron mr={2} />
+              <Accordion.Item.Chevron />
               Section
               {' '}
               {index + 1}
             </Accordion.Item.ToggleButton>
           </Accordion.Item.Toggle>
           <Accordion.Item.Collapse overflowHidden={props.overflowHidden} defaultHeight={props.defaultHeight}>
-            <Box pt={3} px={6} pb={6}>{`This is section ${index + 1}`}</Box>
+            This is section {index + 1}
           </Accordion.Item.Collapse>
         </Accordion.Item>
       ))}

stories/components/accordion/docs/examples/heading_tag.tsx

@@ -1,5 +1,4 @@
 import Accordion from '@semcore/ui/accordion';
-import { Box } from '@semcore/ui/base-components';
 import React from 'react';
 
 const Demo = () => {
@@ -8,16 +7,16 @@ const Demo = () => {
     <Accordion value={value} onChange={onChange}>
       {[...new Array(3)].map((_, index) => (
         <Accordion.Item value={index} key={index} disabled={index === 2}>
-          <Accordion.Item.Toggle pb={2} tag='h2'>
+          <Accordion.Item.Toggle tag='h2'>
             <Accordion.Item.ToggleButton>
-              <Accordion.Item.Chevron mr={2} />
+              <Accordion.Item.Chevron />
               Section
               {' '}
               {index + 1}
             </Accordion.Item.ToggleButton>
           </Accordion.Item.Toggle>
           <Accordion.Item.Collapse>
-            <Box pt={3} px={6} pb={6}>{`This is section ${index + 1}`}</Box>
+            This is section {index + 1}
           </Accordion.Item.Collapse>
         </Accordion.Item>
       ))}

stories/components/accordion/docs/examples/one_section_opening.tsx

@@ -1,5 +1,4 @@
 import Accordion from '@semcore/ui/accordion';
-import { Box } from '@semcore/ui/base-components';
 import React from 'react';
 
 const Demo = () => {
@@ -8,16 +7,16 @@ const Demo = () => {
     <Accordion value={value} onChange={onChange}>
       {[...new Array(3)].map((_, index) => (
         <Accordion.Item value={index} key={index} disabled={index === 2}>
-          <Accordion.Item.Toggle pb={2}>
+          <Accordion.Item.Toggle>
             <Accordion.Item.ToggleButton>
-              <Accordion.Item.Chevron mr={2} />
+              <Accordion.Item.Chevron />
               Section
               {' '}
               {index + 1}
             </Accordion.Item.ToggleButton>
           </Accordion.Item.Toggle>
           <Accordion.Item.Collapse>
-            <Box pt={3} px={6} pb={6}>{`This is section ${index + 1}`}</Box>
+            This is section {index + 1}
           </Accordion.Item.Collapse>
         </Accordion.Item>
       ))}