@snack-uikit/accordion 0.6.7-preview-7a18c2ee.0 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.7.0 (2024-04-23)
+
+
+### Features
+
+* **PDS-45:** add shape prop ([a7e1ec2](https://github.com/cloud-ru-tech/snack-uikit/commit/a7e1ec27ad3e679d493ba14bc6f2159c6a5e6b55))
+
+
+
+
+
 ## 0.6.6 (2024-03-26)
 
 ### Only dependencies have been changed

package/dist/components/CollapseBlockPrimary/CollapseBlockPrimary.d.ts

@@ -1,2 +1,2 @@
 import { CollapseBlockPrimaryProps } from '../../types';
-export declare function CollapseBlockPrimary({ id, header, children, actions, className, outline, ...rest }: CollapseBlockPrimaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockPrimary({ id, header, children, actions, className, outline, shape, ...rest }: CollapseBlockPrimaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CollapseBlockPrimary/CollapseBlockPrimary.js

@@ -16,7 +16,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CollapseBlockHeaderContainer, CollapseBlockPrivate } from '../../helperComponents';
 import styles from './styles.module.css';
 export function CollapseBlockPrimary(_a) {
-    var { id, header, children, actions, className, outline } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline"]);
+    var { id, header, children, actions, className, outline, shape = 'round' } = _a, rest = __rest(_a, ["id", "header", "children", "actions", "className", "outline", "shape"]);
     const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
-    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.containerBase, { [styles.container]: !outline, [styles.containerOutline]: outline }, className), header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleExpandedChange, actions: actions, children: header }), expanded: isExpanded }, extractSupportProps(rest), { children: children })));
+    return (_jsx(CollapseBlockPrivate, Object.assign({ className: cn(styles.containerBase, { [styles.container]: !outline, [styles.containerOutline]: outline }, className), shape: shape, header: _jsx(CollapseBlockHeaderContainer, { expanded: isExpanded, toggleExpanded: handleExpandedChange, actions: actions, children: header }), expanded: isExpanded }, extractSupportProps(rest), { children: children })));
 }

package/dist/components/CollapseBlockPrimary/styles.module.css

@@ -1,10 +1,18 @@
 .containerBase{
   max-width:100%;
-  background-color:var(--sys-neutral-background1-level, #fafafc);
+  background-color:var(--sys-neutral-background1-level, #fdfdff);
 }
 .containerBase:focus-within, .containerBase:hover{
   background-color:var(--sys-neutral-background2-level, #ffffff);
 }
+.containerBase[data-shape=round]{
+  border-radius:var(--radius-accordion-collapse-block-primary-round, 24px);
+  border-width:var(--border-width-accordion-collapse-block-primary, 1px);
+}
+.containerBase[data-shape=square]{
+  border-radius:var(--radius-accordion-collapse-block-primary-square, 4px);
+  border-width:var(--border-width-accordion-collapse-block-primary, 1px);
+}
 
 .container{
   padding-top:var(--space-accordion-collapse-block-primary-vertical-padding, 32px);
@@ -12,7 +20,7 @@
   padding-left:var(--space-accordion-collapse-block-primary-horizontal-padding, 32px);
   padding-right:var(--space-accordion-collapse-block-primary-horizontal-padding, 32px);
   gap:var(--space-accordion-collapse-block-primary-gap, 32px);
-  border-radius:var(--radius-accordion-collapse-block-primary, 24px);
+  border-width:var(--border-width-accordion-collapse-block-primary, 1px);
 }
 .container:focus-within, .container:hover{
   box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
@@ -24,7 +32,6 @@
   padding-left:var(--space-accordion-collapse-block-primary-horizontal-padding, 32px);
   padding-right:var(--space-accordion-collapse-block-primary-horizontal-padding, 32px);
   gap:var(--space-accordion-collapse-block-primary-gap, 32px);
-  border-radius:var(--radius-accordion-collapse-block-primary, 24px);
   border-width:var(--border-width-accordion-collapse-block-primary, 1px);
   border-width:0;
   outline-color:var(--sys-neutral-decor-default, #dfe2ec);

package/dist/helperComponents/CollapseBlockHeader/CollapseBlockHeader.js

@@ -5,5 +5,5 @@ import { Typography } from '@snack-uikit/typography';
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
 export function CollapseBlockHeader({ title, description, tip }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.headline, children: [_jsx(Typography.SansTitleM, { className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { text: title, maxLines: 1 }) }), tip && _jsx(QuestionTooltip, { size: 's', tip: tip, triggerDataTestId: TEST_IDS.tooltip })] }), description && (_jsx(Typography.SansBodyM, { className: styles.subtitle, "data-test-id": TEST_IDS.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.headline, children: [_jsx(Typography.SansTitleM, { className: styles.title, "data-test-id": TEST_IDS.title, children: _jsx(TruncateString, { text: title, maxLines: 1 }) }), tip && _jsx(QuestionTooltip, { size: 's', tip: tip, triggerDataTestId: TEST_IDS.tooltip, tabIndex: -1 })] }), description && (_jsx(Typography.SansBodyM, { className: styles.subtitle, "data-test-id": TEST_IDS.description, children: _jsx(TruncateString, { text: description, maxLines: 2 }) }))] }));
 }

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts

@@ -5,5 +5,6 @@ export type CollapseBlockPrivateProps = WithSupportProps<{
     header: ReactNode;
     expanded: boolean;
     className?: string;
+    shape?: 'round' | 'square';
 }>;
