[86bye3tve][accordion] added use prop (#1474)

## Motivation and Context

For a long time our design has both compact and non compact accordions.
Alongside react component were not supporting non compact accordion
without hacks. This PR adds simple `compact` prop that is `true` by
default for backward capability.

## How has this been tested?

Manually and with VR.

## Screenshots (if appropriate):

<img width="748" alt="Screenshot 2024-06-27 at 17 43 14"
src="https://github.com/semrush/intergalactic/assets/31261408/96cb7a4e-71ad-4013-a053-721261f3cf5a">

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue).
- [x] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [ ] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [x] My code follows the code style of this project.
- [x] I have updated the documentation accordingly or it's not required.
- [x] Unit tests are not broken.
- [x] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [x] I have added new unit tests on added of fixed functionality.

---------

Co-authored-by: Julia Mnizhek <[email protected]>

semcore/accordion/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [5.37.0] - 2024-07-02
+
+### Added
+
+- `use` prop.
+
 ## [5.36.1] - 2024-06-26
 
 ### Changed

semcore/accordion/__tests__/accordion.browser-test.tsx

@@ -34,7 +34,7 @@ test.describe('Accordion', () => {
   });
 
   test('Handles with keyboard and custom trigger', async ({ page }) => {
-    const standPath = 'website/docs/components/accordion/examples/custom_trigger.tsx';
+    const standPath = 'website/docs/components/accordion/examples/non_compact.tsx';
     const htmlContent = await e2eStandToHtml(standPath, 'en');
 
     await page.setContent(htmlContent);

semcore/accordion/__tests__/index.test.tsx

@@ -63,6 +63,26 @@ describe('Accordion', () => {
     await expect(await snapshot(component)).toMatchImageSnapshot(task);
   });
 
+  test.concurrent('Should render primary use correctly', async ({ task }) => {
+    const component = (
+      <Accordion defaultValue={[0, 2]} use='primary'>
+        {Array(4)
+          .fill('')
+          .map((_, index) => (
+            <Accordion.Item value={index} disabled={index === 3} key={index}>
+              <Accordion.Item.Toggle keyboardFocused={index === 1}>
+                <Accordion.Item.Chevron />
+                Item {index}
+              </Accordion.Item.Toggle>
+              <Accordion.Item.Collapse>Content of item {index}</Accordion.Item.Collapse>
+            </Accordion.Item>
+          ))}
+      </Accordion>
+    );
+
+    await expect(await snapshot(component)).toMatchImageSnapshot(task);
+  });
+
   test.concurrent('Should support uncontrolled mode with single expandable item', () => {
     const spy = vi.fn();
     const { getByText } = render(

semcore/accordion/src/Accordion.jsx

@@ -16,6 +16,7 @@ class RootAccordion extends Component {
   static style = style;
   static defaultProps = {
     defaultValue: [],
+    use: 'secondary',
   };
   static enhance = [
     cssVariableEnhance({
@@ -46,13 +47,14 @@ class RootAccordion extends Component {
   };
 
   getItemProps({ value }) {
-    const { value: selectedValue, duration } = this.asProps;
+    const { value: selectedValue, duration, use } = this.asProps;
     const selected = Array.isArray(selectedValue)
       ? selectedValue.includes(value)
       : selectedValue === value;
     return {
       selected,
       duration,
+      use,
       $handleInteraction: this.handleToggleInteraction,
     };
   }
@@ -75,8 +77,9 @@ export class RootItem extends Component {
   };
 
   getToggleProps() {
-    const { value, uid, selected, disabled } = this.asProps;
+    const { value, uid, selected, disabled, use } = this.asProps;
     return {
+      use,
       disabled,
       onClick: disabled ? undefined : this.handleClick,
       id: `igc-${uid}-${value}-toggle`,
@@ -139,11 +142,12 @@ class Toggle extends Component {
   };
 
   render() {
-    const { styles, disabled } = this.asProps;
+    const { styles, disabled, use } = this.asProps;
     const SItemToggle = Root;
 
     return sstyled(styles)(
       <SItemToggle
+        use={use}
         ref={this.toggleRef}
         render={Text}
         onKeyDown={this.handleKeyDown}
@@ -161,7 +165,7 @@ function Chevron(props) {
 }
 
 function ToggleButton(props) {
-  const { styles, size } = props;
+  const { styles } = props;
 
   const SToggleButton = Root;
   return sstyled(styles)(<SToggleButton render={Flex} role={'button'} {...props} />);

semcore/accordion/src/index.d.ts

@@ -26,6 +26,12 @@ export type AccordionProps<T extends AccordionValue = AccordionValue> = FlexProp
   /** Animation duration of each Accordion.Item inside
    * @default 350 */
   duration?: number;
+
+  /**
+   * Changes the visual appearance of the component
+   * @default secondary
+   */
+  use?: 'primary' | 'secondary';
 };
 
 export interface IAccordionProps<T extends AccordionValue = AccordionValue>

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

@@ -15,6 +15,18 @@ SItemToggle[keyboardFocused]:not([tabIndex='-1'])::after {
   pointer-events: none;
   z-index: 3;
 }
+SItemToggle[use][use] {
+  color: var(--intergalactic-text-primary, #191b23);
+  font-weight: var(--intergalactic-regular, 400);
+}
+SItemToggle[use][use='primary'] {
+  background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
+  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, #e0e1e9);
+}
 
 SItemToggle[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);

website/docs/components/accordion/accordion-code.md

@@ -3,12 +3,14 @@ title: Accordion
 tabs: Design('accordion'), A11y('accordion-a11y'), API('accordion-api'), Example('accordion-code'), Changelog('accordion-changelog')
 ---
 
-## Basic usage
-
 ::: tip
 Don't specify `padding` and `margin` for `Accordion.Item.Collapse`, this will break the animation.
 :::
 
+## Basic usage
+
+By default, the accordion has the `secondary` theme (`use` property).
+
 ::: sandbox
 
 <script lang="tsx">
@@ -29,26 +31,28 @@ Don't specify `padding` and `margin` for `Accordion.Item.Collapse`, this will br
 
 :::
 
-## Custom trigger
+## Primary theme
 
-You can add your own styles to the trigger or change its `tag`.
+Pass `use='primary'` to enable the primary theme for the accordion.
 
 ::: sandbox
 
 <script lang="tsx">
-  export Demo from './examples/custom_trigger.tsx';
+  export Demo from './examples/non_compact.tsx';
 </script>
 
 :::
 
-## Selected element styles
+## Custom styles for selected toggle
+
+You can customize accordion styles if needed.
 
-To find out whether an element is selected or not, pass the function into the body of the element.
+For example, to find out whether an element is selected and to highlight it, pass the function into the body of the element.
 
 ::: sandbox
 
 <script lang="tsx">
-  export Demo from './examples/selected_element_styles.tsx';
+  export Demo from './examples/custom_styles.tsx';
 </script>
 
 :::

website/docs/components/accordion/accordion.md

@@ -32,38 +32,45 @@ Component consists of the following:
 - Collapsed areas with content (`Accordion.Item.Collapse`)
 - `Accordion.Item.Chevron`
 
-## Styles and sizes
+## Accordion types
 
-The `ChevronRight` icon could have M and L sizes and always has `margin-right: 8px` with all font sizes.
+Intergalactic Design System has two accordion types (`use` property in API):
+
+Table: Accordion types
+
+| Type       | Appearance example  | Description |
+| ------------------ | ------------------- | ----- |
+| `primary`    | ![](static/default-bg.png) | Main accent accordion. |
+| `secondary` | ![](static/default.png)    | Default non-accent accordion. |
+
+## Appearance
+
+The `ChevronRight` icon always has `margin-right: 8px` with all font sizes.
 
 ![](static/margins.png)
 
 You can set the width of the accordion that is appropriate for the context.
 
 ![](static/max-width.png)
 
-::: tip
-You can set different styles for the trigger and collapsed content than the default ones described below.
-:::
-
-## Trigger
+### Trigger styles
 
 You are free to set link or button of any size you need as the accordion trigger.
 
-Table: Trigger appearance
+Table: Accordion trigger styles
 
-| Trigger type       | Appearance example  | Default styles      |
+| Type       | Appearance example  | Default styles      |
 | ------------------ | ------------------- | ------------------- |
-| Trigger without background | ![](static/default.png)    | For the icon color use `--icon-primary-neutral` token; for the text `--text-primary` token.    |
-| Trigger with background    | ![](static/default-bg.png) | For the background and text color you can use any background color from the [semantic tokens list](/style/design-tokens/design-tokens#semantic_tokens) depending on the usage context. For the default background color use `--bg-secondary-neutral` token. |
+| `secondary` | ![](static/default.png)    | Icon uses the `--icon-primary-neutral` token for color; text uses the `--text-primary` token for color.    |
+| `primary`    | ![](static/default-bg.png) | The default background color uses `--bg-secondary-neutral` token. |
 
-## Collapsed content
+### Collapsed content styles
 
 You can use this component to hide almost any content. This can be a text content, an additional information (for example, in a table), or even an entire table with a chart.
 
 **Remember about visual hierarchy when designing the accordion**. If you use, the accordion, for example, in a table, then the title inside the accordion shouldn't be equal to or greater than the size of the main titles on the page.
 
-### Margins and paddings
+#### Margins and paddings
 
 ![](static/item-margins1.png)
 

website/docs/components/accordion/examples/non_compact.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Accordion from 'intergalactic/accordion';
+import { Text } from 'intergalactic/typography';
+import { Flex, Box } from 'intergalactic/flex-box';
+
+const Demo = () => {
+  return (
+    <Accordion use='primary'>
+      {[...new Array(3)].map((_, index) => (
+        <Accordion.Item value={index} key={index} disabled={index === 2}>
+          <Accordion.Item.Toggle pb={2}>
+            <Flex alignItems='center'>
+              <Accordion.Item.Chevron mr={2} />
+              <Text size={300} my={0}>{`Section ${index + 1}`}</Text>
+            </Flex>
+          </Accordion.Item.Toggle>
+          <Accordion.Item.Collapse>
+            <Box p='12px 24px 24px'>{`Hello Section ${index + 1}`}</Box>
+          </Accordion.Item.Collapse>
+        </Accordion.Item>
+      ))}
+    </Accordion>
+  );
+};
+
+export default Demo;

website/docs/style/design-tokens/design-tokens.json

@@ -134,15 +134,23 @@
     "rawValue": "{gray.50}",
     "computedValue": "#f4f5f9",
     "description": "Secondary background of the interface which contains the main data and information.",
-    "components": ["d3-chart", "drag-and-drop", "input", "notice", "textarea", "time-picker"]
+    "components": [
+      "accordion",
+      "d3-chart",
+      "drag-and-drop",
+      "input",
+      "notice",
+      "textarea",
+      "time-picker"
+    ]
   },
   {
     "name": "--intergalactic-bg-secondary-neutral-hover",
     "type": "color",
     "rawValue": "{gray.100}",
     "computedValue": "#e0e1e9",
     "description": "Hover state of the secondary background of the interface which contains the main data and information.",
-    "components": ["color-picker", "time-picker"]
+    "components": ["accordion", "color-picker", "time-picker"]
   },
   {
     "name": "--intergalactic-bg-secondary-neutral-active",
@@ -319,6 +327,7 @@
     "computedValue": "#191b23",
     "description": "Primary text.",
     "components": [
+      "accordion",
       "base-trigger",
       "breadcrumbs",
       "button",
@@ -2020,7 +2029,7 @@
     "rawValue": "400",
     "computedValue": "400",
     "description": "Regular font weight.",
-    "components": ["base-trigger", "date-picker", "slider"]
+    "components": ["accordion", "base-trigger", "date-picker", "slider"]
   },
   {
     "name": "--intergalactic-medium",
@@ -2208,6 +2217,7 @@
     "computedValue": "2px",
     "description": "2px",
     "components": [
+      "accordion",
       "base-trigger",
       "checkbox",
       "counter",
@@ -2269,6 +2279,7 @@
     "computedValue": "8px",
     "description": "8px",
     "components": [
+      "accordion",
       "base-trigger",
       "breadcrumbs",
       "button",
@@ -2314,6 +2325,7 @@
     "computedValue": "12px",
     "description": "12px",
     "components": [
+      "accordion",
       "base-trigger",
       "button",
       "carousel",