-export declare function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;
+export declare function CollapseBlockPrivate({ children, expanded, className, header, shape, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js

@@ -15,8 +15,8 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../testIds';
 import styles from './styles.module.css';
 export function CollapseBlockPrivate(_a) {
-    var { children, expanded, className, header } = _a, rest = __rest(_a, ["children", "expanded", "className", "header"]);
+    var { children, expanded, className, header, shape } = _a, rest = __rest(_a, ["children", "expanded", "className", "header", "shape"]);
     return (_jsxs("div", Object.assign({ className: cn(styles.accordion, className), 
         // eslint-disable-next-line jsx-a11y/aria-role
-        role: 'accordion', "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, "data-test-id": TEST_IDS.content, children: _jsx("div", { className: styles.content, "data-content": true, children: children }) })] })));
+        role: 'accordion', "data-shape": shape, "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, "data-test-id": TEST_IDS.content, children: _jsx("div", { className: styles.content, "data-content": true, children: children }) })] })));
 }

package/dist/types.d.ts

@@ -16,6 +16,8 @@ export type CollapseBlockSecondaryProps = WithSupportProps<{
 export type CollapseBlockPrimaryProps = CollapseBlockSecondaryProps & {
     /** Внешний бордер  */
     outline?: boolean;
+    /** Форма: круглая или квадратная */
+    shape?: 'round' | 'square';
 };
 export type CollapseBlockProps = CollapseBlockPrimaryProps | CollapseBlockSecondaryProps;
 export type AccordionProps = WithSupportProps<{

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Accordion",
-  "version": "0.6.7-preview-7a18c2ee.0",
+  "version": "0.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,14 +32,14 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.1-preview-7a18c2ee.0",
+    "@snack-uikit/button": "0.17.1",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/toggles": "0.9.8-preview-7a18c2ee.0",
-    "@snack-uikit/tooltip": "0.13.2-preview-7a18c2ee.0",
-    "@snack-uikit/truncate-string": "0.4.13-preview-7a18c2ee.0",
-    "@snack-uikit/typography": "0.6.2-preview-7a18c2ee.0",
-    "@snack-uikit/utils": "3.2.1-preview-7a18c2ee.0",
+    "@snack-uikit/toggles": "0.9.8",
+    "@snack-uikit/tooltip": "0.13.2",
+    "@snack-uikit/truncate-string": "0.4.13",
+    "@snack-uikit/typography": "0.6.2",
+    "@snack-uikit/utils": "3.3.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "03534bc6a25f8c31f99d28119c4f3a777a8ae7ac"
+  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
 }

package/src/components/CollapseBlockPrimary/CollapseBlockPrimary.tsx

@@ -14,6 +14,7 @@ export function CollapseBlockPrimary({
   actions,
   className,
   outline,
+  shape = 'round',
   ...rest
 }: CollapseBlockPrimaryProps) {
   const { isChecked: isExpanded, handleClick: handleExpandedChange } = useToggleGroup({ value: id });
@@ -25,6 +26,7 @@ export function CollapseBlockPrimary({
         { [styles.container]: !outline, [styles.containerOutline]: outline },
         className,
       )}
+      shape={shape}
       header={
         <CollapseBlockHeaderContainer expanded={isExpanded} toggleExpanded={handleExpandedChange} actions={actions}>
           {header}

package/src/components/CollapseBlockPrimary/styles.module.scss

@@ -8,6 +8,14 @@
   &:hover {
     background-color: $sys-neutral-background2-level;
   }
+
+  &[data-shape='round'] {
+    @include composite-var($collapse-block, 'container', 'shape-round');
+  }
+
+  &[data-shape='square'] {
+    @include composite-var($collapse-block, 'container', 'shape-square');
+  }
 }
 
 .container {
@@ -20,12 +28,13 @@
 }
 
 .containerOutline {
-  @include composite-var($collapse-block-container-primary-outline);
+  @include composite-var($collapse-block-container-primary);
 
   border-width: 0;
   outline-color: $sys-neutral-decor-default;
   outline-style: solid;
   outline-width: $border-width-accordion-collapse-block-primary;
+
   &:focus-within,
   &:hover {
     outline-color: $sys-neutral-decor-hovered;

package/src/helperComponents/CollapseBlockHeader/CollapseBlockHeader.tsx

@@ -22,7 +22,7 @@ export function CollapseBlockHeader({ title, description, tip }: CollapseBlockHe
           <TruncateString text={title} maxLines={1} />
         </Typography.SansTitleM>
 
-        {tip && <QuestionTooltip size='s' tip={tip} triggerDataTestId={TEST_IDS.tooltip} />}
+        {tip && <QuestionTooltip size='s' tip={tip} triggerDataTestId={TEST_IDS.tooltip} tabIndex={-1} />}
       </div>
 
       {description && (

package/src/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.tsx

@@ -11,14 +11,24 @@ export type CollapseBlockPrivateProps = WithSupportProps<{
   header: ReactNode;
   expanded: boolean;
   className?: string;
+  shape?: 'round' | 'square';
 }>;
 
-export function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps) {
+export function CollapseBlockPrivate({
+  children,
+  expanded,
+  className,
+  header,
+  shape,
+  ...rest
+}: CollapseBlockPrivateProps) {
   return (
     <div
       className={cn(styles.accordion, className)}
       // eslint-disable-next-line jsx-a11y/aria-role
       role='accordion'
+      data-shape={shape}
+      // data-outline={outline || undefined}
       aria-expanded={expanded}
       {...extractSupportProps(rest)}
     >

package/src/types.ts

@@ -20,6 +20,8 @@ export type CollapseBlockSecondaryProps = WithSupportProps<{
 export type CollapseBlockPrimaryProps = CollapseBlockSecondaryProps & {
   /** Внешний бордер  */
   outline?: boolean;
+  /** Форма: круглая или квадратная */
+  shape?: 'round' | 'square';
 };
 
 export type CollapseBlockProps = CollapseBlockPrimaryProps | CollapseBlockSecondaryProps;